@gympass/yoga 7.104.1 → 7.106.0

package/cjs/Checkbox/web/Checkbox.js

@@ -343,12 +343,12 @@ const Checkbox = (_a) => {
               ),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_shared.HiddenInput,
-                __spreadProps(__spreadValues({
+                __spreadProps(__spreadValues(__spreadValues({
                   type: "checkbox",
                   ref: inputRef,
                   checked,
                   disabled
-                }, value ? { value } : {}), {
+                }, value ? { value } : {}), restWithoutEvents), {
                   onChange,
                   onClick
                 })

package/cjs/NavigationMenu/NavigationMenu.theme.js

@@ -21,60 +21,143 @@ __export(NavigationMenu_theme_exports, {
   default: () => NavigationMenu_theme_default
 });
 module.exports = __toCommonJS(NavigationMenu_theme_exports);
-const NavigationMenu = ({ colors, fontWeights, radii, spacing }) => ({
-  avatar: {
-    height: spacing.xlarge,
-    width: spacing.xlarge
-  },
+var import_styled_components = require("styled-components");
+var import_yoga_common = require("@gympass/yoga-common");
+const sandy = "#F6EDDF";
+const navigationMenuV3 = ({ colors, fontWeights, fontSizes, radii }) => ({
   backgroundColor: {
-    default: colors.clear,
-    hover: colors.light,
-    stamina: colors.stamina,
-    yoga: colors.yoga,
-    white: colors.white
+    contextMenu: colors.sand,
+    default: colors.sand,
+    hover: sandy,
+    active: sandy
   },
   border: {
-    color: {
-      default: colors.light,
-      white: colors.white
-    },
     radius: {
-      default: radii.small,
-      circle: radii.circle
+      tag: radii.small,
+      contextMenu: radii.small
     }
   },
   font: {
     color: {
-      default: colors.deep,
-      active: colors.vibin,
-      hover: colors.stamina
+      default: colors.text.secondary,
+      active: colors.text.primary,
+      hover: colors.text.secondary
     },
-    weight: { medium: fontWeights.medium }
+    weight: {
+      bold: fontWeights.bold,
+      medium: fontWeights.regular
+    },
+    size: {
+      contextMenu: {
+        title: fontSizes.xlarge
+      }
+    }
   },
-  gap: {
-    xxxsmall: spacing.xxxsmall,
-    xxsmall: spacing.xxsmall,
-    medium: spacing.medium
+  hover: {
+    contextMenu: import_styled_components.css`
+      background-color: ${sandy};
+    `
   },
-  height: { xxlarge: spacing.xxlarge, xlarge: spacing.xlarge },
   icon: {
-    height: spacing.medium,
-    width: spacing.medium,
     fill: {
-      default: colors.deep,
-      active: colors.vibin,
-      hover: colors.stamina
+      default: colors.text.secondary,
+      actions: colors.text.secondary,
+      active: colors.text.primary,
+      hover: colors.text.secondary
     }
-  },
-  padding: {
-    xxxsmall: spacing.xxxsmall,
-    xxsmall: spacing.xxsmall,
-    xsmall: spacing.xsmall,
-    small: spacing.small
-  },
-  tag: {
-    color: { default: colors.white }
-  },
-  width: { xxlarge: spacing.xxlarge, xlarge: spacing.xlarge }
+  }
 });
+const NavigationMenu = (theme) => {
+  const {
+    colors,
+    elevations,
+    fontWeights,
+    fontSizes,
+    radii,
+    spacing,
+    v3theme
+  } = theme;
+  const baseTheme = {
+    avatar: {
+      height: spacing.xlarge,
+      width: spacing.xlarge
+    },
+    backgroundColor: {
+      contextMenu: colors.white,
+      default: colors.clear,
+      hover: colors.light,
+      active: colors.yoga,
+      tag: colors.stamina,
+      bottomMenu: colors.white
+    },
+    border: {
+      color: {
+        default: colors.light
+      },
+      radius: {
+        default: radii.small,
+        circle: radii.circle,
+        tag: v3theme ? radii.small : radii.circle,
+        action: radii.circle,
+        contextMenu: v3theme ? radii.small : radii.circle
+      }
+    },
+    font: {
+      color: {
+        default: colors.deep,
+        active: colors.vibin,
+        hover: colors.stamina
+      },
+      weight: {
+        bold: fontWeights.medium,
+        medium: fontWeights.regular
+      },
+      size: {
+        contextMenu: {
+          title: fontSizes.small
+        }
+      }
+    },
+    gap: {
+      xxxsmall: spacing.xxxsmall,
+      xxsmall: spacing.xxsmall,
+      medium: spacing.medium
+    },
+    height: {
+      xxlarge: spacing.xxlarge,
+      xlarge: spacing.xlarge,
+      contextMenu: spacing.xlarge * 2,
+      bottomMenu: spacing.xxxlarge
+    },
+    hover: {
+      contextMenu: import_styled_components.css`
+        box-shadow: ${elevations.small};
+      `
+    },
+    icon: {
+      height: spacing.medium,
+      width: spacing.medium,
+      fill: {
+        default: colors.deep,
+        actions: colors.primary,
+        active: colors.vibin,
+        hover: colors.stamina
+      }
+    },
+    padding: {
+      xxxsmall: spacing.xxxsmall,
+      xxsmall: spacing.xxsmall,
+      xsmall: spacing.xsmall,
+      small: spacing.small
+    },
+    tag: {
+      color: { default: colors.white }
+    },
+    width: { xxlarge: spacing.xxlarge, xlarge: spacing.xlarge }
+  };
+  if (!v3theme) {
+    return baseTheme;
+  }
+  return (0, import_yoga_common.merge)(baseTheme, navigationMenuV3(theme));
+};
 var NavigationMenu_theme_default = NavigationMenu;

package/cjs/NavigationMenu/web/BottomItems/BottomItem.js

@@ -58,11 +58,13 @@ const Active = import_styled_components.css`
   theme: {
     yoga: {
       components: {
-        navigationmenu: { icon, font }
+        navigationmenu: { backgroundColor, icon, font }
       }
     }
   }
 }) => import_styled_components.css`
+      background-color: ${backgroundColor.active};
+
       :not(:last-child) {
         pointer-events: none;
       }
@@ -70,6 +72,7 @@ const Active = import_styled_components.css`
       div {
         ${StyledText} {
           color: ${font.color.active};
+          font-weight: ${font.weight.bold};
         }
 
         svg {
@@ -84,7 +87,7 @@ const StyledItem = import_styled_components.default.li`
   theme: {
     yoga: {
       components: {
-        navigationmenu: { border, icon, font }
+        navigationmenu: { backgroundColor, border, icon, font }
       }
     }
   }
@@ -104,6 +107,8 @@ const StyledItem = import_styled_components.default.li`
       &:hover,
       &:focus {
         ${!isActive && import_styled_components.css`
+          background-color: ${backgroundColor.hover};
+
           ${StyledText} {
             color: ${font.color.hover};
           }

package/cjs/NavigationMenu/web/BottomItems/BottomItems.js

@@ -66,13 +66,15 @@ var import_yoga_helpers = require("@gympass/yoga-helpers");
 const StyledItemsContainer = import_styled_components.default.nav`
   position: relative;
   ${import_yoga_helpers.media.lg`display: none`}
+
+  z-index: ${({ $zIndex }) => $zIndex != null ? $zIndex : 2};
 `;
 const StyledItems = import_styled_components.default.ul`
   ${({
   theme: {
     yoga: {
       components: {
-        navigationmenu: { backgroundColor, border, gap }
+        navigationmenu: { backgroundColor, border, gap, height }
       }
     }
   }
@@ -84,13 +86,12 @@ const StyledItems = import_styled_components.default.ul`
     grid-auto-flow: column;
     align-items: center;
     width: 100%;
-    height: 56px;
-    background-color: ${backgroundColor.white};
+    height: ${height.bottomMenu}px;
+    background-color: ${backgroundColor.bottomMenu};
     margin: 0;
     padding: 0;
     border: 1px solid ${border.color.default};
     gap: ${gap.xxxsmall}px;
-    z-index: ${({ $zIndex }) => $zIndex != null ? $zIndex : 2};
   `}
 `;
 const BottomItems = (_a) => {

package/cjs/NavigationMenu/web/Item/styles.js

@@ -35,11 +35,9 @@ __export(styles_exports, {
 });
 module.exports = __toCommonJS(styles_exports);
 var import_styled_components = __toESM(require("styled-components"));
-var import_yoga_helpers = require("@gympass/yoga-helpers");
-var import_Box = __toESM(require("../../../Box"));
 var import_Tag = __toESM(require("../../../Tag"));
 var import_Text = __toESM(require("../../../Text"));
-const StyledTextContainer = (0, import_styled_components.default)(import_Box.default)`
+const StyledTextContainer = import_styled_components.default.div`
   ${({
   isSubItem,
   theme: {
@@ -70,9 +68,9 @@ const StyledTag = (0, import_styled_components.default)(import_Tag.default)`
   }
 }) => import_styled_components.css`
     text-transform: uppercase;
-    background-color: ${backgroundColor.stamina};
+    background-color: ${backgroundColor.tag};
     color: ${tag.color.default};
-    border-radius: ${border.radius.circle}px;
+    border-radius: ${border.radius.tag}px;
   `}
 `;
 const StyledText = (0, import_styled_components.default)(import_Text.default)`
@@ -94,7 +92,6 @@ const StyledText = (0, import_styled_components.default)(import_Text.default)`
 `;
 const Active = import_styled_components.css`
   ${({
-  isResponsive,
   theme: {
     yoga: {
       components: {
@@ -106,18 +103,11 @@ const Active = import_styled_components.css`
     cursor: auto;
 
     > ${StyledTextContainer} {
-      background-color: ${backgroundColor.default};
-
-      ${isResponsive ? import_yoga_helpers.media.lg`background-color: ${backgroundColor.yoga}` : import_styled_components.css`
-            background-color: ${backgroundColor.yoga};
-          `}
+      background-color: ${backgroundColor.active};
 
       ${StyledText} {
         color: ${font.color.active};
-
-        ${isResponsive ? import_yoga_helpers.media.lg`font-weight: ${font.weight.medium}` : import_styled_components.css`
-              font-weight: ${font.weight.medium};
-            `}
+        font-weight: ${font.weight.bold};
       }
 
       svg {
@@ -125,7 +115,7 @@ const Active = import_styled_components.css`
       }
 
       > ${StyledTag} {
-        background-color: ${backgroundColor.stamina};
+        background-color: ${backgroundColor.tag};
       }
     }
   `}

package/cjs/NavigationMenu/web/Menu/Menu.js

@@ -35,50 +35,63 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_styled_components = __toESM(require("styled-components"));
 var import_yoga_icons = require("@gympass/yoga-icons");
 var import_yoga = require("@gympass/yoga");
-var import_Box = __toESM(require("../../../Box"));
 var import_Icon = __toESM(require("../../../Icon"));
-const StyledMenu = (0, import_styled_components.default)(import_Box.default)`
+const StyledMenu = import_styled_components.default.div`
   ${({
   hasAction,
   theme: {
     yoga: {
       components: {
-        navigationmenu: { avatar, backgroundColor, border, gap, padding }
+        navigationmenu: {
+          backgroundColor,
+          border,
+          gap,
+          padding,
+          height,
+          hover
+        }
       }
     }
   }
 }) => import_styled_components.css`
       transition: background-color 300ms ease-in-out;
 
-      display: flex;
+      display: grid;
       align-items: center;
-      justify-content: space-between;
       width: 100%;
+      grid-template-columns: max-content 1fr max-content;
       gap: ${gap.xxsmall}px;
       padding: ${padding.xsmall}px;
-      background-color: ${backgroundColor.white};
-      border-radius: ${border.radius.circle}px;
-      border: 1px solid ${border.color.white};
-
-      > div:first-child {
-        height: ${avatar.height}px;
-        width: ${avatar.width}px;
-      }
+      background-color: ${backgroundColor.contextMenu};
+      border-radius: ${border.radius.contextMenu}px;
+      min-height: ${height.contextMenu}px;
 
       ${hasAction && import_styled_components.css`
-        :hover,
+        cursor: pointer;
+        &:hover,
         &:focus {
-          cursor: pointer;
-          border: 1px solid ${border.color.default};
+          ${hover.contextMenu}
         }
       `}
     `}
 `;
-const StyledTextContainer = (0, import_styled_components.default)(import_Box.default)`
-  flex: 1;
-  overflow: hidden;
+const StyledTextContainer = import_styled_components.default.div`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { gap }
+      }
+    }
+  }
+}) => import_styled_components.css`
+      display: flex;
+      flex-direction: column;
+      gap: ${gap.xxxsmall}px;
+      overflow: hidden;
+    `}
 `;
-const StyledText = (0, import_styled_components.default)(import_yoga.Text.Small)`
+const StyledTitle = (0, import_styled_components.default)(import_yoga.Text.H4)`
   ${({
   theme: {
     yoga: {
@@ -88,22 +101,74 @@ const StyledText = (0, import_styled_components.default)(import_yoga.Text.Small)
     }
   }
 }) => import_styled_components.css`
-      font-weight: ${font.weight.medium};
+      font-size: ${font.size.contextMenu.title}px;
+      line-height: ${font.size.contextMenu.title}px;
+      font-weight: ${font.weight.bold};
       flex: 1;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
     `}
 `;
-const Menu = ({ avatar: Avatar, subtitle, title, onClick }) => {
+const StyledSubtitle = (0, import_styled_components.default)(import_yoga.Text.Small)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { font }
+      }
+    }
+  }
+}) => import_styled_components.css`
+      color: ${font.color.default};
+    `}
+`;
+const StyledActionIconContainer = import_styled_components.default.div`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { icon }
+      }
+    }
+  }
+}) => import_styled_components.css`
+    svg {
+      fill: ${icon.fill.actions};
+    }
+  `}
+`;
+const StyledAvatarContainer = import_styled_components.default.div`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { avatar }
+      }
+    }
+  }
+}) => import_styled_components.css`
+    > div:first-child {
+      height: ${avatar.height}px;
+      width: ${avatar.width}px;
+    }
+  `}
+`;
+const Menu = ({
+  avatar: Avatar,
+  icon,
+  subtitle,
+  title,
+  onClick
+}) => {
   const hasAction = Boolean(onClick);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledMenu, { hasAction, onClick, children: [
-    Avatar,
+    !!Avatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledAvatarContainer, { children: Avatar }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledTextContainer, { children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledText, { children: title }),
-      subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Text.Small, { color: "deep", children: subtitle })
+      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTitle, { children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSubtitle, { children: subtitle })
     ] }),
-    hasAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: import_yoga_icons.ArrowRight, size: "large", fill: "vibin" })
+    hasAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledActionIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: icon != null ? icon : import_yoga_icons.ChevronDown, size: "large" }) })
   ] });
 };
 var Menu_default = Menu;

package/cjs/NavigationMenu/web/NavigationMenu.js

@@ -67,7 +67,6 @@ var import_Menu = __toESM(require("./Menu"));
 var import_Switcher = __toESM(require("./Switcher"));
 var import_Item = require("./Item");
 var import_BottomItems = require("./BottomItems");
-var import_Box = __toESM(require("../../Box"));
 const DeskTopContainer = import_styled_components.css`
   ${({
   theme: {
@@ -111,7 +110,7 @@ const StyledNavigationMenu = import_styled_components.default.div`
     `}
   `}
 `;
-const StyledHeader = (0, import_styled_components.default)(import_Box.default)`
+const StyledHeader = import_styled_components.default.header`
   ${({
   theme: {
     yoga: {
@@ -149,7 +148,7 @@ const StyledItemsGroup = import_styled_components.default.ul`
     gap: ${gap.xxxsmall}px;
   `}
 `;
-const StyledFooter = (0, import_styled_components.default)(import_Box.default)`
+const StyledFooter = import_styled_components.default.footer`
   ${({
   theme: {
     yoga: {
@@ -168,17 +167,20 @@ const NavigationMenu = (_a) => {
   var _b = _a, {
     children,
     openOnMobile = false,
-    responsive = true
+    responsive = true,
+    zIndex
   } = _b, htmlAttributes = __objRest(_b, [
     "children",
     "openOnMobile",
-    "responsive"
+    "responsive",
+    "zIndex"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     StyledNavigationMenu,
     __spreadProps(__spreadValues({}, htmlAttributes), {
       isOpenOnMobile: openOnMobile,
       isResponsive: responsive,
+      $zIndex: zIndex,
       children
     })
   );

package/cjs/NavigationMenu/web/Switcher/Actions.js

@@ -41,7 +41,7 @@ const StyledAction = import_styled_components.default.div`
   theme: {
     yoga: {
       components: {
-        navigationmenu: { backgroundColor, border, height, width }
+        navigationmenu: { backgroundColor, border, height, width, icon }
       }
     }
   }
@@ -53,7 +53,11 @@ const StyledAction = import_styled_components.default.div`
       justify-content: center;
       width: ${width.xxlarge}px;
       height: ${height.xxlarge}px;
-      border-radius: ${border.radius.circle}px;
+      border-radius: ${border.radius.action}px;
+
+      svg {
+        fill: ${icon.fill.actions};
+      }
 
       :hover,
       &:focus {
@@ -62,18 +66,18 @@ const StyledAction = import_styled_components.default.div`
       }
     `}
 `;
-function Actions({ actions, sideOffset, $zIndex }) {
+function Actions({ actions, sideOffset, zIndex }) {
   if (!(actions == null ? void 0 : actions.length)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_yoga.Menu, { onMouseHover: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Menu.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledAction, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: import_yoga_icons.MenuMore, size: "medium", fill: "vibin" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Menu.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledAction, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: import_yoga_icons.MenuMore, size: "medium" }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_yoga.Menu.List,
       {
         side: "right",
         sideOffset,
-        zIndex: `${$zIndex != null ? $zIndex : 2}`,
+        zIndex: `${zIndex != null ? zIndex : 2}`,
         children: actions.map(({ id, label, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Menu.Item, { onClick, children: label }, id))
       }
     )

package/cjs/NavigationMenu/web/Switcher/Switcher.js

@@ -89,7 +89,7 @@ const StyledSwitcher = (0, import_styled_components.default)(import_Box.default)
       }
     `}
 `;
-const StyledTextContainer = (0, import_styled_components.default)(import_Box.default)`
+const StyledTextContainer = import_styled_components.default.div`
   flex: 1;
   overflow: hidden;
 `;
@@ -103,7 +103,7 @@ const StyledTitle = (0, import_styled_components.default)(import_yoga.Text.Small
     }
   }
 }) => import_styled_components.css`
-      font-weight: ${font.weight.medium};
+      font-weight: ${font.weight.bold};
       flex: 1;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -126,7 +126,7 @@ const Switcher = (_a) => {
     "subtitle",
     "title"
   ]);
-  const hasActions = actions == null ? void 0 : actions.length;
+  const hasActions = !!(actions == null ? void 0 : actions.length);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledSwitcher, { fill, children: [
     Avatar,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTextContainer, { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [