@gympass/yoga 7.104.1 → 7.106.0

package/esm/NavigationMenu/web/BottomItems/BottomItems.js

@@ -35,13 +35,15 @@ import { media } from "@gympass/yoga-helpers";
 const StyledItemsContainer = styled.nav`
   position: relative;
   ${media.lg`display: none`}
+
+  z-index: ${({ $zIndex }) => $zIndex != null ? $zIndex : 2};
 `;
 const StyledItems = styled.ul`
   ${({
   theme: {
     yoga: {
       components: {
-        navigationmenu: { backgroundColor, border, gap }
+        navigationmenu: { backgroundColor, border, gap, height }
       }
     }
   }
@@ -53,13 +55,12 @@ const StyledItems = styled.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/esm/NavigationMenu/web/Item/styles.js

@@ -1,9 +1,7 @@
 import styled, { css } from "styled-components";
-import { media } from "@gympass/yoga-helpers";
-import Box from "../../../Box";
 import Tag from "../../../Tag";
 import Text from "../../../Text";
-const StyledTextContainer = styled(Box)`
+const StyledTextContainer = styled.div`
   ${({
   isSubItem,
   theme: {
@@ -34,9 +32,9 @@ const StyledTag = styled(Tag)`
   }
 }) => 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 = styled(Text)`
@@ -58,7 +56,6 @@ const StyledText = styled(Text)`
 `;
 const Active = css`
   ${({
-  isResponsive,
   theme: {
     yoga: {
       components: {
@@ -70,18 +67,11 @@ const Active = css`
     cursor: auto;
 
     > ${StyledTextContainer} {
-      background-color: ${backgroundColor.default};
-
-      ${isResponsive ? media.lg`background-color: ${backgroundColor.yoga}` : css`
-            background-color: ${backgroundColor.yoga};
-          `}
+      background-color: ${backgroundColor.active};
 
       ${StyledText} {
         color: ${font.color.active};
-
-        ${isResponsive ? media.lg`font-weight: ${font.weight.medium}` : css`
-              font-weight: ${font.weight.medium};
-            `}
+        font-weight: ${font.weight.bold};
       }
 
       svg {
@@ -89,7 +79,7 @@ const Active = css`
       }
 
       > ${StyledTag} {
-        background-color: ${backgroundColor.stamina};
+        background-color: ${backgroundColor.tag};
       }
     }
   `}

package/esm/NavigationMenu/web/Menu/Menu.js

@@ -1,51 +1,64 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
-import { ArrowRight } from "@gympass/yoga-icons";
+import { ChevronDown } from "@gympass/yoga-icons";
 import { Text } from "@gympass/yoga";
-import Box from "../../../Box";
 import Icon from "../../../Icon";
-const StyledMenu = styled(Box)`
+const StyledMenu = styled.div`
   ${({
   hasAction,
   theme: {
     yoga: {
       components: {
-        navigationmenu: { avatar, backgroundColor, border, gap, padding }
+        navigationmenu: {
+          backgroundColor,
+          border,
+          gap,
+          padding,
+          height,
+          hover
+        }
       }
     }
   }
 }) => 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 && css`
-        :hover,
+        cursor: pointer;
+        &:hover,
         &:focus {
-          cursor: pointer;
-          border: 1px solid ${border.color.default};
+          ${hover.contextMenu}
         }
       `}
     `}
 `;
-const StyledTextContainer = styled(Box)`
-  flex: 1;
-  overflow: hidden;
+const StyledTextContainer = styled.div`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { gap }
+      }
+    }
+  }
+}) => css`
+      display: flex;
+      flex-direction: column;
+      gap: ${gap.xxxsmall}px;
+      overflow: hidden;
+    `}
 `;
-const StyledText = styled(Text.Small)`
+const StyledTitle = styled(Text.H4)`
   ${({
   theme: {
     yoga: {
@@ -55,22 +68,74 @@ const StyledText = styled(Text.Small)`
     }
   }
 }) => 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 = styled(Text.Small)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { font }
+      }
+    }
+  }
+}) => css`
+      color: ${font.color.default};
+    `}
+`;
+const StyledActionIconContainer = styled.div`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { icon }
+      }
+    }
+  }
+}) => css`
+    svg {
+      fill: ${icon.fill.actions};
+    }
+  `}
+`;
+const StyledAvatarContainer = styled.div`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { avatar }
+      }
+    }
+  }
+}) => 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__ */ jsxs(StyledMenu, { hasAction, onClick, children: [
-    Avatar,
+    !!Avatar && /* @__PURE__ */ jsx(StyledAvatarContainer, { children: Avatar }),
     /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
-      title && /* @__PURE__ */ jsx(StyledText, { children: title }),
-      subtitle && /* @__PURE__ */ jsx(Text.Small, { color: "deep", children: subtitle })
+      title && /* @__PURE__ */ jsx(StyledTitle, { children: title }),
+      subtitle && /* @__PURE__ */ jsx(StyledSubtitle, { children: subtitle })
     ] }),
-    hasAction && /* @__PURE__ */ jsx(Icon, { as: ArrowRight, size: "large", fill: "vibin" })
+    hasAction && /* @__PURE__ */ jsx(StyledActionIconContainer, { children: /* @__PURE__ */ jsx(Icon, { as: icon != null ? icon : ChevronDown, size: "large" }) })
   ] });
 };
 var Menu_default = Menu;

package/esm/NavigationMenu/web/NavigationMenu.js

@@ -36,7 +36,6 @@ import Menu from "./Menu";
 import Switcher from "./Switcher";
 import { Item, Subitem } from "./Item";
 import { BottomItems, BottomItem } from "./BottomItems";
-import Box from "../../Box";
 const DeskTopContainer = css`
   ${({
   theme: {
@@ -80,7 +79,7 @@ const StyledNavigationMenu = styled.div`
     `}
   `}
 `;
-const StyledHeader = styled(Box)`
+const StyledHeader = styled.header`
   ${({
   theme: {
     yoga: {
@@ -118,7 +117,7 @@ const StyledItemsGroup = styled.ul`
     gap: ${gap.xxxsmall}px;
   `}
 `;
-const StyledFooter = styled(Box)`
+const StyledFooter = styled.footer`
   ${({
   theme: {
     yoga: {
@@ -137,17 +136,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__ */ jsx(
     StyledNavigationMenu,
     __spreadProps(__spreadValues({}, htmlAttributes), {
       isOpenOnMobile: openOnMobile,
       isResponsive: responsive,
+      $zIndex: zIndex,
       children
     })
   );

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

@@ -8,7 +8,7 @@ const StyledAction = styled.div`
   theme: {
     yoga: {
       components: {
-        navigationmenu: { backgroundColor, border, height, width }
+        navigationmenu: { backgroundColor, border, height, width, icon }
       }
     }
   }
@@ -20,7 +20,11 @@ const StyledAction = styled.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 {
@@ -29,18 +33,18 @@ const StyledAction = styled.div`
       }
     `}
 `;
-function Actions({ actions, sideOffset, $zIndex }) {
+function Actions({ actions, sideOffset, zIndex }) {
   if (!(actions == null ? void 0 : actions.length)) {
     return null;
   }
   return /* @__PURE__ */ jsxs(YogaMenu, { onMouseHover: false, children: [
-    /* @__PURE__ */ jsx(YogaMenu.Action, { children: /* @__PURE__ */ jsx(StyledAction, { children: /* @__PURE__ */ jsx(Icon, { as: MenuMore, size: "medium", fill: "vibin" }) }) }),
+    /* @__PURE__ */ jsx(YogaMenu.Action, { children: /* @__PURE__ */ jsx(StyledAction, { children: /* @__PURE__ */ jsx(Icon, { as: MenuMore, size: "medium" }) }) }),
     /* @__PURE__ */ jsx(
       YogaMenu.List,
       {
         side: "right",
         sideOffset,
-        zIndex: `${$zIndex != null ? $zIndex : 2}`,
+        zIndex: `${zIndex != null ? zIndex : 2}`,
         children: actions.map(({ id, label, onClick }) => /* @__PURE__ */ jsx(YogaMenu.Item, { onClick, children: label }, id))
       }
     )

package/esm/NavigationMenu/web/Switcher/Switcher.js

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

package/esm/Text/Text.theme.js

@@ -2,105 +2,144 @@ const Text = ({ fontSizes, lineHeights, fontWeights }) => ({
   display1: {
     fontFamily: "NaN Holo Condensed",
     fontsize: fontSizes.xhuge,
-    lineHeight: lineHeights.xhuge,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.xhuge
   },
   display2: {
     fontFamily: "NaN Holo Condensed",
     fontsize: fontSizes.xxxlarge,
-    lineHeight: lineHeights.xxlarge,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.xxlarge
   },
   display3: {
     fontFamily: "NaN Holo Condensed",
     fontsize: fontSizes.xxlarge,
-    lineHeight: lineHeights.xlarge,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.xlarge
   },
   display4: {
     fontFamily: "NaN Holo Condensed",
     fontsize: fontSizes.xlarge,
-    lineHeight: lineHeights.medium,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.medium
   },
   displayNumber: {
     fontFamily: "NaN Holo Condensed",
     fontsize: fontSizes.xxxlarge,
-    lineHeight: lineHeights.xxlarge,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.xxlarge
   },
   h1: {
     fontsize: fontSizes.huge,
-    lineHeight: lineHeights.huge,
-    fontWeight: fontWeights.medium
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights.huge
+  },
+  "h1-light": {
+    fontWeight: fontWeights.light
   },
   h2: {
     fontsize: fontSizes.xxxlarge,
-    lineHeight: lineHeights.xxxlarge,
-    fontWeight: fontWeights.medium
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights.xxxlarge
+  },
+  "h2-light": {
+    fontWeight: fontWeights.light
   },
   h3: {
     fontsize: fontSizes.xxlarge,
-    lineHeight: lineHeights.xxlarge,
-    fontWeight: fontWeights.medium
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights.xxlarge
+  },
+  "h3-light": {
+    fontWeight: fontWeights.light
   },
   h4: {
     fontsize: fontSizes.xlarge,
-    lineHeight: lineHeights.xlarge,
-    fontWeight: fontWeights.medium
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights.xlarge
+  },
+  "h4-light": {
+    fontWeight: fontWeights.light
   },
   h5: {
     fontsize: fontSizes.large,
-    lineHeight: lineHeights.large,
-    fontWeight: fontWeights.medium
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights.large
+  },
+  "h5-light": {
+    fontWeight: fontWeights.light
   },
   body1: {
     fontsize: fontSizes.medium,
-    lineHeight: lineHeights.medium,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.medium
+  },
+  "body1-bold": {
     fontWeight: fontWeights.medium
   },
   body2: {
     fontsize: fontSizes.small,
-    lineHeight: lineHeights.small,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.small
+  },
+  "body2-bold": {
     fontWeight: fontWeights.medium
   },
   caption: {
     fontsize: fontSizes.xsmall,
-    lineHeight: lineHeights.xsmall,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.xsmall
   },
   overline: {
     fontsize: fontSizes.xsmall,
-    lineHeight: lineHeights.xsmall,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights.xsmall
   },
   sectionTitle: {
     fontsize: fontSizes.xsmall,
-    lineHeight: lineHeights.xsmall,
     fontWeight: fontWeights.medium,
+    lineHeight: lineHeights.xsmall,
     letterSpacing: 1,
     textTransform: "uppercase"
   },
   smallestException: {
     fontsize: fontSizes.xxsmall,
-    lineHeight: lineHeights.xxsmall,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.xxsmall
   },
   // deprecated, please don't use
   p: {
     fontsize: fontSizes.medium,
-    lineHeight: lineHeights.medium,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.medium
+  },
+  "p-light": {
+    fontWeight: fontWeights.light
+  },
+  "p-bold": {
+    fontWeight: fontWeights.medium
   },
   small: {
     fontsize: fontSizes.small,
-    lineHeight: lineHeights.small,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.small
+  },
+  "small-light": {
+    fontWeight: fontWeights.light
+  },
+  "small-bold": {
+    fontWeight: fontWeights.medium
   },
   tiny: {
     fontsize: fontSizes.xsmall,
-    lineHeight: lineHeights.xsmall,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.xsmall
+  },
+  "tiny-light": {
+    fontWeight: fontWeights.light
+  },
+  "tiny-bold": {
+    fontWeight: fontWeights.medium
   },
   light: {
     fontWeight: fontWeights.light

package/esm/Text/native/Text.test.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { render } from "@testing-library/react-native";
-import { ThemeProvider } from "../..";
 import { Text } from ".";
+import { ThemeProvider } from "../..";
 describe("<Text />", () => {
   describe("Snapshots", () => {
     it("should match snapshot with Text", () => {
@@ -34,6 +34,35 @@ describe("<Text />", () => {
       );
       expect(toJSON()).toMatchSnapshot();
     });
+    it("should match snapshot with Text when v3Theme is settled", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+          /* @__PURE__ */ jsx(Text.Display1, { children: "Text Display1" }),
+          /* @__PURE__ */ jsx(Text.Display2, { children: "Text Display2" }),
+          /* @__PURE__ */ jsx(Text.Display3, { children: "Text Display3" }),
+          /* @__PURE__ */ jsx(Text.Display4, { children: "Text Display4" }),
+          /* @__PURE__ */ jsx(Text.DisplayNumber, { children: "Text DisplayNumber" }),
+          /* @__PURE__ */ jsx(Text.H1, { children: "Text H1" }),
+          /* @__PURE__ */ jsx(Text.H2, { children: "Text H2" }),
+          /* @__PURE__ */ jsx(Text.H3, { children: "Text H3" }),
+          /* @__PURE__ */ jsx(Text.H4, { children: "Text H4" }),
+          /* @__PURE__ */ jsx(Text.Body1, { children: "Text Body1" }),
+          /* @__PURE__ */ jsx(Text.Body2, { children: "Text Body2" }),
+          /* @__PURE__ */ jsx(Text.Caption, { children: "Text Caption" }),
+          /* @__PURE__ */ jsx(Text.Overline, { children: "Text Overline" }),
+          /* @__PURE__ */ jsx(Text.SectionTitle, { children: "Text SectionTitle" }),
+          /* @__PURE__ */ jsx(Text.SmallestException, { children: "Text SmallestException" }),
+          /* @__PURE__ */ jsx(Text, { children: "Text" }),
+          /* @__PURE__ */ jsx(Text.Small, { children: "Text Small" }),
+          /* @__PURE__ */ jsx(Text.Tiny, { children: "Text Tiny" }),
+          /* @__PURE__ */ jsx(Text.Regular, { children: "Text Regular" }),
+          /* @__PURE__ */ jsx(Text.Medium, { children: "Text Medium" }),
+          /* @__PURE__ */ jsx(Text.Bold, { children: "Text Bold" }),
+          /* @__PURE__ */ jsx(Text.Black, { children: "Text Black" })
+        ] })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
     it("should match snapshot with Text variant", () => {
       const { toJSON } = render(
         /* @__PURE__ */ jsxs(ThemeProvider, { children: [

package/esm/Text/textStyle.android.js

@@ -1,5 +1,8 @@
 import { css } from "styled-components";
 import defaultStyle from "./sharedTextStyle";
+const formatFontFamily = (fontFamily, fontWeight) => {
+  return fontWeight === 400 ? fontFamily : `${fontFamily}-${fontWeight}`;
+};
 const textStyle = (type) => () => css`
     ${defaultStyle(type)};
     ${({
@@ -8,26 +11,20 @@ const textStyle = (type) => () => css`
   theme: {
     yoga: {
       baseFont,
-      fontWeights,
-      components: {
-        text: {
-          [type]: { fontFamily, fontWeight }
-        }
-      }
+      components: { text }
     }
   }
 }) => {
-  let finalFontFamily;
-  if (fontFamily) {
-    finalFontFamily = `${fontFamily}-${fontWeight}`;
-  } else {
-    finalFontFamily = fontWeight === 400 ? baseFont.family : `${baseFont.family}-${fontWeight}`;
+  const fontFamily = text[type].fontFamily || baseFont.family;
+  let finalFontWeight = text[type].fontWeight;
+  if (light && text[`${type}-light`]) {
+    finalFontWeight = text[`${type}-light`].fontWeight;
+  }
+  if (bold && text[`${type}-bold`]) {
+    finalFontWeight = text[`${type}-bold`].fontWeight;
   }
   return css`
-        font-family: '${finalFontFamily}';
-
-        ${light ? `font-family: ${baseFont.family}-${fontWeights.light};` : ""}
-        ${bold ? `font-family: ${baseFont.family}-${fontWeights.bold};` : ""}
+        font-family: '${formatFontFamily(fontFamily, finalFontWeight)}';
       `;
 }}
   `;

package/esm/Text/textStyle.ios.js

@@ -8,21 +8,21 @@ const textStyle = (type) => () => css`
   theme: {
     yoga: {
       baseFont,
-      fontWeights,
-      components: {
-        text: {
-          [type]: { fontFamily, fontWeight }
-        }
-      }
+      components: { text }
     }
   }
 }) => {
-  const finalFontFamily = fontFamily || baseFont.family;
+  const fontFamily = text[type].fontFamily || baseFont.family;
+  let finalFontWeight = text[type].fontWeight;
+  if (light && text[`${type}-light`]) {
+    finalFontWeight = text[`${type}-light`].fontWeight;
+  }
+  if (bold && text[`${type}-bold`]) {
+    finalFontWeight = text[`${type}-bold`].fontWeight;
+  }
   return css`
-        font-family: ${finalFontFamily};
-        ${fontWeight ? `font-weight: ${fontWeight};` : ""}
-        ${light ? `font-weight: ${fontWeights.light};` : ""}
-        ${bold ? `font-weight: ${fontWeights.bold};` : ""}
+        font-family: ${fontFamily};
+        ${finalFontWeight ? `font-weight: ${finalFontWeight};` : ""}
       `;
 }}
   `;