@gympass/yoga 7.108.0 → 7.108.2

package/cjs/Chips/native/Chips.js

@@ -108,11 +108,7 @@ const Wrapper = import_styled_components.default.View.attrs(({ theme: { yoga } }
         ` : ""}
 `;
 const StyledChips = (0, import_styled_components.default)(import_Text.default)`
-  font-size: ${import_Theme.theme.fontSizes.xsmall}px;
-  line-height: ${import_Theme.theme.lineHeights.xsmall}px;
-
   flex-shrink: 1;
-
   ${({ disabled }) => disabled ? import_styled_components.css`
           color: ${import_Theme.theme.colors.text.disabled};
         ` : ""}
@@ -178,7 +174,7 @@ const Chips = import_react.default.forwardRef(
                 StyledChips,
                 {
                   disabled,
-                  as: selected ? import_Text.default.Bold : import_Text.default,
+                  as: selected || disabled ? import_Text.default.Overline : import_Text.default.Caption,
                   selected,
                   numberOfLines: 1,
                   children

package/cjs/Chips/web/Chips.js

@@ -68,16 +68,9 @@ var import_yoga_common = require("@gympass/yoga-common");
 var import_Theme = require("../../Theme");
 var import_Icon = __toESM(require("../../Icon"));
 var import_Counter = __toESM(require("./Counter"));
+var import_Text = __toESM(require("../../Text"));
 const BORDER_OPACITY = 0.4;
 const BORDER_PRESSED_OPACITY = 0.6;
-const Text = import_styled_components.default.span`
-  display: inline-block;
-  box-sizing: border-box;
-
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
 const Wrapper = import_styled_components.default.button`
   height: 32px;
   max-width: 216px;
@@ -92,16 +85,7 @@ const Wrapper = import_styled_components.default.button`
 
   ${(_a) => {
   var _b = _a, { selected, justAnIcon } = _b, props = __objRest(_b, ["selected", "justAnIcon"]);
-  const {
-    spacing,
-    borders,
-    colors,
-    radii,
-    baseFont,
-    fontSizes,
-    fontWeights,
-    lineHeights
-  } = (0, import_Theme.theme)(props);
+  const { spacing, borders, colors, radii } = (0, import_Theme.theme)(props);
   const commonStyles = `
 
       padding: ${justAnIcon ? `${spacing.xxsmall}px` : `${spacing.xxsmall}px ${spacing.xsmall}px`};
@@ -109,18 +93,15 @@ const Wrapper = import_styled_components.default.button`
       border-radius: ${radii.circle}px;
       border-width: ${borders.small}px;
 
-      font-family: ${baseFont.family};
-      font-size: ${fontSizes.xsmall}px;
-      line-height: ${lineHeights.xsmall}px;
-
       :not(:last-child) {
         margin-right: ${spacing.xxsmall}px;
       }
 
       &[disabled] {
         background-color: ${colors.elements.backgroundAndDisabled};
-        color: ${colors.text.disabled};
-
+        p {
+          color: ${colors.text.disabled};
+        }
         border-color: ${colors.elements.backgroundAndDisabled};
 
         cursor: not-allowed;
@@ -138,13 +119,15 @@ const Wrapper = import_styled_components.default.button`
     return `
         ${commonStyles}
 
+        p {
+          color: ${colors.white};
+        }
+        
         background-color: ${colors.secondary};
-        color: ${colors.white};
+        
 
         border-color: transparent;
 
-        font-weight: ${fontWeights.bold};
-
         &:hover:enabled {
           border-color: ${colors.secondary};
         }
@@ -164,17 +147,18 @@ const Wrapper = import_styled_components.default.button`
       border-color: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_OPACITY)};
 
       background-color: ${colors.white};
-      color: ${colors.secondary};
-
-      font-weight: ${fontWeights.regular};
-
+      p {
+        color: ${colors.secondary};
+      }
       &:hover:enabled {
         border-color: ${colors.secondary};
       }
 
       &:active:enabled {
         border-color: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_PRESSED_OPACITY)};
-        color: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_PRESSED_OPACITY)};
+        p {
+          color: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_PRESSED_OPACITY)};
+        }
 
         svg {
           fill: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_PRESSED_OPACITY)};
@@ -208,6 +192,7 @@ const Chips = import_react.default.forwardRef(
     ]);
     const [FirstIcon, SecondIcon] = icons;
     const justAnIcon = (icons[0] || icons[1]) && !children;
+    const TextComponent = selected || disabled ? import_Text.default.Overline : import_Text.default.Caption;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       Wrapper,
       __spreadProps(__spreadValues({
@@ -231,7 +216,7 @@ const Chips = import_react.default.forwardRef(
               }
             }
           ),
-          children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children }),
+          children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, { children }),
           selected && counter && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Counter.default, { value: counter }),
           FirstIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_Icon.default,

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/esm/Chips/native/Chips.js

@@ -77,11 +77,7 @@ const Wrapper = styled.View.attrs(({ theme: { yoga } }) => {
         ` : ""}
 `;
 const StyledChips = styled(Text)`
-  font-size: ${theme.fontSizes.xsmall}px;
-  line-height: ${theme.lineHeights.xsmall}px;
-
   flex-shrink: 1;
-
   ${({ disabled }) => disabled ? css`
           color: ${theme.colors.text.disabled};
         ` : ""}
@@ -147,7 +143,7 @@ const Chips = React.forwardRef(
                 StyledChips,
                 {
                   disabled,
-                  as: selected ? Text.Bold : Text,
+                  as: selected || disabled ? Text.Overline : Text.Caption,
                   selected,
                   numberOfLines: 1,
                   children

package/esm/Chips/web/Chips.js

@@ -37,16 +37,9 @@ import { hexToRgb } from "@gympass/yoga-common";
 import { theme } from "../../Theme";
 import Icon from "../../Icon";
 import Counter from "./Counter";
+import Text from "../../Text";
 const BORDER_OPACITY = 0.4;
 const BORDER_PRESSED_OPACITY = 0.6;
-const Text = styled.span`
-  display: inline-block;
-  box-sizing: border-box;
-
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
 const Wrapper = styled.button`
   height: 32px;
   max-width: 216px;
@@ -61,16 +54,7 @@ const Wrapper = styled.button`
 
   ${(_a) => {
   var _b = _a, { selected, justAnIcon } = _b, props = __objRest(_b, ["selected", "justAnIcon"]);
-  const {
-    spacing,
-    borders,
-    colors,
-    radii,
-    baseFont,
-    fontSizes,
-    fontWeights,
-    lineHeights
-  } = theme(props);
+  const { spacing, borders, colors, radii } = theme(props);
   const commonStyles = `
 
       padding: ${justAnIcon ? `${spacing.xxsmall}px` : `${spacing.xxsmall}px ${spacing.xsmall}px`};
@@ -78,18 +62,15 @@ const Wrapper = styled.button`
       border-radius: ${radii.circle}px;
       border-width: ${borders.small}px;
 
-      font-family: ${baseFont.family};
-      font-size: ${fontSizes.xsmall}px;
-      line-height: ${lineHeights.xsmall}px;
-
       :not(:last-child) {
         margin-right: ${spacing.xxsmall}px;
       }
 
       &[disabled] {
         background-color: ${colors.elements.backgroundAndDisabled};
-        color: ${colors.text.disabled};
-
+        p {
+          color: ${colors.text.disabled};
+        }
         border-color: ${colors.elements.backgroundAndDisabled};
 
         cursor: not-allowed;
@@ -107,13 +88,15 @@ const Wrapper = styled.button`
     return `
         ${commonStyles}
 
+        p {
+          color: ${colors.white};
+        }
+        
         background-color: ${colors.secondary};
-        color: ${colors.white};
+        
 
         border-color: transparent;
 
-        font-weight: ${fontWeights.bold};
-
         &:hover:enabled {
           border-color: ${colors.secondary};
         }
@@ -133,17 +116,18 @@ const Wrapper = styled.button`
       border-color: ${hexToRgb(colors.secondary, BORDER_OPACITY)};
 
       background-color: ${colors.white};
-      color: ${colors.secondary};
-
-      font-weight: ${fontWeights.regular};
-
+      p {
+        color: ${colors.secondary};
+      }
       &:hover:enabled {
         border-color: ${colors.secondary};
       }
 
       &:active:enabled {
         border-color: ${hexToRgb(colors.secondary, BORDER_PRESSED_OPACITY)};
-        color: ${hexToRgb(colors.secondary, BORDER_PRESSED_OPACITY)};
+        p {
+          color: ${hexToRgb(colors.secondary, BORDER_PRESSED_OPACITY)};
+        }
 
         svg {
           fill: ${hexToRgb(colors.secondary, BORDER_PRESSED_OPACITY)};
@@ -177,6 +161,7 @@ const Chips = React.forwardRef(
     ]);
     const [FirstIcon, SecondIcon] = icons;
     const justAnIcon = (icons[0] || icons[1]) && !children;
+    const TextComponent = selected || disabled ? Text.Overline : Text.Caption;
     return /* @__PURE__ */ jsxs(
       Wrapper,
       __spreadProps(__spreadValues({
@@ -200,7 +185,7 @@ const Chips = React.forwardRef(
               }
             }
           ),
-          children && /* @__PURE__ */ jsx(Text, { children }),
+          children && /* @__PURE__ */ jsx(TextComponent, { children }),
           selected && counter && !disabled && /* @__PURE__ */ jsx(Counter, { value: counter }),
           FirstIcon && /* @__PURE__ */ jsx(
             Icon,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.108.0",
+  "version": "7.108.2",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -57,7 +57,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "f2472b24c7657c24192dd8dc0f29ce63f2cf76d3",
+  "gitHead": "332b0673dc10bf427dc8664aa774d0f7ea3156ee",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"