@gympass/yoga 7.107.1 → 7.108.1

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/Result/native/Attendances.js

@@ -39,17 +39,16 @@ var import_Box = __toESM(require("../../Box"));
 var import_Text = __toESM(require("../../Text"));
 var import_Rate = __toESM(require("./Rate"));
 var import_TinyTextIcon = __toESM(require("./TinyTextIcon"));
-const List = (0, import_styled_components.default)(import_Text.default.Tiny).attrs({
+const List = (0, import_styled_components.default)(import_Text.default.Caption).attrs({
   numberOfLines: 1,
-  variant: "deep"
+  color: ({ color }) => color || "deep"
 })`
   flex: 1;
 `;
 const ItemSeparator = (0, import_styled_components.default)(import_Box.default).attrs({
-  width: "xxxsmall",
   height: "zero"
 })``;
-const Attendances = ({ attendances, rate }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+const Attendances = ({ attendances, rate, color }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
   import_Box.default,
   {
     display: "flex",
@@ -59,11 +58,11 @@ const Attendances = ({ attendances, rate }) => /* @__PURE__ */ (0, import_jsx_ru
     flexDirection: "row",
     mb: "xxxsmall",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(List, { children: attendances.map(({ description, icon }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TinyTextIcon.default, { as: icon, fill: "deep" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemSeparator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(List, { color, children: attendances.map(({ description, icon }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TinyTextIcon.default, { as: icon, marginTop: "2px", fill: color || "deep" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemSeparator, { w: "xxxsmall" }),
         description,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemSeparator, {})
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemSeparator, { w: "xxsmall" })
       ] }, description)) }),
       rate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Rate.default, { rate })
     ]
@@ -76,9 +75,11 @@ Attendances.propTypes = {
       icon: import_prop_types.func
     })
   ).isRequired,
-  rate: import_prop_types.string
+  rate: import_prop_types.string,
+  color: import_prop_types.string
 };
 Attendances.defaultProps = {
-  rate: void 0
+  rate: void 0,
+  color: "deep"
 };
 var Attendances_default = Attendances;

package/cjs/Result/native/Details.js

@@ -64,15 +64,14 @@ var import_styled_components = __toESM(require("styled-components"));
 var import_Text = __toESM(require("../../Text"));
 var import_Box = __toESM(require("../../Box"));
 var import_TinyTextIcon = __toESM(require("./TinyTextIcon"));
-const Container = (0, import_styled_components.default)(import_Text.default.Tiny)`
+const Container = (0, import_styled_components.default)(import_Text.default.Body2)`
   flex: 1;
-  height: ${({ theme }) => theme.yoga.spacing.small}px;
 `;
 const Separator = (0, import_styled_components.default)(import_Box.default).attrs({
   width: "xxxsmall",
   height: "xxxsmall"
 })``;
-const StyledText = (0, import_styled_components.default)(import_Text.default.Tiny)`
+const StyledText = (0, import_styled_components.default)(import_Text.default.Body2)`
   ${({
   theme: {
     yoga: {
@@ -144,6 +143,6 @@ ResultDetails.defaultProps = {
   limit: void 0,
   limitLabel: "",
   dots: false,
-  renderItem: import_Text.default.Tiny
+  renderItem: import_Text.default.Body2
 };
 var Details_default = ResultDetails;

package/cjs/Result/native/Rate.js

@@ -44,24 +44,22 @@ const Content = import_styled_components.default.View`
   margin-left: 10px;
   align-items: center;
 `;
-const RateValue = (0, import_styled_components.default)(import_Text.default.Medium)`
+const RateValue = (0, import_styled_components.default)(import_Text.default.Overline)`
   ${({
   theme: {
     yoga: {
-      spacing: { xxxsmall },
-      lineHeights: { xsmall }
+      spacing: { xxxsmall }
     }
   }
 }) => {
   return `
       margin-left: ${xxxsmall}px;
-      line-height: ${xsmall}px;
     `;
 }}
 `;
 const Rate = ({ rate }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Content, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: import_yoga_icons.StarFilled, fill: "deep", width: "xsmall", height: "xsmall" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RateValue, { variant: "deep", size: "xsmall", children: rate })
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RateValue, { variant: "deep", children: rate })
 ] });
 Rate.propTypes = {
   rate: import_prop_types.string.isRequired

package/cjs/Result/native/Result.js

@@ -66,19 +66,6 @@ const Content = import_styled_components.default.View`
     `;
 }}
 `;
-const Title = (0, import_styled_components.default)(import_Text.default.Medium)`
-  ${({
-  theme: {
-    yoga: {
-      lineHeights: { medium }
-    }
-  }
-}) => {
-  return `
-      line-height: ${medium}px;
-    `;
-}}
-`;
 const Result = ({
   avatar: Avatar,
   attendances,
@@ -86,13 +73,21 @@ const Result = ({
   title,
   subTitle,
   divided,
-  children
+  children,
+  attendancesColor
 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledBox, { divided, display: "flex", flexDirection: "row", children: [
   Avatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: (0, import_react.isValidElement)(Avatar) ? Avatar : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Avatar, {}) }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Content, { children: [
-    !!(attendances == null ? void 0 : attendances.length) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Attendances.default, { attendances, rate }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, { numberOfLines: 1, children: title }),
-    subTitle && subTitle !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Small, { numberOfLines: 1, variant: "stamina", children: subTitle }),
+    !!(attendances == null ? void 0 : attendances.length) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Attendances.default,
+      {
+        attendances,
+        rate,
+        color: attendancesColor
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Body1, { numberOfLines: 1, bold: true, children: title }),
+    subTitle && subTitle !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Body2, { numberOfLines: 1, color: "deep", children: subTitle }),
     children
   ] })
 ] });
@@ -115,13 +110,16 @@ Result.propTypes = {
   /** If it is to show the divide in the bottom */
   divided: import_prop_types.bool,
   /** The chidren necessary */
-  children: import_prop_types.node
+  children: import_prop_types.node,
+  /** The color of attendences icon and description */
+  attendancesColor: import_prop_types.string
 };
 Result.defaultProps = {
   rate: void 0,
   divided: false,
   subTitle: void 0,
   children: void 0,
-  attendances: void 0
+  attendances: void 0,
+  attendancesColor: void 0
 };
 var Result_default = Result;

package/cjs/Result/native/Tags.js

@@ -81,13 +81,25 @@ const Wrapper = import_styled_components.default.ScrollView`
     margin-top: ${xxsmall}px;
   `}
 `;
-const ResultTags = ({ items }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wrapper, { horizontal: true, showsHorizontalScrollIndicator: false, children: items.map((_a, index) => {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TagStyled, __spreadValues({ small: true }, props), index);
-}) });
+const ResultTags = ({ items, disableScroll }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  Wrapper,
+  {
+    horizontal: true,
+    scrollEnabled: !disableScroll,
+    showsHorizontalScrollIndicator: false,
+    children: items.map((_a, index) => {
+      var props = __objRest(_a, []);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TagStyled, __spreadValues({ small: true }, props), index);
+    })
+  }
+);
 ResultTags.displayName = "Result.Tags";
 ResultTags.propTypes = {
   /** Props to generate each Tag. See Tag for details */
-  items: (0, import_prop_types.arrayOf)((0, import_prop_types.shape)({})).isRequired
+  items: (0, import_prop_types.arrayOf)((0, import_prop_types.shape)({})).isRequired,
+  disableScroll: import_prop_types.bool
+};
+ResultTags.defaultProps = {
+  disableScroll: false
 };
 var Tags_default = ResultTags;

package/cjs/Result/native/TinyTextIcon.js

@@ -22,6 +22,18 @@ 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 });
@@ -52,6 +64,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_Box = __toESM(require("../../Box"));
 var import_Icon = __toESM(require("../../Icon"));
-const TinyTextIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { height: "xsmall", width: "xsmall", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, __spreadProps(__spreadValues({}, props), { size: "xsmall", mt: "2px" })) });
+const TinyTextIcon = (_a) => {
+  var _b = _a, { marginTop } = _b, props = __objRest(_b, ["marginTop"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { height: "xsmall", width: "xsmall", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, __spreadProps(__spreadValues({}, props), { size: "xsmall", mt: marginTop })) });
+};
 TinyTextIcon.propTypes = import_Icon.default.propTypes;
 var TinyTextIcon_default = TinyTextIcon;

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 = {