@redsift/design-system 10.6.6 → 10.7.0

package/index.d.ts

@@ -2272,6 +2272,8 @@ interface SideNavigationMenuItemProps extends ComponentProps<'a'> {
     badge?: number | string;
     /** Custom props to pass to the Badge component, if any. */
     badgeProps?: Omit<BadgeProps, 'ref'>;
+    /** Color variant. */
+    color?: string;
     /** Whether the menu item has a border or not. */
     hasBorder?: boolean;
     /** Href is required for this component. */
@@ -2295,6 +2297,8 @@ interface SideNavigationMenuItemProps extends ComponentProps<'a'> {
     theme?: Theme;
 }
 type StyledSideNavigationMenuItemProps = Omit<SideNavigationMenuItemProps, 'isCurrent' | 'isDisabled' | 'isSecondLevel' | 'hasBorder'> & {
+    $color: SideNavigationMenuItemProps['color'];
+    $hasIcon: boolean;
     $isCurrent: SideNavigationMenuItemProps['isCurrent'];
     $isDisabled: SideNavigationMenuItemProps['isDisabled'];
     $isSecondLevel: SideNavigationMenuItemProps['isSecondLevel'];

package/index.js

@@ -6494,11 +6494,12 @@ const StyledSideNavigationMenuItem = styled.a`
   ${_ref2 => {
   let {
     $isDisabled,
-    $theme
+    $theme,
+    $color
   } = _ref2;
   return !$isDisabled ? css`
           & {
-            color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting);
+            color: ${$color ? $color : `var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting)`};
           }
         ` : css`
           & {
@@ -6526,12 +6527,13 @@ const StyledSideNavigationMenuItem = styled.a`
     ${_ref3 => {
   let {
     $isDisabled,
-    $theme
+    $theme,
+    $color
   } = _ref3;
   return !$isDisabled ? css`
             background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-hover);
             & {
-              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-hover);
+              color: ${$color ? $color : `var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-hover)`};
             }
           ` : '';
 }}
@@ -6586,6 +6588,7 @@ const StyledSideNavigationMenuItem = styled.a`
 
   ${_ref6 => {
   let {
+    $hasIcon,
     $isSecondLevel,
     $variant,
     $theme
@@ -6613,15 +6616,14 @@ const StyledSideNavigationMenuItem = styled.a`
     background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-secondary);
     font-size: var(--redsift-typography-caption-font-size);
     padding-bottom: 7px;
-    padding-left: 62px;
+    padding-left: ${$hasIcon ? '26px' : '62px'};
     padding-right: 8px;
     padding-top: 7px;
     border-radius: 0;
 
-
     .redsift-icon.first {
       box-sizing: unset;
-      margin-right: 0;
+      margin-right: 8px;
     }
   `;
 }}
@@ -6759,7 +6761,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
 Badge.className = CLASSNAME$J;
 Badge.displayName = COMPONENT_NAME$J;
 
-const _excluded$M = ["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", "color", "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';
 
@@ -6774,6 +6776,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
       badgeProps,
       children,
       className,
+      color,
       hasBorder,
       href,
       icon,
@@ -6825,6 +6828,8 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     as: as,
     role: "menuitem"
   }, forwardedProps, {
+    $color: color,
+    $hasIcon: icon !== undefined,
     $isCurrent: isCurrent,
     $isDisabled: isDisabled,
     $isSecondLevel: isSecondLevel,
@@ -6844,7 +6849,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     icon: icon,
     ref: iconRef,
     className: "first",
-    size: isSecondLevel ? IconSize.xsmall : IconSize.large
+    size: isSecondLevel ? IconSize.small : IconSize.large
   })) : null, /*#__PURE__*/React__default.createElement("span", {
     className: "content"
   }, children), badge ? /*#__PURE__*/React__default.createElement(Badge, _extends$1({