@redsift/design-system 10.3.0-muiv5-alpha.6 → 10.3.0-muiv5-alpha.7

package/index.js

@@ -4765,7 +4765,7 @@ function useTheme(theme) {
   return contextTheme;
 }
 
-const _excluded$Y = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps", "theme"];
+const _excluded$W = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps", "theme"];
 const COMPONENT_NAME$S = 'Icon';
 const CLASSNAME$S = 'redsift-icon';
 const sizeToDimension$1 = size => {
@@ -4834,7 +4834,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       svgProps,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$W);
   const theme = useTheme(propsTheme);
   const {
     width,
@@ -5147,7 +5147,7 @@ var spinnerGreyL2 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53M
 
 var spinnerGreyL3 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iI2UwZTBlMCIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiNlMGUwZTAiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
-const _excluded$X = ["aria-hidden", "aria-label", "className", "color", "isColored", "size", "theme"];
+const _excluded$V = ["aria-hidden", "aria-label", "className", "color", "isColored", "size", "theme"];
 const COMPONENT_NAME$R = 'Spinner';
 const CLASSNAME$R = 'redsift-shield';
 const sizeToDimension = size => {
@@ -5189,7 +5189,7 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
       size = SpinnerSize.medium,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$X);
+    forwardedProps = _objectWithoutProperties(props, _excluded$V);
   const theme = useTheme(propsTheme);
   const color = propsColor !== null && propsColor !== void 0 ? propsColor : isColored ? 'primary' : 'grey-l3';
   const {
@@ -5255,7 +5255,7 @@ const StyledGradientBorder = styled.div`
 }};
 `;
 
-const _excluded$W = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isHovered", "isLoading", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "theme", "variant"];
+const _excluded$U = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isHovered", "isLoading", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "theme", "variant"];
 const COMPONENT_NAME$Q = 'Button';
 const CLASSNAME$Q = 'redsift-button';
 
@@ -5286,7 +5286,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       variant: propsVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$W);
+    forwardedProps = _objectWithoutProperties(props, _excluded$U);
   const isDisabled = isLoading || propsIsDisabled || disabled;
   const theme = useTheme(propsTheme);
   const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
@@ -5358,7 +5358,7 @@ const StyledIconButton = styled(StyledButton)`
 }}
 `;
 
-const _excluded$V = ["className", "color", "disabled", "icon", "iconProps", "isActive", "isDisabled", "isHovered", "isLoading", "theme", "variant"];
+const _excluded$T = ["className", "color", "disabled", "icon", "iconProps", "isActive", "isDisabled", "isHovered", "isLoading", "theme", "variant"];
 const COMPONENT_NAME$P = 'IconButton';
 const CLASSNAME$P = 'redsift-icon-button';
 
@@ -5383,7 +5383,7 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       variant: propsVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$V);
+    forwardedProps = _objectWithoutProperties(props, _excluded$T);
   const isDisabled = props.isLoading || propsIsDisabled || disabled;
   const theme = useTheme(propsTheme);
   const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
@@ -5605,7 +5605,7 @@ const StyledText = styled.span`
 }}
 `;
 
-const _excluded$U = ["as", "children", "className", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "noWrap", "theme", "variant"];
+const _excluded$S = ["as", "children", "className", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "noWrap", "theme", "variant"];
 const COMPONENT_NAME$O = 'Text';
 const CLASSNAME$O = 'redsift-text';
 
@@ -5626,7 +5626,7 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$U);
+    forwardedProps = _objectWithoutProperties(props, _excluded$S);
   const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledText, _extends$1({
     as: as
@@ -5695,7 +5695,7 @@ const StyledFlexbox = styled.div`
 }}
 `;
 
-const _excluded$T = ["as", "children", "className", "divider", "gap", "theme"];
+const _excluded$R = ["as", "children", "className", "divider", "gap", "theme"];
 const COMPONENT_NAME$N = 'Flexbox';
 const CLASSNAME$N = 'redsift-flex-box';
 
@@ -5711,7 +5711,7 @@ const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
       gap = '16px',
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$T);
+    forwardedProps = _objectWithoutProperties(props, _excluded$R);
   const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     value: {
@@ -5730,7 +5730,7 @@ const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
 Flexbox.className = CLASSNAME$N;
 Flexbox.displayName = COMPONENT_NAME$N;
 
-const _excluded$S = ["children", "className", "isClosable", "isClosed", "onClose", "theme", "title", "variant", "styleVariant"];
+const _excluded$Q = ["children", "className", "isClosable", "isClosed", "onClose", "theme", "title", "variant", "styleVariant"];
 const COMPONENT_NAME$M = 'Alert';
 const CLASSNAME$M = 'redsift-alert';
 const getVariant$1 = (variant, styleVariant, theme) => {
@@ -5774,7 +5774,7 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
       variant: propsVariant,
       styleVariant: propsStyleVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$S);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Q);
   const theme = useTheme(propsTheme);
   const variant = Object.values(AlertVariant).includes(propsVariant) ? propsVariant : 'info';
   const styleVariant = Object.values(AlertStyleVariant).includes(propsStyleVariant) ? propsStyleVariant : 'default';
@@ -6008,52 +6008,40 @@ const StyledHeading = styled.span`
 
   ${_ref => {
   let {
-    $variant,
+    $color,
     $theme
   } = _ref;
-  return $variant === 'h1' ? css`
-          color: var(--redsift-color-${$theme}-components-text-primary);
-          font-family: var(--redsift-typography-h1-font-family);
-          font-size: var(--redsift-typography-h1-font-size);
-          font-weight: var(--redsift-typography-h1-font-weight);
-          line-height: var(--redsift-typography-h1-line-height);
-        ` : $variant === 'h2' ? css`
-          color: var(--redsift-color-${$theme}-components-text-primary);
-          font-family: var(--redsift-typography-h2-font-family);
-          font-size: var(--redsift-typography-h2-font-size);
-          font-weight: var(--redsift-typography-h2-font-weight);
-          line-height: var(--redsift-typography-h2-line-height);
-        ` : $variant === 'h3' ? css`
-          color: var(--redsift-color-${$theme}-components-text-primary);
-          font-family: var(--redsift-typography-h3-font-family);
-          font-size: var(--redsift-typography-h3-font-size);
-          font-weight: var(--redsift-typography-h3-font-weight);
-          line-height: var(--redsift-typography-h3-line-height);
-        ` : $variant === 'h4' ? css`
-          color: var(--redsift-color-${$theme}-components-text-primary);
-          font-family: var(--redsift-typography-h4-font-family);
-          font-size: var(--redsift-typography-h4-font-size);
-          font-weight: var(--redsift-typography-h4-font-weight);
-          line-height: var(--redsift-typography-h4-line-height);
-        ` : $variant === 'h5' ? css`
-          color: var(--redsift-color-${$theme}-components-text-primary);
-          font-family: var(--redsift-typography-h5-font-family);
-          font-size: var(--redsift-typography-h5-font-size);
-          font-weight: var(--redsift-typography-h5-font-weight);
-          line-height: var(--redsift-typography-h5-line-height);
+  return $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-notifications-${$color}-primary);
+        ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-neutral-${$color});
+        ` : Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-product-${$color});
         ` : css`
-          color: var(--redsift-color-${$theme}-components-text-primary);
-          font-family: var(--redsift-typography-body-font-family);
-          font-size: var(--redsift-typography-body-font-size);
-          font-weight: var(--redsift-typography-body-font-weight);
-          line-height: var(--redsift-typography-body-line-height);
+          color: ${$color || css`var(--redsift-color-${$theme}-components-text-primary)`};
         `;
 }}
 
   ${_ref2 => {
   let {
-    $noWrap
+    $variant,
+    $fontFamily,
+    $fontSize,
+    $fontWeight,
+    $lineHeight
   } = _ref2;
+  return css`
+    font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`var(--redsift-typography-${$variant !== null && $variant !== void 0 ? $variant : 'body'}-font-family)`};
+    font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant !== null && $variant !== void 0 ? $variant : 'body'}-font-size)`};
+    font-weight: ${$fontWeight ? $fontWeight : css`var(--redsift-typography-${$variant !== null && $variant !== void 0 ? $variant : 'body'}-font-weight)`};
+    line-height: ${$lineHeight ? $lineHeight : css`var(--redsift-typography-${$variant !== null && $variant !== void 0 ? $variant : 'body'}-line-height)`};
+  `;
+}}
+
+  ${_ref3 => {
+  let {
+    $noWrap
+  } = _ref3;
   return $noWrap ? css`
           overflow: hidden;
           text-overflow: ellipsis;
@@ -6062,7 +6050,7 @@ const StyledHeading = styled.span`
 }}
 `;
 
-const _excluded$R = ["as", "children", "className", "noWrap", "theme", "variant"];
+const _excluded$P = ["as", "children", "className", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "noWrap", "theme", "variant"];
 const COMPONENT_NAME$L = 'Heading';
 const CLASSNAME$L = 'redsift-heading';
 
@@ -6074,11 +6062,16 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
       as,
       children,
       className,
+      color,
+      fontFamily = FontFamily.poppins,
+      fontSize,
+      fontWeight,
+      lineHeight,
       noWrap,
       theme: propsTheme,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$R);
+    forwardedProps = _objectWithoutProperties(props, _excluded$P);
   const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledHeading, _extends$1({
     as: as
@@ -6087,6 +6080,11 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref,
     $noWrap: noWrap,
     $theme: theme,
+    $color: color,
+    $fontFamily: fontFamily,
+    $fontSize: fontSize,
+    $fontWeight: fontWeight,
+    $lineHeight: lineHeight,
     $variant: variant ? variant : as === 'span' ? 'body' : as
   }), children);
 });
@@ -6301,7 +6299,7 @@ const StyledAppSidePanel = styled.div`
 
 // ${({ $theme }) => css`var(--redsift-color-${$theme}-components-side-navigation-background)`};
 
-const _excluded$Q = ["children", "className", "featuredElements", "iconButtonProps", "iconButtonRef", "logo", "onOpen", "theme", "variant"];
+const _excluded$O = ["children", "className", "featuredElements", "iconButtonProps", "iconButtonRef", "logo", "onOpen", "theme", "variant"];
 const COMPONENT_NAME$K = 'AppSidePanel';
 const CLASSNAME$K = 'redsift-app-side-panel';
 
@@ -6320,7 +6318,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       variant = AppSidePanelVariant.standard
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$O);
   const {
     width
   } = useWindowSize();
@@ -6679,7 +6677,7 @@ const StyledBadge = styled.div`
 }}
 `;
 
-const _excluded$P = ["autoBreak", "children", "className", "color", "isReversed", "theme", "variant"];
+const _excluded$N = ["autoBreak", "children", "className", "color", "isReversed", "theme", "variant"];
 const COMPONENT_NAME$J = 'Badge';
 const CLASSNAME$J = 'redsift-badge';
 
@@ -6696,7 +6694,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       variant: propsVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$P);
+    forwardedProps = _objectWithoutProperties(props, _excluded$N);
   const theme = useTheme(propsTheme);
   const color = [...Object.values(NotificationsColorPalette), ...Object.values(PresentationColorPalette)].includes(propsColor) ? propsColor : 'question';
   const variant = Object.values(BadgeVariant).includes(propsVariant) ? propsVariant : 'dot';
@@ -6713,7 +6711,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
 Badge.className = CLASSNAME$J;
 Badge.displayName = COMPONENT_NAME$J;
 
-const _excluded$O = ["as", "badge", "badgeProps", "children", "className", "hasBorder", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "theme"];
+const _excluded$M = ["as", "badge", "badgeProps", "children", "className", "hasBorder", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "theme"];
 const COMPONENT_NAME$I = 'SideNavigationMenuItem';
 const CLASSNAME$I = 'redsift-side-navigation-menu-item';
 
@@ -6741,7 +6739,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
       tabIndex,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$O);
+    forwardedProps = _objectWithoutProperties(props, _excluded$M);
   warnIfNoAccessibleLabelFound(props, [children], 'SideNavigationMenuItem');
   const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);
   const sideNavigationMenuContext = useContext(SideNavigationMenuContext);
@@ -7043,7 +7041,7 @@ const StyledAppContainer = styled.div`
 }};
 `;
 
-const _excluded$N = ["children", "className", "locale", "product", "theme"];
+const _excluded$L = ["children", "className", "locale", "product", "theme"];
 const COMPONENT_NAME$H = 'AppContainer';
 const CLASSNAME$H = 'redsift-app-container';
 const RadarSvgLinearGradient = () => /*#__PURE__*/React__default.createElement("svg", {
@@ -7100,7 +7098,7 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
       product,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$N);
+    forwardedProps = _objectWithoutProperties(props, _excluded$L);
   const theme = useTheme(propsTheme);
   const [sidePanelVariant, setSidePanelVariant] = useState(AppSidePanelVariant.standard);
   const [breadcrumbs, setBreadcrumbs] = useState();
@@ -7139,7 +7137,7 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
 AppContainer.className = CLASSNAME$H;
 AppContainer.displayName = COMPONENT_NAME$H;
 
-const _excluded$M = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "id", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "theme"];
+const _excluded$K = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "id", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "theme"];
 const COMPONENT_NAME$G = 'SideNavigationMenu';
 const CLASSNAME$G = 'redsift-side-navigation-menu';
 
@@ -7165,7 +7163,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
       tabIndex,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$M);
+    forwardedProps = _objectWithoutProperties(props, _excluded$K);
   const [_id] = useId$2();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   warnIfNoAccessibleLabelFound(props, undefined, 'SideNavigationMenu');
@@ -7563,7 +7561,7 @@ const StyledSideNavigationMenuBar = styled.nav`
   }
 `;
 
-const _excluded$L = ["aria-label", "aria-labelledby", "canHaveMultipleMenuOpenAtOnce", "children", "className", "isDisabled", "menubarProps", "menubarRef", "theme", "variant"];
+const _excluded$J = ["aria-label", "aria-labelledby", "canHaveMultipleMenuOpenAtOnce", "children", "className", "isDisabled", "menubarProps", "menubarRef", "theme", "variant"];
 const COMPONENT_NAME$F = 'SideNavigationMenuBar';
 const CLASSNAME$F = 'redsift-side-navigation-menu-bar';
 
@@ -7595,7 +7593,7 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       variant: propsVariant = SideNavigationMenuBarVariant.standard
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$L);
+    forwardedProps = _objectWithoutProperties(props, _excluded$J);
   warnIfNoAccessibleLabelFound(props, undefined, 'SideNavigationMenuBar');
   const appContainerState = useContext(AppContainerContext);
   const theme = useTheme(propsTheme);
@@ -7762,7 +7760,7 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
 SideNavigationMenuBar.className = CLASSNAME$F;
 SideNavigationMenuBar.displayName = COMPONENT_NAME$F;
 
-const _excluded$K = ["title", "href", "ref"],
+const _excluded$I = ["title", "href", "ref"],
   _excluded2$2 = ["title", "children", "ref"],
   _excluded3 = ["title", "href", "ref"];
 const isMenu = item => {
@@ -7781,7 +7779,7 @@ const useSideNavigationMenuBar = _ref => {
           href,
           ref
         } = item,
-        rest = _objectWithoutProperties(item, _excluded$K);
+        rest = _objectWithoutProperties(item, _excluded$I);
       menuBarChildren.push( /*#__PURE__*/React__default.createElement(SideNavigationMenuItem, _extends$1({
         key: title,
         isCurrent: isActive ? isActive(href) : undefined
@@ -7885,7 +7883,7 @@ const StyledBreadcrumbItem = styled.a`
   }
 `;
 
-const _excluded$J = ["as", "children", "className", "href", "isCurrent", "isDisabled", "theme"];
+const _excluded$H = ["as", "children", "className", "href", "isCurrent", "isDisabled", "theme"];
 const COMPONENT_NAME$E = 'BreadcrumbItem';
 const CLASSNAME$E = 'redsift-breadcrumb-item';
 
@@ -7902,7 +7900,7 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$J);
+    forwardedProps = _objectWithoutProperties(props, _excluded$H);
   warnIfNoAccessibleLabelFound(props, [children], 'BreadcrumbItem');
   const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledBreadcrumbItem, _extends$1({
@@ -7956,7 +7954,7 @@ const StyledBreadcrumbs = styled.nav`
   }
 `;
 
-const _excluded$I = ["children", "className", "isDisabled", "theme"];
+const _excluded$G = ["children", "className", "isDisabled", "theme"];
 const COMPONENT_NAME$D = 'Breadcrumbs';
 const CLASSNAME$D = 'redsift-breadcrumbs';
 
@@ -7970,7 +7968,7 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$I);
+    forwardedProps = _objectWithoutProperties(props, _excluded$G);
   warnIfNoAccessibleLabelFound(props, undefined, 'Breadcrumbs');
   const theme = useTheme(propsTheme);
   const childArray = filterComponents([Breadcrumbs.Item])(children);
@@ -8005,7 +8003,7 @@ const Breadcrumbs = Object.assign(BaseBreadcrumbs, {
   Item: BreadcrumbItem
 });
 
-const _excluded$H = ["breadcrumbs", "children", "className", "iconButtonProps", "iconButtonRef", "fallbackTitle", "theme", "title"];
+const _excluded$F = ["breadcrumbs", "children", "className", "iconButtonProps", "iconButtonRef", "fallbackTitle", "theme", "title"];
 const COMPONENT_NAME$C = 'AppBar';
 const CLASSNAME$C = 'redsift-app-bar';
 
@@ -8024,7 +8022,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       title: propsTitle
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$H);
+    forwardedProps = _objectWithoutProperties(props, _excluded$F);
   const [scroll, setScroll] = useState(false);
   useEffect(() => {
     window.addEventListener('scroll', () => {
@@ -8126,7 +8124,7 @@ const StyledAppContent = styled.main`
 }}
 `;
 
-const _excluded$G = ["children", "className", "theme"];
+const _excluded$E = ["children", "className", "theme"];
 const COMPONENT_NAME$B = 'AppContent';
 const CLASSNAME$B = 'redsift-app-content';
 
@@ -8139,7 +8137,7 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$G);
+    forwardedProps = _objectWithoutProperties(props, _excluded$E);
   const {
     isLoaded
   } = useIsLoaded();
@@ -8270,7 +8268,7 @@ const StyledButtonGroup = styled.div`
 }};
 `;
 
-const _excluded$F = ["children", "className", "color", "theme", "variant"];
+const _excluded$D = ["children", "className", "color", "theme", "variant"];
 const COMPONENT_NAME$A = 'ButtonGroup';
 const CLASSNAME$A = 'redsift-button-group';
 
@@ -8285,7 +8283,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       variant: propsVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$F);
+    forwardedProps = _objectWithoutProperties(props, _excluded$D);
   const theme = useTheme(propsTheme);
   const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
   const variant = Object.values(ButtonGroupVariant).includes(propsVariant) ? propsVariant : 'primary';
@@ -8325,7 +8323,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
 ButtonGroup.className = CLASSNAME$A;
 ButtonGroup.displayName = COMPONENT_NAME$A;
 
-const _excluded$E = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "isHovered", "leftIcon", "rightIcon", "target", "theme", "variant"];
+const _excluded$C = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "isHovered", "leftIcon", "rightIcon", "target", "theme", "variant"];
 const COMPONENT_NAME$z = 'ButtonLink';
 const CLASSNAME$z = 'redsift-button-link';
 
@@ -8352,7 +8350,7 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       variant: propsVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$E);
+    forwardedProps = _objectWithoutProperties(props, _excluded$C);
   const theme = useTheme(propsTheme);
   const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
   const variant = Object.values(ButtonVariant).includes(propsVariant) ? propsVariant : 'primary';
@@ -8596,7 +8594,7 @@ const StyledSkeletonCircle = styled(StyledSkeleton)`
 }}
 `;
 
-const _excluded$D = ["children", "className", "isLoaded", "theme"];
+const _excluded$B = ["children", "className", "isLoaded", "theme"];
 const COMPONENT_NAME$y = 'SkeletonCircle';
 const CLASSNAME$y = 'redsift-skeleton-circle';
 
@@ -8610,7 +8608,7 @@ const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
       isLoaded,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$D);
+    forwardedProps = _objectWithoutProperties(props, _excluded$B);
   const theme = useTheme(propsTheme);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
@@ -8676,7 +8674,7 @@ const StyledSkeletonText = styled(StyledSkeleton)`
 }}}
 `;
 
-const _excluded$C = ["children", "className", "fontSize", "isLoaded", "lineHeight", "theme", "variant"];
+const _excluded$A = ["children", "className", "fontSize", "isLoaded", "lineHeight", "theme", "variant"];
 const COMPONENT_NAME$x = 'SkeletonText';
 const CLASSNAME$x = 'redsift-skeleton-text';
 
@@ -8693,7 +8691,7 @@ const SkeletonText = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       variant = 'body'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$C);
+    forwardedProps = _objectWithoutProperties(props, _excluded$A);
   const theme = useTheme(propsTheme);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
@@ -8710,7 +8708,7 @@ const SkeletonText = /*#__PURE__*/forwardRef((props, ref) => {
 SkeletonText.className = CLASSNAME$x;
 SkeletonText.displayName = COMPONENT_NAME$x;
 
-const _excluded$B = ["children", "className", "isLoaded", "theme"];
+const _excluded$z = ["children", "className", "isLoaded", "theme"];
 const COMPONENT_NAME$w = 'Skeleton';
 const CLASSNAME$w = 'redsift-skeleton';
 
@@ -8724,7 +8722,7 @@ const BaseSkeleton = /*#__PURE__*/forwardRef((props, ref) => {
       isLoaded,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$B);
+    forwardedProps = _objectWithoutProperties(props, _excluded$z);
   const theme = useTheme(propsTheme);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
@@ -8742,7 +8740,7 @@ const Skeleton = Object.assign(BaseSkeleton, {
   Text: SkeletonText
 });
 
-const _excluded$A = ["children", "className", "header", "headingProps", "icon", "iconProps", "isLoading", "subheader"];
+const _excluded$y = ["children", "className", "header", "headingProps", "icon", "iconProps", "isLoading", "subheader"];
 const COMPONENT_NAME$v = 'CardHeader';
 const CLASSNAME$v = 'redsift-card-header';
 
@@ -8760,7 +8758,7 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading,
       subheader
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$A);
+    forwardedProps = _objectWithoutProperties(props, _excluded$y);
   return /*#__PURE__*/React__default.createElement(StyledCardHeader, _extends$1({}, forwardedProps, {
     className: classNames(CardHeader.className, className),
     ref: ref
@@ -8801,7 +8799,7 @@ const StyledCardBody = styled.div`
   padding: 16px 0px;
 `;
 
-const _excluded$z = ["children", "className"];
+const _excluded$x = ["children", "className"];
 const COMPONENT_NAME$u = 'CardBody';
 const CLASSNAME$u = 'redsift-card-body';
 
@@ -8813,7 +8811,7 @@ const CardBody = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$z);
+    forwardedProps = _objectWithoutProperties(props, _excluded$x);
   return /*#__PURE__*/React__default.createElement(StyledCardBody, _extends$1({}, forwardedProps, {
     className: classNames(CardBody.className, className),
     ref: ref
@@ -8832,7 +8830,7 @@ const StyledCardActions = styled.div`
   margin-bottom: 8px;
 `;
 
-const _excluded$y = ["children", "className", "display", "flexDirection"];
+const _excluded$w = ["children", "className", "display", "flexDirection"];
 const COMPONENT_NAME$t = 'CardActions';
 const CLASSNAME$t = 'redsift-card-actions';
 
@@ -8846,7 +8844,7 @@ const CardActions = /*#__PURE__*/forwardRef((props, ref) => {
       display = 'flex',
       flexDirection = 'row'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$w);
   return /*#__PURE__*/React__default.createElement(StyledCardActions, _extends$1({
     display: display,
     flexDirection: flexDirection
@@ -8858,7 +8856,7 @@ const CardActions = /*#__PURE__*/forwardRef((props, ref) => {
 CardActions.className = CLASSNAME$t;
 CardActions.displayName = COMPONENT_NAME$t;
 
-const _excluded$x = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse", "theme"];
+const _excluded$v = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse", "theme"];
 const COMPONENT_NAME$s = 'Card';
 const CLASSNAME$s = 'redsift-card';
 
@@ -8875,7 +8873,7 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
       onCollapse,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$x);
+    forwardedProps = _objectWithoutProperties(props, _excluded$v);
   const theme = useTheme(propsTheme);
   const format = useMessageFormatter(intlMessages$5);
   const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed !== null && propsIsCollapsed !== void 0 ? propsIsCollapsed : defaultCollapsed);
@@ -9011,7 +9009,7 @@ const StyledCheckboxGroup = styled.div`
   }
 `;
 
-const _excluded$w = ["children", "className", "color", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "theme", "value"];
+const _excluded$u = ["children", "className", "color", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "theme", "value"];
 const COMPONENT_NAME$r = 'CheckboxGroup';
 const CLASSNAME$r = 'redsift-checkbox-group';
 
@@ -9036,7 +9034,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$w);
+    forwardedProps = _objectWithoutProperties(props, _excluded$u);
   const theme = useTheme(propsTheme);
   const [selectedValues, setValue] = useState(value || defaultValues || []);
   useEffect(() => {
@@ -9195,7 +9193,7 @@ const PressResponderContext = /*#__PURE__*/React__default.createContext({
 });
 PressResponderContext.displayName = 'PressResponderContext';
 
-const _excluded$v = ["register"],
+const _excluded$t = ["register"],
   _excluded2$1 = ["onPress", "onPressChange", "onPressStart", "onPressEnd", "onPressUp", "isDisabled", "isPressed", "preventFocusOnPress", "shouldCancelOnPointerExit", "allowTextSelectionOnPress", "ref"];
 function usePressResponderContext(props) {
   // Consume context from <PressResponder> and merge with props.
@@ -9204,7 +9202,7 @@ function usePressResponderContext(props) {
     let {
         register
       } = context,
-      contextProps = _objectWithoutProperties(context, _excluded$v);
+      contextProps = _objectWithoutProperties(context, _excluded$t);
     props = mergeProps$1(contextProps, props);
     register();
   }
@@ -10561,14 +10559,14 @@ function useFocusRing() {
   };
 }
 
-const _excluded$u = ["ref"];
+const _excluded$s = ["ref"];
 let FocusableContext = /*#__PURE__*/React__default.createContext(null);
 function useFocusableContext(ref) {
   let context = useContext(FocusableContext) || {};
   useSyncRef(context, ref);
 
   // eslint-disable-next-line
-  let otherProps = _objectWithoutProperties(context, _excluded$u);
+  let otherProps = _objectWithoutProperties(context, _excluded$s);
   return otherProps;
 }
 /**
@@ -10706,7 +10704,7 @@ const StyledCheckbox = styled.label`
   }
 `;
 
-const _excluded$t = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "theme", "value"];
+const _excluded$r = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "theme", "value"];
 const COMPONENT_NAME$q = 'Checkbox';
 const CLASSNAME$q = 'redsift-checkbox';
 
@@ -10739,7 +10737,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$t);
+    forwardedProps = _objectWithoutProperties(props, _excluded$r);
   const theme = useTheme(propsTheme);
   const {
     isFocusVisible,
@@ -10932,7 +10930,7 @@ const StyledShield = styled.div`
 }}
 `;
 
-const _excluded$s = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "theme", "variant"];
+const _excluded$q = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "theme", "variant"];
 const COMPONENT_NAME$p = 'Shield';
 const CLASSNAME$p = 'redsift-shield';
 const getVariant = variant => {
@@ -11019,7 +11017,7 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       variant = ShieldVariant.success
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$s);
+    forwardedProps = _objectWithoutProperties(props, _excluded$q);
   const theme = useTheme(propsTheme);
   const {
     color,
@@ -11108,7 +11106,7 @@ const StyledDetailedCardCollapsibleSectionItems = styled.div`
   }
 `;
 
-const _excluded$r = ["caption", "children", "className", "hideBackground"];
+const _excluded$p = ["caption", "children", "className", "hideBackground"];
 const COMPONENT_NAME$o = 'DetailedCardCollapsibleSectionItems';
 const CLASSNAME$o = 'redsift-detailed-card-collapsible-section-items';
 
@@ -11122,7 +11120,7 @@ const DetailedCardCollapsibleSectionItems = /*#__PURE__*/forwardRef((props, ref)
       className,
       hideBackground
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$r);
+    forwardedProps = _objectWithoutProperties(props, _excluded$p);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardCollapsibleSectionItems, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardCollapsibleSectionItems.className, className),
     ref: ref,
@@ -11198,7 +11196,7 @@ const StyledDetailedCardSection = styled.div`
   }
 `;
 
-const _excluded$q = ["badge", "color", "children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
+const _excluded$o = ["badge", "color", "children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
 const COMPONENT_NAME$n = 'DetailedCardSection';
 const CLASSNAME$n = 'redsift-detailed-card-section';
 const hasCollapsibleChildren = children => {
@@ -11225,7 +11223,7 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsible: propsIsCollapsible = true,
       isLoading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$o);
   const format = useMessageFormatter(intlMessages$3);
   const isCollapsible = propsIsCollapsible && hasCollapsibleChildren(children);
   const [isCollapsed, setIsCollapsed] = useState(Boolean(propsIsCollapsed));
@@ -11334,7 +11332,7 @@ const StyledDetailedCardHeader = styled.div`
   }
 `;
 
-const _excluded$p = ["children", "className", "header", "headingProps", "isLoading"];
+const _excluded$n = ["children", "className", "header", "headingProps", "isLoading"];
 const COMPONENT_NAME$m = 'DetailedCardHeader';
 const CLASSNAME$m = 'redsift-detailed-card-header';
 
@@ -11349,7 +11347,7 @@ const DetailedCardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       headingProps,
       isLoading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$p);
+    forwardedProps = _objectWithoutProperties(props, _excluded$n);
   const theme = useTheme();
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardHeader, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardHeader.className, className),
@@ -11422,6 +11420,16 @@ const pickTextColorBasedOnBgColorAdvanced = (bgColor, lightColor, darkColor) =>
   var L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
   return L > 0.179 ? darkColor : lightColor;
 };
+const pickHoverColorBasedOnBgColorAdvanced = bgColor => {
+  var color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor;
+  if (color.toUpperCase() === 'FFFFFF') {
+    return RedsiftColorNeutralLightGrey;
+  }
+  var r = parseInt(color.substring(0, 2), 16); // hexToR
+  var g = parseInt(color.substring(2, 4), 16); // hexToG
+  var b = parseInt(color.substring(4, 6), 16); // hexToB
+  return `rgba(${r}, ${g}, ${b}, 0.75)`;
+};
 const isPredefinedColor = color => Object.keys(predefinedColorToHex).includes(color);
 
 /**
@@ -11469,6 +11477,10 @@ const StyledPill = styled.div`
       }
     }
 
+    .redsift-icon-button {
+      width: ${$size === PillSize.xlarge ? css`30px` : $size === PillSize.large ? css`24px` : css`22px`};
+    }
+
     .redsift-button-link {
       height: ${$size === PillSize.xlarge ? css`18px` : $size === PillSize.large ? css`12px` : css`10px`};
     }
@@ -11527,7 +11539,7 @@ const StyledPill = styled.div`
           .redsift-icon-button:hover,
           .redsift-button:hover,
           .redsift-button-link:hover {
-            background-color: ${$hoverColor !== null && $hoverColor !== void 0 ? $hoverColor : RedsiftColorNeutralLightGrey};
+            background-color: ${$hoverColor !== null && $hoverColor !== void 0 ? $hoverColor : pickHoverColorBasedOnBgColorAdvanced($color !== null && $color !== void 0 ? $color : RedsiftColorNeutralWhite)};
           }
         `;
 }};
@@ -11610,25 +11622,33 @@ const StyledPill = styled.div`
   `;
 }};
 
+  .redsift-icon {
+    font-size: ${_ref5 => {
+  let {
+    $size
+  } = _ref5;
+  return $size === PillSize.xlarge ? '15px' : $size === PillSize.large ? '12px' : '12px';
+}};
+  }
+
   &,
-  .redsift-icon,
   .redsift-text,
   .redsift-number,
   .first,
   .middle,
   .last {
     font-family: var(--redsift-typography-pill-font-family);
-    font-size: ${_ref5 => {
+    font-size: ${_ref6 => {
   let {
     $size
-  } = _ref5;
+  } = _ref6;
   return $size === PillSize.xlarge ? '15px' : $size === PillSize.large ? '12px' : '10px';
 }};
     font-weight: var(--redsift-typography-pill-font-weight);
-    line-height: ${_ref6 => {
+    line-height: ${_ref7 => {
   let {
     $size
-  } = _ref6;
+  } = _ref7;
   return $size === PillSize.xlarge ? '28px' : $size === PillSize.large ? css`var(--redsift-typography-chip-line-height)` : css`var(--redsift-typography-pill-line-height)`;
 }};
   }
@@ -11638,16 +11658,16 @@ const StyledPill = styled.div`
   }
 
   .redsift-icon {
-    width: ${_ref7 => {
+    width: ${_ref8 => {
   let {
     $size
-  } = _ref7;
+  } = _ref8;
   return $size === PillSize.xlarge ? '17px' : $size === PillSize.large ? '14px' : '12px';
 }};
-    height: ${_ref8 => {
+    height: ${_ref9 => {
   let {
     $size
-  } = _ref8;
+  } = _ref9;
   return $size === PillSize.xlarge ? '17px' : $size === PillSize.large ? '14px' : '12px';
 }};
 
@@ -11661,11 +11681,9 @@ const StyledPill = styled.div`
 /**
  * Component style.
  */
-const StyledNumber = styled(StyledText)`
-  font-family: var(--redsift-typography-font-family-poppins);
-`;
+const StyledNumber = styled(StyledText)``;
 
-const _excluded$o = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "fontWeight", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "theme", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "value", "variant"];
+const _excluded$m = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "fontFamily", "fontWeight", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "theme", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "value", "variant"];
 const COMPONENT_NAME$l = 'Number';
 const CLASSNAME$l = 'redsift-number';
 
@@ -11682,6 +11700,7 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
       currencyDisplay = 'symbol',
       currencySign = 'standard',
       fontSize,
+      fontFamily,
       fontWeight,
       lineHeight,
       localeMatcher = 'best fit',
@@ -11706,7 +11725,7 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$o);
+    forwardedProps = _objectWithoutProperties(props, _excluded$m);
   const formatter = useNumberFormatter(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
     compactDisplay,
     currency,
@@ -11750,6 +11769,7 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
     $color: color,
     $lineHeight: lineHeight,
     $fontSize: fontSize,
+    $fontFamily: fontFamily,
     $fontWeight: fontWeight,
     $noWrap: noWrap,
     $theme: theme,
@@ -11759,7 +11779,7 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
 Number$1.className = CLASSNAME$l;
 Number$1.displayName = COMPONENT_NAME$l;
 
-const _excluded$n = ["autoBreak", "borderColor", "children", "className", "color", "disabledColor", "hoverColor", "isDisabled", "size", "theme"];
+const _excluded$l = ["autoBreak", "borderColor", "children", "className", "color", "disabledColor", "hoverColor", "isDisabled", "size", "theme"];
 const COMPONENT_NAME$k = 'Pill';
 const CLASSNAME$k = 'redsift-pill';
 
@@ -11779,7 +11799,7 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
       size: propsSize,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$l);
   const theme = useTheme(propsTheme);
   const color = propsColor || PresentationColorPalette.blue;
   const size = propsSize || PillSize.large;
@@ -11869,7 +11889,7 @@ const StyledDetailedCardSectionItem = styled.div`
   }
 `;
 
-const _excluded$m = ["children", "className", "description", "descriptionProps", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
+const _excluded$k = ["children", "className", "description", "descriptionProps", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
 const COMPONENT_NAME$j = 'DetailedCardSectionItem';
 const CLASSNAME$j = 'redsift-detailed-card-section-item';
 
@@ -11889,7 +11909,7 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
       pillProps,
       shield
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$m);
+    forwardedProps = _objectWithoutProperties(props, _excluded$k);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardSectionItem, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardSectionItem.className, className),
     ref: ref
@@ -15488,34 +15508,6 @@ const useInteractions = function (propsList) {
   }), [getReferenceProps, getFloatingProps, getItemProps]);
 };
 
-const TooltipContext = /*#__PURE__*/React__default.createContext(null);
-
-/**
- * Context props.
- */
-
-/**
- * Component variant.
- */
-const TooltipPlacement = {
-  top: 'top',
-  right: 'right',
-  bottom: 'bottom',
-  left: 'left',
-  'top-start': 'top-start',
-  'top-end': 'top-end',
-  'right-start': 'right-start',
-  'right-end': 'right-end',
-  'bottom-start': 'bottom-start',
-  'bottom-end': 'bottom-end',
-  'left-start': 'left-start',
-  'left-end': 'left-end'
-};
-
-/**
- * Component props.
- */
-
 /**
  * Component style.
  */
@@ -15745,6 +15737,34 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
 TooltipTrigger.className = CLASSNAME$h;
 TooltipTrigger.displayName = COMPONENT_NAME$h;
 
+const TooltipContext = /*#__PURE__*/React__default.createContext(null);
+
+/**
+ * Context props.
+ */
+
+/**
+ * Component variant.
+ */
+const TooltipPlacement = {
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  'top-start': 'top-start',
+  'top-end': 'top-end',
+  'right-start': 'right-start',
+  'right-end': 'right-end',
+  'bottom-start': 'bottom-start',
+  'bottom-end': 'bottom-end',
+  'left-start': 'left-start',
+  'left-end': 'left-end'
+};
+
+/**
+ * Component props.
+ */
+
 function useTooltip(_ref) {
   let {
     color,
@@ -15810,42 +15830,6 @@ function useTooltip(_ref) {
   }), [color, isOpen, handleOpen, interactions, data, arrowRef, tooltipId, triggerClassName]);
 }
 
-const _excluded$l = ["tooltip", "tooltipProps", "tooltipTriggerProps", "tooltipContentProps"];
-const IconButtonWithTooltip = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      tooltip,
-      tooltipProps,
-      tooltipTriggerProps,
-      tooltipContentProps
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
-  return /*#__PURE__*/React__default.createElement(Tooltip, tooltipProps, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, tooltipTriggerProps, /*#__PURE__*/React__default.createElement(IconButton, _extends$1({
-    "aria-label": tooltip
-  }, props, {
-    "aria-describedby": undefined,
-    ref: ref
-  }))), /*#__PURE__*/React__default.createElement(Tooltip.Content, tooltipContentProps, tooltip));
-});
-IconButtonWithTooltip.displayName = 'IconButton';
-
-const _excluded$k = ["tooltip", "tooltipProps", "tooltipTriggerProps", "tooltipContentProps"];
-const ButtonWithTooltip = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      tooltip,
-      tooltipProps,
-      tooltipTriggerProps,
-      tooltipContentProps
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$k);
-  return /*#__PURE__*/React__default.createElement(Tooltip, tooltipProps, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, tooltipTriggerProps, /*#__PURE__*/React__default.createElement(Button, _extends$1({
-    "aria-label": tooltip
-  }, props, {
-    "aria-describedby": undefined,
-    ref: ref
-  }))), /*#__PURE__*/React__default.createElement(Tooltip.Content, tooltipContentProps, tooltip));
-});
-ButtonWithTooltip.displayName = 'Button';
-
 const COMPONENT_NAME$g = 'Tooltip';
 const CLASSNAME$g = 'redsift-tooltip';
 
@@ -15890,10 +15874,7 @@ BaseTooltip.className = CLASSNAME$g;
 BaseTooltip.displayName = COMPONENT_NAME$g;
 const Tooltip = Object.assign(BaseTooltip, {
   Trigger: TooltipTrigger,
-  Content: TooltipContent,
-  Button: ButtonWithTooltip,
-  IconButton: IconButtonWithTooltip,
-  IconButtonLink: IconButtonWithTooltip
+  Content: TooltipContent
 });
 
 const useTooltipContext = () => {
@@ -16928,7 +16909,7 @@ const IconButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$g);
   const theme = useTheme(propsTheme);
   const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
-  const variant = Object.values(IconButtonVariant).includes(propsVariant) ? propsVariant : 'primary';
+  const variant = Object.values(IconButtonVariant).includes(propsVariant) ? propsVariant : 'unstyled';
   const isGradient = color === ButtonsColorPalette.radar;
   return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
     condition: isGradient && variant === IconButtonVariant.secondary,