@gympass/yoga 7.113.2 → 7.114.1

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/Datepicker/web/Calendar.js

@@ -65,10 +65,20 @@ const Day = (0, import_styled_components.default)(import__.Text.Overline)`
   }
 }) => `
     width: 40px;
-    color: ${colors.medium};
+    color: ${colors.elements.selectionAndIcons};
     text-align: center;
   `}
 `;
+const Month = (0, import_styled_components.default)(import__.Text.Body2)`
+  ${({
+  theme: {
+    yoga: { colors, v3theme }
+  }
+}) => `
+    color: ${v3theme ? colors.primary : colors.text.primary};
+    align-self: center;
+  `}
+`;
 const getDayFieldColor = (selected, disabled, colors, aux) => {
   if (selected && !disabled) {
     return colors.white;
@@ -132,14 +142,14 @@ const DayField = import_styled_components.default.div`
     display: flex;
     align-items: center;
     justify-content: center;
-    background: ${inRange ? colors.clear : colors.white};
+    background: ${inRange ? colors.elements.lineAndBorders : colors.white};
     position: relative;
     cursor: pointer;
     ${selected && inRange ? `border-radius: ${getDayFieldRadius(aux, radii)};` : ``}
     ${selected && !disabled ? `&:before {
             content: '';
             position: absolute;
-            background: ${colors.vibin};
+            background: ${colors.primary};
             width: ${datepicker.width.day}px;
             height: ${datepicker.width.day}px;
             border-radius: ${radii.circle}px;
@@ -346,7 +356,7 @@ function Calendar({
               "data-testid": "previous-month-arrow"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Body2, { style: { alignSelf: "center" }, bold: true, children: new Intl.DateTimeFormat("en-US", {
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Month, { bold: true, children: new Intl.DateTimeFormat("en-US", {
             month: "long",
             year: "numeric"
           }).format(new Date(year, month, 1, 0, 0, 0)) }),

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/Datepicker/web/Calendar.js

@@ -32,10 +32,20 @@ const Day = styled(Text.Overline)`
   }
 }) => `
     width: 40px;
-    color: ${colors.medium};
+    color: ${colors.elements.selectionAndIcons};
     text-align: center;
   `}
 `;
+const Month = styled(Text.Body2)`
+  ${({
+  theme: {
+    yoga: { colors, v3theme }
+  }
+}) => `
+    color: ${v3theme ? colors.primary : colors.text.primary};
+    align-self: center;
+  `}
+`;
 const getDayFieldColor = (selected, disabled, colors, aux) => {
   if (selected && !disabled) {
     return colors.white;
@@ -99,14 +109,14 @@ const DayField = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
-    background: ${inRange ? colors.clear : colors.white};
+    background: ${inRange ? colors.elements.lineAndBorders : colors.white};
     position: relative;
     cursor: pointer;
     ${selected && inRange ? `border-radius: ${getDayFieldRadius(aux, radii)};` : ``}
     ${selected && !disabled ? `&:before {
             content: '';
             position: absolute;
-            background: ${colors.vibin};
+            background: ${colors.primary};
             width: ${datepicker.width.day}px;
             height: ${datepicker.width.day}px;
             border-radius: ${radii.circle}px;
@@ -313,7 +323,7 @@ function Calendar({
               "data-testid": "previous-month-arrow"
             }
           ),
-          /* @__PURE__ */ jsx(Text.Body2, { style: { alignSelf: "center" }, bold: true, children: new Intl.DateTimeFormat("en-US", {
+          /* @__PURE__ */ jsx(Month, { bold: true, children: new Intl.DateTimeFormat("en-US", {
             month: "long",
             year: "numeric"
           }).format(new Date(year, month, 1, 0, 0, 0)) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.113.2",
+  "version": "7.114.1",
   "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": "66091324d6eaf72a82b372186981b081d009f51d",
+  "gitHead": "5a987a21d7e3b87e6da4aaac9930dfde1155134a",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"

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

@@ -10,46 +10,46 @@ declare const v3theme: {
             length: number;
             toString(): string;
             toLocaleString(): string;
-            pop(): 0 | 2 | 1 | undefined;
-            push(...items: (0 | 2 | 1)[]): number;
-            concat(...items: ConcatArray<0 | 2 | 1>[]): (0 | 2 | 1)[];
-            concat(...items: (0 | 2 | 1 | ConcatArray<0 | 2 | 1>)[]): (0 | 2 | 1)[];
+            pop(): 0 | 1 | 2 | undefined;
+            push(...items: (0 | 1 | 2)[]): number;
+            concat(...items: ConcatArray<0 | 1 | 2>[]): (0 | 1 | 2)[];
+            concat(...items: (0 | 1 | 2 | ConcatArray<0 | 1 | 2>)[]): (0 | 1 | 2)[];
             join(separator?: string | undefined): string;
-            reverse(): (0 | 2 | 1)[];
-            shift(): 0 | 2 | 1 | undefined;
-            slice(start?: number | undefined, end?: number | undefined): (0 | 2 | 1)[];
-            sort(compareFn?: ((a: 0 | 2 | 1, b: 0 | 2 | 1) => number) | undefined): (0 | 2 | 1)[];
-            splice(start: number, deleteCount?: number | undefined): (0 | 2 | 1)[];
-            splice(start: number, deleteCount: number, ...items: (0 | 2 | 1)[]): (0 | 2 | 1)[];
-            unshift(...items: (0 | 2 | 1)[]): number;
-            indexOf(searchElement: 0 | 2 | 1, fromIndex?: number | undefined): number;
-            lastIndexOf(searchElement: 0 | 2 | 1, fromIndex?: number | undefined): number;
-            every<S extends 0 | 2 | 1>(predicate: (value: 0 | 2 | 1, index: number, array: (0 | 2 | 1)[]) => value is S, thisArg?: any): this is S[];
-            every(predicate: (value: 0 | 2 | 1, index: number, array: (0 | 2 | 1)[]) => unknown, thisArg?: any): boolean;
-            some(predicate: (value: 0 | 2 | 1, index: number, array: (0 | 2 | 1)[]) => unknown, thisArg?: any): boolean;
-            forEach(callbackfn: (value: 0 | 2 | 1, index: number, array: (0 | 2 | 1)[]) => void, thisArg?: any): void;
-            map<U>(callbackfn: (value: 0 | 2 | 1, index: number, array: (0 | 2 | 1)[]) => U, thisArg?: any): U[];
-            filter<S_1 extends 0 | 2 | 1>(predicate: (value: 0 | 2 | 1, index: number, array: (0 | 2 | 1)[]) => value is S_1, thisArg?: any): S_1[];
-            filter(predicate: (value: 0 | 2 | 1, index: number, array: (0 | 2 | 1)[]) => unknown, thisArg?: any): (0 | 2 | 1)[];
-            reduce(callbackfn: (previousValue: 0 | 2 | 1, currentValue: 0 | 2 | 1, currentIndex: number, array: (0 | 2 | 1)[]) => 0 | 2 | 1): 0 | 2 | 1;
-            reduce(callbackfn: (previousValue: 0 | 2 | 1, currentValue: 0 | 2 | 1, currentIndex: number, array: (0 | 2 | 1)[]) => 0 | 2 | 1, initialValue: 0 | 2 | 1): 0 | 2 | 1;
-            reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: 0 | 2 | 1, currentIndex: number, array: (0 | 2 | 1)[]) => U_1, initialValue: U_1): U_1;
-            reduceRight(callbackfn: (previousValue: 0 | 2 | 1, currentValue: 0 | 2 | 1, currentIndex: number, array: (0 | 2 | 1)[]) => 0 | 2 | 1): 0 | 2 | 1;
-            reduceRight(callbackfn: (previousValue: 0 | 2 | 1, currentValue: 0 | 2 | 1, currentIndex: number, array: (0 | 2 | 1)[]) => 0 | 2 | 1, initialValue: 0 | 2 | 1): 0 | 2 | 1;
-            reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: 0 | 2 | 1, currentIndex: number, array: (0 | 2 | 1)[]) => U_2, initialValue: U_2): U_2;
-            find<S_2 extends 0 | 2 | 1>(predicate: (this: void, value: 0 | 2 | 1, index: number, obj: (0 | 2 | 1)[]) => value is S_2, thisArg?: any): S_2 | undefined;
-            find(predicate: (value: 0 | 2 | 1, index: number, obj: (0 | 2 | 1)[]) => unknown, thisArg?: any): 0 | 2 | 1 | undefined;
-            findIndex(predicate: (value: 0 | 2 | 1, index: number, obj: (0 | 2 | 1)[]) => unknown, thisArg?: any): number;
-            fill(value: 0 | 2 | 1, start?: number | undefined, end?: number | undefined): (0 | 2 | 1)[];
-            copyWithin(target: number, start: number, end?: number | undefined): (0 | 2 | 1)[];
-            entries(): IterableIterator<[number, 0 | 2 | 1]>;
+            reverse(): (0 | 1 | 2)[];
+            shift(): 0 | 1 | 2 | undefined;
+            slice(start?: number | undefined, end?: number | undefined): (0 | 1 | 2)[];
+            sort(compareFn?: ((a: 0 | 1 | 2, b: 0 | 1 | 2) => number) | undefined): (0 | 1 | 2)[];
+            splice(start: number, deleteCount?: number | undefined): (0 | 1 | 2)[];
+            splice(start: number, deleteCount: number, ...items: (0 | 1 | 2)[]): (0 | 1 | 2)[];
+            unshift(...items: (0 | 1 | 2)[]): number;
+            indexOf(searchElement: 0 | 1 | 2, fromIndex?: number | undefined): number;
+            lastIndexOf(searchElement: 0 | 1 | 2, fromIndex?: number | undefined): number;
+            every<S extends 0 | 1 | 2>(predicate: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => value is S, thisArg?: any): this is S[];
+            every(predicate: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => unknown, thisArg?: any): boolean;
+            some(predicate: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => unknown, thisArg?: any): boolean;
+            forEach(callbackfn: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => void, thisArg?: any): void;
+            map<U>(callbackfn: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => U, thisArg?: any): U[];
+            filter<S_1 extends 0 | 1 | 2>(predicate: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => value is S_1, thisArg?: any): S_1[];
+            filter(predicate: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => unknown, thisArg?: any): (0 | 1 | 2)[];
+            reduce(callbackfn: (previousValue: 0 | 1 | 2, currentValue: 0 | 1 | 2, currentIndex: number, array: (0 | 1 | 2)[]) => 0 | 1 | 2): 0 | 1 | 2;
+            reduce(callbackfn: (previousValue: 0 | 1 | 2, currentValue: 0 | 1 | 2, currentIndex: number, array: (0 | 1 | 2)[]) => 0 | 1 | 2, initialValue: 0 | 1 | 2): 0 | 1 | 2;
+            reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: 0 | 1 | 2, currentIndex: number, array: (0 | 1 | 2)[]) => U_1, initialValue: U_1): U_1;
+            reduceRight(callbackfn: (previousValue: 0 | 1 | 2, currentValue: 0 | 1 | 2, currentIndex: number, array: (0 | 1 | 2)[]) => 0 | 1 | 2): 0 | 1 | 2;
+            reduceRight(callbackfn: (previousValue: 0 | 1 | 2, currentValue: 0 | 1 | 2, currentIndex: number, array: (0 | 1 | 2)[]) => 0 | 1 | 2, initialValue: 0 | 1 | 2): 0 | 1 | 2;
+            reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: 0 | 1 | 2, currentIndex: number, array: (0 | 1 | 2)[]) => U_2, initialValue: U_2): U_2;
+            find<S_2 extends 0 | 1 | 2>(predicate: (this: void, value: 0 | 1 | 2, index: number, obj: (0 | 1 | 2)[]) => value is S_2, thisArg?: any): S_2 | undefined;
+            find(predicate: (value: 0 | 1 | 2, index: number, obj: (0 | 1 | 2)[]) => unknown, thisArg?: any): 0 | 1 | 2 | undefined;
+            findIndex(predicate: (value: 0 | 1 | 2, index: number, obj: (0 | 1 | 2)[]) => unknown, thisArg?: any): number;
+            fill(value: 0 | 1 | 2, start?: number | undefined, end?: number | undefined): (0 | 1 | 2)[];
+            copyWithin(target: number, start: number, end?: number | undefined): (0 | 1 | 2)[];
+            entries(): IterableIterator<[number, 0 | 1 | 2]>;
             keys(): IterableIterator<number>;
-            values(): IterableIterator<0 | 2 | 1>;
-            includes(searchElement: 0 | 2 | 1, fromIndex?: number | undefined): boolean;
-            flatMap<U_3, This = undefined>(callback: (this: This, value: 0 | 2 | 1, index: number, array: (0 | 2 | 1)[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
+            values(): IterableIterator<0 | 1 | 2>;
+            includes(searchElement: 0 | 1 | 2, fromIndex?: number | undefined): boolean;
+            flatMap<U_3, This = undefined>(callback: (this: This, value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
             flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
-            at(index: number): 0 | 2 | 1 | undefined;
-            [Symbol.iterator](): IterableIterator<0 | 2 | 1>;
+            at(index: number): 0 | 1 | 2 | undefined;
+            [Symbol.iterator](): IterableIterator<0 | 1 | 2>;
             [Symbol.unscopables](): {
                 copyWithin: boolean;
                 entries: boolean;