@redsift/design-system 11.4.1 → 11.5.0-muiv5

package/index.js

@@ -6232,8 +6232,8 @@ const StyledAppSidePanel = styled.div`
     .redsift-icon-button {
       > span,
       > span > svg {
-        width: 30px;
-        height: 30px;
+        width: 24px;
+        height: 24px;
       }
     }
   }
@@ -6471,7 +6471,7 @@ const StyledSideNavigationMenuItemIndicatorContainer = styled.div`
 const StyledSideNavigationMenuItemIndicator = styled.div`
   position: relative;
   width: 4px;
-  height: 38px;
+  height: 40px;
   border-radius: 0px 4px 4px 0px;
   background-color: ${_ref => {
   let {
@@ -6516,7 +6516,7 @@ const StyledSideNavigationMenuItem = styled.a`
   border-radius: 0 4px 4px 0;
   display: flex;
   font-family: var(--redsift-typography-body-font-family);
-  font-size: var(--redsift-typography-body-font-size);
+  font-size: 14px;
   font-weight: var(--redsift-typography-body-font-weight);
   gap: 8px;
   line-height: var(--redsift-typography-body-line-height);
@@ -6604,11 +6604,11 @@ const StyledSideNavigationMenuItem = styled.a`
            */
 
           background-color: var(--redsift-color-${$theme}-components-side-navigation-background);
-          height: 38px;
-          margin-bottom: 16px;
+          height: 40px;
+          margin-bottom: 4px;
           margin-left: -4px;
           transition: padding 300ms ease-out;
-          padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '24px'};
+          padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '16px'};
 
           .redsift-icon.first {
             box-sizing: unset;
@@ -6620,10 +6620,10 @@ 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: ${$hasIcon ? '26px' : '62px'};
-    padding-right: 8px;
-    padding-top: 7px;
+    padding-bottom: 4px;
+    padding-left: ${$hasIcon ? '18px' : '54px'};
+    padding-right: 0;
+    padding-top: 4px;
     border-radius: 0;
 
     .redsift-icon.first {
@@ -6854,7 +6854,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     icon: icon,
     ref: iconRef,
     className: "first",
-    size: isSecondLevel ? IconSize.small : IconSize.large
+    size: isSecondLevel ? IconSize.small : IconSize.medium
   })) : null, /*#__PURE__*/React__default.createElement("span", {
     className: "content"
   }, children), badge ? /*#__PURE__*/React__default.createElement(Badge, _extends({
@@ -6904,14 +6904,14 @@ const StyledSideNavigationMenu = styled.div`
       border-radius: 0 4px 4px 0;
       display: flex;
       font-family: var(--redsift-typography-body-font-family);
-      font-size: var(--redsift-typography-body-font-size);
+      font-size: 14px;
       font-weight: var(--redsift-typography-body-font-weight);
       gap: 0;
-      height: 38px;
+      height: 40px;
       line-height: var(--redsift-typography-body-line-height);
       margin-left: -4px;
       transition: padding 300ms ease-out;
-      padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '24px'};
+      padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '16px'};
       text-decoration: none;
       text-transform: uppercase;
       width: calc(100% + ${$variant === SideNavigationMenuBarVariant.shrinked ? '0px' : '4px'});
@@ -7038,7 +7038,7 @@ const StyledSideNavigationMenu = styled.div`
       width: calc(100% + ${$variant === SideNavigationMenuBarVariant.shrinked ? '0px' : '4px'});
     `;
 }}
-    margin-bottom: 16px;
+    margin-bottom: 4px;
     max-width: 241px;
     transition: height 300ms ease-out;
     overflow: hidden;
@@ -7048,7 +7048,7 @@ const StyledSideNavigationMenu = styled.div`
     $numberOfChildren
   } = _ref6;
   return $isExpanded ? css`
-            height: ${$numberOfChildren * 38}px;
+            height: ${$numberOfChildren * 32}px;
           ` : css`
             height: 0;
           `;
@@ -7512,7 +7512,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     $theme: theme,
     style: {
       position: 'relative',
-      top: isExpanded ? `${38 + currentPosition.current * 38}px` : 0,
+      top: isExpanded ? `${32 + currentPosition.current * 32}px` : 0,
       transition: 'top 300ms ease-out'
     }
   }) : null), /*#__PURE__*/React__default.createElement("div", {
@@ -7531,7 +7531,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     icon: icon,
     ref: iconRef,
     className: classNames(iconProps === null || iconProps === void 0 ? void 0 : iconProps.className, 'first'),
-    size: IconSize.large
+    size: IconSize.medium
   })), /*#__PURE__*/React__default.createElement("span", {
     className: "content"
   }, ariaLabel), hasBadge && (!isExpanded || keepBadgeVisible) ? /*#__PURE__*/React__default.createElement(Badge, _extends({