@redsift/design-system 9.0.0-alpha.8 → 9.0.0-muiv5-alpha.17

package/index.js

@@ -1,7 +1,7 @@
 import { useLocalizedStringFormatter, I18nProvider, useNumberFormatter } from '@react-aria/i18n';
 export { I18nProvider, useCollator, useDateFormatter, useFilter, useListFormatter, useLocale, useLocalizedStringFormatter, useNumberFormatter } from '@react-aria/i18n';
 export { SSRProvider, useIsSSR } from '@react-aria/ssr';
-import { rsiAsmHorizontal, rsiBrandTrustHorizontal, rsiCertificatesHorizontal, rsiOndmarcHorizontal, rsiRadarHorizontal, rsiRojoDsHorizontal, rsiVendorSecureHorizontal, rsiRedSiftHorizontal, mdiClose as mdiClose$1, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation, mdiMenu, mdiCircleMedium as mdiCircleMedium$1, mdiChevronDown, mdiMenuOpen, mdiChevronUp, mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline, mdiPageLast, mdiKeyboardCaps, mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
+import { rsiAsmHorizontal, rsiBrandTrustHorizontal, rsiCertificatesHorizontal, rsiOndmarcHorizontal, rsiPulseHorizontal, rsiRadarHorizontal, rsiRojoDsHorizontal, rsiVendorSecureHorizontal, rsiRedSiftHorizontal, mdiClose as mdiClose$1, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation, mdiMenu, mdiCircleMedium as mdiCircleMedium$1, 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 classNames from 'classnames';
@@ -24,6 +24,7 @@ const Product = {
   'brand-trust': 'brand-trust',
   certificates: 'certificates',
   ondmarc: 'ondmarc',
+  pulse: 'pulse',
   radar: 'radar',
   'rojo-ds': 'rojo-ds',
   'vendor-secure': 'vendor-secure',
@@ -34,6 +35,7 @@ const ProductName = {
   'brand-trust': 'Brand Trust',
   certificates: 'Certificates',
   ondmarc: 'OnDMARC',
+  pulse: 'Pulse',
   radar: 'RADAR',
   'rojo-ds': 'ROJO DS',
   'vendor-secure': 'Vendor Secure',
@@ -44,6 +46,7 @@ const ProductLogo = {
   'brand-trust': rsiBrandTrustHorizontal,
   certificates: rsiCertificatesHorizontal,
   ondmarc: rsiOndmarcHorizontal,
+  pulse: rsiPulseHorizontal,
   radar: rsiRadarHorizontal,
   'rojo-ds': rsiRojoDsHorizontal,
   'vendor-secure': rsiVendorSecureHorizontal,
@@ -1033,10 +1036,10 @@ const StyledIcon = styled.span`
 }}
 `;
 
-const _excluded$N = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
-const COMPONENT_NAME$N = 'Icon';
-const CLASSNAME$N = 'redsift-icon';
-const DEFAULT_PROPS$N = {
+const _excluded$O = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
+const COMPONENT_NAME$O = 'Icon';
+const CLASSNAME$O = 'redsift-icon';
+const DEFAULT_PROPS$O = {
   size: IconSize.medium
 };
 const sizeToDimension$1 = size => {
@@ -1104,7 +1107,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       svgProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$N);
+    forwardedProps = _objectWithoutProperties(props, _excluded$O);
   const {
     width,
     height,
@@ -1137,9 +1140,9 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
     width
   }, svgProps)), badge ? badge : null);
 });
-Icon.className = CLASSNAME$N;
-Icon.defaultProps = DEFAULT_PROPS$N;
-Icon.displayName = COMPONENT_NAME$N;
+Icon.className = CLASSNAME$O;
+Icon.defaultProps = DEFAULT_PROPS$O;
+Icon.displayName = COMPONENT_NAME$O;
 
 /**
  * Component variant.
@@ -1204,7 +1207,7 @@ const StyledButton = styled.button`
     $isHovered
   } = _ref2;
   return css`
-    padding: ${$variant === ButtonVariant.secondary ? '7px 15px' : '8px 16px'};
+    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)'};
@@ -1380,10 +1383,10 @@ var spinner = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmc
 
 var uncoloredSpinner = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iI2JkYmRiZCIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiNiZGJkYmQiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
-const _excluded$M = ["aria-hidden", "aria-label", "className", "isColored", "size"];
-const COMPONENT_NAME$M = 'Spinner';
-const CLASSNAME$M = 'redsift-shield';
-const DEFAULT_PROPS$M = {
+const _excluded$N = ["aria-hidden", "aria-label", "className", "isColored", "size"];
+const COMPONENT_NAME$N = 'Spinner';
+const CLASSNAME$N = 'redsift-shield';
+const DEFAULT_PROPS$N = {
   isColored: true,
   size: SpinnerSize.medium
 };
@@ -1424,7 +1427,7 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
       isColored,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$M);
+    forwardedProps = _objectWithoutProperties(props, _excluded$N);
   const {
     width,
     height
@@ -1443,14 +1446,14 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     $size: size
   }));
 });
-Spinner.className = CLASSNAME$M;
-Spinner.defaultProps = DEFAULT_PROPS$M;
-Spinner.displayName = COMPONENT_NAME$M;
+Spinner.className = CLASSNAME$N;
+Spinner.defaultProps = DEFAULT_PROPS$N;
+Spinner.displayName = COMPONENT_NAME$N;
 
-const _excluded$L = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isHovered", "isLoading", "leftIcon", "rightIcon", "variant"];
-const COMPONENT_NAME$L = 'Button';
-const CLASSNAME$L = 'redsift-button';
-const DEFAULT_PROPS$L = {
+const _excluded$M = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isHovered", "isLoading", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "variant"];
+const COMPONENT_NAME$M = 'Button';
+const CLASSNAME$M = 'redsift-button';
+const DEFAULT_PROPS$M = {
   color: CtasColorPalette.primary,
   height: 'fit-content',
   variant: ButtonVariant.primary
@@ -1477,10 +1480,12 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       isHovered,
       isLoading,
       leftIcon,
+      leftIconProps,
       rightIcon,
+      rightIconProps,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$L);
+    forwardedProps = _objectWithoutProperties(props, _excluded$M);
   const isDisabled = isLoading || propsIsDisabled || disabled;
   return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({}, forwardedProps, {
     $color: color,
@@ -1494,22 +1499,22 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(Button.className, className),
     disabled: isDisabled,
     ref: buttonRef
-  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, {
+  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
     icon: leftIcon,
     "aria-hidden": "true",
     className: "left"
-  }) : null, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
+  }, leftIconProps)) : null, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
     size: "small",
     isColored: false
-  }) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? /*#__PURE__*/React__default.createElement(Icon, {
+  }) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
     icon: rightIcon,
     "aria-hidden": "true",
     className: "right"
-  }) : null);
+  }, rightIconProps)) : null);
 });
-Button.className = CLASSNAME$L;
-Button.defaultProps = DEFAULT_PROPS$L;
-Button.displayName = COMPONENT_NAME$L;
+Button.className = CLASSNAME$M;
+Button.defaultProps = DEFAULT_PROPS$M;
+Button.displayName = COMPONENT_NAME$M;
 
 /**
  * Component style.
@@ -1536,10 +1541,10 @@ const StyledIconButton = styled(StyledButton)`
 }}
 `;
 
-const _excluded$K = ["className", "color", "disabled", "icon", "iconProps", "isActive", "isDisabled", "isHovered", "isLoading", "variant"];
-const COMPONENT_NAME$K = 'IconButton';
-const CLASSNAME$K = 'redsift-icon-button';
-const DEFAULT_PROPS$K = {
+const _excluded$L = ["className", "color", "disabled", "icon", "iconProps", "isActive", "isDisabled", "isHovered", "isLoading", "variant"];
+const COMPONENT_NAME$L = 'IconButton';
+const CLASSNAME$L = 'redsift-icon-button';
+const DEFAULT_PROPS$L = {
   color: CtasColorPalette.primary,
   height: 'fit-content',
   variant: IconButtonVariant.unstyled
@@ -1565,7 +1570,7 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$K);
+    forwardedProps = _objectWithoutProperties(props, _excluded$L);
   const isDisabled = props.isLoading || propsIsDisabled || disabled;
   warnIfNoAccessibleLabelFound(props);
   return /*#__PURE__*/React__default.createElement(StyledIconButton, _extends$1({}, forwardedProps, {
@@ -1586,9 +1591,9 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
     color: isDisabled ? undefined : color
   })));
 });
-IconButton.className = CLASSNAME$K;
-IconButton.defaultProps = DEFAULT_PROPS$K;
-IconButton.displayName = COMPONENT_NAME$K;
+IconButton.className = CLASSNAME$L;
+IconButton.defaultProps = DEFAULT_PROPS$L;
+IconButton.displayName = COMPONENT_NAME$L;
 
 /**
  * Component style.
@@ -1754,10 +1759,10 @@ const StyledText = styled.span`
 }}
 `;
 
-const _excluded$J = ["as", "children", "className", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "noWrap", "variant"];
-const COMPONENT_NAME$J = 'Text';
-const CLASSNAME$J = 'redsift-text';
-const DEFAULT_PROPS$J = {
+const _excluded$K = ["as", "children", "className", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "noWrap", "variant"];
+const COMPONENT_NAME$K = 'Text';
+const CLASSNAME$K = 'redsift-text';
+const DEFAULT_PROPS$K = {
   fontFamily: FontFamily.poppins
 };
 
@@ -1777,7 +1782,7 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
       noWrap,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$J);
+    forwardedProps = _objectWithoutProperties(props, _excluded$K);
   return /*#__PURE__*/React__default.createElement(StyledText, _extends$1({
     as: as
   }, forwardedProps, {
@@ -1793,9 +1798,9 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant
   }), children);
 });
-Text.className = CLASSNAME$J;
-Text.defaultProps = DEFAULT_PROPS$J;
-Text.displayName = COMPONENT_NAME$J;
+Text.className = CLASSNAME$K;
+Text.defaultProps = DEFAULT_PROPS$K;
+Text.displayName = COMPONENT_NAME$K;
 
 /**
  * Component style.
@@ -1811,12 +1816,44 @@ const StyledFlexbox = styled.div`
   ${baseStyling}
   ${baseInternalSpacing}
   ${baseFlexbox}
+
+  ${_ref2 => {
+  let {
+    $divider
+  } = _ref2;
+  return $divider ? css`
+          overflow: hidden;
+          > *:not(:empty) {
+            position: relative;
+
+            ::before {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-lightgrey);
+              inline-size: 1px;
+              block-size: 100%;
+              inset-inline-start: calc(${Math.max(1, $divider.colGap / 2)}px * -1);
+            }
+
+            ::after {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-lightgrey);
+              inline-size: 200vw;
+              block-size: 1px;
+              inset-inline-start: -100vw;
+              inset-block-start: calc(${Math.max(1, $divider.rowGap / 2)}px * -1);
+              z-index: 0;
+            }
+          }
+        ` : '';
+}}
 `;
 
-const _excluded$I = ["children", "className"];
-const COMPONENT_NAME$I = 'Flexbox';
-const CLASSNAME$I = 'redsift-flex-box';
-const DEFAULT_PROPS$I = {
+const _excluded$J = ["children", "className", "divider", "gap"];
+const COMPONENT_NAME$J = 'Flexbox';
+const CLASSNAME$J = 'redsift-flex-box';
+const DEFAULT_PROPS$J = {
   gap: '16px'
 };
 
@@ -1826,22 +1863,26 @@ const DEFAULT_PROPS$I = {
 const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
-      className
+      className,
+      divider,
+      gap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$I);
+    forwardedProps = _objectWithoutProperties(props, _excluded$J);
   return /*#__PURE__*/React__default.createElement(StyledFlexbox, _extends$1({}, forwardedProps, {
+    gap: divider ? `${divider.rowGap}px ${divider.colGap}px` : gap,
     className: classNames(Flexbox.className, className),
-    ref: ref
+    ref: ref,
+    $divider: divider
   }), children);
 });
-Flexbox.className = CLASSNAME$I;
-Flexbox.defaultProps = DEFAULT_PROPS$I;
-Flexbox.displayName = COMPONENT_NAME$I;
-
-const _excluded$H = ["children", "className", "isClosable", "isClosed", "onClose", "title", "variant"];
-const COMPONENT_NAME$H = 'Alert';
-const CLASSNAME$H = 'redsift-alert';
-const DEFAULT_PROPS$H = {
+Flexbox.className = CLASSNAME$J;
+Flexbox.defaultProps = DEFAULT_PROPS$J;
+Flexbox.displayName = COMPONENT_NAME$J;
+
+const _excluded$I = ["children", "className", "isClosable", "isClosed", "onClose", "title", "variant"];
+const COMPONENT_NAME$I = 'Alert';
+const CLASSNAME$I = 'redsift-alert';
+const DEFAULT_PROPS$I = {
   variant: 'info'
 };
 const getVariant$1 = variant => {
@@ -1883,7 +1924,7 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$H);
+    forwardedProps = _objectWithoutProperties(props, _excluded$I);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$6);
   const {
     color,
@@ -1929,9 +1970,9 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${Alert.className}__content`
   }, children) : null);
 });
-Alert.className = CLASSNAME$H;
-Alert.defaultProps = DEFAULT_PROPS$H;
-Alert.displayName = COMPONENT_NAME$H;
+Alert.className = CLASSNAME$I;
+Alert.defaultProps = DEFAULT_PROPS$I;
+Alert.displayName = COMPONENT_NAME$I;
 
 var expand$7 = "Expand left side panel";
 var collapse$7 = "Collapse left side panel";
@@ -1974,7 +2015,12 @@ const StyledAppBar = styled.header`
   color: var(--redsift-color-neutral-darkgrey);
   display: flex;
   flex-direction: row;
+
   height: 92px;
+  @media (max-width: 1080px) {
+    height: 72px;
+  }
+
   justify-content: space-between;
   left: 0;
   position: sticky;
@@ -1983,21 +2029,32 @@ const StyledAppBar = styled.header`
 
   ${_ref => {
   let {
-    $isSidePanelCollapsed
+    $hasBorder
   } = _ref;
+  return $hasBorder ? css`
+          border-bottom: 2px solid #e1e1e1;
+        ` : css`
+          border-bottom: none;
+        `;
+}}
+
+  ${_ref2 => {
+  let {
+    $isSidePanelCollapsed
+  } = _ref2;
   return !$isSidePanelCollapsed ? css`
-          transform: translate(250px);
-          width: calc(100% - 250px);
+          transform: translate(254px);
+          width: calc(100% - 254px);
         ` : css`
           transform: translate(64px);
           width: calc(100% - 64px);
         `;
 }}
 
-  ${_ref2 => {
+  ${_ref3 => {
   let {
     $isLoaded
-  } = _ref2;
+  } = _ref3;
   return $isLoaded ? css`
           transition: transform 0.25s ease-out, width 0.25s ease-out;
         ` : '';
@@ -2146,10 +2203,10 @@ const StyledHeading = styled.span`
 }}
 `;
 
-const _excluded$G = ["as", "children", "className", "noWrap", "variant"];
-const COMPONENT_NAME$G = 'Heading';
-const CLASSNAME$G = 'redsift-heading';
-const DEFAULT_PROPS$G = {};
+const _excluded$H = ["as", "children", "className", "noWrap", "variant"];
+const COMPONENT_NAME$H = 'Heading';
+const CLASSNAME$H = 'redsift-heading';
+const DEFAULT_PROPS$H = {};
 
 /**
  * The Heading component.
@@ -2162,7 +2219,7 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
       noWrap,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$G);
+    forwardedProps = _objectWithoutProperties(props, _excluded$H);
   return /*#__PURE__*/React__default.createElement(StyledHeading, _extends$1({
     as: as
   }, forwardedProps, {
@@ -2172,9 +2229,9 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant ? variant : as === 'span' ? 'body' : as
   }), children);
 });
-Heading.className = CLASSNAME$G;
-Heading.defaultProps = DEFAULT_PROPS$G;
-Heading.displayName = COMPONENT_NAME$G;
+Heading.className = CLASSNAME$H;
+Heading.defaultProps = DEFAULT_PROPS$H;
+Heading.displayName = COMPONENT_NAME$H;
 
 /**
  * Component variant.
@@ -2241,7 +2298,12 @@ const StyledAppSidePanel = styled.div`
 }};
     margin-bottom: 16px;
     width: 100%;
+
     height: 92px;
+    @media (max-width: 1080px) {
+      height: 72px;
+    }
+
     display: grid;
     justify-items: start;
     align-items: center;
@@ -2267,11 +2329,18 @@ const StyledAppSidePanel = styled.div`
   } = _ref3;
   return $variant === AppSidePanelVariant.shrinked ? '0' : '1';
 }};
+
     height: 56px;
+    @media (max-width: 1080px) {
+      height: 36px;
+    }
   }
 
   .redsift-app-side-panel-header__logo > img {
     max-height: 56px;
+    @media (max-width: 1080px) {
+      max-height: 36px;
+    }
     max-width: 195px;
   }
 
@@ -2337,10 +2406,10 @@ const StyledAppSidePanel = styled.div`
   }
 `;
 
-const _excluded$F = ["children", "className", "featuredElements", "logo", "variant", "onOpen", "iconButtonProps", "iconButtonRef"];
-const COMPONENT_NAME$F = 'AppSidePanel';
-const CLASSNAME$F = 'redsift-app-side-panel';
-const DEFAULT_PROPS$F = {
+const _excluded$G = ["children", "className", "featuredElements", "logo", "variant", "onOpen", "iconButtonProps", "iconButtonRef"];
+const COMPONENT_NAME$G = 'AppSidePanel';
+const CLASSNAME$G = 'redsift-app-side-panel';
+const DEFAULT_PROPS$G = {
   variant: AppSidePanelVariant.standard
 };
 
@@ -2358,7 +2427,10 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
       iconButtonProps,
       iconButtonRef
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$F);
+    forwardedProps = _objectWithoutProperties(props, _excluded$G);
+  const {
+    width
+  } = useWindowSize();
   const appContainerState = useContext(AppContainerContext);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$3);
   useEffect(() => {
@@ -2383,10 +2455,10 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.isValidElement(logo) ? logo : logo ? /*#__PURE__*/React__default.createElement("img", {
     src: logo.src,
     alt: logo.alt
-  }) : product ? /*#__PURE__*/React__default.createElement(Icon, {
-    icon: ProductLogo[product],
+  }) : product && (typeof product === 'string' || product.logo) ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: typeof product === 'string' ? ProductLogo[product] : product.logo,
     size: {
-      height: 41
+      height: width && width > 1080 ? 41 : 36
     }
   }) : null), /*#__PURE__*/React__default.createElement(IconButton, _extends$1({
     className: `${AppSidePanel.className}-header__expand-button`
@@ -2401,9 +2473,9 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${AppSidePanel.className}__featured`
   }, featuredElements) : null, children);
 });
-AppSidePanel.className = CLASSNAME$F;
-AppSidePanel.defaultProps = DEFAULT_PROPS$F;
-AppSidePanel.displayName = COMPONENT_NAME$F;
+AppSidePanel.className = CLASSNAME$G;
+AppSidePanel.defaultProps = DEFAULT_PROPS$G;
+AppSidePanel.displayName = COMPONENT_NAME$G;
 
 /**
  * Component variant.
@@ -2452,6 +2524,7 @@ const StyledSideNavigationMenuItemIndicatorContainer = styled.div`
   min-width: 4px;
 `;
 const StyledSideNavigationMenuItemIndicator = styled.div`
+  position: relative;
   width: 4px;
   height: 38px;
   border-radius: 0px 4px 4px 0px;
@@ -2574,7 +2647,7 @@ const StyledSideNavigationMenuItem = styled.a`
           margin-bottom: 16px;
           margin-left: -4px;
           transition: padding 300ms ease-out;
-          padding: 5px 16px 5px ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '24px'};
+          padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '24px'};
 
           .redsift-icon.first {
             box-sizing: unset;
@@ -2691,10 +2764,10 @@ const StyledBadge = styled.div`
 }}
 `;
 
-const _excluded$E = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
-const COMPONENT_NAME$E = 'Badge';
-const CLASSNAME$E = 'redsift-badge';
-const DEFAULT_PROPS$E = {
+const _excluded$F = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
+const COMPONENT_NAME$F = 'Badge';
+const CLASSNAME$F = 'redsift-badge';
+const DEFAULT_PROPS$F = {
   color: NotificationsColorPalette.question,
   variant: BadgeVariant.dot
 };
@@ -2711,7 +2784,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
       isReversed,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$E);
+    forwardedProps = _objectWithoutProperties(props, _excluded$F);
   return /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
@@ -2721,18 +2794,18 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), variant === BadgeVariant.standard ? children : null);
 });
-Badge.className = CLASSNAME$E;
-Badge.defaultProps = DEFAULT_PROPS$E;
-Badge.displayName = COMPONENT_NAME$E;
+Badge.className = CLASSNAME$F;
+Badge.defaultProps = DEFAULT_PROPS$F;
+Badge.displayName = COMPONENT_NAME$F;
 
 // Material Design Icons v7.2.96
 var mdiCircleMedium = "M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8Z";
 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$D = ["as", "badge", "badgeProps", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex"];
-const COMPONENT_NAME$D = 'SideNavigationMenuItem';
-const CLASSNAME$D = 'redsift-side-navigation-menu-item';
-const DEFAULT_PROPS$D = {};
+const _excluded$E = ["as", "badge", "badgeProps", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex"];
+const COMPONENT_NAME$E = 'SideNavigationMenuItem';
+const CLASSNAME$E = 'redsift-side-navigation-menu-item';
+const DEFAULT_PROPS$E = {};
 
 /**
  * The SideNavigationMenuItem component.
@@ -2756,7 +2829,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
       onKeyDown,
       tabIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$D);
+    forwardedProps = _objectWithoutProperties(props, _excluded$E);
   warnIfNoAccessibleLabelFound(props, [children]);
   const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);
   const sideNavigationMenuContext = useContext(SideNavigationMenuContext);
@@ -2814,9 +2887,9 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     color: "error"
   }, badgeProps), badge) : null));
 });
-SideNavigationMenuItem.className = CLASSNAME$D;
-SideNavigationMenuItem.defaultProps = DEFAULT_PROPS$D;
-SideNavigationMenuItem.displayName = COMPONENT_NAME$D;
+SideNavigationMenuItem.className = CLASSNAME$E;
+SideNavigationMenuItem.defaultProps = DEFAULT_PROPS$E;
+SideNavigationMenuItem.displayName = COMPONENT_NAME$E;
 
 /**
  * Component style.
@@ -2861,7 +2934,7 @@ const StyledSideNavigationMenu = styled.div`
       line-height: var(--redsift-typography-body-line-height);
       margin-left: -4px;
       transition: padding 300ms ease-out;
-      padding: 5px 16px 5px ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '24px'};
+      padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '24px'};
       text-decoration: none;
       text-transform: uppercase;
       width: calc(100% + ${$variant === SideNavigationMenuBarVariant.shrinked ? '0px' : '4px'});
@@ -3035,10 +3108,10 @@ const StyledAppContainer = styled.div`
   box-sizing: content-box;
 `;
 
-const _excluded$C = ["children", "className", "locale", "product"];
-const COMPONENT_NAME$C = 'AppContainer';
-const CLASSNAME$C = 'redsift-app-container';
-const DEFAULT_PROPS$C = {};
+const _excluded$D = ["children", "className", "locale", "product"];
+const COMPONENT_NAME$D = 'AppContainer';
+const CLASSNAME$D = 'redsift-app-container';
+const DEFAULT_PROPS$D = {};
 
 /**
  * The AppContainer component.
@@ -3050,7 +3123,7 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
       locale,
       product
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$C);
+    forwardedProps = _objectWithoutProperties(props, _excluded$D);
   const [sidePanelVariant, setSidePanelVariant] = useState(AppSidePanelVariant.standard);
   const [breadcrumbs, setBreadcrumbs] = useState();
   const state = {
@@ -3079,14 +3152,14 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
     locale: locale
   }, children)));
 });
-AppContainer.className = CLASSNAME$C;
-AppContainer.defaultProps = DEFAULT_PROPS$C;
-AppContainer.displayName = COMPONENT_NAME$C;
+AppContainer.className = CLASSNAME$D;
+AppContainer.defaultProps = DEFAULT_PROPS$D;
+AppContainer.displayName = COMPONENT_NAME$D;
 
-const _excluded$B = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "id", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex"];
-const COMPONENT_NAME$B = 'SideNavigationMenu';
-const CLASSNAME$B = 'redsift-side-navigation-menu';
-const DEFAULT_PROPS$B = {};
+const _excluded$C = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "id", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex"];
+const COMPONENT_NAME$C = 'SideNavigationMenu';
+const CLASSNAME$C = 'redsift-side-navigation-menu';
+const DEFAULT_PROPS$C = {};
 
 /**
  * The SideNavigationMenu component.
@@ -3109,7 +3182,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
       menuRef = useRef(),
       tabIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$B);
+    forwardedProps = _objectWithoutProperties(props, _excluded$C);
   const [_id] = useId$1();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   warnIfNoAccessibleLabelFound(props);
@@ -3415,9 +3488,9 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     role: "menu"
   }, menuItemListEventHandler), renderedMenuItems)))));
 });
-SideNavigationMenu.className = CLASSNAME$B;
-SideNavigationMenu.defaultProps = DEFAULT_PROPS$B;
-SideNavigationMenu.displayName = COMPONENT_NAME$B;
+SideNavigationMenu.className = CLASSNAME$C;
+SideNavigationMenu.defaultProps = DEFAULT_PROPS$C;
+SideNavigationMenu.displayName = COMPONENT_NAME$C;
 
 /**
  * Component style.
@@ -3483,10 +3556,10 @@ const StyledSideNavigationMenuBar = styled.nav`
   }
 `;
 
-const _excluded$A = ["aria-label", "aria-labelledby", "canHaveMultipleMenuOpenAtOnce", "children", "className", "isDisabled", "menubarProps", "menubarRef", "variant"];
-const COMPONENT_NAME$A = 'SideNavigationMenuBar';
-const CLASSNAME$A = 'redsift-side-navigation-menu-bar';
-const DEFAULT_PROPS$A = {
+const _excluded$B = ["aria-label", "aria-labelledby", "canHaveMultipleMenuOpenAtOnce", "children", "className", "isDisabled", "menubarProps", "menubarRef", "variant"];
+const COMPONENT_NAME$B = 'SideNavigationMenuBar';
+const CLASSNAME$B = 'redsift-side-navigation-menu-bar';
+const DEFAULT_PROPS$B = {
   variant: SideNavigationMenuBarVariant.standard
 };
 
@@ -3517,7 +3590,7 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
       menubarRef = useRef(),
       variant: propsVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$A);
+    forwardedProps = _objectWithoutProperties(props, _excluded$B);
   warnIfNoAccessibleLabelFound(props);
   const appContainerState = useContext(AppContainerContext);
   const {
@@ -3675,12 +3748,12 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
     role: "menubar"
   }), navItems)));
 });
-SideNavigationMenuBar.className = CLASSNAME$A;
-SideNavigationMenuBar.defaultProps = DEFAULT_PROPS$A;
-SideNavigationMenuBar.displayName = COMPONENT_NAME$A;
+SideNavigationMenuBar.className = CLASSNAME$B;
+SideNavigationMenuBar.defaultProps = DEFAULT_PROPS$B;
+SideNavigationMenuBar.displayName = COMPONENT_NAME$B;
 
-const _excluded$z = ["title", "href", "ref"],
-  _excluded2 = ["title", "children", "ref"],
+const _excluded$A = ["title", "href", "ref"],
+  _excluded2$1 = ["title", "children", "ref"],
   _excluded3 = ["title", "href", "ref"];
 const isMenu = item => {
   return item.children !== undefined;
@@ -3698,7 +3771,7 @@ const useSideNavigationMenuBar = _ref => {
           href,
           ref
         } = item,
-        rest = _objectWithoutProperties(item, _excluded$z);
+        rest = _objectWithoutProperties(item, _excluded$A);
       menuBarChildren.push( /*#__PURE__*/React__default.createElement(SideNavigationMenuItem, _extends$1({
         key: title,
         isCurrent: isActive ? isActive(href) : undefined
@@ -3712,7 +3785,7 @@ const useSideNavigationMenuBar = _ref => {
           children,
           ref
         } = item,
-        rest = _objectWithoutProperties(item, _excluded2);
+        rest = _objectWithoutProperties(item, _excluded2$1);
       menuBarChildren.push( /*#__PURE__*/React__default.createElement(SideNavigationMenu, _extends$1({
         key: title,
         "aria-label": title,
@@ -3802,10 +3875,10 @@ const StyledBreadcrumbItem = styled.a`
   }
 `;
 
-const _excluded$y = ["as", "children", "className", "href", "isCurrent", "isDisabled"];
-const COMPONENT_NAME$z = 'BreadcrumbItem';
-const CLASSNAME$z = 'redsift-breadcrumb-item';
-const DEFAULT_PROPS$z = {};
+const _excluded$z = ["as", "children", "className", "href", "isCurrent", "isDisabled"];
+const COMPONENT_NAME$A = 'BreadcrumbItem';
+const CLASSNAME$A = 'redsift-breadcrumb-item';
+const DEFAULT_PROPS$A = {};
 
 /**
  * The BreadcrumbItem components is a list of links to the parent pages of the current page in hierarchical order.
@@ -3819,7 +3892,7 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
       isCurrent,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$z);
   warnIfNoAccessibleLabelFound(props, [children]);
   return /*#__PURE__*/React__default.createElement(StyledBreadcrumbItem, _extends$1({
     as: as || 'a',
@@ -3835,9 +3908,9 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-BreadcrumbItem.className = CLASSNAME$z;
-BreadcrumbItem.defaultProps = DEFAULT_PROPS$z;
-BreadcrumbItem.displayName = COMPONENT_NAME$z;
+BreadcrumbItem.className = CLASSNAME$A;
+BreadcrumbItem.defaultProps = DEFAULT_PROPS$A;
+BreadcrumbItem.displayName = COMPONENT_NAME$A;
 
 /**
  * Component style.
@@ -3871,10 +3944,10 @@ const StyledBreadcrumbs = styled.nav`
   }
 `;
 
-const _excluded$x = ["children", "className", "isDisabled"];
-const COMPONENT_NAME$y = 'Breadcrumbs';
-const CLASSNAME$y = 'redsift-breadcrumbs';
-const DEFAULT_PROPS$y = {};
+const _excluded$y = ["children", "className", "isDisabled"];
+const COMPONENT_NAME$z = 'Breadcrumbs';
+const CLASSNAME$z = 'redsift-breadcrumbs';
+const DEFAULT_PROPS$z = {};
 
 /**
  * The Breadcrumbs components is a list of links to the parent pages of the current page in hierarchical order.
@@ -3885,7 +3958,7 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$x);
+    forwardedProps = _objectWithoutProperties(props, _excluded$y);
   warnIfNoAccessibleLabelFound(props);
   const childArray = filterComponents([Breadcrumbs.Item])(children);
   const breadcrumbItems = childArray.map((child, index) => {
@@ -3908,23 +3981,23 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), /*#__PURE__*/React__default.createElement("ol", null, breadcrumbItems));
 });
-BaseBreadcrumbs.className = CLASSNAME$y;
-BaseBreadcrumbs.defaultProps = DEFAULT_PROPS$y;
-BaseBreadcrumbs.displayName = COMPONENT_NAME$y;
+BaseBreadcrumbs.className = CLASSNAME$z;
+BaseBreadcrumbs.defaultProps = DEFAULT_PROPS$z;
+BaseBreadcrumbs.displayName = COMPONENT_NAME$z;
 const Breadcrumbs = Object.assign(BaseBreadcrumbs, {
   Item: BreadcrumbItem
 });
 
-const _excluded$w = ["breadcrumbs", "children", "className", "iconButtonProps", "iconButtonRef", "fallbackTitle", "title"];
-const COMPONENT_NAME$x = 'AppBar';
-const CLASSNAME$x = 'redsift-app-bar';
-const DEFAULT_PROPS$x = {};
+const _excluded$x = ["breadcrumbs", "children", "className", "iconButtonProps", "iconButtonRef", "fallbackTitle", "title"];
+const COMPONENT_NAME$y = 'AppBar';
+const CLASSNAME$y = 'redsift-app-bar';
+const DEFAULT_PROPS$y = {};
 
 /**
  * The AppBar component.
  */
 const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
-  var _breadcrumbs$;
+  var _breadcrumbs$, _appContainerState$pr;
   const {
       breadcrumbs,
       children,
@@ -3934,13 +4007,20 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       fallbackTitle,
       title: propsTitle
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$w);
+    forwardedProps = _objectWithoutProperties(props, _excluded$x);
+  const [scroll, setScroll] = useState(false);
+  useEffect(() => {
+    window.addEventListener('scroll', () => {
+      setScroll(window.scrollY > 8);
+    });
+  }, []);
   const {
     isLoaded
   } = useIsLoaded();
   const appContainerState = useContext(AppContainerContext);
   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,
     className: classNames(AppBar.className, className),
@@ -3968,20 +4048,20 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
   }, appContainerState && appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked ? /*#__PURE__*/React__default.createElement(Breadcrumbs.Item, {
     href: "/",
     as: ((_breadcrumbs$ = breadcrumbs[0]) === null || _breadcrumbs$ === void 0 ? void 0 : _breadcrumbs$.as) || 'a'
-  }, ProductName[appContainerState.product]) : null, breadcrumbs.map((breadcrumbItem, index) => /*#__PURE__*/React__default.createElement(Breadcrumbs.Item, _extends$1({
+  }, typeof appContainerState.product === 'string' ? ProductName[appContainerState.product] : (_appContainerState$pr = appContainerState.product) === null || _appContainerState$pr === void 0 ? void 0 : _appContainerState$pr.name) : null, breadcrumbs.map((breadcrumbItem, index) => /*#__PURE__*/React__default.createElement(Breadcrumbs.Item, _extends$1({
     key: index
   }, breadcrumbItem, {
     isDisabled: breadcrumbItem.isDisabled || breadcrumbItem.href === undefined,
     as: index === breadcrumbs.length - 1 ? 'h1' : breadcrumbItem.href === undefined ? 'span' : breadcrumbItem.as || 'a'
   })))) : fallbackTitle ? /*#__PURE__*/React__default.createElement(Heading, {
     as: "h1"
-  }, fallbackTitle) : null), /*#__PURE__*/React__default.createElement("div", {
+  }, fallbackTitle) : null), children ? /*#__PURE__*/React__default.createElement("div", {
     className: `${AppBar.className}__right`
-  }, children));
+  }, children) : null);
 });
-AppBar.className = CLASSNAME$x;
-AppBar.defaultProps = DEFAULT_PROPS$x;
-AppBar.displayName = COMPONENT_NAME$x;
+AppBar.className = CLASSNAME$y;
+AppBar.defaultProps = DEFAULT_PROPS$y;
+AppBar.displayName = COMPONENT_NAME$y;
 
 /**
  * Component style.
@@ -4020,10 +4100,10 @@ const StyledAppContent = styled.main`
 }}
 `;
 
-const _excluded$v = ["children", "className"];
-const COMPONENT_NAME$w = 'AppContent';
-const CLASSNAME$w = 'redsift-app-content';
-const DEFAULT_PROPS$w = {};
+const _excluded$w = ["children", "className"];
+const COMPONENT_NAME$x = 'AppContent';
+const CLASSNAME$x = 'redsift-app-content';
+const DEFAULT_PROPS$x = {};
 
 /**
  * The AppContent component.
@@ -4033,7 +4113,7 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$v);
+    forwardedProps = _objectWithoutProperties(props, _excluded$w);
   const {
     isLoaded
   } = useIsLoaded();
@@ -4045,9 +4125,166 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-AppContent.className = CLASSNAME$w;
-AppContent.defaultProps = DEFAULT_PROPS$w;
-AppContent.displayName = COMPONENT_NAME$w;
+AppContent.className = CLASSNAME$x;
+AppContent.defaultProps = DEFAULT_PROPS$x;
+AppContent.displayName = COMPONENT_NAME$x;
+
+/**
+ * Component variant.
+ */
+const ButtonGroupVariant = {
+  primary: 'primary',
+  secondary: 'secondary',
+  unstyled: 'unstyled'
+};
+
+/**
+ * Component color.
+ */
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledButtonGroup = styled.div`
+  display: ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline ? 'inline-flex' : 'flex';
+}};
+
+  ${baseStyling}
+  ${baseFlexbox}
+
+  ${_ref2 => {
+  let {
+    $color,
+    $variant
+  } = _ref2;
+  return css`
+    ${$variant === ButtonGroupVariant.secondary ? css`
+          .first-button {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-color: transparent;
+          }
+
+          .middle-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            margin-left: -1px;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-color: transparent;
+          }
+
+          .last-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            margin-left: -1px;
+          }
+        ` : $variant === ButtonGroupVariant.unstyled ? css`
+          .first-button {
+            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)`};
+          }
+
+          .middle-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            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)`};
+          }
+
+          .last-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        ` : css`
+          .first-button {
+            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)`};
+          }
+
+          .middle-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            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)`};
+          }
+
+          .last-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        `}
+  `;
+}};
+`;
+
+const _excluded$v = ["children", "className", "color", "variant"];
+const COMPONENT_NAME$w = 'ButtonGroup';
+const CLASSNAME$w = 'redsift-button-group';
+const DEFAULT_PROPS$w = {
+  variant: 'primary'
+};
+
+/**
+ * The ButtonGroup component.
+ */
+const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      color,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$v);
+
+  /**
+   * Create an array containing only valid children being either Button, IconButton, ButtonLink or MenuButton.
+   */
+  const childArray = filterComponents(['Button', 'IconButton', 'ButtonLink', 'MenuButton'])(children);
+  const buttons = childArray.map((child, index) => {
+    var _key;
+    if (isComponent('MenuButton')(child)) {
+      var _child$key;
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        color,
+        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'
+      });
+    }
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      color,
+      variant,
+      key: (_key = child.key) !== null && _key !== void 0 ? _key : index,
+      className: index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button'
+    });
+  });
+  return /*#__PURE__*/React__default.createElement(StyledButtonGroup, _extends$1({}, forwardedProps, {
+    className: classNames(ButtonGroup.className, className),
+    ref: ref,
+    $color: color,
+    $variant: variant
+  }), buttons);
+});
+ButtonGroup.className = CLASSNAME$w;
+ButtonGroup.defaultProps = DEFAULT_PROPS$w;
+ButtonGroup.displayName = COMPONENT_NAME$w;
 
 const _excluded$u = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "leftIcon", "rightIcon", "target", "variant"];
 const COMPONENT_NAME$v = 'ButtonLink';
@@ -4235,7 +4472,7 @@ const StyledSkeleton = styled.div`
   height: fit-content;
   width: fit-content;
 
-  > * {
+  * {
     visibility: hidden;
   }
 
@@ -4490,10 +4727,10 @@ const StyledCardBody = styled.div`
   ${baseContainer}
 
   color: var(--redsift-color-neutral-darkgrey);
-  font-family: var(--redsift-typography-body2-font-family);
-  font-size: var(--redsift-typography-body2-font-size);
-  font-weight: var(--redsift-typography-body2-font-weight);
-  line-height: var(--redsift-typography-body2-line-height);
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: var(--redsift-typography-body-line-height);
   padding: 16px 0px;
 `;
 
@@ -4824,7 +5061,7 @@ const StyledCheckbox = styled.label`
     $isInvalid
   } = _ref;
   return $isDisabled ? css`
-            color: var(--redsift-color-neutral-midgrey);
+            color: var(--redsift-color-neutral-lightgrey);
           ` : $isInvalid ? css`
             color: var(--redsift-color-notifications-error-primary);
           ` : css`
@@ -4859,7 +5096,7 @@ const StyledCheckbox = styled.label`
   } = _ref2;
   return css`
       ${$isDisabled ? css`
-            color: var(--redsift-color-neutral-midgrey);
+            color: var(--redsift-color-neutral-lightgrey);
           ` : $isInvalid ? css`
             color: var(--redsift-color-notifications-error-primary);
           ` : css`
@@ -5352,7 +5589,7 @@ const StyledDetailedCardSection = styled.div`
 
   .redsift-detailed-card-section-header__title {
     font-size: 18px;
-    font-weight: 700;
+    font-weight: 500;
     lineheight: 22px;
     padding: 6px 0px;
   }
@@ -5544,6 +5781,18 @@ DetailedCardHeader.className = CLASSNAME$i;
 DetailedCardHeader.defaultProps = DEFAULT_PROPS$i;
 DetailedCardHeader.displayName = COMPONENT_NAME$i;
 
+/**
+ * Component size.
+ */
+const PillSize = {
+  small: 'small',
+  large: 'large'
+};
+
+/**
+ * Component props.
+ */
+
 /**
  * Component style.
  */
@@ -5553,7 +5802,8 @@ const StyledPill = styled.div`
   gap: 4px;
   width: fit-content;
   ${baseStyling}
-
+  
+  border-radius: 2px;
   padding: 2px 8px;
   text-align: center;
   
@@ -5580,9 +5830,7 @@ const StyledPill = styled.div`
 
     &,
     .redsift-icon {
-      color: var(
-        --redsift-color-neutral-${['black', 'warning-dark', 'success-dark'].includes($color) ? 'white' : 'black'}
-      );
+      color: var(--redsift-color-neutral-${['black', 'no-data', 'error-dark'].includes($color) ? 'white' : 'black'});
     }
   `;
 }}}
@@ -5590,9 +5838,19 @@ const StyledPill = styled.div`
   &,
   .redsift-icon {
     font-family: var(--redsift-typography-pill-font-family);
-    font-size: var(--redsift-typography-pill-font-size);
+    font-size: ${_ref3 => {
+  let {
+    $size
+  } = _ref3;
+  return $size === PillSize.large ? css`var(--redsift-typography-chip-font-size)` : css`var(--redsift-typography-pill-font-size)`;
+}}};
     font-weight: var(--redsift-typography-pill-font-weight);
-    line-height: var(--redsift-typography-pill-line-height);
+    line-height: ${_ref4 => {
+  let {
+    $size
+  } = _ref4;
+  return $size === PillSize.large ? css`var(--redsift-typography-chip-line-height)` : css`var(--redsift-typography-pill-line-height)`;
+}}};
   }
 
   .redsift-icon {
@@ -5606,12 +5864,13 @@ const StyledPill = styled.div`
   }
 `;
 
-const _excluded$g = ["autoBreak", "children", "className", "color"];
+const _excluded$g = ["autoBreak", "children", "className", "color", "size"];
 const COMPONENT_NAME$h = 'Pill';
 const CLASSNAME$h = 'redsift-pill';
 const DEFAULT_PROPS$h = {
   color: PresentationColorPalette.pink,
-  height: 'fit-content'
+  height: 'fit-content',
+  size: PillSize.large
 };
 
 /**
@@ -5622,12 +5881,14 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
       autoBreak,
       children,
       className,
-      color
+      color,
+      size
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$g);
   return /*#__PURE__*/React__default.createElement(StyledPill, _extends$1({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
+    $size: size,
     className: classNames(Pill.className, className),
     ref: ref
   }), children);
@@ -9579,6 +9840,7 @@ let EventKey = /*#__PURE__*/function (EventKey) {
   EventKey["ArrowDown"] = "ArrowDown";
   EventKey["Home"] = "Home";
   EventKey["End"] = "End";
+  EventKey["Enter"] = "Enter";
   return EventKey;
 }({});
 let Navigation = /*#__PURE__*/function (Navigation) {
@@ -9620,7 +9882,8 @@ const FOCUS_WITHING_GROUP_INITIAL_STATE = {
   focusOnInit: true,
   loopAround: false,
   rowStartMap: null,
-  focusType: 'roving-tabindex'
+  focusType: 'roving-tabindex',
+  listRole: 'listbox'
 };
 const FocusWithinGroupContext = /*#__PURE__*/React__default.createContext({
   state: FOCUS_WITHING_GROUP_INITIAL_STATE,
@@ -9748,9 +10011,9 @@ const FocusWithinGroupReducer = (state, action) => {
         const currentTabStop = state.tabStops[index];
         return currentTabStop.isDisabled ? _objectSpread2(_objectSpread2({}, state), {}, {
           delayedAction: undefined
-        }) : selectTabStop(_objectSpread2(_objectSpread2({}, state), {}, {
+        }, action.payload) : selectTabStop(_objectSpread2(_objectSpread2({}, state), {}, {
           delayedAction: undefined
-        }), currentTabStop, undefined, state.focusOnClick);
+        }, action.payload), currentTabStop, undefined, state.focusOnClick);
       }
     case FocusWithinGroupActionType.BLUR_ON_LIST:
       {
@@ -9783,8 +10046,7 @@ const FocusWithinGroupReducer = (state, action) => {
       return _objectSpread2(_objectSpread2({}, state), action.payload);
     case FocusWithinGroupActionType.FILTER_LIST:
       return _objectSpread2(_objectSpread2({}, state), {}, {
-        selectedId: null,
-        activedescendant: ['', '']
+        selectedId: null
       }, action.payload);
     case FocusWithinGroupActionType.DELAY_ACTION:
       return _objectSpread2(_objectSpread2({}, state), {}, {
@@ -10082,16 +10344,20 @@ const FocusWithinGroup = props => {
     focusOnClick,
     loopAround,
     focusType,
+    listRole,
     focusOnInit,
-    activedescendant
+    activedescendant,
+    maxOptionsLength
   } = props;
   const [state, dispatch] = useReducer(FocusWithinGroupReducer, _objectSpread2(_objectSpread2({}, FOCUS_WITHING_GROUP_INITIAL_STATE), {}, {
     direction,
     focusOnClick,
     loopAround,
     focusType,
+    listRole,
     focusOnInit,
-    activedescendant
+    activedescendant,
+    maxOptionsLength
   }));
 
   // Update the options whenever they change:
@@ -10103,11 +10369,13 @@ const FocusWithinGroup = props => {
         focusOnClick: focusOnClick !== null && focusOnClick !== void 0 ? focusOnClick : FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnClick,
         loopAround: loopAround !== null && loopAround !== void 0 ? loopAround : FOCUS_WITHING_GROUP_INITIAL_STATE.loopAround,
         focusType: focusType !== null && focusType !== void 0 ? focusType : FOCUS_WITHING_GROUP_INITIAL_STATE.focusType,
+        listRole: listRole !== null && listRole !== void 0 ? listRole : FOCUS_WITHING_GROUP_INITIAL_STATE.listRole,
         focusOnInit: focusOnInit !== null && focusOnInit !== void 0 ? focusOnInit : FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnInit,
-        activedescendant: activedescendant !== null && activedescendant !== void 0 ? activedescendant : FOCUS_WITHING_GROUP_INITIAL_STATE.activedescendant
+        activedescendant: activedescendant !== null && activedescendant !== void 0 ? activedescendant : FOCUS_WITHING_GROUP_INITIAL_STATE.activedescendant,
+        maxOptionsLength: maxOptionsLength !== null && maxOptionsLength !== void 0 ? maxOptionsLength : FOCUS_WITHING_GROUP_INITIAL_STATE.maxOptionsLength
       }
     });
-  }, [direction, focusOnClick, focusOnInit, loopAround, focusType, activedescendant]);
+  }, [direction, focusOnClick, focusOnInit, loopAround, focusType, listRole, activedescendant, maxOptionsLength]);
   const context = useMemo(() => ({
     state,
     dispatch
@@ -10307,7 +10575,6 @@ const StyledGrid = styled.div`
   return inline ? 'inline-grid' : 'grid';
 }};
   flex: 1;
-  max-width: fit-content;
 
   ${baseStyling}
   ${baseInternalSpacing}
@@ -10319,7 +10586,7 @@ const StyledGrid = styled.div`
   } = _ref2;
   return $divider ? css`
           overflow: hidden;
-          .redsift-grid-item {
+          .redsift-grid-item:not(:empty) {
             position: relative;
 
             ::before {
@@ -10328,17 +10595,17 @@ const StyledGrid = styled.div`
               background-color: var(--redsift-color-neutral-lightgrey);
               inline-size: 1px;
               block-size: 100%;
-              inset-inline-start: calc(${$divider.colGap / 2}px * -1);
+              inset-inline-start: calc(${Math.max(1, $divider.colGap / 2)}px * -1);
             }
 
             ::after {
               content: '';
               position: absolute;
               background-color: var(--redsift-color-neutral-lightgrey);
-              inline-size: 100vw;
+              inline-size: 200vw;
               block-size: 1px;
-              inset-inline-start: 0;
-              inset-block-start: calc(${$divider.rowGap / 2}px * -1);
+              inset-inline-start: -100vw;
+              inset-block-start: calc(${Math.max(1, $divider.rowGap / 2)}px * -1);
               z-index: 0;
             }
           }
@@ -10418,7 +10685,7 @@ const StyledItem = styled.div`
   width: 100%;
   padding: 8px 16px;
 
-  ${baseStyling}
+  ${baseContainer}
 
   align-items: center;
   background: none;
@@ -10489,6 +10756,7 @@ const ListboxContext = /*#__PURE__*/React__default.createContext({
 let ListboxActionType = /*#__PURE__*/function (ListboxActionType) {
   ListboxActionType["TOGGLE"] = "TOGGLE";
   ListboxActionType["SET"] = "SET";
+  ListboxActionType["UPDATE_OPTIONS"] = "UPDATE_OPTIONS";
   return ListboxActionType;
 }({});
 /**
@@ -10583,11 +10851,55 @@ function useListboxItem(props) {
   };
 }
 
-const _excluded$b = ["children", "className", "defaultSelected", "id", "isActive", "isDisabled", "isHovered", "isSelected", "value"];
+function useMenuItem(props) {
+  const {
+    domElementRef,
+    id,
+    isDisabled,
+    onClick
+  } = props;
+  const {
+    tabIndex,
+    isFocused,
+    handleKeyDown: handleFocusKeyDown,
+    handleClick: handleFocusClick
+  } = useFocusOnListItem({
+    domElementRef,
+    isDisabled: isDisabled,
+    id
+  });
+  const handleKeyDown = useCallback(event => {
+    const code = event.code;
+    if (code === 'Enter' || code === 'Space') {
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    }
+    handleFocusKeyDown(event);
+  }, []);
+  const handleClick = useCallback(() => {
+    handleFocusClick();
+    onClick === null || onClick === void 0 ? void 0 : onClick();
+  }, []);
+  useEffect(() => {
+    if (isFocused && domElementRef.current) {
+      var _current;
+      (_current = domElementRef.current) === null || _current === void 0 ? void 0 : _current.focus();
+    }
+  }, [isFocused]);
+  return {
+    tabIndex,
+    isFocused,
+    isDisabled,
+    handleKeyDown,
+    handleClick
+  };
+}
+
+const _excluded$b = ["children", "className", "defaultSelected", "id", "isActive", "isDisabled", "isHovered", "isSelected", "value"],
+  _excluded2 = ["children", "className", "id", "isActive", "isDisabled", "isHovered", "onClick"];
 const COMPONENT_NAME$9 = 'Item';
 const CLASSNAME$9 = 'redsift-item';
 const DEFAULT_PROPS$9 = {};
-const RenderedItem = /*#__PURE__*/forwardRef((props, ref) => {
+const RenderedListboxItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
       className,
@@ -10634,6 +10946,49 @@ const RenderedItem = /*#__PURE__*/forwardRef((props, ref) => {
     tabIndex: tabIndex
   }), children !== null && children !== void 0 ? children : value);
 });
+const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      id: propsId,
+      isActive,
+      isDisabled: propsIsDisabled,
+      isHovered,
+      onClick
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded2);
+  const [_id] = useId$1();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const _ref = useRef();
+  const divRef = ref !== null && ref !== void 0 ? ref : _ref;
+  const {
+    tabIndex,
+    isFocused,
+    isDisabled,
+    handleKeyDown,
+    handleClick
+  } = useMenuItem({
+    domElementRef: divRef,
+    id,
+    isDisabled: propsIsDisabled,
+    onClick: onClick
+  });
+  return /*#__PURE__*/React__default.createElement(StyledItem, _extends$1({
+    role: "option"
+  }, forwardedProps, {
+    id: id,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isFocused: isFocused,
+    $isHovered: isHovered,
+    $isSelected: false,
+    className: classNames(Item.className, className),
+    onClick: handleClick,
+    ref: divRef,
+    onKeyDown: handleKeyDown,
+    tabIndex: tabIndex
+  }), children);
+});
 
 /**
  * The Item component.
@@ -10643,8 +10998,12 @@ const Item = /*#__PURE__*/forwardRef((props, ref) => {
     value
   } = props;
   const focusContext = useContext(FocusWithinGroupContext);
+  const isListbox = focusContext.state.listRole === 'listbox';
   if (!focusContext.state.filter) {
-    return /*#__PURE__*/React__default.createElement(RenderedItem, _extends$1({}, props, {
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, props, {
+      value: props.value,
+      ref: ref
+    })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends$1({}, props, {
       ref: ref
     }));
   }
@@ -10654,15 +11013,24 @@ const Item = /*#__PURE__*/forwardRef((props, ref) => {
     caseSensitive
   } = focusContext.state.filter;
   if (!filterValue) {
-    return /*#__PURE__*/React__default.createElement(RenderedItem, _extends$1({}, props, {
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, props, {
+      value: props.value,
+      ref: ref
+    })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends$1({}, props, {
       ref: ref
     }));
   } else if (caseSensitive && (type === 'startsWith' && value.startsWith(filterValue) || type === 'contains' && value.includes(filterValue) || type === 'endsWith' && value.endsWith(filterValue))) {
-    return /*#__PURE__*/React__default.createElement(RenderedItem, _extends$1({}, props, {
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, props, {
+      value: props.value,
+      ref: ref
+    })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends$1({}, props, {
       ref: ref
     }));
   } else if (!caseSensitive && (type === 'startsWith' && value.toLowerCase().startsWith(filterValue.toLowerCase()) || type === 'contains' && value.toLowerCase().includes(filterValue.toLowerCase()) || type === 'endsWith' && value.toLowerCase().endsWith(filterValue.toLowerCase()))) {
-    return /*#__PURE__*/React__default.createElement(RenderedItem, _extends$1({}, props, {
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, props, {
+      value: props.value,
+      ref: ref
+    })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends$1({}, props, {
       ref: ref
     }));
   }
@@ -10944,6 +11312,10 @@ const ListboxReducer = (state, action) => {
           activedescendant: action.payload.activedescendant
         });
       }
+    case ListboxActionType.UPDATE_OPTIONS:
+      {
+        return _objectSpread2(_objectSpread2({}, state), action.payload);
+      }
     default:
       return state;
   }
@@ -12055,6 +12427,10 @@ const StyledTextField = styled.div`
     $variant
   } = _ref;
   return css`
+    ${$isDisabled ? css`
+          pointer-events: none;
+        ` : ''}
+
     .redsift-text-field__label {
       font-family: var(--redsift-typography-input-text-font-family);
       font-size: var(--redsift-typography-input-text-font-size);
@@ -12076,11 +12452,8 @@ const StyledTextField = styled.div`
             max-width: calc(100% - 24px);
             transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);
           ` : css`
-            font-family: var(--redsift-typography-body2-font-family);
-            font-size: var(--redsift-typography-body2-font-size);
-            font-weight: var(--redsift-typography-body2-font-weight);
             max-width: calc(133% - 32px);
-            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, -1px) scale(0.75);
+            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);
           `}
 
       ${$isDisabled ? css`
@@ -12139,7 +12512,7 @@ const StyledTextField = styled.div`
     .redsift-text-field-input-wrapper__fieldset {
       border-style: solid;
       bottom: 0;
-      left: 0;
+      left: 1px;
       margin: 0;
       min-width: 0%;
       overflow: hidden;
@@ -12171,7 +12544,7 @@ const StyledTextField = styled.div`
     .redsift-text-field-input-wrapper-fieldset__legend {
       display: block;
       float: unset;
-      font-size: 0.7em;
+      font-size: 11px;
       height: 11px;
       overflow: hidden;
       padding: 0;
@@ -12274,10 +12647,8 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   } = useFocusWithin({
     onFocusWithinChange: isFocusWithin => setFocusWithin(isFocusWithin)
   });
-  const [value, setValue] = useState(propsValue !== null && propsValue !== void 0 ? propsValue : defaultValue);
-  useEffect(() => {
-    setValue(propsValue !== null && propsValue !== void 0 ? propsValue : defaultValue);
-  }, [propsValue, defaultValue]);
+  const [value, setValue] = useState(defaultValue);
+  const isControlled = propsValue !== null && propsValue !== undefined;
   warnIfNoAccessibleLabelFound(props, [label]);
   const handleChange = useCallback(event => {
     if (isDisabled || isReadOnly) {
@@ -12305,12 +12676,12 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     setValue('');
   }, [onChange]);
   return /*#__PURE__*/React__default.createElement(StyledTextField, _extends$1({}, focusWithinProps, forwardedProps, {
-    $hasContent: isFocusWithin || Boolean(value) || Boolean(placeholder),
+    $hasContent: isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder),
     $hasLeftIcon: Boolean(leftIcon),
     $isColored: isColored,
     $isDisabled: isDisabled,
     $isFocusVisible: isFocusVisible,
-    $isInvalid: isInvalid || isRequired && !value,
+    $isInvalid: isInvalid || isRequired && !(isControlled ? propsValue : value),
     $isRequired: isRequired,
     $isFocused: isFocused,
     $variant: variant,
@@ -12320,7 +12691,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${TextField.className}__label`
   }, /*#__PURE__*/React__default.createElement("span", null, label)) : null, /*#__PURE__*/React__default.createElement("div", {
     className: `${TextField.className}__input-wrapper`
-  }, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({}, leftIcon, {
+  }, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
+    color: isDisabled ? 'question' : 'black'
+  }, leftIcon, {
     "aria-hidden": "true",
     className: "left"
   })) : null, /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, {
@@ -12333,7 +12706,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       onFocusProps === null || onFocusProps === void 0 ? void 0 : onFocusProps(event);
     },
     "aria-disabled": isDisabled,
-    "aria-invalid": isInvalid || isRequired && !value,
+    "aria-invalid": isInvalid || isRequired && !(isControlled ? propsValue : value),
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-readonly": isReadOnly,
@@ -12346,31 +12719,32 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     placeholder: placeholder,
     ref: inputRef,
     type: type,
-    value: value
+    value: isControlled ? propsValue : value
   })), hasClearButton || internal || after ? /*#__PURE__*/React__default.createElement(Flexbox, {
     className: `${TextField.className}-input-wrapper__toolbar`,
     gap: "8px"
   }, hasClearButton ? /*#__PURE__*/React__default.createElement(IconButton, _extends$1({
     "aria-label": "Clear",
     color: "question",
+    isDisabled: isDisabled,
     icon: mdiClose
   }, hasClearButton !== true && hasClearButton, {
     onClick: handleClear,
     className: "right clear"
-  })) : null, typeof internal === 'function' ? internal(value, isDisabled, isInvalid || isRequired && !value, isRequired) : internal, (hasClearButton || internal) && after ? /*#__PURE__*/React__default.createElement("span", {
+  })) : 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)'
     }
-  }) : null, typeof after === 'function' ? after(value, isDisabled, isInvalid || isRequired && !value, isRequired) : after) : null, label ? /*#__PURE__*/React__default.createElement("fieldset", {
+  }) : 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",
     className: `${TextField.className}-input-wrapper__fieldset`
   }, /*#__PURE__*/React__default.createElement("legend", {
     className: `${TextField.className}-input-wrapper-fieldset__legend`
-  }, /*#__PURE__*/React__default.createElement("span", null, label))) : null));
+  }, label ? /*#__PURE__*/React__default.createElement("span", null, label) : null))));
 });
 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, 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, PresentationColorPalette, Product, ProductColorPalette, ProductLogo, ProductName, 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, 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, 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, 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, isComponent, nextId, partitionComponents, resetId, setPrefix, sizeToDimension$1 as sizeToDimension, uniqueId, useAppSidePanel, useBoundingClientRect, useFocusOnList, useFocusOnListItem, useId$1 as useId, useSideNavigationMenuBar, useWindowSize, warnIfNoAccessibleLabelFound };
 //# sourceMappingURL=index.js.map