@gympass/yoga 7.107.1 → 7.108.0

package/cjs/Button/Button.theme.js

@@ -28,7 +28,8 @@ const Button = ({
   borders,
   radii,
   colors,
-  fontWeights
+  fontWeights,
+  lineHeights
 }) => ({
   padding: {
     default: {
@@ -49,7 +50,11 @@ const Button = ({
       default: fontSizes.medium,
       small: fontSizes.small
     },
-    weight: fontWeights.medium
+    weight: fontWeights.medium,
+    lineHeight: {
+      default: lineHeights.medium,
+      small: lineHeights.xsmall
+    }
   },
   border: {
     radius: radii.circle

package/cjs/Button/native/Button.js

@@ -59,16 +59,26 @@ var Button_exports = {};
 __export(Button_exports, {
   ButtonContainer: () => ButtonContainer,
   Label: () => Label,
-  default: () => ButtonWithTouchable
+  default: () => Button_default
 });
 module.exports = __toCommonJS(Button_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
 var import_prop_types = require("prop-types");
+var import_styled_components = __toESM(require("styled-components"));
 var import_withTouchable = __toESM(require("./withTouchable"));
 var import_Text = __toESM(require("../../Text"));
-const Label = (0, import_styled_components.default)(import_Text.default.Medium)`
+const Label = (0, import_styled_components.default)(import_Text.default).attrs(
+  ({
+    theme: {
+      yoga: {
+        components: { button }
+      }
+    }
+  }) => ({
+    fontWeight: button.font.weight
+  })
+)`
   text-align: center;
   ${({
   small,
@@ -80,6 +90,7 @@ const Label = (0, import_styled_components.default)(import_Text.default.Medium)`
   }
 }) => `
       font-size: ${small ? button.font.size.small : button.font.size.default}px;
+      line-height: ${small ? button.font.lineHeight.small : button.font.lineHeight.default}px;
       color: ${color};
     `}
 `;
@@ -224,6 +235,7 @@ Button.defaultProps = {
   icon: void 0
 };
 const ButtonWithTouchable = (0, import_withTouchable.default)((0, import_styled_components.withTheme)(Button));
+var Button_default = ButtonWithTouchable;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ButtonContainer,

package/cjs/Button/native/Button.test.js

@@ -30,6 +30,14 @@ var import__ = __toESM(require(".."));
 describe("<Button />", () => {
   describe("Snapshots", () => {
     describe("primary buttons", () => {
+      describe("with v3theme", () => {
+        it("should match snapshot with v3theme Button", () => {
+          const { toJSON } = (0, import_react_native.render)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { theme: import_Theme.v3theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, {}) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+      });
       describe("Without props", () => {
         it("should match snapshot with default Button", () => {
           const { toJSON } = (0, import_react_native.render)(

package/cjs/Button/web/Button.test.js

@@ -30,6 +30,14 @@ var import__ = __toESM(require(".."));
 describe("<Button />", () => {
   describe("Snapshots", () => {
     describe("primary buttons", () => {
+      describe("with v3theme", () => {
+        it("should match snapshot with v3theme Button", () => {
+          const { container } = (0, import_react2.render)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { theme: import_Theme.v3theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, {}) })
+          );
+          expect(container).toMatchSnapshot();
+        });
+      });
       describe("Without props", () => {
         it("should match snapshot with default Button", () => {
           const { container } = (0, import_react2.render)(

package/cjs/Button/web/StyledButton.js

@@ -74,7 +74,7 @@ const StyledButton = import_styled_components.default.button`
       font-weight: ${button.font.weight};
       font-family: ${baseFont.family};
       letter-spacing: normal;
-      line-height: 1;
+      line-height: ${small ? button.font.lineHeight.small : button.font.lineHeight.default}px;
       text-decoration: none;
 
       svg {
@@ -103,7 +103,7 @@ const StyledButton = import_styled_components.default.button`
       }
 
       ${disabled ? `
-      
+
         background-color ${button.types.contained.backgroundColor.disabled};
         color: ${button.types.contained.font.disabled.color};
         pointer-events: none;
@@ -113,7 +113,7 @@ const StyledButton = import_styled_components.default.button`
         }
 
         cursor: not-allowed;
-      
+
       ` : ""}
 
       ${inverted ? `

package/cjs/Tag/Tag.theme.js

@@ -21,7 +21,7 @@ __export(Tag_theme_exports, {
   default: () => Tag_theme_default
 });
 module.exports = __toCommonJS(Tag_theme_exports);
-const Tag = ({ spacing, fontSizes, fontWeights, radii, borders }) => ({
+const Tag = ({ spacing, radii, borders }) => ({
   icon: {
     size: {
       default: spacing.small,
@@ -31,11 +31,6 @@ const Tag = ({ spacing, fontSizes, fontWeights, radii, borders }) => ({
       right: "xxxsmall"
     }
   },
-  font: {
-    size: fontSizes.xsmall,
-    lineHeight: fontSizes.medium,
-    weight: fontWeights.medium
-  },
   padding: {
     default: {
       top: spacing.xxxsmall,

package/cjs/Tag/native/Informative.js

@@ -96,36 +96,35 @@ const StyledTextInformative = (0, import_styled_components.default)(import_Tag.S
   ${({
   theme: {
     yoga: {
-      colors: { text },
-      components: { tag }
+      colors: { text }
     }
   }
 }) => `
     color: ${text.primary};
-
-    font-size: ${tag.font.size}px;
-    line-height: ${tag.font.lineHeight}px;
-    font-weight: ${tag.font.weight};
   `}
 `;
 const TagInformative = (_a) => {
   var _b = _a, {
     children,
     icon,
+    ellipsis,
     theme: {
       yoga: {
         colors: { text },
         components: { tag }
       }
     },
-    small
-  } = _b, props = __objRest(_b, [
+    small,
+    variant
+  } = _b, rest = __objRest(_b, [
     "children",
     "icon",
+    "ellipsis",
     "theme",
-    "small"
+    "small",
+    "variant"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Informative, __spreadProps(__spreadValues({ small }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Informative, __spreadProps(__spreadValues({ variant, small }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Icon.default,
       {
@@ -135,7 +134,7 @@ const TagInformative = (_a) => {
         marginRight: tag.icon.margin.right
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTextInformative, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTextInformative, { numberOfLines: ellipsis ? 1 : void 0, children })
   ] }) }));
 };
 TagInformative.propTypes = {
@@ -144,12 +143,14 @@ TagInformative.propTypes = {
   icon: import_prop_types.func,
   children: import_prop_types.node.isRequired,
   /** Can send small to use this variant */
-  small: import_prop_types.bool
+  small: import_prop_types.bool,
+  ellipsis: import_prop_types.bool
 };
 TagInformative.defaultProps = {
   variant: "neutral",
   icon: void 0,
-  small: false
+  small: false,
+  ellipsis: false
 };
 TagInformative.displayName = "Tag.Informative";
 var Informative_default = (0, import_styled_components.withTheme)(TagInformative);

package/cjs/Tag/native/Tag.js

@@ -111,7 +111,7 @@ const StyledTag = import_styled_components.default.View`
 `;
 const StyledText = (0, import_styled_components.default)((_a) => {
   var _b = _a, { variant } = _b, rest = __objRest(_b, ["variant"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Medium, __spreadValues({}, rest));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Overline, __spreadValues({}, rest));
 })`
   ${({
   variant,
@@ -120,31 +120,29 @@ const StyledText = (0, import_styled_components.default)((_a) => {
       colors: {
         text,
         feedback: { [variant]: color = { dark: text.secondary } }
-      },
-      components: { tag }
+      }
     }
   }
 }) => `
     color: ${color.dark};
-
-    font-size: ${tag.font.size}px;
-    line-height: ${tag.font.lineHeight}px;
   `}
 `;
 const Tag = (_c) => {
-  var _d = _c, { children, variant, small } = _d, props = __objRest(_d, ["children", "variant", "small"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTag, __spreadProps(__spreadValues({ variant, small }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledText, { variant, children }) }));
+  var _d = _c, { children, variant, small, ellipsis } = _d, rest = __objRest(_d, ["children", "variant", "small", "ellipsis"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTag, __spreadProps(__spreadValues({ variant, small }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledText, { numberOfLines: ellipsis ? 1 : void 0, children }) }));
 };
 Tag.propTypes = {
   /** style the tag following the theme (success, informative, attention) */
   variant: (0, import_prop_types.oneOf)(["", "success", "informative", "attention"]),
   /** Can send small to use this variant */
   small: import_prop_types.bool,
-  children: import_prop_types.node.isRequired
+  children: import_prop_types.node.isRequired,
+  ellipsis: import_prop_types.bool
 };
 Tag.defaultProps = {
   variant: "",
-  small: false
+  small: false,
+  ellipsis: false
 };
 var Tag_default = Tag;
 // Annotate the CommonJS export names for ESM import in node:

package/cjs/Tag/native/Tag.test.js

@@ -27,6 +27,12 @@ var import_react_native = require("@testing-library/react-native");
 var import_yoga_icons = require("@gympass/yoga-icons");
 var import__ = require("../..");
 describe("<Tag />", () => {
+  it("should match snapshot when v3Theme is settled", () => {
+    const { toJSON } = (0, import_react_native.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { theme: import__.v3theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tag, { children: "v3Theme" }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
   it("should match snapshot", () => {
     const { toJSON } = (0, import_react_native.render)(
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tag, { children: "default" }) })

package/cjs/Tag/web/Informative.js

@@ -64,13 +64,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_prop_types = require("prop-types");
-var import_yoga_system = require("@gympass/yoga-system");
-var import_Tag = __toESM(require("./Tag"));
+var import_Tag = require("./Tag");
 var import_Icon = __toESM(require("../../Icon"));
-const Informative = (0, import_styled_components.default)(import_Tag.default)`
-  justify-content: center;
-  align-items: center;
-
+const Informative = (0, import_styled_components.default)(import_Tag.StyledTag)`
   ${({
   variant,
   theme: {
@@ -87,17 +83,13 @@ const Informative = (0, import_styled_components.default)(import_Tag.default)`
     color: ${text.primary};
     border-radius: ${tag.border.radius}px;
     border-color: ${color.light};
-
-    font-size: ${tag.font.size}px;
-    font-weight: ${tag.font.weight};
   `}
-
-  ${import_yoga_system.margins}
 `;
 const TagInformative = (_a) => {
   var _b = _a, {
     children,
     icon,
+    variant,
     theme: {
       yoga: {
         colors: { text },
@@ -106,14 +98,15 @@ const TagInformative = (_a) => {
     },
     small,
     ellipsis
-  } = _b, props = __objRest(_b, [
+  } = _b, rest = __objRest(_b, [
     "children",
     "icon",
+    "variant",
     "theme",
     "small",
     "ellipsis"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Informative, __spreadProps(__spreadValues({ small, ellipsis }, props), { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Informative, __spreadProps(__spreadValues({ variant, small }, rest), { children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Icon.default,
       {
@@ -123,7 +116,7 @@ const TagInformative = (_a) => {
         marginRight: tag.icon.margin.right
       }
     ),
-    children
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tag.StyledText, { numberOfLines: ellipsis ? 1 : void 0, children })
   ] }));
 };
 TagInformative.propTypes = {

package/cjs/Tag/web/Tag.js

@@ -1,7 +1,9 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -19,6 +21,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -42,6 +57,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Tag_exports = {};
 __export(Tag_exports, {
+  StyledTag: () => StyledTag,
+  StyledText: () => StyledText,
   default: () => Tag_default
 });
 module.exports = __toCommonJS(Tag_exports);
@@ -50,6 +67,7 @@ var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_prop_types = require("prop-types");
 var import_yoga_system = require("@gympass/yoga-system");
+var import_Text = __toESM(require("../../Text"));
 const StyledTag = import_styled_components.default.div`
   display: inline-flex;
   justify-content: center;
@@ -60,7 +78,6 @@ const StyledTag = import_styled_components.default.div`
   ${({
   variant,
   small,
-  ellipsis,
   theme: {
     yoga: {
       colors: {
@@ -89,27 +106,30 @@ const StyledTag = import_styled_components.default.div`
               ${tag.padding.default.left}px;
           `}
 
-    ${ellipsis ? `
-      display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    ` : ``}
-
     color: ${color.dark};
     border-radius: ${tag.border.radius}px;
     border-width: ${tag.border.width}px;
     border-color: ${borderColor.dark};
-
-    font-size: ${tag.font.size}px;
-    line-height: ${tag.font.lineHeight}px;
-    font-weight: ${tag.font.weight};
   `}
 
   ${import_yoga_system.margins}
   ${import_yoga_system.maxWidth}
 `;
-const Tag = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTag, __spreadValues({}, props));
+const StyledText = (0, import_styled_components.default)(import_Text.default.Overline)`
+  ${({
+  theme: {
+    yoga: {
+      colors: { text }
+    }
+  }
+}) => `
+    color: ${text.primary};
+  `}
+`;
+const Tag = (_a) => {
+  var _b = _a, { children, variant, small, ellipsis } = _b, rest = __objRest(_b, ["children", "variant", "small", "ellipsis"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTag, __spreadProps(__spreadValues({ variant, small }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledText, { numberOfLines: ellipsis ? 1 : void 0, children }) }));
+};
 Tag.propTypes = {
   /** style the tag following the theme (success, informative, attention) */
   variant: (0, import_prop_types.oneOf)(["", "success", "informative", "attention"]),
@@ -125,3 +145,8 @@ Tag.defaultProps = {
   ellipsis: false
 };
 var Tag_default = Tag;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StyledTag,
+  StyledText
+});

package/cjs/Tag/web/Tag.test.js

@@ -27,6 +27,12 @@ var import_react2 = require("@testing-library/react");
 var import_yoga_icons = require("@gympass/yoga-icons");
 var import__ = require("../..");
 describe("<Tag />", () => {
+  it("should match snapshot when v3Theme is settled", () => {
+    const { container } = (0, import_react2.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { theme: import__.v3theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tag, { children: "v3Theme" }) })
+    );
+    expect(container).toMatchSnapshot();
+  });
   it("should match snapshot", () => {
     const { container } = (0, import_react2.render)(
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tag, { children: "default" }) })

package/cjs/Theme/Provider/web/FontLoader.test.js

@@ -33,7 +33,7 @@ describe("FontLoader component", () => {
     );
     const link = document.getElementsByTagName("link").item(0).outerHTML;
     expect(link).toContain(
-      `<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900,300i,400i,500i,700i,900i">`
+      `<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,600,700,900,300i,400i,500i,600i,700i,900i">`
     );
   });
 });

package/cjs/Theme/theme/v3theme.js

@@ -238,6 +238,19 @@ const v3theme = (0, import_themeGenerator.default)((tokens) => ({
       black: {
         fontWeight: tokens.fontWeights.black
       }
+    },
+    button: {
+      font: {
+        size: {
+          default: tokens.fontSizes.medium,
+          small: tokens.fontSizes.small
+        },
+        weight: tokens.fontWeights.semiBold,
+        height: {
+          default: tokens.lineHeights.medium,
+          small: tokens.lineHeights.xsmall
+        }
+      }
     }
   }
 }));

package/esm/Button/Button.theme.js

@@ -5,7 +5,8 @@ const Button = ({
   borders,
   radii,
   colors,
-  fontWeights
+  fontWeights,
+  lineHeights
 }) => ({
   padding: {
     default: {
@@ -26,7 +27,11 @@ const Button = ({
       default: fontSizes.medium,
       small: fontSizes.small
     },
-    weight: fontWeights.medium
+    weight: fontWeights.medium,
+    lineHeight: {
+      default: lineHeights.medium,
+      small: lineHeights.xsmall
+    }
   },
   border: {
     radius: radii.circle

package/esm/Button/native/Button.js

@@ -31,11 +31,21 @@ var __objRest = (source, exclude) => {
 };
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
+import { bool, func, node, oneOfType } from "prop-types";
 import styled, { withTheme } from "styled-components";
-import { node, oneOfType, func, bool } from "prop-types";
 import withTouchable from "./withTouchable";
 import Text from "../../Text";
-const Label = styled(Text.Medium)`
+const Label = styled(Text).attrs(
+  ({
+    theme: {
+      yoga: {
+        components: { button }
+      }
+    }
+  }) => ({
+    fontWeight: button.font.weight
+  })
+)`
   text-align: center;
   ${({
   small,
@@ -47,6 +57,7 @@ const Label = styled(Text.Medium)`
   }
 }) => `
       font-size: ${small ? button.font.size.small : button.font.size.default}px;
+      line-height: ${small ? button.font.lineHeight.small : button.font.lineHeight.default}px;
       color: ${color};
     `}
 `;
@@ -191,8 +202,9 @@ Button.defaultProps = {
   icon: void 0
 };
 const ButtonWithTouchable = withTouchable(withTheme(Button));
+var Button_default = ButtonWithTouchable;
 export {
   ButtonContainer,
   Label,
-  ButtonWithTouchable as default
+  Button_default as default
 };

package/esm/Button/native/Button.test.js

@@ -2,11 +2,19 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { render, fireEvent } from "@testing-library/react-native";
 import { Booking } from "@gympass/yoga-icons";
-import ThemeProvider from "../../Theme";
+import ThemeProvider, { v3theme } from "../../Theme";
 import Button from "..";
 describe("<Button />", () => {
   describe("Snapshots", () => {
     describe("primary buttons", () => {
+      describe("with v3theme", () => {
+        it("should match snapshot with v3theme Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { theme: v3theme, children: /* @__PURE__ */ jsx(Button, {}) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+      });
       describe("Without props", () => {
         it("should match snapshot with default Button", () => {
           const { toJSON } = render(

package/esm/Button/web/Button.test.js

@@ -2,11 +2,19 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { render, fireEvent, screen, within } from "@testing-library/react";
 import { Booking, Close } from "@gympass/yoga-icons";
-import ThemeProvider from "../../Theme";
+import ThemeProvider, { v3theme } from "../../Theme";
 import Button from "..";
 describe("<Button />", () => {
   describe("Snapshots", () => {
     describe("primary buttons", () => {
+      describe("with v3theme", () => {
+        it("should match snapshot with v3theme Button", () => {
+          const { container } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { theme: v3theme, children: /* @__PURE__ */ jsx(Button, {}) })
+          );
+          expect(container).toMatchSnapshot();
+        });
+      });
       describe("Without props", () => {
         it("should match snapshot with default Button", () => {
           const { container } = render(

package/esm/Button/web/StyledButton.js

@@ -41,7 +41,7 @@ const StyledButton = styled.button`
       font-weight: ${button.font.weight};
       font-family: ${baseFont.family};
       letter-spacing: normal;
-      line-height: 1;
+      line-height: ${small ? button.font.lineHeight.small : button.font.lineHeight.default}px;
       text-decoration: none;
 
       svg {
@@ -70,7 +70,7 @@ const StyledButton = styled.button`
       }
 
       ${disabled ? `
-      
+
         background-color ${button.types.contained.backgroundColor.disabled};
         color: ${button.types.contained.font.disabled.color};
         pointer-events: none;
@@ -80,7 +80,7 @@ const StyledButton = styled.button`
         }
 
         cursor: not-allowed;
-      
+
       ` : ""}
 
       ${inverted ? `

package/esm/Tag/Tag.theme.js

@@ -1,4 +1,4 @@
-const Tag = ({ spacing, fontSizes, fontWeights, radii, borders }) => ({
+const Tag = ({ spacing, radii, borders }) => ({
   icon: {
     size: {
       default: spacing.small,
@@ -8,11 +8,6 @@ const Tag = ({ spacing, fontSizes, fontWeights, radii, borders }) => ({
       right: "xxxsmall"
     }
   },
-  font: {
-    size: fontSizes.xsmall,
-    lineHeight: fontSizes.medium,
-    weight: fontWeights.medium
-  },
   padding: {
     default: {
       top: spacing.xxxsmall,

package/esm/Tag/native/Informative.js

@@ -65,36 +65,35 @@ const StyledTextInformative = styled(StyledText)`
   ${({
   theme: {
     yoga: {
-      colors: { text },
-      components: { tag }
+      colors: { text }
     }
   }
 }) => `
     color: ${text.primary};
-
-    font-size: ${tag.font.size}px;
-    line-height: ${tag.font.lineHeight}px;
-    font-weight: ${tag.font.weight};
   `}
 `;
 const TagInformative = (_a) => {
   var _b = _a, {
     children,
     icon,
+    ellipsis,
     theme: {
       yoga: {
         colors: { text },
         components: { tag }
       }
     },
-    small
-  } = _b, props = __objRest(_b, [
+    small,
+    variant
+  } = _b, rest = __objRest(_b, [
     "children",
     "icon",
+    "ellipsis",
     "theme",
-    "small"
+    "small",
+    "variant"
   ]);
-  return /* @__PURE__ */ jsx(Informative, __spreadProps(__spreadValues({ small }, props), { children: /* @__PURE__ */ jsxs(Wrapper, { children: [
+  return /* @__PURE__ */ jsx(Informative, __spreadProps(__spreadValues({ variant, small }, rest), { children: /* @__PURE__ */ jsxs(Wrapper, { children: [
     icon && /* @__PURE__ */ jsx(
       Icon,
       {
@@ -104,7 +103,7 @@ const TagInformative = (_a) => {
         marginRight: tag.icon.margin.right
       }
     ),
-    /* @__PURE__ */ jsx(StyledTextInformative, { children })
+    /* @__PURE__ */ jsx(StyledTextInformative, { numberOfLines: ellipsis ? 1 : void 0, children })
   ] }) }));
 };
 TagInformative.propTypes = {
@@ -113,12 +112,14 @@ TagInformative.propTypes = {
   icon: func,
   children: node.isRequired,
   /** Can send small to use this variant */
-  small: bool
+  small: bool,
+  ellipsis: bool
 };
 TagInformative.defaultProps = {
   variant: "neutral",
   icon: void 0,
-  small: false
+  small: false,
+  ellipsis: false
 };
 TagInformative.displayName = "Tag.Informative";
 var Informative_default = withTheme(TagInformative);

package/esm/Tag/native/Tag.js

@@ -78,7 +78,7 @@ const StyledTag = styled.View`
 `;
 const StyledText = styled((_a) => {
   var _b = _a, { variant } = _b, rest = __objRest(_b, ["variant"]);
-  return /* @__PURE__ */ jsx(Text.Medium, __spreadValues({}, rest));
+  return /* @__PURE__ */ jsx(Text.Overline, __spreadValues({}, rest));
 })`
   ${({
   variant,
@@ -87,31 +87,29 @@ const StyledText = styled((_a) => {
       colors: {
         text,
         feedback: { [variant]: color = { dark: text.secondary } }
-      },
-      components: { tag }
+      }
     }
   }
 }) => `
     color: ${color.dark};
-
-    font-size: ${tag.font.size}px;
-    line-height: ${tag.font.lineHeight}px;
   `}
 `;
 const Tag = (_c) => {
-  var _d = _c, { children, variant, small } = _d, props = __objRest(_d, ["children", "variant", "small"]);
-  return /* @__PURE__ */ jsx(StyledTag, __spreadProps(__spreadValues({ variant, small }, props), { children: /* @__PURE__ */ jsx(StyledText, { variant, children }) }));
+  var _d = _c, { children, variant, small, ellipsis } = _d, rest = __objRest(_d, ["children", "variant", "small", "ellipsis"]);
+  return /* @__PURE__ */ jsx(StyledTag, __spreadProps(__spreadValues({ variant, small }, rest), { children: /* @__PURE__ */ jsx(StyledText, { numberOfLines: ellipsis ? 1 : void 0, children }) }));
 };
 Tag.propTypes = {
   /** style the tag following the theme (success, informative, attention) */
   variant: oneOf(["", "success", "informative", "attention"]),
   /** Can send small to use this variant */
   small: bool,
-  children: node.isRequired
+  children: node.isRequired,
+  ellipsis: bool
 };
 Tag.defaultProps = {
   variant: "",
-  small: false
+  small: false,
+  ellipsis: false
 };
 var Tag_default = Tag;
 export {

package/esm/Tag/native/Tag.test.js

@@ -2,8 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { render } from "@testing-library/react-native";
 import { Building } from "@gympass/yoga-icons";
-import { ThemeProvider, Tag } from "../..";
+import { ThemeProvider, Tag, v3theme } from "../..";
 describe("<Tag />", () => {
+  it("should match snapshot when v3Theme is settled", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { theme: v3theme, children: /* @__PURE__ */ jsx(Tag, { children: "v3Theme" }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
   it("should match snapshot", () => {
     const { toJSON } = render(
       /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Tag, { children: "default" }) })

package/esm/Tag/web/Informative.js

@@ -33,13 +33,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import styled, { withTheme } from "styled-components";
 import { func, oneOf, node, bool } from "prop-types";
-import { margins } from "@gympass/yoga-system";
-import Tag from "./Tag";
+import { StyledTag, StyledText } from "./Tag";
 import Icon from "../../Icon";
-const Informative = styled(Tag)`
-  justify-content: center;
-  align-items: center;
-
+const Informative = styled(StyledTag)`
   ${({
   variant,
   theme: {
@@ -56,17 +52,13 @@ const Informative = styled(Tag)`
     color: ${text.primary};
     border-radius: ${tag.border.radius}px;
     border-color: ${color.light};
-
-    font-size: ${tag.font.size}px;
-    font-weight: ${tag.font.weight};
   `}
-
-  ${margins}
 `;
 const TagInformative = (_a) => {
   var _b = _a, {
     children,
     icon,
+    variant,
     theme: {
       yoga: {
         colors: { text },
@@ -75,14 +67,15 @@ const TagInformative = (_a) => {
     },
     small,
     ellipsis
-  } = _b, props = __objRest(_b, [
+  } = _b, rest = __objRest(_b, [
     "children",
     "icon",
+    "variant",
     "theme",
     "small",
     "ellipsis"
   ]);
-  return /* @__PURE__ */ jsxs(Informative, __spreadProps(__spreadValues({ small, ellipsis }, props), { children: [
+  return /* @__PURE__ */ jsxs(Informative, __spreadProps(__spreadValues({ variant, small }, rest), { children: [
     icon && /* @__PURE__ */ jsx(
       Icon,
       {
@@ -92,7 +85,7 @@ const TagInformative = (_a) => {
         marginRight: tag.icon.margin.right
       }
     ),
-    children
+    /* @__PURE__ */ jsx(StyledText, { numberOfLines: ellipsis ? 1 : void 0, children })
   ] }));
 };
 TagInformative.propTypes = {

package/esm/Tag/web/Tag.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,11 +16,25 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import styled from "styled-components";
 import { oneOf, node, bool } from "prop-types";
 import { margins, maxWidth } from "@gympass/yoga-system";
+import Text from "../../Text";
 const StyledTag = styled.div`
   display: inline-flex;
   justify-content: center;
@@ -29,7 +45,6 @@ const StyledTag = styled.div`
   ${({
   variant,
   small,
-  ellipsis,
   theme: {
     yoga: {
       colors: {
@@ -58,27 +73,30 @@ const StyledTag = styled.div`
               ${tag.padding.default.left}px;
           `}
 
-    ${ellipsis ? `
-      display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    ` : ``}
-
     color: ${color.dark};
     border-radius: ${tag.border.radius}px;
     border-width: ${tag.border.width}px;
     border-color: ${borderColor.dark};
-
-    font-size: ${tag.font.size}px;
-    line-height: ${tag.font.lineHeight}px;
-    font-weight: ${tag.font.weight};
   `}
 
   ${margins}
   ${maxWidth}
 `;
-const Tag = (props) => /* @__PURE__ */ jsx(StyledTag, __spreadValues({}, props));
+const StyledText = styled(Text.Overline)`
+  ${({
+  theme: {
+    yoga: {
+      colors: { text }
+    }
+  }
+}) => `
+    color: ${text.primary};
+  `}
+`;
+const Tag = (_a) => {
+  var _b = _a, { children, variant, small, ellipsis } = _b, rest = __objRest(_b, ["children", "variant", "small", "ellipsis"]);
+  return /* @__PURE__ */ jsx(StyledTag, __spreadProps(__spreadValues({ variant, small }, rest), { children: /* @__PURE__ */ jsx(StyledText, { numberOfLines: ellipsis ? 1 : void 0, children }) }));
+};
 Tag.propTypes = {
   /** style the tag following the theme (success, informative, attention) */
   variant: oneOf(["", "success", "informative", "attention"]),
@@ -95,5 +113,7 @@ Tag.defaultProps = {
 };
 var Tag_default = Tag;
 export {
+  StyledTag,
+  StyledText,
   Tag_default as default
 };

package/esm/Tag/web/Tag.test.js

@@ -2,8 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { render } from "@testing-library/react";
 import { Building } from "@gympass/yoga-icons";
-import { ThemeProvider, Tag } from "../..";
+import { ThemeProvider, Tag, v3theme } from "../..";
 describe("<Tag />", () => {
+  it("should match snapshot when v3Theme is settled", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { theme: v3theme, children: /* @__PURE__ */ jsx(Tag, { children: "v3Theme" }) })
+    );
+    expect(container).toMatchSnapshot();
+  });
   it("should match snapshot", () => {
     const { container } = render(
       /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Tag, { children: "default" }) })

package/esm/Theme/Provider/web/FontLoader.test.js

@@ -10,7 +10,7 @@ describe("FontLoader component", () => {
     );
     const link = document.getElementsByTagName("link").item(0).outerHTML;
     expect(link).toContain(
-      `<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900,300i,400i,500i,700i,900i">`
+      `<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,600,700,900,300i,400i,500i,600i,700i,900i">`
     );
   });
 });

package/esm/Theme/theme/v3theme.js

@@ -205,6 +205,19 @@ const v3theme = createTheme((tokens) => ({
       black: {
         fontWeight: tokens.fontWeights.black
       }
+    },
+    button: {
+      font: {
+        size: {
+          default: tokens.fontSizes.medium,
+          small: tokens.fontSizes.small
+        },
+        weight: tokens.fontWeights.semiBold,
+        height: {
+          default: tokens.lineHeights.medium,
+          small: tokens.lineHeights.xsmall
+        }
+      }
     }
   }
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.107.1",
+  "version": "7.108.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -31,7 +31,7 @@
     "@gympass/yoga-icons": "^1.20.0",
     "@gympass/yoga-illustrations": "^0.5.2",
     "@gympass/yoga-system": "^0.11.1",
-    "@gympass/yoga-tokens": "^3.4.1",
+    "@gympass/yoga-tokens": "^3.5.0",
     "@ptomasroos/react-native-multi-slider": "^2.1.1",
     "@radix-ui/react-dropdown-menu": "^2.0.1",
     "date-fns": "^2.29.2",
@@ -57,7 +57,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "f3f1b5fea6bc8c28bd0b33e50d2e8ad04d3cc372",
+  "gitHead": "f2472b24c7657c24192dd8dc0f29ce63f2cf76d3",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"

package/typings/NavigationMenu/web/Item/styles.d.ts

@@ -6,7 +6,13 @@ declare const StyledTextContainer: styled_components.StyledComponent<string, any
     children: React.ReactNode;
 }, never>;
 declare const StyledTag: styled_components.StyledComponent<{
-    (props: any): JSX.Element;
+    ({ children, variant, small, ellipsis, ...rest }: {
+        [x: string]: any;
+        children: any;
+        variant: any;
+        small: any;
+        ellipsis: any;
+    }): JSX.Element;
     propTypes: {
         variant: prop_types.Requireable<string>;
         children: prop_types.Validator<string | number | boolean | prop_types.ReactElementLike | prop_types.ReactNodeArray>;

package/typings/Theme/theme/v3theme.d.ts

@@ -99,7 +99,7 @@ declare const v3theme: {
         };
         fonts: Record<string, {
             family: string;
-            weight: (300 | 400 | 500 | 700 | 900 | "300i" | "400i" | "500i" | "700i" | "900i")[];
+            weight: (300 | 400 | 500 | 600 | 700 | 900 | "300i" | "400i" | "500i" | "600i" | "700i" | "900i")[];
         }>;
         fontSizes: {
             xxsmall: 10;
@@ -169,46 +169,46 @@ declare const v3theme: {
             length: number;
             toString(): string;
             toLocaleString(): string;
-            pop(): 300 | 400 | 500 | 700 | 900 | undefined;
-            push(...items: (300 | 400 | 500 | 700 | 900)[]): number;
-            concat(...items: ConcatArray<300 | 400 | 500 | 700 | 900>[]): (300 | 400 | 500 | 700 | 900)[];
-            concat(...items: (300 | 400 | 500 | 700 | 900 | ConcatArray<300 | 400 | 500 | 700 | 900>)[]): (300 | 400 | 500 | 700 | 900)[];
+            pop(): 300 | 400 | 500 | 600 | 700 | 900 | undefined;
+            push(...items: (300 | 400 | 500 | 600 | 700 | 900)[]): number;
+            concat(...items: ConcatArray<300 | 400 | 500 | 600 | 700 | 900>[]): (300 | 400 | 500 | 600 | 700 | 900)[];
+            concat(...items: (300 | 400 | 500 | 600 | 700 | 900 | ConcatArray<300 | 400 | 500 | 600 | 700 | 900>)[]): (300 | 400 | 500 | 600 | 700 | 900)[];
             join(separator?: string | undefined): string;
-            reverse(): (300 | 400 | 500 | 700 | 900)[];
-            shift(): 300 | 400 | 500 | 700 | 900 | undefined;
-            slice(start?: number | undefined, end?: number | undefined): (300 | 400 | 500 | 700 | 900)[];
-            sort(compareFn?: ((a: 300 | 400 | 500 | 700 | 900, b: 300 | 400 | 500 | 700 | 900) => number) | undefined): (300 | 400 | 500 | 700 | 900)[];
-            splice(start: number, deleteCount?: number | undefined): (300 | 400 | 500 | 700 | 900)[];
-            splice(start: number, deleteCount: number, ...items: (300 | 400 | 500 | 700 | 900)[]): (300 | 400 | 500 | 700 | 900)[];
-            unshift(...items: (300 | 400 | 500 | 700 | 900)[]): number;
-            indexOf(searchElement: 300 | 400 | 500 | 700 | 900, fromIndex?: number | undefined): number;
-            lastIndexOf(searchElement: 300 | 400 | 500 | 700 | 900, fromIndex?: number | undefined): number;
-            every<S_6 extends 300 | 400 | 500 | 700 | 900>(predicate: (value: 300 | 400 | 500 | 700 | 900, index: number, array: (300 | 400 | 500 | 700 | 900)[]) => value is S_6, thisArg?: any): this is S_6[];
-            every(predicate: (value: 300 | 400 | 500 | 700 | 900, index: number, array: (300 | 400 | 500 | 700 | 900)[]) => unknown, thisArg?: any): boolean;
-            some(predicate: (value: 300 | 400 | 500 | 700 | 900, index: number, array: (300 | 400 | 500 | 700 | 900)[]) => unknown, thisArg?: any): boolean;
-            forEach(callbackfn: (value: 300 | 400 | 500 | 700 | 900, index: number, array: (300 | 400 | 500 | 700 | 900)[]) => void, thisArg?: any): void;
-            map<U_8>(callbackfn: (value: 300 | 400 | 500 | 700 | 900, index: number, array: (300 | 400 | 500 | 700 | 900)[]) => U_8, thisArg?: any): U_8[];
-            filter<S_7 extends 300 | 400 | 500 | 700 | 900>(predicate: (value: 300 | 400 | 500 | 700 | 900, index: number, array: (300 | 400 | 500 | 700 | 900)[]) => value is S_7, thisArg?: any): S_7[];
-            filter(predicate: (value: 300 | 400 | 500 | 700 | 900, index: number, array: (300 | 400 | 500 | 700 | 900)[]) => unknown, thisArg?: any): (300 | 400 | 500 | 700 | 900)[];
-            reduce(callbackfn: (previousValue: 300 | 400 | 500 | 700 | 900, currentValue: 300 | 400 | 500 | 700 | 900, currentIndex: number, array: (300 | 400 | 500 | 700 | 900)[]) => 300 | 400 | 500 | 700 | 900): 300 | 400 | 500 | 700 | 900;
-            reduce(callbackfn: (previousValue: 300 | 400 | 500 | 700 | 900, currentValue: 300 | 400 | 500 | 700 | 900, currentIndex: number, array: (300 | 400 | 500 | 700 | 900)[]) => 300 | 400 | 500 | 700 | 900, initialValue: 300 | 400 | 500 | 700 | 900): 300 | 400 | 500 | 700 | 900;
-            reduce<U_9>(callbackfn: (previousValue: U_9, currentValue: 300 | 400 | 500 | 700 | 900, currentIndex: number, array: (300 | 400 | 500 | 700 | 900)[]) => U_9, initialValue: U_9): U_9;
-            reduceRight(callbackfn: (previousValue: 300 | 400 | 500 | 700 | 900, currentValue: 300 | 400 | 500 | 700 | 900, currentIndex: number, array: (300 | 400 | 500 | 700 | 900)[]) => 300 | 400 | 500 | 700 | 900): 300 | 400 | 500 | 700 | 900;
-            reduceRight(callbackfn: (previousValue: 300 | 400 | 500 | 700 | 900, currentValue: 300 | 400 | 500 | 700 | 900, currentIndex: number, array: (300 | 400 | 500 | 700 | 900)[]) => 300 | 400 | 500 | 700 | 900, initialValue: 300 | 400 | 500 | 700 | 900): 300 | 400 | 500 | 700 | 900;
-            reduceRight<U_10>(callbackfn: (previousValue: U_10, currentValue: 300 | 400 | 500 | 700 | 900, currentIndex: number, array: (300 | 400 | 500 | 700 | 900)[]) => U_10, initialValue: U_10): U_10;
-            find<S_8 extends 300 | 400 | 500 | 700 | 900>(predicate: (this: void, value: 300 | 400 | 500 | 700 | 900, index: number, obj: (300 | 400 | 500 | 700 | 900)[]) => value is S_8, thisArg?: any): S_8 | undefined;
-            find(predicate: (value: 300 | 400 | 500 | 700 | 900, index: number, obj: (300 | 400 | 500 | 700 | 900)[]) => unknown, thisArg?: any): 300 | 400 | 500 | 700 | 900 | undefined;
-            findIndex(predicate: (value: 300 | 400 | 500 | 700 | 900, index: number, obj: (300 | 400 | 500 | 700 | 900)[]) => unknown, thisArg?: any): number;
-            fill(value: 300 | 400 | 500 | 700 | 900, start?: number | undefined, end?: number | undefined): (300 | 400 | 500 | 700 | 900)[];
-            copyWithin(target: number, start: number, end?: number | undefined): (300 | 400 | 500 | 700 | 900)[];
-            entries(): IterableIterator<[number, 300 | 400 | 500 | 700 | 900]>;
+            reverse(): (300 | 400 | 500 | 600 | 700 | 900)[];
+            shift(): 300 | 400 | 500 | 600 | 700 | 900 | undefined;
+            slice(start?: number | undefined, end?: number | undefined): (300 | 400 | 500 | 600 | 700 | 900)[];
+            sort(compareFn?: ((a: 300 | 400 | 500 | 600 | 700 | 900, b: 300 | 400 | 500 | 600 | 700 | 900) => number) | undefined): (300 | 400 | 500 | 600 | 700 | 900)[];
+            splice(start: number, deleteCount?: number | undefined): (300 | 400 | 500 | 600 | 700 | 900)[];
+            splice(start: number, deleteCount: number, ...items: (300 | 400 | 500 | 600 | 700 | 900)[]): (300 | 400 | 500 | 600 | 700 | 900)[];
+            unshift(...items: (300 | 400 | 500 | 600 | 700 | 900)[]): number;
+            indexOf(searchElement: 300 | 400 | 500 | 600 | 700 | 900, fromIndex?: number | undefined): number;
+            lastIndexOf(searchElement: 300 | 400 | 500 | 600 | 700 | 900, fromIndex?: number | undefined): number;
+            every<S_6 extends 300 | 400 | 500 | 600 | 700 | 900>(predicate: (value: 300 | 400 | 500 | 600 | 700 | 900, index: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => value is S_6, thisArg?: any): this is S_6[];
+            every(predicate: (value: 300 | 400 | 500 | 600 | 700 | 900, index: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => unknown, thisArg?: any): boolean;
+            some(predicate: (value: 300 | 400 | 500 | 600 | 700 | 900, index: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => unknown, thisArg?: any): boolean;
+            forEach(callbackfn: (value: 300 | 400 | 500 | 600 | 700 | 900, index: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => void, thisArg?: any): void;
+            map<U_8>(callbackfn: (value: 300 | 400 | 500 | 600 | 700 | 900, index: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => U_8, thisArg?: any): U_8[];
+            filter<S_7 extends 300 | 400 | 500 | 600 | 700 | 900>(predicate: (value: 300 | 400 | 500 | 600 | 700 | 900, index: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => value is S_7, thisArg?: any): S_7[];
+            filter(predicate: (value: 300 | 400 | 500 | 600 | 700 | 900, index: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => unknown, thisArg?: any): (300 | 400 | 500 | 600 | 700 | 900)[];
+            reduce(callbackfn: (previousValue: 300 | 400 | 500 | 600 | 700 | 900, currentValue: 300 | 400 | 500 | 600 | 700 | 900, currentIndex: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => 300 | 400 | 500 | 600 | 700 | 900): 300 | 400 | 500 | 600 | 700 | 900;
+            reduce(callbackfn: (previousValue: 300 | 400 | 500 | 600 | 700 | 900, currentValue: 300 | 400 | 500 | 600 | 700 | 900, currentIndex: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => 300 | 400 | 500 | 600 | 700 | 900, initialValue: 300 | 400 | 500 | 600 | 700 | 900): 300 | 400 | 500 | 600 | 700 | 900;
+            reduce<U_9>(callbackfn: (previousValue: U_9, currentValue: 300 | 400 | 500 | 600 | 700 | 900, currentIndex: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => U_9, initialValue: U_9): U_9;
+            reduceRight(callbackfn: (previousValue: 300 | 400 | 500 | 600 | 700 | 900, currentValue: 300 | 400 | 500 | 600 | 700 | 900, currentIndex: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => 300 | 400 | 500 | 600 | 700 | 900): 300 | 400 | 500 | 600 | 700 | 900;
+            reduceRight(callbackfn: (previousValue: 300 | 400 | 500 | 600 | 700 | 900, currentValue: 300 | 400 | 500 | 600 | 700 | 900, currentIndex: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => 300 | 400 | 500 | 600 | 700 | 900, initialValue: 300 | 400 | 500 | 600 | 700 | 900): 300 | 400 | 500 | 600 | 700 | 900;
+            reduceRight<U_10>(callbackfn: (previousValue: U_10, currentValue: 300 | 400 | 500 | 600 | 700 | 900, currentIndex: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => U_10, initialValue: U_10): U_10;
+            find<S_8 extends 300 | 400 | 500 | 600 | 700 | 900>(predicate: (this: void, value: 300 | 400 | 500 | 600 | 700 | 900, index: number, obj: (300 | 400 | 500 | 600 | 700 | 900)[]) => value is S_8, thisArg?: any): S_8 | undefined;
+            find(predicate: (value: 300 | 400 | 500 | 600 | 700 | 900, index: number, obj: (300 | 400 | 500 | 600 | 700 | 900)[]) => unknown, thisArg?: any): 300 | 400 | 500 | 600 | 700 | 900 | undefined;
+            findIndex(predicate: (value: 300 | 400 | 500 | 600 | 700 | 900, index: number, obj: (300 | 400 | 500 | 600 | 700 | 900)[]) => unknown, thisArg?: any): number;
+            fill(value: 300 | 400 | 500 | 600 | 700 | 900, start?: number | undefined, end?: number | undefined): (300 | 400 | 500 | 600 | 700 | 900)[];
+            copyWithin(target: number, start: number, end?: number | undefined): (300 | 400 | 500 | 600 | 700 | 900)[];
+            entries(): IterableIterator<[number, 300 | 400 | 500 | 600 | 700 | 900]>;
             keys(): IterableIterator<number>;
-            values(): IterableIterator<300 | 400 | 500 | 700 | 900>;
-            includes(searchElement: 300 | 400 | 500 | 700 | 900, fromIndex?: number | undefined): boolean;
-            flatMap<U_11, This_2 = undefined>(callback: (this: This_2, value: 300 | 400 | 500 | 700 | 900, index: number, array: (300 | 400 | 500 | 700 | 900)[]) => U_11 | readonly U_11[], thisArg?: This_2 | undefined): U_11[];
+            values(): IterableIterator<300 | 400 | 500 | 600 | 700 | 900>;
+            includes(searchElement: 300 | 400 | 500 | 600 | 700 | 900, fromIndex?: number | undefined): boolean;
+            flatMap<U_11, This_2 = undefined>(callback: (this: This_2, value: 300 | 400 | 500 | 600 | 700 | 900, index: number, array: (300 | 400 | 500 | 600 | 700 | 900)[]) => U_11 | readonly U_11[], thisArg?: This_2 | undefined): U_11[];
             flat<A_2, D_2 extends number = 1>(this: A_2, depth?: D_2 | undefined): FlatArray<A_2, D_2>[];
-            at(index: number): 300 | 400 | 500 | 700 | 900 | undefined;
-            [Symbol.iterator](): IterableIterator<300 | 400 | 500 | 700 | 900>;
+            at(index: number): 300 | 400 | 500 | 600 | 700 | 900 | undefined;
+            [Symbol.iterator](): IterableIterator<300 | 400 | 500 | 600 | 700 | 900>;
             [Symbol.unscopables](): {
                 copyWithin: boolean;
                 entries: boolean;
@@ -221,6 +221,7 @@ declare const v3theme: {
             light: 300;
             regular: 400;
             medium: 500;
+            semiBold: 600;
             bold: 700;
             black: 900;
         };

package/typings/index.d.ts

@@ -266,7 +266,13 @@ declare const _default$4: React.ForwardRefExoticComponent<{
 }>;
 
 /** Tags should be keywords to categorize or organize an item. */
-declare function Tag(props: any): JSX.Element;
+declare function Tag({ children, variant, small, ellipsis, ...rest }: {
+    [x: string]: any;
+    children: any;
+    variant: any;
+    small: any;
+    ellipsis: any;
+}): JSX.Element;
 declare namespace Tag {
     namespace propTypes {
         export const variant: prop_types.Requireable<string>;