@gympass/yoga 7.107.1 → 7.108.1

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

@@ -6,17 +6,16 @@ import Box from "../../Box";
 import Text from "../../Text";
 import Rate from "./Rate";
 import TinyTextIcon from "./TinyTextIcon";
-const List = styled(Text.Tiny).attrs({
+const List = styled(Text.Caption).attrs({
   numberOfLines: 1,
-  variant: "deep"
+  color: ({ color }) => color || "deep"
 })`
   flex: 1;
 `;
 const ItemSeparator = styled(Box).attrs({
-  width: "xxxsmall",
   height: "zero"
 })``;
-const Attendances = ({ attendances, rate }) => /* @__PURE__ */ jsxs(
+const Attendances = ({ attendances, rate, color }) => /* @__PURE__ */ jsxs(
   Box,
   {
     display: "flex",
@@ -26,11 +25,11 @@ const Attendances = ({ attendances, rate }) => /* @__PURE__ */ jsxs(
     flexDirection: "row",
     mb: "xxxsmall",
     children: [
-      /* @__PURE__ */ jsx(List, { children: attendances.map(({ description, icon }) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-        /* @__PURE__ */ jsx(TinyTextIcon, { as: icon, fill: "deep" }),
-        /* @__PURE__ */ jsx(ItemSeparator, {}),
+      /* @__PURE__ */ jsx(List, { color, children: attendances.map(({ description, icon }) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(TinyTextIcon, { as: icon, marginTop: "2px", fill: color || "deep" }),
+        /* @__PURE__ */ jsx(ItemSeparator, { w: "xxxsmall" }),
         description,
-        /* @__PURE__ */ jsx(ItemSeparator, {})
+        /* @__PURE__ */ jsx(ItemSeparator, { w: "xxsmall" })
       ] }, description)) }),
       rate && /* @__PURE__ */ jsx(Rate, { rate })
     ]
@@ -43,10 +42,12 @@ Attendances.propTypes = {
       icon: func
     })
   ).isRequired,
-  rate: string
+  rate: string,
+  color: string
 };
 Attendances.defaultProps = {
-  rate: void 0
+  rate: void 0,
+  color: "deep"
 };
 var Attendances_default = Attendances;
 export {

package/esm/Result/native/Details.js

@@ -42,15 +42,14 @@ import styled from "styled-components";
 import Text from "../../Text";
 import Box from "../../Box";
 import TinyTextIcon from "./TinyTextIcon";
-const Container = styled(Text.Tiny)`
+const Container = styled(Text.Body2)`
   flex: 1;
-  height: ${({ theme }) => theme.yoga.spacing.small}px;
 `;
 const Separator = styled(Box).attrs({
   width: "xxxsmall",
   height: "xxxsmall"
 })``;
-const StyledText = styled(Text.Tiny)`
+const StyledText = styled(Text.Body2)`
   ${({
   theme: {
     yoga: {
@@ -122,7 +121,7 @@ ResultDetails.defaultProps = {
   limit: void 0,
   limitLabel: "",
   dots: false,
-  renderItem: Text.Tiny
+  renderItem: Text.Body2
 };
 var Details_default = ResultDetails;
 export {

package/esm/Result/native/Rate.js

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

package/esm/Result/native/Result.js

@@ -33,19 +33,6 @@ const Content = styled.View`
     `;
 }}
 `;
-const Title = styled(Text.Medium)`
-  ${({
-  theme: {
-    yoga: {
-      lineHeights: { medium }
-    }
-  }
-}) => {
-  return `
-      line-height: ${medium}px;
-    `;
-}}
-`;
 const Result = ({
   avatar: Avatar,
   attendances,
@@ -53,13 +40,21 @@ const Result = ({
   title,
   subTitle,
   divided,
-  children
+  children,
+  attendancesColor
 }) => /* @__PURE__ */ jsxs(StyledBox, { divided, display: "flex", flexDirection: "row", children: [
   Avatar && /* @__PURE__ */ jsx(Fragment, { children: isValidElement(Avatar) ? Avatar : /* @__PURE__ */ jsx(Avatar, {}) }),
   /* @__PURE__ */ jsxs(Content, { children: [
-    !!(attendances == null ? void 0 : attendances.length) && /* @__PURE__ */ jsx(Attendances, { attendances, rate }),
-    /* @__PURE__ */ jsx(Title, { numberOfLines: 1, children: title }),
-    subTitle && subTitle !== "" && /* @__PURE__ */ jsx(Text.Small, { numberOfLines: 1, variant: "stamina", children: subTitle }),
+    !!(attendances == null ? void 0 : attendances.length) && /* @__PURE__ */ jsx(
+      Attendances,
+      {
+        attendances,
+        rate,
+        color: attendancesColor
+      }
+    ),
+    /* @__PURE__ */ jsx(Text.Body1, { numberOfLines: 1, bold: true, children: title }),
+    subTitle && subTitle !== "" && /* @__PURE__ */ jsx(Text.Body2, { numberOfLines: 1, color: "deep", children: subTitle }),
     children
   ] })
 ] });
@@ -82,14 +77,17 @@ Result.propTypes = {
   /** If it is to show the divide in the bottom */
   divided: bool,
   /** The chidren necessary */
-  children: node
+  children: node,
+  /** The color of attendences icon and description */
+  attendancesColor: 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;
 export {

package/esm/Result/native/Tags.js

@@ -28,7 +28,7 @@ var __objRest = (source, exclude) => {
 };
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { arrayOf, shape } from "prop-types";
+import { arrayOf, shape, bool } from "prop-types";
 import styled from "styled-components";
 import Tag from "../../Tag";
 const TagStyled = styled(Tag.Informative)`
@@ -47,17 +47,29 @@ const Wrapper = styled.ScrollView`
     margin-top: ${xxsmall}px;
   `}
 `;
-const ResultTags = ({ items }) => /* @__PURE__ */ jsx(Wrapper, { horizontal: true, showsHorizontalScrollIndicator: false, children: items.map((_a, index) => {
-  var props = __objRest(_a, []);
-  return (
-    // eslint-disable-next-line react/no-array-index-key
-    /* @__PURE__ */ jsx(TagStyled, __spreadValues({ small: true }, props), index)
-  );
-}) });
+const ResultTags = ({ items, disableScroll }) => /* @__PURE__ */ jsx(
+  Wrapper,
+  {
+    horizontal: true,
+    scrollEnabled: !disableScroll,
+    showsHorizontalScrollIndicator: false,
+    children: items.map((_a, index) => {
+      var props = __objRest(_a, []);
+      return (
+        // eslint-disable-next-line react/no-array-index-key
+        /* @__PURE__ */ jsx(TagStyled, __spreadValues({ small: true }, props), index)
+      );
+    })
+  }
+);
 ResultTags.displayName = "Result.Tags";
 ResultTags.propTypes = {
   /** Props to generate each Tag. See Tag for details */
-  items: arrayOf(shape({})).isRequired
+  items: arrayOf(shape({})).isRequired,
+  disableScroll: bool
+};
+ResultTags.defaultProps = {
+  disableScroll: false
 };
 var Tags_default = ResultTags;
 export {

package/esm/Result/native/TinyTextIcon.js

@@ -17,11 +17,26 @@ 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 Box from "../../Box";
 import Icon from "../../Icon";
-const TinyTextIcon = (props) => /* @__PURE__ */ jsx(Box, { height: "xsmall", width: "xsmall", children: /* @__PURE__ */ jsx(Icon, __spreadProps(__spreadValues({}, props), { size: "xsmall", mt: "2px" })) });
+const TinyTextIcon = (_a) => {
+  var _b = _a, { marginTop } = _b, props = __objRest(_b, ["marginTop"]);
+  return /* @__PURE__ */ jsx(Box, { height: "xsmall", width: "xsmall", children: /* @__PURE__ */ jsx(Icon, __spreadProps(__spreadValues({}, props), { size: "xsmall", mt: marginTop })) });
+};
 TinyTextIcon.propTypes = Icon.propTypes;
 var TinyTextIcon_default = TinyTextIcon;
 export {

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 {