@redsift/design-system 7.2.0 → 7.3.0

package/index.js

@@ -1,4 +1,7 @@
-import React, { forwardRef, useRef, useState, useEffect, useContext, useReducer, useCallback, useMemo } from 'react';
+import { useLocalizedStringFormatter, I18nProvider, useNumberFormatter } from '@react-aria/i18n';
+export { I18nProvider, useCollator, useDateFormatter, useFilter, useListFormatter, useLocale, useLocalizedStringFormatter, useNumberFormatter } from '@react-aria/i18n';
+export { SSRProvider } from '@react-aria/ssr';
+import React, { useState, useEffect, forwardRef, useRef, useContext, useReducer, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import { mdiMenu, mdiMenuOpen, mdiChevronDown, mdiChevronRight, mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline, mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
 import styled, { css } from 'styled-components';
@@ -14,6 +17,14 @@ import { useFocusRing } from '@react-aria/focus';
 
 /** Get types of the values of a record. */
 
+/**
+ * Font.
+ */
+const FontFamily = {
+  raleway: 'raleway',
+  'source-code-pro': 'source-code-pro',
+  electrolize: 'electrolize'
+};
 /**
  * Color palette.
  */
@@ -34,10 +45,30 @@ const ProductColorPalette = {
   hardenize: 'hardenize',
   tools: 'tools'
 };
+const DataVizColorPalette = {
+  purple: 'purple',
+  blue: 'blue',
+  green: 'green',
+  red: 'red',
+  pink: 'pink',
+  cyan: 'cyan',
+  orange: 'orange',
+  yellow: 'yellow',
+  brown: 'brown',
+  grey: 'grey'
+};
+const NeutralColorPalette = {
+  black: 'black',
+  darkgrey: 'darkgrey',
+  midgrey: 'midgrey',
+  lightgrey: 'lightgrey',
+  xlightgrey: 'xlightgrey',
+  white: 'white'
+};
 
 /**
  * Do not edit directly
- * Generated on Wed, 14 Dec 2022 17:05:36 GMT
+ * Generated on Thu, 26 Jan 2023 14:28:56 GMT
  */
 
 const RedsiftColorDefaultPrimary = '#0079e1';
@@ -202,22 +233,27 @@ const RedsiftTypographyH2FontFamily = "'Raleway', sans-serif";
 const RedsiftTypographyH2FontSize = '24px';
 const RedsiftTypographyH2FontWeight = '600';
 const RedsiftTypographyH2LineHeight = '28px';
+const RedsiftTypographyH2TextTransform = 'unset';
 const RedsiftTypographyH3FontFamily = "'Raleway', sans-serif";
 const RedsiftTypographyH3FontSize = '20px';
 const RedsiftTypographyH3FontWeight = '500';
 const RedsiftTypographyH3LineHeight = '24px';
+const RedsiftTypographyH3TextTransform = 'unset';
 const RedsiftTypographyH4FontFamily = "'Raleway', sans-serif";
 const RedsiftTypographyH4FontSize = '18px';
 const RedsiftTypographyH4FontWeight = '500';
 const RedsiftTypographyH4LineHeight = '22px';
+const RedsiftTypographyH4TextTransform = 'unset';
 const RedsiftTypographySubtitleFontFamily = "'Raleway', sans-serif";
 const RedsiftTypographySubtitleFontSize = '15px';
 const RedsiftTypographySubtitleFontWeight = '700';
 const RedsiftTypographySubtitleLineHeight = '26px';
+const RedsiftTypographySubtitleTextTransform = 'unset';
 const RedsiftTypographyBodyFontFamily = "'Raleway', sans-serif";
 const RedsiftTypographyBodyFontSize = '15px';
 const RedsiftTypographyBodyFontWeight = '400';
 const RedsiftTypographyBodyLineHeight = '26px';
+const RedsiftTypographyBodyTextTransform = 'unset';
 const RedsiftTypographyLinkFontFamily = "'Raleway', sans-serif";
 const RedsiftTypographyLinkFontSize = '15px';
 const RedsiftTypographyLinkFontWeight = '400';
@@ -235,6 +271,7 @@ const RedsiftTypographyCaptionFontFamily = "'Raleway', sans-serif";
 const RedsiftTypographyCaptionFontSize = '13px';
 const RedsiftTypographyCaptionFontWeight = '400';
 const RedsiftTypographyCaptionLineHeight = '23px';
+const RedsiftTypographyCaptionTextTransform = 'unset';
 const RedsiftTypographyHelperFontFamily = "'Raleway', sans-serif";
 const RedsiftTypographyHelperFontSize = '12px';
 const RedsiftTypographyHelperFontWeight = '400';
@@ -243,6 +280,10 @@ const RedsiftTypographyBadgeFontFamily = "'Source Code Pro', sans-serif";
 const RedsiftTypographyBadgeFontSize = '12px';
 const RedsiftTypographyBadgeFontWeight = '500';
 const RedsiftTypographyBadgeLineHeight = '20px';
+const RedsiftTypographyPillFontFamily = "'Source Code Pro', sans-serif";
+const RedsiftTypographyPillFontSize = '15px';
+const RedsiftTypographyPillFontWeight = '500';
+const RedsiftTypographyPillLineHeight = '28px';
 const RedsiftTypographyChipFontFamily = "'Source Code Pro', sans-serif";
 const RedsiftTypographyChipFontSize = '13px';
 const RedsiftTypographyChipFontWeight = '400';
@@ -266,6 +307,44 @@ const warnIfNoAccessibleLabelFound = (props, additionalKeysToCheck) => {
   }
 };
 
+const useWindowSize = () => {
+  const [windowSize, setWindowSize] = useState({
+    width: undefined,
+    height: undefined,
+    size: undefined
+  });
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize(windowSize => {
+        if (window.innerWidth === windowSize.width && window.innerHeight === windowSize.height) {
+          return windowSize;
+        }
+        let size;
+        if (window.innerWidth <= 480) {
+          size = 'xs';
+        } else if (window.innerWidth <= 768) {
+          size = 'sm';
+        } else if (window.innerWidth <= 1024) {
+          size = 'md';
+        } else if (window.innerWidth <= 1200) {
+          size = 'lg';
+        } else {
+          size = 'xl';
+        }
+        return {
+          width: window.innerWidth,
+          height: window.innerHeight,
+          size
+        };
+      });
+    }
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return windowSize;
+};
+
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -357,6 +436,25 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
+var expand$1 = "Expand left side panel";
+var collapse$1 = "Collapse left side panel";
+var enUS$1 = {
+	expand: expand$1,
+	collapse: collapse$1
+};
+
+var expand = "Développer le panneau latéral gauche";
+var collapse = "Réduire le panneau latéral gauche";
+var frFR$1 = {
+	expand: expand,
+	collapse: collapse
+};
+
+var intlMessages$1 = {
+  'en-US': enUS$1,
+  'fr-FR': frFR$1
+};
+
 /**
  * Component variant.
  */
@@ -484,10 +582,10 @@ const StyledIcon = styled.span`
 }}
 `;
 
-const _excluded$m = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
-const COMPONENT_NAME$l = 'RedSiftIcon';
-const CLASSNAME$l = 'redsift-icon';
-const DEFAULT_PROPS$l = {
+const _excluded$t = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
+const COMPONENT_NAME$s = 'RedSiftIcon';
+const CLASSNAME$s = 'redsift-icon';
+const DEFAULT_PROPS$s = {
   size: IconSize.medium
 };
 
@@ -505,7 +603,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       svgProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$m);
+    forwardedProps = _objectWithoutProperties(props, _excluded$t);
   return /*#__PURE__*/React.createElement(StyledIcon, _extends({}, forwardedProps, {
     $color: color,
     $size: size,
@@ -527,9 +625,9 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
     fill: "currentColor"
   })), badge ? badge : null);
 });
-Icon.className = CLASSNAME$l;
-Icon.defaultProps = DEFAULT_PROPS$l;
-Icon.displayName = COMPONENT_NAME$l;
+Icon.className = CLASSNAME$s;
+Icon.defaultProps = DEFAULT_PROPS$s;
+Icon.displayName = COMPONENT_NAME$s;
 
 /**
  * Component variant.
@@ -669,10 +767,10 @@ const StyledButton = styled.button`
 }}
 `;
 
-const _excluded$l = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "leftIcon", "onPress", "rightIcon", "variant"];
-const COMPONENT_NAME$k = 'RedSiftButton';
-const CLASSNAME$k = 'redsift-button';
-const DEFAULT_PROPS$k = {
+const _excluded$s = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "leftIcon", "onPress", "rightIcon", "variant"];
+const COMPONENT_NAME$r = 'RedSiftButton';
+const CLASSNAME$r = 'redsift-button';
+const DEFAULT_PROPS$r = {
   color: ColorPalette.default,
   variant: ButtonVariant.primary
 };
@@ -705,7 +803,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       rightIcon,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$l);
+    forwardedProps = _objectWithoutProperties(props, _excluded$s);
   return /*#__PURE__*/React.createElement(StyledButton, _extends({}, forwardedProps, buttonProps, {
     $color: color,
     $fullWidth: fullWidth,
@@ -726,9 +824,9 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     className: "right"
   }) : null);
 });
-Button.className = CLASSNAME$k;
-Button.defaultProps = DEFAULT_PROPS$k;
-Button.displayName = COMPONENT_NAME$k;
+Button.className = CLASSNAME$r;
+Button.defaultProps = DEFAULT_PROPS$r;
+Button.displayName = COMPONENT_NAME$r;
 
 /**
  * Component style.
@@ -744,10 +842,10 @@ const StyledIconButton = styled(StyledButton)`
 }};
 `;
 
-const _excluded$k = ["className", "color", "disabled", "icon", "isActive", "isDisabled", "onPress", "variant"];
-const COMPONENT_NAME$j = 'RedSiftIconButton';
-const CLASSNAME$j = 'redsift-icon-button';
-const DEFAULT_PROPS$j = {
+const _excluded$r = ["className", "color", "disabled", "icon", "isActive", "isDisabled", "onPress", "variant"];
+const COMPONENT_NAME$q = 'RedSiftIconButton';
+const CLASSNAME$q = 'redsift-icon-button';
+const DEFAULT_PROPS$q = {
   color: ColorPalette.default,
   variant: IconButtonVariant.unstyled
 };
@@ -776,7 +874,7 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
       onPress,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$k);
+    forwardedProps = _objectWithoutProperties(props, _excluded$r);
   warnIfNoAccessibleLabelFound(props);
   return /*#__PURE__*/React.createElement(StyledIconButton, _extends({}, forwardedProps, buttonProps, {
     $color: isDisabled || disabled ? undefined : color,
@@ -792,9 +890,9 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
     color: isDisabled || disabled ? undefined : color
   }));
 });
-IconButton.className = CLASSNAME$j;
-IconButton.defaultProps = DEFAULT_PROPS$j;
-IconButton.displayName = COMPONENT_NAME$j;
+IconButton.className = CLASSNAME$q;
+IconButton.defaultProps = DEFAULT_PROPS$q;
+IconButton.displayName = COMPONENT_NAME$q;
 
 const AppContainerContext = /*#__PURE__*/React.createContext(null);
 
@@ -873,10 +971,10 @@ const StyledAppBar = styled.header`
   }
 `;
 
-const _excluded$j = ["children", "className", "collapseIconButtonProps", "collapseIconButtonRef", "expandIconButtonProps", "expandIconButtonRef", "fallbackTitle", "title"];
-const COMPONENT_NAME$i = 'RedSiftAppBar';
-const CLASSNAME$i = 'redsift-app-bar';
-const DEFAULT_PROPS$i = {};
+const _excluded$q = ["children", "className", "collapseIconButtonProps", "collapseIconButtonRef", "expandIconButtonProps", "expandIconButtonRef", "fallbackTitle", "title"];
+const COMPONENT_NAME$p = 'RedSiftAppBar';
+const CLASSNAME$p = 'redsift-app-bar';
+const DEFAULT_PROPS$p = {};
 
 /**
  * The AppBar component.
@@ -892,11 +990,12 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       fallbackTitle,
       title: propsTitle
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$q);
   const {
     isLoaded
   } = useIsLoaded();
   const appContainerState = useContext(AppContainerContext);
+  const stringFormatter = useLocalizedStringFormatter(intlMessages$1);
   return /*#__PURE__*/React.createElement(StyledAppBar, _extends({}, forwardedProps, {
     $isLoaded: isLoaded,
     $isSidePanelCollapsed: appContainerState ? appContainerState.isSidePanelCollapsed : true,
@@ -907,7 +1006,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
   }, appContainerState ? /*#__PURE__*/React.createElement(React.Fragment, null, appContainerState.isSidePanelCollapsed ? /*#__PURE__*/React.createElement(IconButton, _extends({
     className: `${AppBar.className}-left__expand-button`
   }, expandIconButtonProps, {
-    "aria-label": "Expand left side panel",
+    "aria-label": stringFormatter.format('expand'),
     icon: mdiMenu,
     onPress: appContainerState.expandSidePanel,
     ref: collapseIconButtonRef,
@@ -915,7 +1014,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
   })) : /*#__PURE__*/React.createElement(IconButton, _extends({
     className: `${AppBar.className}-left__collapse-button`
   }, collapseIconButtonProps, {
-    "aria-label": "Collapse left side panel",
+    "aria-label": stringFormatter.format('collapse'),
     icon: mdiMenuOpen,
     onPress: appContainerState.collapseSidePanel,
     ref: expandIconButtonRef,
@@ -924,9 +1023,9 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${AppBar.className}__right`
   }, children));
 });
-AppBar.className = CLASSNAME$i;
-AppBar.defaultProps = DEFAULT_PROPS$i;
-AppBar.displayName = COMPONENT_NAME$i;
+AppBar.className = CLASSNAME$p;
+AppBar.defaultProps = DEFAULT_PROPS$p;
+AppBar.displayName = COMPONENT_NAME$p;
 
 /**
  * Component style.
@@ -988,10 +1087,10 @@ const StyledAppSidePanel = styled.div`
   }
 `;
 
-const _excluded$i = ["children", "className", "featuredElements", "isCollapsed", "logo"];
-const COMPONENT_NAME$h = 'RedSiftAppSidePanel';
-const CLASSNAME$h = 'redsift-app-side-panel';
-const DEFAULT_PROPS$h = {};
+const _excluded$p = ["children", "className", "featuredElements", "isCollapsed", "logo"];
+const COMPONENT_NAME$o = 'RedSiftAppSidePanel';
+const CLASSNAME$o = 'redsift-app-side-panel';
+const DEFAULT_PROPS$o = {};
 
 /**
  * The AppSidePanel component.
@@ -1004,7 +1103,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsed = false,
       logo
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$p);
   const appContainerState = useContext(AppContainerContext);
   return /*#__PURE__*/React.createElement(StyledAppSidePanel, _extends({}, forwardedProps, {
     $isCollapsed: !!(isCollapsed || appContainerState !== null && appContainerState !== void 0 && appContainerState.isSidePanelCollapsed),
@@ -1019,9 +1118,9 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${AppSidePanel.className}__featured`
   }, featuredElements) : null, children);
 });
-AppSidePanel.className = CLASSNAME$h;
-AppSidePanel.defaultProps = DEFAULT_PROPS$h;
-AppSidePanel.displayName = COMPONENT_NAME$h;
+AppSidePanel.className = CLASSNAME$o;
+AppSidePanel.defaultProps = DEFAULT_PROPS$o;
+AppSidePanel.displayName = COMPONENT_NAME$o;
 
 /**
  * Context props.
@@ -1234,10 +1333,10 @@ const StyledBadge = styled.div`
 }}
 `;
 
-const _excluded$h = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
-const COMPONENT_NAME$g = 'RedSiftBadge';
-const CLASSNAME$g = 'redsift-badge';
-const DEFAULT_PROPS$g = {
+const _excluded$o = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
+const COMPONENT_NAME$n = 'RedSiftBadge';
+const CLASSNAME$n = 'redsift-badge';
+const DEFAULT_PROPS$n = {
   color: ColorPalette.question,
   variant: BadgeVariant.dot
 };
@@ -1254,7 +1353,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
       isReversed,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$o);
   return /*#__PURE__*/React.createElement(StyledBadge, _extends({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
@@ -1264,14 +1363,14 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), variant === BadgeVariant.standard ? children : null);
 });
-Badge.className = CLASSNAME$g;
-Badge.defaultProps = DEFAULT_PROPS$g;
-Badge.displayName = COMPONENT_NAME$g;
+Badge.className = CLASSNAME$n;
+Badge.defaultProps = DEFAULT_PROPS$n;
+Badge.displayName = COMPONENT_NAME$n;
 
-const _excluded$g = ["badge", "badgeProps", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "withoutIcons"];
-const COMPONENT_NAME$f = 'RedSiftSideNavigationMenuItem';
-const CLASSNAME$f = 'redsift-side-navigation-menu-item';
-const DEFAULT_PROPS$f = {};
+const _excluded$n = ["badge", "badgeProps", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "withoutIcons"];
+const COMPONENT_NAME$m = 'RedSiftSideNavigationMenuItem';
+const CLASSNAME$m = 'redsift-side-navigation-menu-item';
+const DEFAULT_PROPS$m = {};
 
 /**
  * The SideNavigationMenuItem component.
@@ -1295,7 +1394,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
       tabIndex,
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$g);
+    forwardedProps = _objectWithoutProperties(props, _excluded$n);
   warnIfNoAccessibleLabelFound(props, [children]);
   const appContainerState = useContext(AppContainerContext);
   useEffect(() => {
@@ -1357,9 +1456,9 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     color: "error"
   }, badgeProps), badge) : null);
 });
-SideNavigationMenuItem.className = CLASSNAME$f;
-SideNavigationMenuItem.defaultProps = DEFAULT_PROPS$f;
-SideNavigationMenuItem.displayName = COMPONENT_NAME$f;
+SideNavigationMenuItem.className = CLASSNAME$m;
+SideNavigationMenuItem.defaultProps = DEFAULT_PROPS$m;
+SideNavigationMenuItem.displayName = COMPONENT_NAME$m;
 
 /**
  * Component style.
@@ -1498,10 +1597,10 @@ const SideNavigationMenuReducer = (state, action) => {
   }
 };
 
-const _excluded$f = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "withoutIcons"];
-const COMPONENT_NAME$e = 'RedSiftSideNavigationMenu';
-const CLASSNAME$e = 'redsift-side-navigation-menu';
-const DEFAULT_PROPS$e = {};
+const _excluded$m = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "withoutIcons"];
+const COMPONENT_NAME$l = 'RedSiftSideNavigationMenu';
+const CLASSNAME$l = 'redsift-side-navigation-menu';
+const DEFAULT_PROPS$l = {};
 
 /**
  * The SideNavigationMenu component.
@@ -1524,7 +1623,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
       tabIndex,
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$m);
   warnIfNoAccessibleLabelFound(props);
   const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);
   const [isFirstChild, setIsFirstChild] = useState(false);
@@ -1798,9 +1897,9 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     role: "menu"
   }, menuItemListEventHandler), renderedMenuItems)));
 });
-SideNavigationMenu.className = CLASSNAME$e;
-SideNavigationMenu.defaultProps = DEFAULT_PROPS$e;
-SideNavigationMenu.displayName = COMPONENT_NAME$e;
+SideNavigationMenu.className = CLASSNAME$l;
+SideNavigationMenu.defaultProps = DEFAULT_PROPS$l;
+SideNavigationMenu.displayName = COMPONENT_NAME$l;
 
 /**
  * Component style.
@@ -1871,10 +1970,10 @@ const useBoundingClientRect = (ref, deps) => {
   return boundingRect;
 };
 
-const _excluded$e = ["aria-label", "aria-labelledby", "children", "className", "isDisabled", "menubarProps", "menubarRef", "withoutIcons"];
-const COMPONENT_NAME$d = 'RedSiftSideNavigationMenuBar';
-const CLASSNAME$d = 'redsift-side-navigation-menu-bar';
-const DEFAULT_PROPS$d = {};
+const _excluded$l = ["aria-label", "aria-labelledby", "children", "className", "isDisabled", "menubarProps", "menubarRef", "withoutIcons"];
+const COMPONENT_NAME$k = 'RedSiftSideNavigationMenuBar';
+const CLASSNAME$k = 'redsift-side-navigation-menu-bar';
+const DEFAULT_PROPS$k = {};
 
 /**
  * Hook to store the previous index for further use
@@ -1902,7 +2001,7 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
       menubarRef = useRef(),
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$l);
   warnIfNoAccessibleLabelFound(props);
   const {
     top
@@ -2049,11 +2148,11 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
     role: "menubar"
   }), navItems)));
 });
-SideNavigationMenuBar.className = CLASSNAME$d;
-SideNavigationMenuBar.defaultProps = DEFAULT_PROPS$d;
-SideNavigationMenuBar.displayName = COMPONENT_NAME$d;
+SideNavigationMenuBar.className = CLASSNAME$k;
+SideNavigationMenuBar.defaultProps = DEFAULT_PROPS$k;
+SideNavigationMenuBar.displayName = COMPONENT_NAME$k;
 
-const _excluded$d = ["title", "href", "ref"],
+const _excluded$k = ["title", "href", "ref"],
   _excluded2 = ["title", "children", "ref"],
   _excluded3 = ["title", "href", "ref"];
 const isMenu = item => {
@@ -2072,7 +2171,7 @@ const useSideNavigationMenuBar = _ref => {
           href,
           ref
         } = item,
-        rest = _objectWithoutProperties(item, _excluded$d);
+        rest = _objectWithoutProperties(item, _excluded$k);
       menuBarChildren.push( /*#__PURE__*/React.createElement(SideNavigationMenuItem, _extends({
         key: title,
         isCurrent: isActive ? isActive(href) : undefined
@@ -2141,6 +2240,10 @@ const StyledAppContent = styled.main`
   min-height: calc(100vh - 72px);
   padding: 16px 32px;
 
+  @media screen and (max-width: 768px) {
+    padding: 0px;
+  }
+
   ${_ref => {
   let {
     $isSidePanelCollapsed
@@ -2190,10 +2293,10 @@ const StyledAppContent = styled.main`
 }}
 `;
 
-const _excluded$c = ["children", "className", "productTheme"];
-const COMPONENT_NAME$c = 'RedSiftAppContent';
-const CLASSNAME$c = 'redsift-app-content';
-const DEFAULT_PROPS$c = {};
+const _excluded$j = ["children", "className", "productTheme"];
+const COMPONENT_NAME$j = 'RedSiftAppContent';
+const CLASSNAME$j = 'redsift-app-content';
+const DEFAULT_PROPS$j = {};
 
 /**
  * The AppContent component.
@@ -2204,7 +2307,7 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       productTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$j);
   const {
     isLoaded
   } = useIsLoaded();
@@ -2217,9 +2320,9 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-AppContent.className = CLASSNAME$c;
-AppContent.defaultProps = DEFAULT_PROPS$c;
-AppContent.displayName = COMPONENT_NAME$c;
+AppContent.className = CLASSNAME$j;
+AppContent.defaultProps = DEFAULT_PROPS$j;
+AppContent.displayName = COMPONENT_NAME$j;
 
 /**
  * Component style.
@@ -2252,10 +2355,10 @@ const StyledAppContainer = styled.div`
 }}
 `;
 
-const _excluded$b = ["children", "className", "productTheme"];
-const COMPONENT_NAME$b = 'RedSiftAppContainer';
-const CLASSNAME$b = 'redsift-app-container';
-const DEFAULT_PROPS$b = {};
+const _excluded$i = ["children", "className", "locale", "productTheme"];
+const COMPONENT_NAME$i = 'RedSiftAppContainer';
+const CLASSNAME$i = 'redsift-app-container';
+const DEFAULT_PROPS$i = {};
 
 /**
  * The AppContainer component.
@@ -2264,9 +2367,10 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
       className,
+      locale,
       productTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$i);
   const {
     hasAppBar,
     hasAppSidePanel,
@@ -2292,8 +2396,8 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
       hasAppContent
     };
   }, [children]);
-  if (!(hasAppBar && hasAppSidePanel && hasAppContent)) {
-    console.warn('The AppContainer should contain an AppSidePanel, an AppBar and an AppContent to work properly.');
+  if ((hasAppBar || hasAppSidePanel || hasAppContent) && !(hasAppBar && hasAppSidePanel && hasAppContent)) {
+    console.warn('Missing AppSidePanel, AppBar or AppContent inside AppContainer. These components are meant to work together.');
   }
   const [isSidePanelCollapsed, setIsSidePanelCollapsed] = useState(false);
   const [title, setTitle] = useState();
@@ -2319,11 +2423,13 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), /*#__PURE__*/React.createElement(AppContainerContext.Provider, {
     value: state
-  }, children));
+  }, /*#__PURE__*/React.createElement(I18nProvider, {
+    locale: locale
+  }, children)));
 });
-AppContainer.className = CLASSNAME$b;
-AppContainer.defaultProps = DEFAULT_PROPS$b;
-AppContainer.displayName = COMPONENT_NAME$b;
+AppContainer.className = CLASSNAME$i;
+AppContainer.defaultProps = DEFAULT_PROPS$i;
+AppContainer.displayName = COMPONENT_NAME$i;
 
 /**
  * Component style.
@@ -2368,10 +2474,10 @@ const StyledBreadcrumbItem = styled.a`
   }
 `;
 
-const _excluded$a = ["children", "className", "href", "isCurrent", "isDisabled"];
-const COMPONENT_NAME$a = 'RedSiftBreadcrumbItem';
-const CLASSNAME$a = 'redsift-breadcrumb-item';
-const DEFAULT_PROPS$a = {};
+const _excluded$h = ["children", "className", "href", "isCurrent", "isDisabled"];
+const COMPONENT_NAME$h = 'RedSiftBreadcrumbItem';
+const CLASSNAME$h = 'redsift-breadcrumb-item';
+const DEFAULT_PROPS$h = {};
 
 /**
  * The BreadcrumbItem components is a list of links to the parent pages of the current page in hierarchical order.
@@ -2384,7 +2490,7 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
       isCurrent,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$h);
   warnIfNoAccessibleLabelFound(props, [children]);
   return /*#__PURE__*/React.createElement(StyledBreadcrumbItem, _extends({
     role: "link",
@@ -2399,9 +2505,9 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-BreadcrumbItem.className = CLASSNAME$a;
-BreadcrumbItem.defaultProps = DEFAULT_PROPS$a;
-BreadcrumbItem.displayName = COMPONENT_NAME$a;
+BreadcrumbItem.className = CLASSNAME$h;
+BreadcrumbItem.defaultProps = DEFAULT_PROPS$h;
+BreadcrumbItem.displayName = COMPONENT_NAME$h;
 
 /**
  * Component style.
@@ -2433,10 +2539,10 @@ const StyledBreadcrumbs = styled.nav`
   }
 `;
 
-const _excluded$9 = ["children", "className", "isDisabled"];
-const COMPONENT_NAME$9 = 'RedSiftBreadcrumbs';
-const CLASSNAME$9 = 'redsift-breadcrumbs';
-const DEFAULT_PROPS$9 = {};
+const _excluded$g = ["children", "className", "isDisabled"];
+const COMPONENT_NAME$g = 'RedSiftBreadcrumbs';
+const CLASSNAME$g = 'redsift-breadcrumbs';
+const DEFAULT_PROPS$g = {};
 
 /**
  * The Breadcrumbs components is a list of links to the parent pages of the current page in hierarchical order.
@@ -2447,7 +2553,7 @@ const Breadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$9);
+    forwardedProps = _objectWithoutProperties(props, _excluded$g);
   warnIfNoAccessibleLabelFound(props);
   const childArray = [];
   React.Children.forEach(children, child => {
@@ -2475,14 +2581,14 @@ const Breadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), /*#__PURE__*/React.createElement("ol", null, breadcrumbItems));
 });
-Breadcrumbs.className = CLASSNAME$9;
-Breadcrumbs.defaultProps = DEFAULT_PROPS$9;
-Breadcrumbs.displayName = COMPONENT_NAME$9;
-
-const _excluded$8 = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "leftIcon", "rightIcon", "target", "variant"];
-const COMPONENT_NAME$8 = 'RedSiftButtonLink';
-const CLASSNAME$8 = 'redsift-button-link';
-const DEFAULT_PROPS$8 = {
+Breadcrumbs.className = CLASSNAME$g;
+Breadcrumbs.defaultProps = DEFAULT_PROPS$g;
+Breadcrumbs.displayName = COMPONENT_NAME$g;
+
+const _excluded$f = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "leftIcon", "rightIcon", "target", "variant"];
+const COMPONENT_NAME$f = 'RedSiftButtonLink';
+const CLASSNAME$f = 'redsift-button-link';
+const DEFAULT_PROPS$f = {
   color: ColorPalette.default,
   variant: ButtonVariant.primary
 };
@@ -2508,7 +2614,7 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
       target,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$8);
+    forwardedProps = _objectWithoutProperties(props, _excluded$f);
   return /*#__PURE__*/React.createElement(StyledButton, _extends({
     as: as || 'a',
     role: "link",
@@ -2532,9 +2638,9 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
     className: "right"
   }) : null);
 });
-ButtonLink.className = CLASSNAME$8;
-ButtonLink.defaultProps = DEFAULT_PROPS$8;
-ButtonLink.displayName = COMPONENT_NAME$8;
+ButtonLink.className = CLASSNAME$f;
+ButtonLink.defaultProps = DEFAULT_PROPS$f;
+ButtonLink.displayName = COMPONENT_NAME$f;
 
 /**
  * Context props.
@@ -2570,6 +2676,7 @@ const StyledCheckboxGroup = styled.div`
     div.redsift-checkbox-group-boxes {
       display: flex;
       flex-direction: row;
+      flex-wrap: wrap;
     }
   `;
 }}
@@ -2625,10 +2732,10 @@ const StyledCheckboxGroup = styled.div`
   }
 `;
 
-const _excluded$7 = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
-const COMPONENT_NAME$7 = 'RedSiftCheckboxGroup';
-const CLASSNAME$7 = 'redsift-checkbox-group';
-const DEFAULT_PROPS$7 = {
+const _excluded$e = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
+const COMPONENT_NAME$e = 'RedSiftCheckboxGroup';
+const CLASSNAME$e = 'redsift-checkbox-group';
+const DEFAULT_PROPS$e = {
   color: ColorPalette.default,
   orientation: CheckboxGroupOrientation.vertical
 };
@@ -2653,7 +2760,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
       possibleValues,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+    forwardedProps = _objectWithoutProperties(props, _excluded$e);
   const [selectedValues, setValue] = useState(value || defaultValues || []);
   useEffect(() => {
     if (value) {
@@ -2707,9 +2814,9 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${CheckboxGroup.className}-description`
   }, description));
 });
-CheckboxGroup.className = CLASSNAME$7;
-CheckboxGroup.defaultProps = DEFAULT_PROPS$7;
-CheckboxGroup.displayName = COMPONENT_NAME$7;
+CheckboxGroup.className = CLASSNAME$e;
+CheckboxGroup.defaultProps = DEFAULT_PROPS$e;
+CheckboxGroup.displayName = COMPONENT_NAME$e;
 
 /**
  * Component style.
@@ -2818,10 +2925,10 @@ const StyledCheckbox = styled.label`
 }}
 `;
 
-const _excluded$6 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isControlled", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
-const COMPONENT_NAME$6 = 'RedSiftCheckbox';
-const CLASSNAME$6 = 'redsift-checkbox';
-const DEFAULT_PROPS$6 = {};
+const _excluded$d = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isControlled", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const COMPONENT_NAME$d = 'RedSiftCheckbox';
+const CLASSNAME$d = 'redsift-checkbox';
+const DEFAULT_PROPS$d = {};
 
 /**
  * The Checkbox component.
@@ -2829,6 +2936,7 @@ const DEFAULT_PROPS$6 = {};
  * Can be used as controlled or uncontrolled.
  */
 const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
+  var _isDisabled, _isReadOnly, _ref;
   const groupState = useContext(CheckboxGroupContext);
   let {
       'aria-label': ariaLabel,
@@ -2850,16 +2958,16 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       onChange,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
   const {
     isFocusVisible,
     focusProps
   } = useFocusRing({
     autoFocus
   });
-  isDisabled = isDisabled || (groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled);
-  isReadOnly = isReadOnly || (groupState === null || groupState === void 0 ? void 0 : groupState.isReadOnly);
-  const [isSelected, setSelected] = useState(propsIsSelected || defaultSelected || (groupState === null || groupState === void 0 ? void 0 : groupState.value.includes(value)));
+  isDisabled = (_isDisabled = isDisabled) !== null && _isDisabled !== void 0 ? _isDisabled : groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled;
+  isReadOnly = (_isReadOnly = isReadOnly) !== null && _isReadOnly !== void 0 ? _isReadOnly : groupState === null || groupState === void 0 ? void 0 : groupState.isReadOnly;
+  const [isSelected, setSelected] = useState((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : groupState === null || groupState === void 0 ? void 0 : groupState.value.includes(value));
   useEffect(() => {
     if (groupState) {
       setSelected(groupState.value.includes(value));
@@ -2926,9 +3034,457 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     className: "label"
   }, children) : null);
 });
-Checkbox.className = CLASSNAME$6;
-Checkbox.defaultProps = DEFAULT_PROPS$6;
-Checkbox.displayName = COMPONENT_NAME$6;
+Checkbox.className = CLASSNAME$d;
+Checkbox.defaultProps = DEFAULT_PROPS$d;
+Checkbox.displayName = COMPONENT_NAME$d;
+
+const FlexboxAlignContent = {
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  center: 'center',
+  'space-between': 'space-between',
+  'space-around': 'space-around',
+  'space-evenly': 'space-evenly',
+  stretch: 'stretch',
+  start: 'start',
+  end: 'end',
+  baseline: 'baseline',
+  'first baseline': 'first baseline',
+  'last baseline': 'last baseline'
+};
+const FlexboxAlignItems = {
+  stretch: 'stretch',
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  center: 'center',
+  baseline: 'baseline',
+  'first baseline': 'first baseline',
+  'last baseline': 'last baseline',
+  start: 'start',
+  end: 'end',
+  'self-start': 'self-start',
+  'self-end': 'self-end'
+};
+const FlexboxAlignSelf = {
+  auto: 'auto',
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  center: 'center',
+  baseline: 'baseline',
+  stretch: 'stretch'
+};
+const FlexboxFlexDirection = {
+  row: 'row',
+  'row-reverse': 'row-reverse',
+  column: 'column',
+  'column-reverse': 'column-reverse'
+};
+const FlexboxFlexWrap = {
+  nowrap: 'nowrap',
+  wrap: 'wrap',
+  'wrap-reverse': 'wrap-reverse'
+};
+const FlexboxJustifyContent = {
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  center: 'center',
+  'space-between': 'space-between',
+  'space-around': 'space-around',
+  'space-evenly': 'space-evenly',
+  start: 'start',
+  end: 'end',
+  left: 'left',
+  right: 'right'
+};
+
+/**
+ * Component style.
+ */
+const StyledFlexbox = styled.div`
+  display: ${_ref => {
+  let {
+    $inline
+  } = _ref;
+  return $inline ? 'inline-flex' : 'flex';
+}};
+
+  ${_ref2 => {
+  let {
+    $alignContent,
+    $alignItems,
+    $alignSelf,
+    $flexBasis,
+    $flexDirection,
+    $flexGrow,
+    $flexShrink,
+    $flexWrap,
+    $gap,
+    $height,
+    $justifyContent,
+    $order,
+    $width
+  } = _ref2;
+  return css`
+      ${$alignContent ? `align-content: ${$alignContent};` : ''}
+      ${$alignItems ? `align-items: ${$alignItems};` : ''}
+      ${$alignSelf ? `align-self: ${$alignSelf};` : ''}
+      ${$flexBasis ? `flex-basis: ${$flexBasis};` : ''}
+      ${$flexDirection ? `flex-direction: ${$flexDirection};` : ''}
+      ${$flexGrow ? `flex-grow: ${$flexGrow};` : ''}
+      ${$flexShrink ? `flex-shrink: ${$flexShrink};` : ''}
+      ${$flexWrap ? `flex-wrap: ${$flexWrap};` : ''}
+      gap: ${$gap};
+      ${$height ? `height: ${$height};` : ''}
+      ${$justifyContent ? `justify-content: ${$justifyContent};` : ''}
+      ${$order ? `order: ${$order};` : ''}
+      ${$width ? `width: ${$width};` : ''}
+    `;
+}}
+`;
+
+const _excluded$c = ["children", "className", "alignContent", "alignItems", "alignSelf", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "gap", "height", "inline", "justifyContent", "order", "width"];
+const COMPONENT_NAME$c = 'RedSiftFlexbox';
+const CLASSNAME$c = 'redsift-flex-box';
+const DEFAULT_PROPS$c = {
+  gap: '16px'
+};
+
+/**
+ * The Flexbox component.
+ */
+const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      alignContent,
+      alignItems,
+      alignSelf,
+      flexBasis,
+      flexDirection,
+      flexGrow,
+      flexShrink,
+      flexWrap,
+      gap,
+      height,
+      inline,
+      justifyContent,
+      order,
+      width
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+  return /*#__PURE__*/React.createElement(StyledFlexbox, _extends({}, forwardedProps, {
+    className: classNames(Flexbox.className, className),
+    ref: ref,
+    $alignContent: alignContent,
+    $alignItems: alignItems,
+    $alignSelf: alignSelf,
+    $flexBasis: flexBasis,
+    $flexDirection: flexDirection,
+    $flexGrow: flexGrow,
+    $flexShrink: flexShrink,
+    $flexWrap: flexWrap,
+    $gap: gap,
+    $height: height,
+    $inline: inline,
+    $justifyContent: justifyContent,
+    $order: order,
+    $width: width
+  }), children);
+});
+Flexbox.className = CLASSNAME$c;
+Flexbox.defaultProps = DEFAULT_PROPS$c;
+Flexbox.displayName = COMPONENT_NAME$c;
+
+const GridAlignContent = {
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  stretch: 'stretch',
+  'space-around': 'space-around',
+  'space-between': 'space-between',
+  'space-evenly': 'space-evenly'
+};
+const GridAlignItems = {
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  stretch: 'stretch'
+};
+const GridJustifyContent = {
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  stretch: 'stretch',
+  'space-around': 'space-around',
+  'space-between': 'space-between',
+  'space-evenly': 'space-evenly'
+};
+const GridJustifyItems = {
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  stretch: 'stretch'
+};
+
+/**
+ * Component style.
+ */
+const StyledGrid = styled.div`
+  display: ${_ref => {
+  let {
+    $inline
+  } = _ref;
+  return $inline ? 'inline-grid' : 'grid';
+}};
+
+  ${_ref2 => {
+  let {
+    $alignContent,
+    $alignItems,
+    $gap,
+    $gridAutoColumns,
+    $gridAutoRows,
+    $gridTemplateAreas,
+    $gridTemplateColumns,
+    $gridTemplateRows,
+    $height,
+    $justifyContent,
+    $justifyItems,
+    $width
+  } = _ref2;
+  return css`
+      ${$alignContent ? `align-content: ${$alignContent};` : ''}
+      ${$alignItems ? `align-items: ${$alignItems};` : ''}
+      ${$gap ? `gap: ${$gap};` : ''}
+      ${$gridAutoColumns ? `grid-auto-columns: ${$gridAutoColumns};` : ''}
+      ${$gridAutoRows ? `grid-auto-rows: ${$gridAutoRows};` : ''}
+      ${$gridTemplateAreas ? `grid-template-areas: ${$gridTemplateAreas};` : ''}
+      ${$gridTemplateColumns ? `grid-template-columns: ${$gridTemplateColumns};` : ''}
+      ${$gridTemplateRows ? `grid-template-rows: ${$gridTemplateRows};` : ''}
+      ${$height ? `height: ${$height};` : ''}
+      ${$justifyContent ? `justify-content: ${$justifyContent};` : ''}
+      ${$justifyItems ? `justify-items: ${$justifyItems};` : ''}
+      ${$width ? `width: ${$width};` : ''}
+    `;
+}}
+`;
+
+const _excluded$b = ["alignContent", "alignItems", "children", "className", "gap", "gridAutoColumns", "gridAutoRows", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "height", "inline", "justifyContent", "justifyItems", "width"];
+const COMPONENT_NAME$b = 'RedSiftGrid';
+const CLASSNAME$b = 'redsift-grid';
+const DEFAULT_PROPS$b = {};
+
+/**
+ * The Grid component.
+ */
+const Grid = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      alignContent,
+      alignItems,
+      children,
+      className,
+      gap,
+      gridAutoColumns,
+      gridAutoRows,
+      gridTemplateAreas,
+      gridTemplateColumns,
+      gridTemplateRows,
+      height,
+      inline,
+      justifyContent,
+      justifyItems,
+      width
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+  return /*#__PURE__*/React.createElement(StyledGrid, _extends({}, forwardedProps, {
+    className: classNames(Grid.className, className),
+    ref: ref,
+    $alignContent: alignContent,
+    $alignItems: alignItems,
+    $gap: gap,
+    $gridAutoColumns: gridAutoColumns,
+    $gridAutoRows: gridAutoRows,
+    $gridTemplateAreas: gridTemplateAreas,
+    $gridTemplateColumns: gridTemplateColumns,
+    $gridTemplateRows: gridTemplateRows,
+    $height: height,
+    $inline: inline,
+    $justifyContent: justifyContent,
+    $justifyItems: justifyItems,
+    $width: width
+  }), children);
+});
+Grid.className = CLASSNAME$b;
+Grid.defaultProps = DEFAULT_PROPS$b;
+Grid.displayName = COMPONENT_NAME$b;
+
+const GridItemAlignSelf = {
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  stretch: 'stretch'
+};
+const GridItemJustifySelf = {
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  stretch: 'stretch'
+};
+
+/**
+ * Component style.
+ */
+const StyledGridItem = styled.div`
+  ${_ref => {
+  let {
+    $alignSelf,
+    $gridArea,
+    $gridColumn,
+    $gridRow,
+    $height,
+    $justifySelf,
+    $width
+  } = _ref;
+  return css`
+      ${$alignSelf ? `align-self: ${$alignSelf};` : ''}
+      ${$gridArea ? `grid-area: ${$gridArea};` : ''}
+      ${$gridColumn ? `grid-column: ${$gridColumn};` : ''}
+      ${$gridRow ? `grid-row: ${$gridRow};` : ''}
+      ${$height ? `height: ${$height};` : ''}
+      ${$justifySelf ? `justify-self: ${$justifySelf};` : ''}
+      ${$width ? `width: ${$width};` : ''}
+    `;
+}}
+`;
+
+const _excluded$a = ["alignSelf", "children", "className", "gridArea", "gridColumn", "gridRow", "height", "justifySelf", "width"];
+const COMPONENT_NAME$a = 'RedSiftGridItem';
+const CLASSNAME$a = 'redsift-grid-item';
+const DEFAULT_PROPS$a = {};
+
+/**
+ * The GridItem component.
+ */
+const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      alignSelf,
+      children,
+      className,
+      gridArea,
+      gridColumn,
+      gridRow,
+      height,
+      justifySelf,
+      width
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$a);
+  return /*#__PURE__*/React.createElement(StyledGridItem, _extends({}, forwardedProps, {
+    className: classNames(GridItem.className, className),
+    ref: ref,
+    $alignSelf: alignSelf,
+    $gridArea: gridArea,
+    $gridColumn: gridColumn,
+    $gridRow: gridRow,
+    $height: height,
+    $justifySelf: justifySelf,
+    $width: width
+  }), children);
+});
+GridItem.className = CLASSNAME$a;
+GridItem.defaultProps = DEFAULT_PROPS$a;
+GridItem.displayName = COMPONENT_NAME$a;
+
+/**
+ * Component variant.
+ */
+const HeadingVariant = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4'
+};
+
+/**
+ * Component style.
+ */
+const StyledHeading = styled.span`
+  ${_ref => {
+  let {
+    as
+  } = _ref;
+  return as === 'h1' ? css`
+          h1 {
+            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);
+            text-transform: var(--redsift-typography-h1-text-transform);
+          }
+        ` : as === 'h2' ? css`
+          h2 {
+            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);
+          }
+        ` : as === 'h3' ? css`
+          h3 {
+            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);
+          }
+        ` : css`
+          h4 {
+            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);
+          }
+        `;
+}}
+
+  ${_ref2 => {
+  let {
+    $noWrap
+  } = _ref2;
+  return $noWrap ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        ` : css`
+          word-break: break-word;
+        `;
+}}
+`;
+
+const _excluded$9 = ["as", "children", "className", "noWrap"];
+const COMPONENT_NAME$9 = 'RedSiftHeading';
+const CLASSNAME$9 = 'redsift-heading';
+const DEFAULT_PROPS$9 = {};
+
+/**
+ * The Heading component.
+ */
+const Heading = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      noWrap
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$9);
+  return /*#__PURE__*/React.createElement(StyledHeading, _extends({
+    as: as
+  }, forwardedProps, {
+    className: classNames(Heading.className, className),
+    ref: ref,
+    $noWrap: noWrap
+  }), children);
+});
+Heading.className = CLASSNAME$9;
+Heading.defaultProps = DEFAULT_PROPS$9;
+Heading.displayName = COMPONENT_NAME$9;
 
 /**
  * Component style.
@@ -2968,10 +3524,10 @@ const StyledLink = styled.a`
   }
 `;
 
-const _excluded$5 = ["children", "className", "href", "isDisabled"];
-const COMPONENT_NAME$5 = 'RedSiftLink';
-const CLASSNAME$5 = 'redsift-link';
-const DEFAULT_PROPS$5 = {};
+const _excluded$8 = ["children", "className", "href", "isDisabled"];
+const COMPONENT_NAME$8 = 'RedSiftLink';
+const CLASSNAME$8 = 'redsift-link';
+const DEFAULT_PROPS$8 = {};
 
 /**
  * The Link is a semantic link that looks like a link.
@@ -2988,7 +3544,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
       href,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$5);
+    forwardedProps = _objectWithoutProperties(props, _excluded$8);
   return /*#__PURE__*/React.createElement(StyledLink, _extends({
     "aria-disabled": isDisabled,
     role: "link",
@@ -3000,14 +3556,14 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-Link.className = CLASSNAME$5;
-Link.defaultProps = DEFAULT_PROPS$5;
-Link.displayName = COMPONENT_NAME$5;
+Link.className = CLASSNAME$8;
+Link.defaultProps = DEFAULT_PROPS$8;
+Link.displayName = COMPONENT_NAME$8;
 
-const _excluded$4 = ["children", "className", "disabled", "isDisabled", "onPress"];
-const COMPONENT_NAME$4 = 'RedSiftLinkButton';
-const CLASSNAME$4 = 'redsift-link-button';
-const DEFAULT_PROPS$4 = {};
+const _excluded$7 = ["children", "className", "disabled", "isDisabled", "onPress"];
+const COMPONENT_NAME$7 = 'RedSiftLinkButton';
+const CLASSNAME$7 = 'redsift-link-button';
+const DEFAULT_PROPS$7 = {};
 
 /**
  * The LinkButton is a semantic button that looks like a link.
@@ -3031,7 +3587,7 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onPress
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$4);
+    forwardedProps = _objectWithoutProperties(props, _excluded$7);
   return /*#__PURE__*/React.createElement(StyledLink, _extends({
     as: "button"
   }, forwardedProps, buttonProps, {
@@ -3044,9 +3600,269 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
     ref: buttonRef
   }), children);
 });
-LinkButton.className = CLASSNAME$4;
-LinkButton.defaultProps = DEFAULT_PROPS$4;
-LinkButton.displayName = COMPONENT_NAME$4;
+LinkButton.className = CLASSNAME$7;
+LinkButton.defaultProps = DEFAULT_PROPS$7;
+LinkButton.displayName = COMPONENT_NAME$7;
+
+/**
+ * Component variant.
+ */
+const TextVariant = {
+  body: 'body',
+  button: 'button',
+  caption: 'caption',
+  inherit: 'inherit',
+  subtitle1: 'subtitle1'
+};
+const TextComponent = {
+  p: 'p',
+  b: 'b',
+  i: 'i',
+  u: 'u',
+  abbr: 'abbr',
+  cite: 'cite',
+  del: 'del',
+  em: 'em',
+  ins: 'ins',
+  kbd: 'kbd',
+  mark: 'mark',
+  s: 's',
+  samp: 'samp',
+  sub: 'sub',
+  sup: 'sup'
+};
+
+/**
+ * Component style.
+ */
+const StyledText = styled.span`
+  ${_ref => {
+  let {
+    $color
+  } = _ref;
+  return $color && [...Object.keys(ColorPalette), ...Object.keys(ProductColorPalette)].indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-${$color}-primary);
+        ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-neutral-${$color});
+        ` : css`
+          color: ${$color || css`inherit`};
+        `;
+}}
+
+  ${_ref2 => {
+  let {
+    $fontFamily,
+    $fontSize,
+    $variant
+  } = _ref2;
+  return !$variant ? css`
+          ${$fontFamily ? css`
+                font-family: ${$fontFamily};
+              ` : ''}
+          ${$fontSize ? css`
+                font-size: ${$fontSize};
+              ` : ''}
+        ` : $variant === TextVariant.inherit ? css`
+          font-family: ${$fontFamily ? $fontFamily : css`inherit`};
+          font-size: ${$fontSize ? $fontSize : css`inherit`};
+          font-weight: inherit;
+          line-height: inherit;
+          text-transform: inherit;
+        ` : css`
+          font-family: ${$fontFamily ? $fontFamily : css`var(--redsift-typography-${$variant}-font-family)`};
+          font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant}-font-size)`};
+          font-weight: var(--redsift-typography-${$variant}-font-weight);
+          line-height: var(--redsift-typography-${$variant}-line-height);
+          text-transform: var(--redsift-typography-${$variant}-text-transform);
+        `;
+}}
+  
+  ${_ref3 => {
+  let {
+    $noWrap
+  } = _ref3;
+  return $noWrap ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        ` : css`
+          word-break: break-word;
+        `;
+}}
+`;
+
+/**
+ * Component style.
+ */
+const StyledNumber = styled(StyledText)`
+  font-family: var(--redsift-typography-font-family-source-code-pro);
+`;
+
+const _excluded$6 = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "value", "variant"];
+const COMPONENT_NAME$6 = 'RedSiftNumber';
+const CLASSNAME$6 = 'redsift-number';
+const DEFAULT_PROPS$6 = {
+  compactDisplay: 'short',
+  currencyDisplay: 'symbol',
+  currencySign: 'standard',
+  localeMatcher: 'best fit',
+  notation: 'standard',
+  signDisplay: 'auto',
+  type: 'decimal',
+  unitDisplay: 'short',
+  roundingMode: 'halfExpand',
+  roundingPriority: 'auto',
+  trailingZeroDisplay: 'auto',
+  minimumIntegerDigits: 1,
+  minimumFractionDigits: 0,
+  minimumSignificantDigits: 1,
+  maximumSignificantDigits: 21
+};
+
+/**
+ * The Number component.
+ */
+const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      className,
+      color,
+      compactDisplay,
+      currency,
+      currencyDisplay,
+      currencySign,
+      fontSize,
+      localeMatcher,
+      maximumFractionDigits,
+      maximumSignificantDigits,
+      minimumFractionDigits,
+      minimumIntegerDigits,
+      minimumSignificantDigits,
+      notation,
+      noWrap,
+      numberingSystem,
+      roundingIncrement,
+      roundingMode,
+      roundingPriority,
+      signDisplay,
+      trailingZeroDisplay,
+      type,
+      unit,
+      unitDisplay,
+      useGrouping,
+      value,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+  const formatter = useNumberFormatter({
+    compactDisplay,
+    currency,
+    currencyDisplay,
+    currencySign,
+    localeMatcher,
+    maximumFractionDigits,
+    maximumSignificantDigits,
+    minimumFractionDigits,
+    minimumIntegerDigits,
+    minimumSignificantDigits,
+    notation,
+    numberingSystem,
+    // @ts-ignore
+    roundingIncrement,
+    // @ts-ignore
+    roundingMode,
+    // @ts-ignore
+    roundingPriority,
+    signDisplay,
+    style: type,
+    // @ts-ignore
+    trailingZeroDisplay,
+    unit,
+    unitDisplay,
+    useGrouping
+  });
+  return /*#__PURE__*/React.createElement(StyledNumber, _extends({
+    as: as
+  }, forwardedProps, {
+    className: classNames(Number$1.className, className),
+    ref: ref,
+    $color: color,
+    $fontSize: fontSize,
+    $noWrap: noWrap,
+    $variant: variant
+  }), formatter.format(value));
+});
+Number$1.className = CLASSNAME$6;
+Number$1.defaultProps = DEFAULT_PROPS$6;
+Number$1.displayName = COMPONENT_NAME$6;
+
+/**
+ * Component style.
+ */
+const StyledPill = styled.div`
+  ${_ref => {
+  let {
+    $color
+  } = _ref;
+  return css`
+    ${$color === 'black' ? 'background-color: var(--redsift-color-neutral-black);' : $color === 'white' ? 'background-color: var(--redsift-color-neutral-white);' : $color === 'error' ? 'background-color: var(--redsift-data-viz-color-red-default);' : $color === 'warning' ? 'background-color: var(--redsift-data-viz-color-orange-default);' : $color === 'success' ? 'background-color: var(--redsift-data-viz-color-green-default);' : `background-color: var(--redsift-data-viz-color-${$color}-default);`}
+
+    &,
+    .redsift-icon {
+      color: var(
+        --redsift-color-neutral-${$color === 'black' ? 'white' : 'black'}
+      );
+    }
+  `;
+}}}
+
+  padding: 0 6.5px;
+  text-align: center;
+  width: fit-content;
+  word-break: ${_ref2 => {
+  let {
+    $autoBreak
+  } = _ref2;
+  return $autoBreak ? 'break-word' : 'normal';
+}};
+
+  &,
+  .redsift-icon {
+    font-family: var(--redsift-typography-pill-font-family);
+    font-size: var(--redsift-typography-pill-font-size);
+    font-weight: var(--redsift-typography-pill-font-weight);
+    line-height: var(--redsift-typography-pill-line-height);
+  }
+`;
+
+const _excluded$5 = ["autoBreak", "children", "className", "color"];
+const COMPONENT_NAME$5 = 'RedSiftPill';
+const CLASSNAME$5 = 'redsift-badge';
+const DEFAULT_PROPS$5 = {
+  color: DataVizColorPalette.blue
+};
+
+/**
+ * The Pill component.
+ */
+const Pill = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      autoBreak,
+      children,
+      className,
+      color
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$5);
+  return /*#__PURE__*/React.createElement(StyledPill, _extends({}, forwardedProps, {
+    $autoBreak: autoBreak,
+    $color: color,
+    className: classNames(Pill.className, className),
+    ref: ref
+  }), children);
+});
+Pill.className = CLASSNAME$5;
+Pill.defaultProps = DEFAULT_PROPS$5;
+Pill.displayName = COMPONENT_NAME$5;
 
 /**
  * Context props.
@@ -3082,6 +3898,7 @@ const StyledRadioGroup = styled.div`
     div.redsift-radio-group-boxes {
       display: flex;
       flex-direction: row;
+      flex-wrap: wrap;
     }
   `;
 }}
@@ -3137,10 +3954,10 @@ const StyledRadioGroup = styled.div`
   }
 `;
 
-const _excluded$3 = ["children", "className", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
-const COMPONENT_NAME$3 = 'RedSiftRadioGroup';
-const CLASSNAME$3 = 'redsift-radio-group';
-const DEFAULT_PROPS$3 = {
+const _excluded$4 = ["children", "className", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
+const COMPONENT_NAME$4 = 'RedSiftRadioGroup';
+const CLASSNAME$4 = 'redsift-radio-group';
+const DEFAULT_PROPS$4 = {
   color: ColorPalette.default,
   orientation: RadioGroupOrientation.vertical
 };
@@ -3165,7 +3982,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
       possibleValues,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$3);
+    forwardedProps = _objectWithoutProperties(props, _excluded$4);
   const [selectedValue, setValue] = useState(value || defaultValue || '');
   useEffect(() => {
     if (value) {
@@ -3207,9 +4024,9 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${RadioGroup.className}-description`
   }, description));
 });
-RadioGroup.className = CLASSNAME$3;
-RadioGroup.defaultProps = DEFAULT_PROPS$3;
-RadioGroup.displayName = COMPONENT_NAME$3;
+RadioGroup.className = CLASSNAME$4;
+RadioGroup.defaultProps = DEFAULT_PROPS$4;
+RadioGroup.displayName = COMPONENT_NAME$4;
 
 /**
  * Component style.
@@ -3318,10 +4135,10 @@ const StyledRadio = styled.label`
 }}
 `;
 
-const _excluded$2 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
-const COMPONENT_NAME$2 = 'RedSiftRadio';
-const CLASSNAME$2 = 'redsift-radio';
-const DEFAULT_PROPS$2 = {};
+const _excluded$3 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const COMPONENT_NAME$3 = 'RedSiftRadio';
+const CLASSNAME$3 = 'redsift-radio';
+const DEFAULT_PROPS$3 = {};
 
 /**
  * The Radio component.
@@ -3329,6 +4146,7 @@ const DEFAULT_PROPS$2 = {};
  * Can be used as controlled or uncontrolled.
  */
 const Radio = /*#__PURE__*/forwardRef((props, ref) => {
+  var _isDisabled, _isReadOnly, _ref;
   const groupState = useContext(RadioGroupContext);
   let {
       'aria-label': ariaLabel,
@@ -3348,19 +4166,19 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       onChange,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+    forwardedProps = _objectWithoutProperties(props, _excluded$3);
   const {
     isFocusVisible,
     focusProps
   } = useFocusRing({
     autoFocus
   });
-  isDisabled = isDisabled || (groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled);
-  isReadOnly = isReadOnly || (groupState === null || groupState === void 0 ? void 0 : groupState.isReadOnly);
-  const [isSelected, setSelected] = useState(propsIsSelected || defaultSelected || (groupState === null || groupState === void 0 ? void 0 : groupState.value.includes(value)));
+  isDisabled = (_isDisabled = isDisabled) !== null && _isDisabled !== void 0 ? _isDisabled : groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled;
+  isReadOnly = (_isReadOnly = isReadOnly) !== null && _isReadOnly !== void 0 ? _isReadOnly : groupState === null || groupState === void 0 ? void 0 : groupState.isReadOnly;
+  const [isSelected, setSelected] = useState((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : Boolean((groupState === null || groupState === void 0 ? void 0 : groupState.value) && groupState.value === value));
   useEffect(() => {
     if (groupState) {
-      setSelected(groupState.value.includes(value));
+      setSelected(groupState.value === value);
     }
   }, [groupState === null || groupState === void 0 ? void 0 : groupState.value]);
   warnIfNoAccessibleLabelFound(props, [children]);
@@ -3418,9 +4236,9 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
     className: "label"
   }, children) : null);
 });
-Radio.className = CLASSNAME$2;
-Radio.defaultProps = DEFAULT_PROPS$2;
-Radio.displayName = COMPONENT_NAME$2;
+Radio.className = CLASSNAME$3;
+Radio.defaultProps = DEFAULT_PROPS$3;
+Radio.displayName = COMPONENT_NAME$3;
 
 /**
  * Component variant.
@@ -3503,10 +4321,10 @@ const StyledShield = styled.div`
 }}
 `;
 
-const _excluded$1 = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "variant"];
-const COMPONENT_NAME$1 = 'RedSiftShield';
-const CLASSNAME$1 = 'redsift-shield';
-const DEFAULT_PROPS$1 = {
+const _excluded$2 = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "variant"];
+const COMPONENT_NAME$2 = 'RedSiftShield';
+const CLASSNAME$2 = 'redsift-shield';
+const DEFAULT_PROPS$2 = {
   variant: ShieldVariant.success
 };
 const getVariant = variant => {
@@ -3592,7 +4410,7 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
       isReversed,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
   const color = getVariant(variant).color;
   const icon = getVariant(variant).icon;
   return /*#__PURE__*/React.createElement(StyledShield, _extends({}, forwardedProps, {
@@ -3624,9 +4442,24 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
     className: "icon"
   })));
 });
-Shield.className = CLASSNAME$1;
-Shield.defaultProps = DEFAULT_PROPS$1;
-Shield.displayName = COMPONENT_NAME$1;
+Shield.className = CLASSNAME$2;
+Shield.defaultProps = DEFAULT_PROPS$2;
+Shield.displayName = COMPONENT_NAME$2;
+
+var loading$1 = "Loading...";
+var enUS = {
+	loading: loading$1
+};
+
+var loading = "Chargement...";
+var frFR = {
+	loading: loading
+};
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
 
 /**
  * Component size.
@@ -3662,7 +4495,7 @@ var spinnerTools = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My
 
 var spinnerWebsite = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzAwNzllMSIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiMwMDc5ZTEiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
-const _excluded = ["aria-hidden", "aria-label", "className", "color", "size"];
+const _excluded$1 = ["aria-hidden", "aria-label", "className", "color", "size"];
 const colorToFile = {
   default: spinnerDefault,
   hardenize: spinnerHardenize,
@@ -3674,9 +4507,9 @@ const colorToFile = {
   tools: spinnerTools,
   website: spinnerWebsite
 };
-const COMPONENT_NAME = 'RedSiftSpinner';
-const CLASSNAME = 'redsift-shield';
-const DEFAULT_PROPS = {
+const COMPONENT_NAME$1 = 'RedSiftSpinner';
+const CLASSNAME$1 = 'redsift-shield';
+const DEFAULT_PROPS$1 = {
   color: ColorPalette.default,
   size: SpinnerSize.medium
 };
@@ -3717,13 +4550,14 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
       color,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
   const {
     width,
     height
   } = sizeToDimension(size);
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
   return /*#__PURE__*/React.createElement(StyledSpinner, _extends({
-    alt: "Loading..."
+    alt: stringFormatter.format('loading')
   }, forwardedProps, {
     "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
     "aria-label": ariaLabel,
@@ -3736,9 +4570,47 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     $size: size
   }));
 });
-Spinner.className = CLASSNAME;
-Spinner.defaultProps = DEFAULT_PROPS;
-Spinner.displayName = COMPONENT_NAME;
+Spinner.className = CLASSNAME$1;
+Spinner.defaultProps = DEFAULT_PROPS$1;
+Spinner.displayName = COMPONENT_NAME$1;
+
+const _excluded = ["as", "children", "className", "color", "fontFamily", "fontSize", "noWrap", "variant"];
+const COMPONENT_NAME = 'RedSiftText';
+const CLASSNAME = 'redsift-text';
+const DEFAULT_PROPS = {
+  fontFamily: FontFamily.raleway
+};
+
+/**
+ * The Text component.
+ */
+const Text = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      color,
+      fontFamily,
+      fontSize,
+      noWrap,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(StyledText, _extends({
+    as: as
+  }, forwardedProps, {
+    className: classNames(Text.className, className),
+    ref: ref,
+    $color: color,
+    $fontFamily: fontFamily,
+    $fontSize: fontSize,
+    $noWrap: noWrap,
+    $variant: variant
+  }), children);
+});
+Text.className = CLASSNAME;
+Text.defaultProps = DEFAULT_PROPS;
+Text.displayName = COMPONENT_NAME;
 
-export { AppBar, AppContainer, AppContainerContext, AppContent, AppSidePanel, Badge, BadgeVariant, BreadcrumbItem, Breadcrumbs, Button, ButtonLink, ButtonVariant, Checkbox, CheckboxGroup, CheckboxGroupOrientation, ColorPalette, Icon, IconButton, IconButtonVariant, IconSize, Link, LinkButton, ProductColorPalette, Radio, RadioGroup, RadioGroupOrientation, RedsiftAppBarColorBackground, RedsiftAppBarColorExpandIconBackgroundHover, RedsiftAppBarColorExpandIconHover, RedsiftAppBarColorExpandIconResting, RedsiftAppBarColorText, RedsiftColorDefaultActive, RedsiftColorDefaultActiveHover, RedsiftColorDefaultHover, RedsiftColorDefaultPrimary, RedsiftColorDefaultPrimaryActive, RedsiftColorDefaultSecondary, RedsiftColorErrorActive, RedsiftColorErrorActiveHover, RedsiftColorErrorHover, RedsiftColorErrorPrimary, RedsiftColorErrorPrimaryActive, RedsiftColorErrorSecondary, RedsiftColorHardenizeActive, RedsiftColorHardenizeActiveHover, RedsiftColorHardenizeHover, RedsiftColorHardenizePrimary, RedsiftColorHardenizePrimaryActive, RedsiftColorHardenizeSecondary, RedsiftColorInfoActive, RedsiftColorInfoActiveHover, RedsiftColorInfoHover, RedsiftColorInfoPrimary, RedsiftColorInfoPrimaryActive, RedsiftColorInfoSecondary, RedsiftColorNeutralBlack, RedsiftColorNeutralDarkgrey, RedsiftColorNeutralLightgrey, RedsiftColorNeutralMidgrey, RedsiftColorNeutralWhite, RedsiftColorNeutralXlightgrey, RedsiftColorNoDataActive, RedsiftColorNoDataActiveHover, RedsiftColorNoDataHover, RedsiftColorNoDataPrimary, RedsiftColorNoDataSecondary, RedsiftColorOndmarcActive, RedsiftColorOndmarcActiveHover, RedsiftColorOndmarcHover, RedsiftColorOndmarcPrimary, RedsiftColorOndmarcPrimaryActive, RedsiftColorOndmarcSecondary, RedsiftColorOndomainActive, RedsiftColorOndomainActiveHover, RedsiftColorOndomainHover, RedsiftColorOndomainPrimary, RedsiftColorOndomainPrimaryActive, RedsiftColorOndomainSecondary, RedsiftColorOninboxActive, RedsiftColorOninboxActiveHover, RedsiftColorOninboxHover, RedsiftColorOninboxPrimary, RedsiftColorOninboxPrimaryActive, RedsiftColorOninboxSecondary, RedsiftColorQuestionActive, RedsiftColorQuestionActiveHover, RedsiftColorQuestionHover, RedsiftColorQuestionPrimary, RedsiftColorQuestionSecondary, RedsiftColorSuccessActive, RedsiftColorSuccessActiveHover, RedsiftColorSuccessHover, RedsiftColorSuccessPrimary, RedsiftColorSuccessPrimaryActive, RedsiftColorSuccessSecondary, RedsiftColorToolsActive, RedsiftColorToolsActiveHover, RedsiftColorToolsHover, RedsiftColorToolsPrimary, RedsiftColorToolsPrimaryActive, RedsiftColorToolsSecondary, RedsiftColorWarningActive, RedsiftColorWarningActiveHover, RedsiftColorWarningHover, RedsiftColorWarningPrimary, RedsiftColorWarningSecondary, RedsiftColorWebsiteActive, RedsiftColorWebsiteActiveHover, RedsiftColorWebsiteHover, RedsiftColorWebsitePrimary, RedsiftColorWebsitePrimaryActive, RedsiftColorWebsiteSecondary, RedsiftDataVizColorBlueDark, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorBlueDefault, RedsiftDataVizColorBlueLight, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorBrownDark, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorBrownLight, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorCyanDark, RedsiftDataVizColorCyanDarker, RedsiftDataVizColorCyanDefault, RedsiftDataVizColorCyanLight, RedsiftDataVizColorCyanLighter, RedsiftDataVizColorGreenDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorGreenLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorPinkDark, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorPinkLight, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorRedDark, RedsiftDataVizColorRedDarker, RedsiftDataVizColorRedDefault, RedsiftDataVizColorRedLight, RedsiftDataVizColorRedLighter, RedsiftDataVizColorYellowDark, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorYellowLight, RedsiftDataVizColorYellowLighter, RedsiftSideNavigationColorBackground, RedsiftSideNavigationColorMenuItemActive, RedsiftSideNavigationColorMenuItemBackgroundActive, RedsiftSideNavigationColorMenuItemBackgroundHover, RedsiftSideNavigationColorMenuItemBackgroundSecondary, RedsiftSideNavigationColorMenuItemTextDisabled, RedsiftSideNavigationColorMenuItemTextHover, RedsiftSideNavigationColorMenuItemTextResting, RedsiftSideNavigationColorScrollbarHover, RedsiftSideNavigationColorScrollbarResting, RedsiftTypographyBadgeFontFamily, RedsiftTypographyBadgeFontSize, RedsiftTypographyBadgeFontWeight, RedsiftTypographyBadgeLineHeight, RedsiftTypographyBodyFontFamily, RedsiftTypographyBodyFontSize, RedsiftTypographyBodyFontWeight, RedsiftTypographyBodyLineHeight, RedsiftTypographyButtonFontFamily, RedsiftTypographyButtonFontSize, RedsiftTypographyButtonFontWeight, RedsiftTypographyButtonLineHeight, RedsiftTypographyButtonTextTransform, RedsiftTypographyCaptionFontFamily, RedsiftTypographyCaptionFontSize, RedsiftTypographyCaptionFontWeight, RedsiftTypographyCaptionLineHeight, RedsiftTypographyChipFontFamily, RedsiftTypographyChipFontSize, RedsiftTypographyChipFontWeight, RedsiftTypographyChipLineHeight, RedsiftTypographyFontFamilyElectrolize, RedsiftTypographyFontFamilyRaleway, RedsiftTypographyFontFamilySourceCodePro, RedsiftTypographyFontWeightBold, RedsiftTypographyFontWeightMedium, RedsiftTypographyFontWeightRegular, RedsiftTypographyFontWeightSemiBold, RedsiftTypographyH1FontFamily, RedsiftTypographyH1FontSize, RedsiftTypographyH1FontWeight, RedsiftTypographyH1LineHeight, RedsiftTypographyH1TextTransform, RedsiftTypographyH2FontFamily, RedsiftTypographyH2FontSize, RedsiftTypographyH2FontWeight, RedsiftTypographyH2LineHeight, RedsiftTypographyH3FontFamily, RedsiftTypographyH3FontSize, RedsiftTypographyH3FontWeight, RedsiftTypographyH3LineHeight, RedsiftTypographyH4FontFamily, RedsiftTypographyH4FontSize, RedsiftTypographyH4FontWeight, RedsiftTypographyH4LineHeight, RedsiftTypographyHelperFontFamily, RedsiftTypographyHelperFontSize, RedsiftTypographyHelperFontWeight, RedsiftTypographyHelperLineHeight, RedsiftTypographyInputTextFontFamily, RedsiftTypographyInputTextFontSize, RedsiftTypographyInputTextFontWeight, RedsiftTypographyInputTextLineHeight, RedsiftTypographyLinkFontFamily, RedsiftTypographyLinkFontSize, RedsiftTypographyLinkFontWeight, RedsiftTypographyLinkLineHeight, RedsiftTypographySubtitleFontFamily, RedsiftTypographySubtitleFontSize, RedsiftTypographySubtitleFontWeight, RedsiftTypographySubtitleLineHeight, Shield, ShieldVariant, SideNavigationMenu, SideNavigationMenuBar, SideNavigationMenuItem, SideNavigationMenuReducerActionType, Spinner, SpinnerSize, StyledButton, StyledLink, useAppSidePanel, useSideNavigationMenuBar, warnIfNoAccessibleLabelFound };
+export { AppBar, AppContainer, AppContainerContext, AppContent, AppSidePanel, Badge, BadgeVariant, BreadcrumbItem, Breadcrumbs, Button, ButtonLink, ButtonVariant, Checkbox, CheckboxGroup, CheckboxGroupOrientation, ColorPalette, DataVizColorPalette, Flexbox, FlexboxAlignContent, FlexboxAlignItems, FlexboxAlignSelf, FlexboxFlexDirection, FlexboxFlexWrap, FlexboxJustifyContent, FontFamily, Grid, GridAlignContent, GridAlignItems, GridItem, GridItemAlignSelf, GridItemJustifySelf, GridJustifyContent, GridJustifyItems, Heading, HeadingVariant, Icon, IconButton, IconButtonVariant, IconSize, Link, LinkButton, NeutralColorPalette, Number$1 as Number, Pill, ProductColorPalette, Radio, RadioGroup, RadioGroupOrientation, RedsiftAppBarColorBackground, RedsiftAppBarColorExpandIconBackgroundHover, RedsiftAppBarColorExpandIconHover, RedsiftAppBarColorExpandIconResting, RedsiftAppBarColorText, RedsiftColorDefaultActive, RedsiftColorDefaultActiveHover, RedsiftColorDefaultHover, RedsiftColorDefaultPrimary, RedsiftColorDefaultPrimaryActive, RedsiftColorDefaultSecondary, RedsiftColorErrorActive, RedsiftColorErrorActiveHover, RedsiftColorErrorHover, RedsiftColorErrorPrimary, RedsiftColorErrorPrimaryActive, RedsiftColorErrorSecondary, RedsiftColorHardenizeActive, RedsiftColorHardenizeActiveHover, RedsiftColorHardenizeHover, RedsiftColorHardenizePrimary, RedsiftColorHardenizePrimaryActive, RedsiftColorHardenizeSecondary, RedsiftColorInfoActive, RedsiftColorInfoActiveHover, RedsiftColorInfoHover, RedsiftColorInfoPrimary, RedsiftColorInfoPrimaryActive, RedsiftColorInfoSecondary, RedsiftColorNeutralBlack, RedsiftColorNeutralDarkgrey, RedsiftColorNeutralLightgrey, RedsiftColorNeutralMidgrey, RedsiftColorNeutralWhite, RedsiftColorNeutralXlightgrey, RedsiftColorNoDataActive, RedsiftColorNoDataActiveHover, RedsiftColorNoDataHover, RedsiftColorNoDataPrimary, RedsiftColorNoDataSecondary, RedsiftColorOndmarcActive, RedsiftColorOndmarcActiveHover, RedsiftColorOndmarcHover, RedsiftColorOndmarcPrimary, RedsiftColorOndmarcPrimaryActive, RedsiftColorOndmarcSecondary, RedsiftColorOndomainActive, RedsiftColorOndomainActiveHover, RedsiftColorOndomainHover, RedsiftColorOndomainPrimary, RedsiftColorOndomainPrimaryActive, RedsiftColorOndomainSecondary, RedsiftColorOninboxActive, RedsiftColorOninboxActiveHover, RedsiftColorOninboxHover, RedsiftColorOninboxPrimary, RedsiftColorOninboxPrimaryActive, RedsiftColorOninboxSecondary, RedsiftColorQuestionActive, RedsiftColorQuestionActiveHover, RedsiftColorQuestionHover, RedsiftColorQuestionPrimary, RedsiftColorQuestionSecondary, RedsiftColorSuccessActive, RedsiftColorSuccessActiveHover, RedsiftColorSuccessHover, RedsiftColorSuccessPrimary, RedsiftColorSuccessPrimaryActive, RedsiftColorSuccessSecondary, RedsiftColorToolsActive, RedsiftColorToolsActiveHover, RedsiftColorToolsHover, RedsiftColorToolsPrimary, RedsiftColorToolsPrimaryActive, RedsiftColorToolsSecondary, RedsiftColorWarningActive, RedsiftColorWarningActiveHover, RedsiftColorWarningHover, RedsiftColorWarningPrimary, RedsiftColorWarningSecondary, RedsiftColorWebsiteActive, RedsiftColorWebsiteActiveHover, RedsiftColorWebsiteHover, RedsiftColorWebsitePrimary, RedsiftColorWebsitePrimaryActive, RedsiftColorWebsiteSecondary, RedsiftDataVizColorBlueDark, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorBlueDefault, RedsiftDataVizColorBlueLight, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorBrownDark, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorBrownLight, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorCyanDark, RedsiftDataVizColorCyanDarker, RedsiftDataVizColorCyanDefault, RedsiftDataVizColorCyanLight, RedsiftDataVizColorCyanLighter, RedsiftDataVizColorGreenDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorGreenLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorPinkDark, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorPinkLight, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorRedDark, RedsiftDataVizColorRedDarker, RedsiftDataVizColorRedDefault, RedsiftDataVizColorRedLight, RedsiftDataVizColorRedLighter, RedsiftDataVizColorYellowDark, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorYellowLight, RedsiftDataVizColorYellowLighter, RedsiftSideNavigationColorBackground, RedsiftSideNavigationColorMenuItemActive, RedsiftSideNavigationColorMenuItemBackgroundActive, RedsiftSideNavigationColorMenuItemBackgroundHover, RedsiftSideNavigationColorMenuItemBackgroundSecondary, RedsiftSideNavigationColorMenuItemTextDisabled, RedsiftSideNavigationColorMenuItemTextHover, RedsiftSideNavigationColorMenuItemTextResting, RedsiftSideNavigationColorScrollbarHover, RedsiftSideNavigationColorScrollbarResting, RedsiftTypographyBadgeFontFamily, RedsiftTypographyBadgeFontSize, RedsiftTypographyBadgeFontWeight, RedsiftTypographyBadgeLineHeight, RedsiftTypographyBodyFontFamily, RedsiftTypographyBodyFontSize, RedsiftTypographyBodyFontWeight, RedsiftTypographyBodyLineHeight, RedsiftTypographyBodyTextTransform, RedsiftTypographyButtonFontFamily, RedsiftTypographyButtonFontSize, RedsiftTypographyButtonFontWeight, RedsiftTypographyButtonLineHeight, RedsiftTypographyButtonTextTransform, RedsiftTypographyCaptionFontFamily, RedsiftTypographyCaptionFontSize, RedsiftTypographyCaptionFontWeight, RedsiftTypographyCaptionLineHeight, RedsiftTypographyCaptionTextTransform, RedsiftTypographyChipFontFamily, RedsiftTypographyChipFontSize, RedsiftTypographyChipFontWeight, RedsiftTypographyChipLineHeight, RedsiftTypographyFontFamilyElectrolize, RedsiftTypographyFontFamilyRaleway, RedsiftTypographyFontFamilySourceCodePro, RedsiftTypographyFontWeightBold, RedsiftTypographyFontWeightMedium, RedsiftTypographyFontWeightRegular, RedsiftTypographyFontWeightSemiBold, RedsiftTypographyH1FontFamily, RedsiftTypographyH1FontSize, RedsiftTypographyH1FontWeight, RedsiftTypographyH1LineHeight, RedsiftTypographyH1TextTransform, RedsiftTypographyH2FontFamily, RedsiftTypographyH2FontSize, RedsiftTypographyH2FontWeight, RedsiftTypographyH2LineHeight, RedsiftTypographyH2TextTransform, RedsiftTypographyH3FontFamily, RedsiftTypographyH3FontSize, RedsiftTypographyH3FontWeight, RedsiftTypographyH3LineHeight, RedsiftTypographyH3TextTransform, RedsiftTypographyH4FontFamily, RedsiftTypographyH4FontSize, RedsiftTypographyH4FontWeight, RedsiftTypographyH4LineHeight, RedsiftTypographyH4TextTransform, RedsiftTypographyHelperFontFamily, RedsiftTypographyHelperFontSize, RedsiftTypographyHelperFontWeight, RedsiftTypographyHelperLineHeight, RedsiftTypographyInputTextFontFamily, RedsiftTypographyInputTextFontSize, RedsiftTypographyInputTextFontWeight, RedsiftTypographyInputTextLineHeight, RedsiftTypographyLinkFontFamily, RedsiftTypographyLinkFontSize, RedsiftTypographyLinkFontWeight, RedsiftTypographyLinkLineHeight, RedsiftTypographyPillFontFamily, RedsiftTypographyPillFontSize, RedsiftTypographyPillFontWeight, RedsiftTypographyPillLineHeight, RedsiftTypographySubtitleFontFamily, RedsiftTypographySubtitleFontSize, RedsiftTypographySubtitleFontWeight, RedsiftTypographySubtitleLineHeight, RedsiftTypographySubtitleTextTransform, Shield, ShieldVariant, SideNavigationMenu, SideNavigationMenuBar, SideNavigationMenuItem, SideNavigationMenuReducerActionType, Spinner, SpinnerSize, StyledButton, StyledLink, Text, TextComponent, TextVariant, useAppSidePanel, useSideNavigationMenuBar, useWindowSize, warnIfNoAccessibleLabelFound };
 //# sourceMappingURL=index.js.map