@redsift/design-system 9.0.0-alpha.0 → 9.0.0-alpha.10

package/index.js

@@ -1,10 +1,10 @@
 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, 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, useMemo, useId as useId$1, useReducer, useLayoutEffect } from 'react';
+import React__default, { useState, useEffect, forwardRef, useRef, useCallback, useContext, useReducer, useMemo, useLayoutEffect } from 'react';
 import classNames from 'classnames';
-import { 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 styled, { css, keyframes } from 'styled-components';
 import { useFocusRing } from '@react-aria/focus';
 import * as ReactDOM from 'react-dom';
@@ -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,11 +35,23 @@ const ProductName = {
   'brand-trust': 'Brand Trust',
   certificates: 'Certificates',
   ondmarc: 'OnDMARC',
+  pulse: 'Pulse',
   radar: 'RADAR',
   'rojo-ds': 'ROJO DS',
   'vendor-secure': 'Vendor Secure',
   website: 'Website'
 };
+const ProductLogo = {
+  asm: rsiAsmHorizontal,
+  'brand-trust': rsiBrandTrustHorizontal,
+  certificates: rsiCertificatesHorizontal,
+  ondmarc: rsiOndmarcHorizontal,
+  pulse: rsiPulseHorizontal,
+  radar: rsiRadarHorizontal,
+  'rojo-ds': rsiRojoDsHorizontal,
+  'vendor-secure': rsiVendorSecureHorizontal,
+  website: rsiRedSiftHorizontal
+};
 
 /**
  * Color palette.
@@ -477,6 +490,44 @@ const RedsiftTypographyDatagridCellFontSize = '16px';
 const RedsiftTypographyDatagridCellFontWeight = '400';
 const RedsiftTypographyDatagridCellLineHeight = '24px';
 
+let globalPrefix = 'rsi';
+let lastId = 0;
+const nextId = localPrefix => {
+  lastId++;
+  return `${localPrefix || globalPrefix}${lastId}`;
+};
+const resetId = () => {
+  lastId = 0;
+};
+const setPrefix = newPrefix => {
+  globalPrefix = newPrefix;
+};
+const getIds = (count, prefix) => {
+  const ids = [];
+  for (let i = 0; i < count; i++) {
+    ids.push(nextId(prefix));
+  }
+  return ids;
+};
+function usePrevious$1(value) {
+  const ref = React__default.useRef();
+  React__default.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+const useId$1 = function () {
+  let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  let prefix = arguments.length > 1 ? arguments[1] : undefined;
+  const idsListRef = React__default.useRef([]);
+  const prevCount = usePrevious$1(count);
+  const prevPrefix = usePrevious$1(prefix);
+  if (count !== prevCount || prevPrefix !== prefix) {
+    idsListRef.current = getIds(count, prefix);
+  }
+  return idsListRef.current;
+};
+
 /**
  * Display a warning if no label was found for screen readers and assistive technologies.
  *
@@ -945,25 +996,41 @@ const StyledIcon = styled.span`
     $lineHeight
   } = _ref2;
   return css`
-    width: ${$width}px;
-    height: ${$height}px;
-    font-size: ${$fontSize}px;
-    line-height: ${$lineHeight}px;
+    ${$width ? css`
+          width: ${$width}px;
+        ` : ''}
+    ${$height ? css`
+          height: ${$height}px;
+        ` : ''}
+    ${$fontSize ? css`
+          font-size: ${$fontSize}px;
+        ` : ''}
+    ${$lineHeight ? css`
+          line-height: ${$lineHeight}px;
+        ` : ''}
 
     & .redsift-badge-standard {
       grid-column: 1;
       grid-row: 1;
       margin-right: unset;
-      margin-left: ${$width * 0.75}px;
-      margin-top: ${$height * 0.1 - 4}px;
+      ${$width ? css`
+            margin-left: ${$width * 0.75}px;
+          ` : ''}
+      ${$height ? css`
+            margin-top: ${$height * 0.1 - 4}px;
+          ` : ''}
     }
 
     & .redsift-badge-dot {
       grid-column: 1;
       grid-row: 1;
       margin-right: unset;
-      margin-left: ${$width * 0.8}px;
-      margin-top: ${$height * 0.2 - 3}px;
+      ${$width ? css`
+            margin-left: ${$width * 0.8}px;
+          ` : ''}
+      ${$height ? css`
+            margin-top: ${$height * 0.2 - 3}px;
+          ` : ''}
     }
   `;
 }}
@@ -1400,7 +1467,8 @@ const DEFAULT_PROPS$L = {
  * For a semantic button that looks like a link, please use the LinkButton component.
  */
 const Button = /*#__PURE__*/forwardRef((props, ref) => {
-  const buttonRef = ref || useRef();
+  const _ref = useRef();
+  const buttonRef = ref || _ref;
   const {
       children,
       className,
@@ -1909,30 +1977,46 @@ 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: fixed;
+  position: sticky;
   top: 0;
   z-index: var(--redsift-layout-z-index-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);
+          width: calc(100vw - 250px);
         ` : 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;
         ` : '';
@@ -2149,6 +2233,7 @@ const StyledAppSidePanel = styled.div`
   align-items: center;
   background-color: var(--redsift-side-navigation-color-background);
   border-right: 4px solid #e1e1e1;
+  box-sizing: border-box;
   flex-direction: column;
   height: 100%;
   left: 0px;
@@ -2160,7 +2245,7 @@ const StyledAppSidePanel = styled.div`
   let {
     $variant
   } = _ref;
-  return $variant === AppSidePanelVariant.shrinked ? '64px' : '250px';
+  return $variant === AppSidePanelVariant.shrinked ? '68px' : '254px';
 }};
   z-index: var(--redsift-layout-z-index-side-panel);
 
@@ -2175,7 +2260,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;
@@ -2190,6 +2280,8 @@ const StyledAppSidePanel = styled.div`
   }
 
   .redsift-app-side-panel-header__logo {
+    align-items: center;
+    display: flex;
     grid-column: 1;
     grid-row: 1;
     transition: opacity 300ms ease-out;
@@ -2199,12 +2291,19 @@ const StyledAppSidePanel = styled.div`
   } = _ref3;
   return $variant === AppSidePanelVariant.shrinked ? '0' : '1';
 }};
-    max-height: 56px;
+
+    height: 56px;
+    @media (max-width: 1080px) {
+      height: 36px;
+    }
   }
 
   .redsift-app-side-panel-header__logo > img {
-    max-height: 60px;
-    max-width: 200px;
+    max-height: 56px;
+    @media (max-width: 1080px) {
+      max-height: 36px;
+    }
+    max-width: 195px;
   }
 
   .redsift-app-side-panel-header__expand-button {
@@ -2291,6 +2390,9 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
       iconButtonRef
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$F);
+  const {
+    width
+  } = useWindowSize();
   const appContainerState = useContext(AppContainerContext);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$3);
   useEffect(() => {
@@ -2303,6 +2405,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
     appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.expandSidePanel();
   };
   const computedVariant = appContainerState ? appContainerState.sidePanelVariant : variant;
+  const product = appContainerState && appContainerState.product;
   return /*#__PURE__*/React__default.createElement(StyledAppSidePanel, _extends$1({}, forwardedProps, {
     $variant: computedVariant,
     className: classNames(AppSidePanel.className, className),
@@ -2314,7 +2417,12 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.isValidElement(logo) ? logo : logo ? /*#__PURE__*/React__default.createElement("img", {
     src: logo.src,
     alt: logo.alt
-  }) : null), appContainerState !== null && appContainerState !== void 0 && appContainerState.hasAppBar || onOpen ? /*#__PURE__*/React__default.createElement(IconButton, _extends$1({
+  }) : product && (typeof product === 'string' || product.logo) ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: typeof product === 'string' ? ProductLogo[product] : product.logo,
+    size: {
+      height: width && width > 1080 ? 41 : 36
+    }
+  }) : null), /*#__PURE__*/React__default.createElement(IconButton, _extends$1({
     className: `${AppSidePanel.className}-header__expand-button`
   }, iconButtonProps, {
     "aria-label": stringFormatter.format('expand'),
@@ -2323,7 +2431,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
     ref: iconButtonRef,
     color: "question",
     isDisabled: computedVariant === 'standard'
-  })) : null), featuredElements ? /*#__PURE__*/React__default.createElement("div", {
+  }))), featuredElements ? /*#__PURE__*/React__default.createElement("div", {
     className: `${AppSidePanel.className}__featured`
   }, featuredElements) : null, children);
 });
@@ -2378,6 +2486,7 @@ const StyledSideNavigationMenuItemIndicatorContainer = styled.div`
   min-width: 4px;
 `;
 const StyledSideNavigationMenuItemIndicator = styled.div`
+  position: relative;
   width: 4px;
   height: 38px;
   border-radius: 0px 4px 4px 0px;
@@ -2496,10 +2605,11 @@ const StyledSideNavigationMenuItem = styled.a`
            */
 
           background-color: var(--redsift-side-navigation-color-background);
-          height: 30px;
+          height: 38px;
           margin-bottom: 16px;
+          margin-left: -4px;
           transition: padding 300ms ease-out;
-          padding: 5px 16px 5px ${$variant === SideNavigationMenuBarVariant.shrinked ? '12px' : '20px'};
+          padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '24px'};
 
           .redsift-icon.first {
             box-sizing: unset;
@@ -2536,6 +2646,7 @@ const BadgeVariant = {
  */
 const StyledBadge = styled.div`
   ${baseStyling}
+  box-sizing: content-box;
 
   ${_ref => {
   let {
@@ -2761,8 +2872,6 @@ const StyledSideNavigationMenu = styled.div`
   } = _ref;
   return css`
     .redsift-side-navigation-menu__menu-container > button {
-      background-color: var(--redsift-side-navigation-color-background);
-      border: none;
       ${!$isDisabled ? css`
             &,
             .redsift-icon.first {
@@ -2775,6 +2884,8 @@ const StyledSideNavigationMenu = styled.div`
             }
           `}
       align-items: center;
+      background-color: var(--redsift-side-navigation-color-background);
+      border: none;
       border-radius: 0 4px 4px 0;
       display: flex;
       font-family: var(--redsift-typography-body-font-family);
@@ -2785,10 +2896,10 @@ 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% + 4px);
+      width: calc(100% + ${$variant === SideNavigationMenuBarVariant.shrinked ? '0px' : '4px'});
 
       :hover,
       :focus-visible {
@@ -2904,16 +3015,24 @@ const StyledSideNavigationMenu = styled.div`
     margin: unset;
     padding: unset;
     margin-left: -4px;
-    width: calc(100% + 4px);
+
+    ${_ref5 => {
+  let {
+    $variant
+  } = _ref5;
+  return css`
+      width: calc(100% + ${$variant === SideNavigationMenuBarVariant.shrinked ? '0px' : '4px'});
+    `;
+}}
     margin-bottom: 16px;
     max-width: 241px;
     transition: height 300ms ease-out;
     overflow: hidden;
-    ${_ref5 => {
+    ${_ref6 => {
   let {
     $isExpanded,
     $numberOfChildren
-  } = _ref5;
+  } = _ref6;
   return $isExpanded ? css`
             height: ${$numberOfChildren * 38}px;
           ` : css`
@@ -2947,7 +3066,9 @@ const SideNavigationMenuReducer = (state, action) => {
 /**
  * Component style.
  */
-const StyledAppContainer = styled.div``;
+const StyledAppContainer = styled.div`
+  box-sizing: content-box;
+`;
 
 const _excluded$C = ["children", "className", "locale", "product"];
 const COMPONENT_NAME$C = 'AppContainer';
@@ -2965,21 +3086,6 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
       product
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$C);
-  const {
-    hasAppBar,
-    hasAppSidePanel,
-    hasAppContent
-  } = useMemo(() => {
-    const [[appBar], [appSidePanel], [appContent]] = partitionComponents(React__default.Children.toArray(children), [isComponent('AppBar'), isComponent('AppSidePanel'), isComponent('AppContent')]);
-    return {
-      hasAppBar: Boolean(appBar),
-      hasAppSidePanel: Boolean(appSidePanel),
-      hasAppContent: Boolean(appContent)
-    };
-  }, [children]);
-  if ((hasAppBar || hasAppSidePanel || hasAppContent) && !(hasAppBar && hasAppSidePanel && hasAppContent)) {
-    console.warn('Missing AppSidePanel, AppBar or AppContent inside AppContainer. These components are meant to work together.');
-  }
   const [sidePanelVariant, setSidePanelVariant] = useState(AppSidePanelVariant.standard);
   const [breadcrumbs, setBreadcrumbs] = useState();
   const state = {
@@ -2989,9 +3095,6 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
     expandSidePanel() {
       setSidePanelVariant(AppSidePanelVariant.standard);
     },
-    hasAppBar,
-    hasAppSidePanel,
-    hasAppContent,
     setBreadcrumbs(breadcrumbs) {
       setBreadcrumbs(breadcrumbs);
     },
@@ -3042,7 +3145,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
       tabIndex
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$B);
-  const _id = useId$1();
+  const [_id] = useId$1();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   warnIfNoAccessibleLabelFound(props);
   const appContainerState = useContext(AppContainerContext);
@@ -3356,6 +3459,7 @@ SideNavigationMenu.displayName = COMPONENT_NAME$B;
  */
 const StyledSideNavigationMenuBar = styled.nav`
   background-color: var(--redsift-side-navigation-color-background);
+  box-sizing: content-box;
   overflow-x: hidden;
   overflow-y: auto;
   scrollbar-gutter: stable;
@@ -3683,7 +3787,6 @@ const useAppSidePanel = _ref => {
     isActive
   });
   return {
-    logo: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Red Sift"),
     children: /*#__PURE__*/React__default.createElement(SideNavigationMenuBar, _extends$1({}, sideNavigationMenuBarProps, {
       "aria-label": "Navigation"
     }))
@@ -3856,6 +3959,7 @@ const DEFAULT_PROPS$x = {};
  * The AppBar component.
  */
 const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
+  var _breadcrumbs$, _appContainerState$pr;
   const {
       breadcrumbs,
       children,
@@ -3866,12 +3970,19 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       title: propsTitle
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$w);
+  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),
@@ -3897,12 +4008,13 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
   }, propsTitle) : breadcrumbs ? /*#__PURE__*/React__default.createElement(Breadcrumbs, {
     "aria-label": "Breadcrumb"
   }, appContainerState && appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked ? /*#__PURE__*/React__default.createElement(Breadcrumbs.Item, {
-    href: "/"
-  }, ProductName[appContainerState.product]) : null, breadcrumbs.map((breadcrumbItem, index) => /*#__PURE__*/React__default.createElement(Breadcrumbs.Item, _extends$1({
+    href: "/",
+    as: ((_breadcrumbs$ = breadcrumbs[0]) === null || _breadcrumbs$ === void 0 ? void 0 : _breadcrumbs$.as) || 'a'
+  }, 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.href === undefined,
-    as: index === breadcrumbs.length - 1 ? 'h1' : breadcrumbItem.href === undefined ? 'span' : 'a'
+    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", {
@@ -3917,12 +4029,11 @@ AppBar.displayName = COMPONENT_NAME$x;
  * Component style.
  */
 const StyledAppContent = styled.main`
+  padding: 16px 64px;
   ${baseContainer}
 
   box-sizing: border-box;
-  margin-top: 92px;
   min-height: calc(100vh - 92px);
-  padding: 16px 64px;
 
   @media screen and (max-width: 768px) {
     padding: 0px;
@@ -3933,11 +4044,11 @@ const StyledAppContent = styled.main`
     $isSidePanelCollapsed
   } = _ref;
   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);
+          transform: translate(68px);
+          width: calc(100% - 68px);
         `;
 }}
 
@@ -3951,7 +4062,7 @@ const StyledAppContent = styled.main`
 }}
 `;
 
-const _excluded$v = ["children", "className", "product"];
+const _excluded$v = ["children", "className"];
 const COMPONENT_NAME$w = 'AppContent';
 const CLASSNAME$w = 'redsift-app-content';
 const DEFAULT_PROPS$w = {};
@@ -3962,8 +4073,7 @@ const DEFAULT_PROPS$w = {};
 const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
-      className,
-      product
+      className
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$v);
   const {
@@ -3973,7 +4083,6 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(StyledAppContent, _extends$1({}, forwardedProps, {
     $isLoaded: isLoaded,
     $isSidePanelCollapsed: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true,
-    $product: product,
     className: classNames(AppContent.className, className),
     ref: ref
   }), children);
@@ -4067,7 +4176,6 @@ const StyledCard = styled.div`
 
   display: flex;
   flex-direction: column;
-  padding: 16px;
 
   .redsift-card__header {
     align-items: flex-start;
@@ -4112,6 +4220,12 @@ const StyledCard = styled.div`
  * Component style.
  */
 const StyledCardHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  ${baseStyling}
+  ${baseFlexbox}
+
   color: var(--redsift-color-neutral-black);
 
   .redsift-card-header__header {
@@ -4123,10 +4237,6 @@ const StyledCardHeader = styled.div`
 
     .redsift-icon {
       color: var(--redsift-color-neutral-black);
-      padding-right: 8px;
-      font-size: 30px;
-      line-height: 30px;
-      height: 30px;
     }
   }
 
@@ -4167,7 +4277,7 @@ const StyledSkeleton = styled.div`
   height: fit-content;
   width: fit-content;
 
-  > * {
+  * {
     visibility: hidden;
   }
 
@@ -4367,7 +4477,7 @@ const Skeleton = Object.assign(BaseSkeleton, {
   Text: SkeletonText
 });
 
-const _excluded$q = ["children", "className", "header", "headingProps", "icon", "isLoading", "subheader"];
+const _excluded$q = ["children", "className", "header", "headingProps", "icon", "iconProps", "isLoading", "subheader"];
 const COMPONENT_NAME$r = 'CardHeader';
 const CLASSNAME$r = 'redsift-card-header';
 const DEFAULT_PROPS$r = {};
@@ -4382,6 +4492,7 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       header,
       headingProps,
       icon,
+      iconProps,
       isLoading,
       subheader
     } = props,
@@ -4395,7 +4506,7 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${CardHeader.className}__subheader`
   }, subheader)) : null, header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
-    variant: "h2",
+    variant: (headingProps === null || headingProps === void 0 ? void 0 : headingProps.variant) || 'h2',
     isLoaded: !isLoading,
     marginTop: "10px",
     marginBottom: "10px"
@@ -4404,10 +4515,11 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
     color: "black",
     className: `${CardHeader.className}__header`,
     variant: "h2"
-  }, headingProps), icon ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, headingProps), icon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
     icon: icon,
-    "aria-hidden": "true"
-  }) : null, header)) : null, children);
+    "aria-hidden": "true",
+    size: "large"
+  }, iconProps)) : null, header)) : null, children);
 });
 CardHeader.className = CLASSNAME$r;
 CardHeader.defaultProps = DEFAULT_PROPS$r;
@@ -5282,7 +5394,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;
   }
@@ -5407,6 +5519,7 @@ const StyledDetailedCard = styled.div`
   background-color: var(--redsift-color-neutral-white);
   border-radius: 4px;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
+  box-sizing: content-box;
   padding: 16px;
 
   .redsift-detailed-card__banner {
@@ -5485,11 +5598,16 @@ const StyledPill = styled.div`
 
   padding: 2px 8px;
   text-align: center;
-  word-break: ${_ref => {
+  
+  ${_ref => {
   let {
     $autoBreak
   } = _ref;
-  return $autoBreak ? 'break-word' : 'normal';
+  return !$autoBreak ? css`
+          text-wrap: nowrap;
+        ` : css`
+          word-break: break-word;
+        `;
 }};
 
   ${_ref2 => {
@@ -9259,7 +9377,8 @@ function useTooltip(_ref) {
   } = _ref;
   const arrowRef = useRef(null);
   const [isOpen, setIsOpen] = useState(propsIsOpen !== null && propsIsOpen !== void 0 ? propsIsOpen : defaultOpen);
-  const tooltipId = propsTooltipId !== null && propsTooltipId !== void 0 ? propsTooltipId : useId$1();
+  const [_id] = useId$1();
+  const tooltipId = propsTooltipId !== null && propsTooltipId !== void 0 ? propsTooltipId : _id;
   useEffect(() => {
     setIsOpen(propsIsOpen !== null && propsIsOpen !== void 0 ? propsIsOpen : defaultOpen);
   }, [propsIsOpen, defaultOpen]);
@@ -9671,9 +9790,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:
       {
@@ -9706,8 +9825,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), {}, {
@@ -10229,10 +10347,43 @@ const StyledGrid = styled.div`
   } = _ref;
   return inline ? 'inline-grid' : 'grid';
 }};
+  flex: 1;
 
   ${baseStyling}
   ${baseInternalSpacing}
   ${baseGrid}
+
+  ${_ref2 => {
+  let {
+    $divider
+  } = _ref2;
+  return $divider ? css`
+          overflow: hidden;
+          .redsift-grid-item {
+            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: 100vw;
+              block-size: 1px;
+              inset-inline-start: 0;
+              inset-block-start: calc(${Math.max(1, $divider.rowGap / 2)}px * -1);
+              z-index: 0;
+            }
+          }
+        ` : '';
+}}
 `;
 
 /**
@@ -10268,7 +10419,7 @@ GridItem.className = CLASSNAME$b;
 GridItem.defaultProps = DEFAULT_PROPS$b;
 GridItem.displayName = COMPONENT_NAME$b;
 
-const _excluded$c = ["children", "className"];
+const _excluded$c = ["children", "className", "divider", "gap"];
 const COMPONENT_NAME$a = 'Grid';
 const CLASSNAME$a = 'redsift-grid';
 const DEFAULT_PROPS$a = {};
@@ -10279,12 +10430,16 @@ const DEFAULT_PROPS$a = {};
 const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
-      className
+      className,
+      divider,
+      gap
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$c);
   return /*#__PURE__*/React__default.createElement(StyledGrid, _extends$1({}, forwardedProps, {
+    gap: divider ? `${divider.rowGap}px ${divider.colGap}px` : gap,
     className: classNames(BaseGrid.className, className),
-    ref: ref
+    ref: ref,
+    $divider: divider
   }), children);
 });
 BaseGrid.className = CLASSNAME$a;
@@ -10298,9 +10453,9 @@ const Grid = Object.assign(BaseGrid, {
  * Component style.
  */
 const StyledItem = styled.div`
-  height: 20px;
+  height: 36px;
   position: relative;
-  width: calc(100% - 32px);
+  width: 100%;
   padding: 8px 16px;
 
   ${baseStyling}
@@ -10308,6 +10463,7 @@ const StyledItem = styled.div`
   align-items: center;
   background: none;
   border: none;
+  box-sizing: border-box;
   display: inline-flex;
 
   ${_ref => {
@@ -10868,7 +11024,8 @@ const Listbox = /*#__PURE__*/forwardRef((props, ref) => {
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$6);
-  const id = (propsId !== null && propsId !== void 0 ? propsId : useId$1()).replace(/:/g, '');
+  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 [state, dispatch] = useReducer(ListboxReducer, _objectSpread2(_objectSpread2({}, LISTBOX_INITIAL_STATE), {}, {
@@ -12098,7 +12255,7 @@ const StyledTextField = styled.div`
 }}
 `;
 
-const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "className", "defaultValue", "hasClearButton", "after", "internal", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "value", "variant"];
+const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "className", "defaultValue", "hasClearButton", "after", "internal", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "type", "value", "variant"];
 const COMPONENT_NAME = 'TextField';
 const CLASSNAME = 'redsift-text-field';
 const DEFAULT_PROPS = {
@@ -12136,6 +12293,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       onClear,
       onFocus: onFocusProps,
       placeholder,
+      type,
       value: propsValue,
       variant
     } = props,
@@ -12167,8 +12325,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     }
     if (onChange) {
       onChange(event.target.value, name, event);
+    } else {
+      setValue(event.target.value);
     }
-    setValue(event.target.value);
   }, [onChange]);
   const handleClear = useCallback(() => {
     if (isDisabled || isReadOnly) {
@@ -12226,7 +12385,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     onChange: handleChange,
     placeholder: placeholder,
     ref: inputRef,
-    type: "text",
+    type: type,
     value: value
   })), hasClearButton || internal || after ? /*#__PURE__*/React__default.createElement(Flexbox, {
     className: `${TextField.className}-input-wrapper__toolbar`,
@@ -12253,5 +12412,5 @@ TextField.className = CLASSNAME;
 TextField.defaultProps = DEFAULT_PROPS;
 TextField.displayName = COMPONENT_NAME;
 
-export { ActiveDescendantListbox, Alert, AlertVariant, AlignContent, AlignItems, AlignSelf, AppBar, AppContainer, AppContainerContext, AppContent, AppSidePanel, AppSidePanelVariant, Badge, BadgeVariant, BaseBreadcrumbs, BaseGrid, BaseSkeleton, BreadcrumbItem, Breadcrumbs, Button, 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, 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, partitionComponents, sizeToDimension$1 as sizeToDimension, uniqueId, useAppSidePanel, useBoundingClientRect, useFocusOnList, useFocusOnListItem, useSideNavigationMenuBar, useWindowSize, warnIfNoAccessibleLabelFound };
+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 };
 //# sourceMappingURL=index.js.map