@moises.ai/design-system 3.9.17 → 3.9.19

package/package.json

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

package/src/components/SetlistList/SetlistList.module.css

@@ -119,10 +119,11 @@
 }
 
 .textNewSetlist {
-  max-width: 115px;
+  max-width: 126px;
   opacity: 1;
   transition: opacity 360ms ease-in-out;
   white-space: nowrap;
+  color: var(--neutral-alpha-11);
 }
 
 .collapsed .textNewSetlist {

package/src/components/Sidebar/Sidebar.jsx

@@ -148,38 +148,65 @@ export const Sidebar = ({
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}
         >
-          <Flex
-            align="center"
-            justify="between"
-            className={classNames(styles.header, {
-              [styles.headerCollapsed]: effectiveCollapsed,
-            })}
-          >
+          {effectiveCollapsed ? (
+            <Tooltip content={tooltip} side="right">
+              <div className={styles.tooltipTriggerWrapper}>
+                <Flex
+                  align="center"
+                  justify="between"
+                  className={classNames(styles.header, {
+                    [styles.headerCollapsed]: effectiveCollapsed,
+                  })}
+                >
+                  <Flex
+                    align="center"
+                    gap="2"
+                    onClick={handleLogoClick}
+                    style={{ cursor: 'pointer' }}
+                  >
+                    {logoContent}
+                  </Flex>
+                  <Flex
+                    align="center"
+                    justify="center"
+                    onClick={handleToggleCollapse}
+                    className={classNames(styles.toggleButton, {
+                      [styles.toggleButtonHidden]: effectiveCollapsed,
+                    })}
+                  >
+                    <SidebarLeftIcon width={16} height={16} />
+                  </Flex>
+                </Flex>
+              </div>
+            </Tooltip>
+          ) : (
             <Flex
               align="center"
-              gap="2"
-              onClick={handleLogoClick}
-              style={{ cursor: 'pointer' }}
-            >
-              {effectiveCollapsed ? (
-                <Tooltip content={tooltip} side="right">
-                  <div className={styles.tooltipTriggerWrapper}>{logoContent}</div>
-                </Tooltip>
-              ) : (
-                logoContent
-              )}
-            </Flex>
-            <Flex
-              align="center"
-              justify="center"
-              onClick={handleToggleCollapse}
-              className={classNames(styles.toggleButton, {
-                [styles.toggleButtonHidden]: effectiveCollapsed,
+              justify="between"
+              className={classNames(styles.header, {
+                [styles.headerCollapsed]: effectiveCollapsed,
               })}
             >
-              <SidebarLeftIcon width={16} height={16} />
+              <Flex
+                align="center"
+                gap="2"
+                onClick={handleLogoClick}
+                style={{ cursor: 'pointer' }}
+              >
+                {logoContent}
+              </Flex>
+              <Flex
+                align="center"
+                justify="center"
+                onClick={handleToggleCollapse}
+                className={classNames(styles.toggleButton, {
+                  [styles.toggleButtonHidden]: effectiveCollapsed,
+                })}
+              >
+                <SidebarLeftIcon width={16} height={16} />
+              </Flex>
             </Flex>
-          </Flex>
+          )}
           <Flex direction="column" className={styles.content}>
             {children}
           </Flex>

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

@@ -3,6 +3,11 @@
   width: 100%;
 }
 
+.tooltipTriggerWrapper {
+  display: block;
+  width: 100%;
+}
+
 .root {
   background-color: var(--neutral-1);
   width: 240px;
@@ -81,11 +86,13 @@
   opacity: 0;
   pointer-events: none;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  
 }
 
 .toggleInContainerVisible {
   opacity: 1;
   pointer-events: auto;
+  padding: 4px
 }
 
 .toggleButton {