@moises.ai/design-system 3.9.19 → 3.9.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.9.19",
+  "version": "3.9.21",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/AdditionalItems/AdditionalItems.jsx

@@ -54,7 +54,7 @@ export const AdditionalItems = ({
           </Flex>
         )
         return collapsed ? (
-          <Tooltip key={item.id || index} content={item.label} side="right">
+          <Tooltip key={item.id || index} content={item.label} side="right" sideOffset={5}>
             {navItem}
           </Tooltip>
         ) : (

package/src/components/ProductsList/ProductsList.jsx

@@ -66,7 +66,7 @@ export const ProductsList = ({
           </Flex>
         )
         return collapsed ? (
-          <Tooltip key={product.id} content={product.label} side="right">
+          <Tooltip key={product.id} content={product.label} side="right" sideOffset={5}>
             {navItem}
           </Tooltip>
         ) : (

package/src/components/ProfileMenu/ProfileMenu.jsx

@@ -31,7 +31,7 @@ export const ProfileMenu = ({
       trigger={
         collapsed && tooltip ? (
           <div>
-            <Tooltip content={tooltip} side="right">
+            <Tooltip content={tooltip} side="right" sideOffset={5}>
               {trigger}
             </Tooltip>
           </div>

package/src/components/SetlistList/SetlistList.jsx

@@ -40,7 +40,7 @@ function SetlistExpandButton({ onExpand, className, style, collapsed = false, to
     </button>
   )
   return collapsed && tooltip ? (
-    <Tooltip content={tooltip} side="right">
+    <Tooltip content={tooltip} side="right" sideOffset={15}>
       {button}
     </Tooltip>
   ) : (

package/src/components/Sidebar/Sidebar.jsx

@@ -149,15 +149,16 @@ export const Sidebar = ({
           onMouseLeave={handleMouseLeave}
         >
           {effectiveCollapsed ? (
-            <Tooltip content={tooltip} side="right">
-              <div className={styles.tooltipTriggerWrapper}>
-                <Flex
-                  align="center"
-                  justify="between"
-                  className={classNames(styles.header, {
-                    [styles.headerCollapsed]: effectiveCollapsed,
-                  })}
-                >
+            <div className={styles.headerWrapper}>
+              <Tooltip content={tooltip} side="right" sideOffset={5} align="center" alignOffset={0}>
+                <div className={styles.tooltipTriggerWrapper}>
+                  <Flex
+                    align="center"
+                    justify="between"
+                    className={classNames(styles.header, {
+                      [styles.headerCollapsed]: effectiveCollapsed,
+                    })}
+                  >
                   <Flex
                     align="center"
                     gap="2"
@@ -179,14 +180,16 @@ export const Sidebar = ({
                 </Flex>
               </div>
             </Tooltip>
+            </div>
           ) : (
-            <Flex
-              align="center"
-              justify="between"
-              className={classNames(styles.header, {
-                [styles.headerCollapsed]: effectiveCollapsed,
-              })}
-            >
+            <div className={styles.headerWrapper}>
+              <Flex
+                align="center"
+                justify="between"
+                className={classNames(styles.header, {
+                  [styles.headerCollapsed]: effectiveCollapsed,
+                })}
+              >
               <Flex
                 align="center"
                 gap="2"
@@ -206,6 +209,7 @@ export const Sidebar = ({
                 <SidebarLeftIcon width={16} height={16} />
               </Flex>
             </Flex>
+            </div>
           )}
           <Flex direction="column" className={styles.content}>
             {children}

package/src/components/Sidebar/Sidebar.module.css

@@ -247,12 +247,15 @@
   align-items: center;
 }
 
+.headerWrapper {
+  margin-top: 18px;
+}
+
 .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 24px;
-  margin-top: 18px;
   height: 48px;
   transition: padding 280ms cubic-bezier(0.4, 0, 0.2, 1);
 }