@gympass/yoga 7.113.1 → 7.114.0

package/cjs/Button/Button.theme.js

@@ -104,7 +104,10 @@ const Button = ({
         }
       },
       border: {
-        width: borders.small
+        width: borders.small,
+        color: {
+          disabled: colors.elements.backgroundAndDisabled
+        }
       },
       font: {
         default: {
@@ -118,6 +121,9 @@ const Button = ({
         disabled: {
           color: colors.text.disabled
         },
+        inverted: {
+          color: colors.text.primary
+        },
         hover: {
           color: colors.white
         },

package/cjs/Button/index.native.js

@@ -35,7 +35,9 @@ var import_Button = __toESM(require("./native/Button"));
 var import_Text = __toESM(require("./native/Text"));
 var import_Link = __toESM(require("./native/Link"));
 var import_Icon = __toESM(require("./native/Icon"));
+var import_Outline = __toESM(require("./native/Outline"));
 import_Button.default.Text = import_Text.default;
 import_Button.default.Link = import_Link.default;
 import_Button.default.Icon = import_Icon.default;
+import_Button.default.Outline = import_Outline.default;
 var index_native_default = import_Button.default;

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

@@ -183,6 +183,12 @@ describe("<Button />", () => {
           );
           expect(toJSON()).toMatchSnapshot();
         });
+        it("should match snapshot with outline Button", () => {
+          const { toJSON } = (0, import_react_native.render)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Outline, { secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
         it("should match snapshot with default Button with Icon", () => {
           const { toJSON } = (0, import_react_native.render)(
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { icon: import_yoga_icons.Booking, secondary: true }) })
@@ -215,6 +221,12 @@ describe("<Button />", () => {
           );
           expect(toJSON()).toMatchSnapshot();
         });
+        it("should match snapshot with outline Button", () => {
+          const { toJSON } = (0, import_react_native.render)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Outline, { inverted: true, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
         it("should match snapshot with default Button with Icon", () => {
           const { toJSON } = (0, import_react_native.render)(
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { inverted: true, icon: import_yoga_icons.Booking, secondary: true }) })
@@ -247,6 +259,12 @@ describe("<Button />", () => {
           );
           expect(toJSON()).toMatchSnapshot();
         });
+        it("should match snapshot with outline Button", () => {
+          const { toJSON } = (0, import_react_native.render)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Outline, { small: true, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
         it("should match snapshot with default Button with Icon", () => {
           const { toJSON } = (0, import_react_native.render)(
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { small: true, icon: import_yoga_icons.Booking, secondary: true }) })
@@ -273,6 +291,12 @@ describe("<Button />", () => {
           );
           expect(toJSON()).toMatchSnapshot();
         });
+        it("should match snapshot with outline Button", () => {
+          const { toJSON } = (0, import_react_native.render)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Outline, { full: true, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
         it("should match snapshot with default Button with Icon", () => {
           const { toJSON } = (0, import_react_native.render)(
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { full: true, icon: import_yoga_icons.Booking, secondary: true }) })
@@ -315,6 +339,12 @@ describe("<Button />", () => {
           );
           expect(toJSON()).toMatchSnapshot();
         });
+        it("should match snapshot with outline Button", () => {
+          const { toJSON } = (0, import_react_native.render)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Outline, { disabled: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
         it("should match snapshot with default Button with Icon", () => {
           const { toJSON } = (0, import_react_native.render)(
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { disabled: true, icon: import_yoga_icons.Booking }) })
@@ -361,6 +391,14 @@ describe("<Button />", () => {
       import_react_native.fireEvent.press(getByRole("button"));
       expect(onPressMock).toHaveBeenCalled();
     });
+    it("should call onPress function when press on Button.Outline", () => {
+      const onPressMock = jest.fn();
+      const { getByRole } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Outline, { onPress: onPressMock }) })
+      );
+      import_react_native.fireEvent.press(getByRole("button"));
+      expect(onPressMock).toHaveBeenCalled();
+    });
     it("should not call onPress function when press on Button disabled", () => {
       const onPressMock = jest.fn();
       const { getByText } = (0, import_react_native.render)(

package/cjs/Button/native/Outline.js

@@ -0,0 +1,222 @@
+"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;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  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 });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Outline_exports = {};
+__export(Outline_exports, {
+  default: () => Outline_default
+});
+module.exports = __toCommonJS(Outline_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_yoga_common = require("@gympass/yoga-common");
+var import_withTouchable = __toESM(require("./withTouchable"));
+var import_Button = require("./Button");
+const getInvertedStyles = ({ outline, pressed, white, disabled }) => {
+  const newStyles = {};
+  if (disabled) {
+    newStyles.backgroundColor = white;
+    newStyles.borderColor = outline.border.color.disabled;
+  }
+  if (!disabled && pressed) {
+    newStyles.backgroundColor = (0, import_yoga_common.hexToRgb)(white, 0.75);
+    newStyles.borderColor = "transparent";
+  }
+  return __spreadValues({
+    backgroundColor: outline.backgroundColor.default,
+    borderColor: white,
+    borderWidth: outline.border.width
+  }, newStyles);
+};
+const getDisabledStyles = ({ outline }) => {
+  return {
+    backgroundColor: outline.backgroundColor.default,
+    borderColor: outline.border.color.disabled,
+    borderWidth: outline.border.width
+  };
+};
+const getStyles = ({ outline, pressed, secondary }) => {
+  const state = secondary ? "secondary" : "primary";
+  const newStyles = {};
+  if (pressed) {
+    newStyles.backgroundColor = outline.font.pressed[state].color;
+    newStyles.borderColor = "transparent";
+  }
+  return __spreadValues({
+    backgroundColor: outline.backgroundColor.default,
+    borderColor: outline.font.default[state].color,
+    borderWidth: outline.border.width
+  }, newStyles);
+};
+const LabelText = (0, import_styled_components.default)(import_Button.Label)`
+  ${({ color }) => `
+    color: ${color};
+    text-decoration: none;
+  `},
+`;
+const ButtonContainerOutline = (0, import_styled_components.default)(import_Button.ButtonContainer)`
+  ${({
+  secondary,
+  inverted,
+  disabled,
+  pressed,
+  theme: {
+    yoga: {
+      colors: { white },
+      components: {
+        button: {
+          types: { outline }
+        }
+      }
+    }
+  }
+}) => {
+  if (inverted) {
+    return getInvertedStyles({ outline, pressed, white, disabled });
+  }
+  if (disabled) {
+    return getDisabledStyles({ outline });
+  }
+  return getStyles({ outline, pressed, secondary });
+}}}
+`;
+const ButtonOutline = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      disabled,
+      pressed,
+      small,
+      secondary,
+      inverted,
+      theme: {
+        yoga: {
+          colors,
+          components: {
+            button: {
+              types: { outline }
+            }
+          }
+        }
+      }
+    } = _b, rest = __objRest(_b, [
+      "children",
+      "disabled",
+      "pressed",
+      "small",
+      "secondary",
+      "inverted",
+      "theme"
+    ]);
+    const state = secondary ? "secondary" : "primary";
+    let textColor = colors[state];
+    if (disabled) {
+      textColor = outline.font.disabled.color;
+    } else if (inverted) {
+      textColor = colors.white;
+      if (pressed) {
+        textColor = outline.font.inverted.color;
+      }
+    } else if (pressed) {
+      textColor = colors.white;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ButtonContainerOutline,
+      __spreadProps(__spreadValues({}, rest), {
+        disabled,
+        pressed,
+        small,
+        secondary,
+        inverted,
+        accessible: true,
+        accessibilityRole: "button",
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          LabelText,
+          {
+            disabled,
+            pressed,
+            small,
+            secondary,
+            color: textColor,
+            children
+          }
+        )
+      })
+    );
+  }
+);
+ButtonOutline.propTypes = {
+  children: import_prop_types.node,
+  full: import_prop_types.bool,
+  disabled: import_prop_types.bool,
+  small: import_prop_types.bool,
+  pressed: import_prop_types.bool,
+  inverted: import_prop_types.bool,
+  secondary: import_prop_types.bool
+};
+ButtonOutline.defaultProps = {
+  children: "Button",
+  full: false,
+  disabled: false,
+  small: false,
+  pressed: false,
+  inverted: false,
+  secondary: false
+};
+var Outline_default = (0, import_withTouchable.default)((0, import_styled_components.withTheme)(ButtonOutline));

package/cjs/Card/native/EventCard/EventCard.js

@@ -71,7 +71,7 @@ var import_Card = __toESM(require("../Card"));
 var import_Text = __toESM(require("../../../Text"));
 var import_Box = __toESM(require("../../../Box"));
 var import_Button = __toESM(require("../../../Button"));
-const { spacing, radii, lineHeights, colors, borders } = import_themeReader.default;
+const { spacing, radii, colors, borders } = import_themeReader.default;
 const Event = (0, import_styled_components.default)(import_Card.default).attrs({ hasShadow: false })`
   flex-direction: row;
   height: 104px;
@@ -110,15 +110,14 @@ const Top = (0, import_styled_components.default)(import_Box.default)`
   align-items: center;
   height: ${spacing.small}px;
 `;
-const Name = (0, import_styled_components.default)(import_Text.default.Medium)`
+const Name = (0, import_styled_components.default)(import_Text.default.Body2)`
   margin-bottom: ${spacing.xxxsmall}px;
-  line-height: ${lineHeights.small}px;
 `;
-const Place = (0, import_styled_components.default)(import_Text.default.Tiny)`
+const Place = (0, import_styled_components.default)(import_Text.default.Caption)`
   width: 180px;
   margin-bottom: ${spacing.xsmall}px;
 `;
-const Day = (0, import_styled_components.default)(import_Text.default.H5)`
+const Day = (0, import_styled_components.default)(import_Text.default.H5).attrs({ bold: true })`
   margin-top: ${spacing.xxxsmall}px;
   margin-bottom: ${spacing.xxxsmall}px;
 `;
@@ -155,9 +154,9 @@ const SmallCard = ({
       borderRadius: "small",
       bgColor: getIndicatorColor(active, Boolean(event))
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Tiny, { variant: active ? "white" : "deep", children: month }) }),
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Caption, { variant: active ? "white" : "deep", children: month }) }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Day, { variant: active ? "white" : "secondary", children: day }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Tiny, { variant: active ? "white" : "deep", children: String(dayOfWeek).toUpperCase() })
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Caption, { variant: active ? "white" : "deep", children: String(dayOfWeek).toUpperCase() })
 ] });
 const FullCard = (0, import_styled_components.withTheme)(
   ({
@@ -176,9 +175,9 @@ const FullCard = (0, import_styled_components.withTheme)(
     }
   }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DateInfo, { bg: "primary", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Top, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Tiny, { inverted: true, children: month }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Top, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Caption, { inverted: true, children: month }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Day, { inverted: true, children: day }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Tiny, { inverted: true, children: String(dayOfWeek).toUpperCase() })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Caption, { inverted: true, children: String(dayOfWeek).toUpperCase() })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EventInfo, { p: "small", pl: "xsmall", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Name, { numberOfLines: 1, size: "small", children: event.name }),
@@ -186,7 +185,7 @@ const FullCard = (0, import_styled_components.withTheme)(
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Row, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EventTime, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Time, { fill: icon.fill, style: { marginRight: 5 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Tiny, { children: event.time })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Caption, { children: event.time })
         ] }),
         !!link && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonLink, { onPress: onLinkPress, small: true, secondary: true, children: link })
       ] })

package/esm/Button/Button.theme.js

@@ -81,7 +81,10 @@ const Button = ({
         }
       },
       border: {
-        width: borders.small
+        width: borders.small,
+        color: {
+          disabled: colors.elements.backgroundAndDisabled
+        }
       },
       font: {
         default: {
@@ -95,6 +98,9 @@ const Button = ({
         disabled: {
           color: colors.text.disabled
         },
+        inverted: {
+          color: colors.text.primary
+        },
         hover: {
           color: colors.white
         },

package/esm/Button/index.native.js

@@ -2,9 +2,11 @@ import Button from "./native/Button";
 import ButtonText from "./native/Text";
 import ButtonLink from "./native/Link";
 import ButtonIcon from "./native/Icon";
+import ButtonOutline from "./native/Outline";
 Button.Text = ButtonText;
 Button.Link = ButtonLink;
 Button.Icon = ButtonIcon;
+Button.Outline = ButtonOutline;
 var index_native_default = Button;
 export {
   index_native_default as default

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

@@ -160,6 +160,12 @@ describe("<Button />", () => {
           );
           expect(toJSON()).toMatchSnapshot();
         });
+        it("should match snapshot with outline Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Outline, { secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
         it("should match snapshot with default Button with Icon", () => {
           const { toJSON } = render(
             /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { icon: Booking, secondary: true }) })
@@ -192,6 +198,12 @@ describe("<Button />", () => {
           );
           expect(toJSON()).toMatchSnapshot();
         });
+        it("should match snapshot with outline Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Outline, { inverted: true, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
         it("should match snapshot with default Button with Icon", () => {
           const { toJSON } = render(
             /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { inverted: true, icon: Booking, secondary: true }) })
@@ -224,6 +236,12 @@ describe("<Button />", () => {
           );
           expect(toJSON()).toMatchSnapshot();
         });
+        it("should match snapshot with outline Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Outline, { small: true, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
         it("should match snapshot with default Button with Icon", () => {
           const { toJSON } = render(
             /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { small: true, icon: Booking, secondary: true }) })
@@ -250,6 +268,12 @@ describe("<Button />", () => {
           );
           expect(toJSON()).toMatchSnapshot();
         });
+        it("should match snapshot with outline Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Outline, { full: true, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
         it("should match snapshot with default Button with Icon", () => {
           const { toJSON } = render(
             /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { full: true, icon: Booking, secondary: true }) })
@@ -292,6 +316,12 @@ describe("<Button />", () => {
           );
           expect(toJSON()).toMatchSnapshot();
         });
+        it("should match snapshot with outline Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Outline, { disabled: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
         it("should match snapshot with default Button with Icon", () => {
           const { toJSON } = render(
             /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { disabled: true, icon: Booking }) })
@@ -338,6 +368,14 @@ describe("<Button />", () => {
       fireEvent.press(getByRole("button"));
       expect(onPressMock).toHaveBeenCalled();
     });
+    it("should call onPress function when press on Button.Outline", () => {
+      const onPressMock = jest.fn();
+      const { getByRole } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Outline, { onPress: onPressMock }) })
+      );
+      fireEvent.press(getByRole("button"));
+      expect(onPressMock).toHaveBeenCalled();
+    });
     it("should not call onPress function when press on Button disabled", () => {
       const onPressMock = jest.fn();
       const { getByText } = render(

package/esm/Button/native/Outline.js

@@ -0,0 +1,194 @@
+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;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  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, { forwardRef } from "react";
+import styled, { withTheme } from "styled-components";
+import { bool, node } from "prop-types";
+import { hexToRgb } from "@gympass/yoga-common";
+import withTouchable from "./withTouchable";
+import { Label, ButtonContainer } from "./Button";
+const getInvertedStyles = ({ outline, pressed, white, disabled }) => {
+  const newStyles = {};
+  if (disabled) {
+    newStyles.backgroundColor = white;
+    newStyles.borderColor = outline.border.color.disabled;
+  }
+  if (!disabled && pressed) {
+    newStyles.backgroundColor = hexToRgb(white, 0.75);
+    newStyles.borderColor = "transparent";
+  }
+  return __spreadValues({
+    backgroundColor: outline.backgroundColor.default,
+    borderColor: white,
+    borderWidth: outline.border.width
+  }, newStyles);
+};
+const getDisabledStyles = ({ outline }) => {
+  return {
+    backgroundColor: outline.backgroundColor.default,
+    borderColor: outline.border.color.disabled,
+    borderWidth: outline.border.width
+  };
+};
+const getStyles = ({ outline, pressed, secondary }) => {
+  const state = secondary ? "secondary" : "primary";
+  const newStyles = {};
+  if (pressed) {
+    newStyles.backgroundColor = outline.font.pressed[state].color;
+    newStyles.borderColor = "transparent";
+  }
+  return __spreadValues({
+    backgroundColor: outline.backgroundColor.default,
+    borderColor: outline.font.default[state].color,
+    borderWidth: outline.border.width
+  }, newStyles);
+};
+const LabelText = styled(Label)`
+  ${({ color }) => `
+    color: ${color};
+    text-decoration: none;
+  `},
+`;
+const ButtonContainerOutline = styled(ButtonContainer)`
+  ${({
+  secondary,
+  inverted,
+  disabled,
+  pressed,
+  theme: {
+    yoga: {
+      colors: { white },
+      components: {
+        button: {
+          types: { outline }
+        }
+      }
+    }
+  }
+}) => {
+  if (inverted) {
+    return getInvertedStyles({ outline, pressed, white, disabled });
+  }
+  if (disabled) {
+    return getDisabledStyles({ outline });
+  }
+  return getStyles({ outline, pressed, secondary });
+}}}
+`;
+const ButtonOutline = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      disabled,
+      pressed,
+      small,
+      secondary,
+      inverted,
+      theme: {
+        yoga: {
+          colors,
+          components: {
+            button: {
+              types: { outline }
+            }
+          }
+        }
+      }
+    } = _b, rest = __objRest(_b, [
+      "children",
+      "disabled",
+      "pressed",
+      "small",
+      "secondary",
+      "inverted",
+      "theme"
+    ]);
+    const state = secondary ? "secondary" : "primary";
+    let textColor = colors[state];
+    if (disabled) {
+      textColor = outline.font.disabled.color;
+    } else if (inverted) {
+      textColor = colors.white;
+      if (pressed) {
+        textColor = outline.font.inverted.color;
+      }
+    } else if (pressed) {
+      textColor = colors.white;
+    }
+    return /* @__PURE__ */ jsx(
+      ButtonContainerOutline,
+      __spreadProps(__spreadValues({}, rest), {
+        disabled,
+        pressed,
+        small,
+        secondary,
+        inverted,
+        accessible: true,
+        accessibilityRole: "button",
+        ref,
+        children: /* @__PURE__ */ jsx(
+          LabelText,
+          {
+            disabled,
+            pressed,
+            small,
+            secondary,
+            color: textColor,
+            children
+          }
+        )
+      })
+    );
+  }
+);
+ButtonOutline.propTypes = {
+  children: node,
+  full: bool,
+  disabled: bool,
+  small: bool,
+  pressed: bool,
+  inverted: bool,
+  secondary: bool
+};
+ButtonOutline.defaultProps = {
+  children: "Button",
+  full: false,
+  disabled: false,
+  small: false,
+  pressed: false,
+  inverted: false,
+  secondary: false
+};
+var Outline_default = withTouchable(withTheme(ButtonOutline));
+export {
+  Outline_default as default
+};

package/esm/Card/native/EventCard/EventCard.js

@@ -40,7 +40,7 @@ import Card from "../Card";
 import Text from "../../../Text";
 import Box from "../../../Box";
 import Button from "../../../Button";
-const { spacing, radii, lineHeights, colors, borders } = theme;
+const { spacing, radii, colors, borders } = theme;
 const Event = styled(Card).attrs({ hasShadow: false })`
   flex-direction: row;
   height: 104px;
@@ -79,15 +79,14 @@ const Top = styled(Box)`
   align-items: center;
   height: ${spacing.small}px;
 `;
-const Name = styled(Text.Medium)`
+const Name = styled(Text.Body2)`
   margin-bottom: ${spacing.xxxsmall}px;
-  line-height: ${lineHeights.small}px;
 `;
-const Place = styled(Text.Tiny)`
+const Place = styled(Text.Caption)`
   width: 180px;
   margin-bottom: ${spacing.xsmall}px;
 `;
-const Day = styled(Text.H5)`
+const Day = styled(Text.H5).attrs({ bold: true })`
   margin-top: ${spacing.xxxsmall}px;
   margin-bottom: ${spacing.xxxsmall}px;
 `;
@@ -124,9 +123,9 @@ const SmallCard = ({
       borderRadius: "small",
       bgColor: getIndicatorColor(active, Boolean(event))
     }
-  ) : /* @__PURE__ */ jsx(Text.Tiny, { variant: active ? "white" : "deep", children: month }) }),
+  ) : /* @__PURE__ */ jsx(Text.Caption, { variant: active ? "white" : "deep", children: month }) }),
   /* @__PURE__ */ jsx(Day, { variant: active ? "white" : "secondary", children: day }),
-  /* @__PURE__ */ jsx(Text.Tiny, { variant: active ? "white" : "deep", children: String(dayOfWeek).toUpperCase() })
+  /* @__PURE__ */ jsx(Text.Caption, { variant: active ? "white" : "deep", children: String(dayOfWeek).toUpperCase() })
 ] });
 const FullCard = withTheme(
   ({
@@ -145,9 +144,9 @@ const FullCard = withTheme(
     }
   }) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(DateInfo, { bg: "primary", children: [
-      /* @__PURE__ */ jsx(Top, { children: /* @__PURE__ */ jsx(Text.Tiny, { inverted: true, children: month }) }),
+      /* @__PURE__ */ jsx(Top, { children: /* @__PURE__ */ jsx(Text.Caption, { inverted: true, children: month }) }),
       /* @__PURE__ */ jsx(Day, { inverted: true, children: day }),
-      /* @__PURE__ */ jsx(Text.Tiny, { inverted: true, children: String(dayOfWeek).toUpperCase() })
+      /* @__PURE__ */ jsx(Text.Caption, { inverted: true, children: String(dayOfWeek).toUpperCase() })
     ] }),
     /* @__PURE__ */ jsxs(EventInfo, { p: "small", pl: "xsmall", children: [
       /* @__PURE__ */ jsx(Name, { numberOfLines: 1, size: "small", children: event.name }),
@@ -155,7 +154,7 @@ const FullCard = withTheme(
       /* @__PURE__ */ jsxs(Row, { children: [
         /* @__PURE__ */ jsxs(EventTime, { children: [
           /* @__PURE__ */ jsx(Time, { fill: icon.fill, style: { marginRight: 5 } }),
-          /* @__PURE__ */ jsx(Text.Tiny, { children: event.time })
+          /* @__PURE__ */ jsx(Text.Caption, { children: event.time })
         ] }),
         !!link && /* @__PURE__ */ jsx(ButtonLink, { onPress: onLinkPress, small: true, secondary: true, children: link })
       ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.113.1",
+  "version": "7.114.0",
   "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": "930e83248e5569a6815e0b2859789413b2eed4fe",
+  "gitHead": "0016f4757bed1bb22ce1856b61a7c519457ea8eb",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"