@gympass/yoga 7.104.1 → 7.106.0

package/cjs/Text/web/Text.test.js

@@ -24,91 +24,121 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_react2 = require("@testing-library/react");
-var import__ = require("../..");
-var import__2 = require(".");
+var import__ = require(".");
+var import__2 = require("../..");
 describe("<Text />", () => {
   describe("Snapshots", () => {
     it("should match snapshot with Text", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.ThemeProvider, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Display1, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Display2, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Display3, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Display4, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.DisplayNumber, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.H1, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.H2, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.H3, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.H4, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.H5, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Body1, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Body2, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Caption, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Overline, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.SectionTitle, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.SmallestException, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Small, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Tiny, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Regular, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Medium, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Bold, { children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Black, { children: "Live the mission" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__2.ThemeProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Display1, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Display2, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Display3, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Display4, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.DisplayNumber, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H1, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H2, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H3, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H4, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H5, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Body1, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Body2, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Caption, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Overline, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.SectionTitle, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.SmallestException, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Small, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Tiny, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Regular, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Medium, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Bold, { children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Black, { children: "Live the mission" })
+        ] })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should match snapshot with Text when v3theme is settled", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__2.ThemeProvider, { theme: import__2.v3theme, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Display1, { children: "Text Display1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Display2, { children: "Text Display2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Display3, { children: "Text Display3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Display4, { children: "Text Display4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.DisplayNumber, { children: "Text DisplayNumber" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H1, { children: "Text H1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H2, { children: "Text H2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H3, { children: "Text H3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H4, { children: "Text H4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H5, { children: "Text H5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Body1, { children: "Text Body1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Body2, { children: "Text Body2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Caption, { children: "Text Caption" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Overline, { children: "Text Overline" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.SectionTitle, { children: "Text SectionTitle" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.SmallestException, { children: "Text SmallestException" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: "Text" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Small, { children: "Text Small" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Tiny, { children: "Text Tiny" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Regular, { children: "Text Regular" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Medium, { children: "Text Medium" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Bold, { children: "Text Bold" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Black, { children: "Text Black" })
         ] })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with Text variant", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.ThemeProvider, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.H1, { variant: "primary", children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.H2, { variant: "secondary", children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.H3, { variant: "tertiary", children: "Live the mission" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__2.ThemeProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H1, { variant: "primary", children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H2, { variant: "secondary", children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H3, { variant: "tertiary", children: "Live the mission" })
         ] })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with Text light", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.ThemeProvider, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.H1, { light: true, children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.H2, { light: true, children: "Live the mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.H3, { light: true, children: "Live the mission" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__2.ThemeProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H1, { light: true, children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H2, { light: true, children: "Live the mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H3, { light: true, children: "Live the mission" })
         ] })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with Text fontSize", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.ThemeProvider, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Small, { fontSize: "xsmall", children: "Live the small mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Tiny, { fontSize: "medium", children: "Live the medium mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Regular, { fontSize: "xlarge", children: "Live the xlarge mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Medium, { fontSize: "xxxlarge", children: "Live the xxxlarge mission" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__2.ThemeProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Small, { fontSize: "xsmall", children: "Live the small mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Tiny, { fontSize: "medium", children: "Live the medium mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Regular, { fontSize: "xlarge", children: "Live the xlarge mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Medium, { fontSize: "xxxlarge", children: "Live the xxxlarge mission" })
         ] })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with Text size", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.ThemeProvider, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Small, { size: "xsmall", children: "Live the small mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Tiny, { size: "medium", children: "Live the medium mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Regular, { size: "xlarge", children: "Live the xlarge mission" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.Medium, { size: "xxxlarge", children: "Live the xxxlarge mission" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__2.ThemeProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Small, { size: "xsmall", children: "Live the small mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Tiny, { size: "medium", children: "Live the medium mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Regular, { size: "xlarge", children: "Live the xlarge mission" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Medium, { size: "xxxlarge", children: "Live the xxxlarge mission" })
         ] })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with inverted Text", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text, { inverted: true, children: "Live the mission" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { inverted: true, children: "Live the mission" }) })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with truncated lines Text", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__2.Text, { numberOfLines: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Text, { numberOfLines: 1, children: [
           "Live the mission",
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
           "even in one line"
@@ -118,32 +148,32 @@ describe("<Text />", () => {
     });
     it("should match snapshot with border prop system", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text, { border: "small", bRadius: "small", children: "Live the mission" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { border: "small", bRadius: "small", children: "Live the mission" }) })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with background color prop system", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text, { backgroundColor: "vibin", children: "Live the mission" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { backgroundColor: "vibin", children: "Live the mission" }) })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with elevation prop system", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text, { elevation: "medium", children: "Live the mission" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { elevation: "medium", children: "Live the mission" }) })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with spacing prop system", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text, { m: "medium", paddingVertical: "large", paddingHorizontal: "small", children: "Live the mission" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { m: "medium", paddingVertical: "large", paddingHorizontal: "small", children: "Live the mission" }) })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with typography prop system", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import__2.Text,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import__.Text,
           {
             color: "text.primary",
             fontSize: "small",
@@ -157,31 +187,31 @@ describe("<Text />", () => {
     });
     it("should match snapshot with display prop system", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text, { display: "inline-flex", children: "Live the mission" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { display: "inline-flex", children: "Live the mission" }) })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with position prop system", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text, { position: "fixed", top: "small", left: "small", children: "Live the mission" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { position: "fixed", top: "small", left: "small", children: "Live the mission" }) })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with flexes prop system", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text, { display: "flex", flexGrow: 1, children: "Live the mission" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { display: "flex", flexGrow: 1, children: "Live the mission" }) })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with overflows prop system", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text, { overflow: "scroll", children: "Live the mission" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { overflow: "scroll", children: "Live the mission" }) })
       );
       expect(container).toMatchSnapshot();
     });
     it("should match snapshot with Text bold", () => {
       const { container } = (0, import_react2.render)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.Text.H1, { bold: true, children: "Live the mission" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.H1, { bold: true, children: "Live the mission" }) })
       );
       expect(container).toMatchSnapshot();
     });

package/cjs/Theme/theme/v3theme.js

@@ -82,7 +82,164 @@ const v3theme = (0, import_themeGenerator.default)((tokens) => ({
       backgroundAndDisabled: tokens.colors.clearNew
     }
   },
-  baseFont: tokens.fonts.inter
+  baseFont: tokens.fonts.inter,
+  components: {
+    text: {
+      display1: {
+        fontFamily: "NaN Holo Condensed",
+        fontsize: tokens.fontSizes.xhuge,
+        fontWeight: tokens.fontWeights.bold,
+        lineHeight: tokens.lineHeights.xhuge
+      },
+      display2: {
+        fontFamily: "NaN Holo Condensed",
+        fontsize: tokens.fontSizes.xxxlarge,
+        fontWeight: tokens.fontWeights.bold,
+        lineHeight: tokens.lineHeights.xxlarge
+      },
+      display3: {
+        fontFamily: "NaN Holo Condensed",
+        fontsize: tokens.fontSizes.xxlarge,
+        fontWeight: tokens.fontWeights.bold,
+        lineHeight: tokens.lineHeights.xlarge
+      },
+      display4: {
+        fontFamily: "NaN Holo Condensed",
+        fontsize: tokens.fontSizes.xlarge,
+        fontWeight: tokens.fontWeights.bold,
+        lineHeight: tokens.lineHeights.medium
+      },
+      displayNumber: {
+        fontFamily: "NaN Holo Condensed",
+        fontsize: tokens.fontSizes.xxxlarge,
+        fontWeight: tokens.fontWeights.bold,
+        lineHeight: tokens.lineHeights.xxlarge
+      },
+      h1: {
+        fontsize: tokens.fontSizes.huge,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.huge
+      },
+      "h1-light": null,
+      "h1-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      h2: {
+        fontsize: tokens.fontSizes.xxxlarge,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.xxxlarge
+      },
+      "h2-light": null,
+      "h2-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      h3: {
+        fontsize: tokens.fontSizes.xxlarge,
+        lineHeight: tokens.lineHeights.xxlarge,
+        fontWeight: tokens.fontWeights.medium
+      },
+      "h3-light": null,
+      "h3-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      h4: {
+        fontsize: tokens.fontSizes.xlarge,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.xlarge
+      },
+      "h4-light": null,
+      "h4-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      h5: {
+        fontsize: tokens.fontSizes.large,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.large
+      },
+      "h5-light": null,
+      "h5-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      body1: {
+        fontsize: tokens.fontSizes.medium,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.medium
+      },
+      "body1-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      body2: {
+        fontsize: tokens.fontSizes.small,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.small
+      },
+      "body2-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      caption: {
+        fontsize: tokens.fontSizes.xsmall,
+        fontWeight: tokens.fontWeights.regular,
+        lineHeight: tokens.lineHeights.xsmall
+      },
+      overline: {
+        fontsize: tokens.fontSizes.xsmall,
+        fontWeight: tokens.fontWeights.bold,
+        lineHeight: tokens.lineHeights.xsmall
+      },
+      sectionTitle: {
+        fontsize: tokens.fontSizes.xsmall,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.xsmall,
+        letterSpacing: 1,
+        textTransform: "uppercase"
+      },
+      smallestException: {
+        fontsize: tokens.fontSizes.xxsmall,
+        fontWeight: tokens.fontWeights.regular,
+        lineHeight: tokens.lineHeights.xxsmall
+      },
+      // deprecated, please don't use
+      p: {
+        fontsize: tokens.fontSizes.medium,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.medium
+      },
+      "p-light": null,
+      "p-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      small: {
+        fontsize: tokens.fontSizes.small,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.small
+      },
+      "small-light": null,
+      "small-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      tiny: {
+        fontsize: tokens.fontSizes.xsmall,
+        fontWeight: tokens.fontWeights.regular,
+        lineHeight: tokens.lineHeights.xsmall
+      },
+      "tiny-light": null,
+      light: {
+        fontWeight: tokens.fontWeights.light
+      },
+      regular: {
+        fontWeight: tokens.fontWeights.regular
+      },
+      medium: {
+        fontWeight: tokens.fontWeights.medium
+      },
+      bold: {
+        fontWeight: tokens.fontWeights.bold
+      },
+      black: {
+        fontWeight: tokens.fontWeights.black
+      }
+    }
+  }
 }));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/esm/Checkbox/web/Checkbox.js

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

package/esm/NavigationMenu/NavigationMenu.theme.js

@@ -1,59 +1,142 @@
-const NavigationMenu = ({ colors, fontWeights, radii, spacing }) => ({
-  avatar: {
-    height: spacing.xlarge,
-    width: spacing.xlarge
-  },
+import { css } from "styled-components";
+import { merge } from "@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: 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: 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 merge(baseTheme, navigationMenuV3(theme));
+};
 var NavigationMenu_theme_default = NavigationMenu;
 export {
   NavigationMenu_theme_default as default

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

@@ -25,11 +25,13 @@ const Active = css`
   theme: {
     yoga: {
       components: {
-        navigationmenu: { icon, font }
+        navigationmenu: { backgroundColor, icon, font }
       }
     }
   }
 }) => css`
+      background-color: ${backgroundColor.active};
+
       :not(:last-child) {
         pointer-events: none;
       }
@@ -37,6 +39,7 @@ const Active = css`
       div {
         ${StyledText} {
           color: ${font.color.active};
+          font-weight: ${font.weight.bold};
         }
 
         svg {
@@ -51,7 +54,7 @@ const StyledItem = styled.li`
   theme: {
     yoga: {
       components: {
-        navigationmenu: { border, icon, font }
+        navigationmenu: { backgroundColor, border, icon, font }
       }
     }
   }
@@ -71,6 +74,8 @@ const StyledItem = styled.li`
       &:hover,
       &:focus {
         ${!isActive && css`
+          background-color: ${backgroundColor.hover};
+
           ${StyledText} {
             color: ${font.color.hover};
           }