@redsift/design-system 9.0.0-alpha.3 → 9.0.0-alpha.5

package/index.js

@@ -1464,7 +1464,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,
@@ -2213,6 +2214,7 @@ const StyledAppSidePanel = styled.div`
   align-items: center;
   background-color: var(--redsift-side-navigation-color-background);
   border-right: 4px solid #e1e1e1;
+  box-sizing: content-box;
   flex-direction: column;
   height: 100%;
   left: 0px;
@@ -2568,10 +2570,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: 5px 16px 5px ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '24px'};
 
           .redsift-icon.first {
             box-sizing: unset;
@@ -2608,6 +2611,7 @@ const BadgeVariant = {
  */
 const StyledBadge = styled.div`
   ${baseStyling}
+  box-sizing: content-box;
 
   ${_ref => {
   let {
@@ -2833,8 +2837,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 {
@@ -2847,6 +2849,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);
@@ -2860,7 +2864,7 @@ const StyledSideNavigationMenu = styled.div`
       padding: 5px 16px 5px ${$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 {
@@ -2976,16 +2980,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`
@@ -3019,7 +3031,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';
@@ -3410,6 +3424,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;
@@ -5461,6 +5476,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 {
@@ -10353,9 +10369,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}
@@ -10363,6 +10379,7 @@ const StyledItem = styled.div`
   align-items: center;
   background: none;
   border: none;
+  box-sizing: border-box;
   display: inline-flex;
 
   ${_ref => {