@gympass/yoga 7.129.2 → 7.130.0

package/cjs/ActionRequirement/web/ActionRequirement.js

@@ -98,7 +98,8 @@ function ActionRequirement(props) {
     checkable,
     illustration,
     list,
-    titleAsTextDisplay = false
+    titleAsTextDisplay = false,
+    ariaLevelTitle = 1
   } = props;
   let primaryButton;
   let secondaryButton;
@@ -114,7 +115,7 @@ function ActionRequirement(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledActionRequirement, __spreadProps(__spreadValues({}, props), { children: [
     illustration && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxIllustration, { "aria-hidden": true, children: illustration }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Content, { children: [
-      titleAsTextDisplay ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Display2, { as: "h1", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionRequirementStyles.Title, { children: title }),
+      titleAsTextDisplay ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Display2, { as: "h1", "aria-level": ariaLevelTitle, children: title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionRequirementStyles.Title, { "aria-level": ariaLevelTitle, children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Body1, { mt: "small", color: "deep", children: description }),
       list && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { mt: "large", children: list }),
       checkable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { mt: "xxlarge", children: checkable }),
@@ -132,6 +133,7 @@ ActionRequirement.propTypes = {
   checkable: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]),
   illustration: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]),
   list: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]),
-  titleAsTextDisplay: import_prop_types.bool
+  titleAsTextDisplay: import_prop_types.bool,
+  ariaLevelTitle: import_prop_types.number
 };
 var ActionRequirement_default = ActionRequirement;

package/cjs/ActionRequirement/web/ActionRequirement.test.js

@@ -76,4 +76,18 @@ describe("<ActionRequirement />", () => {
     );
     expect(container).toMatchSnapshot();
   });
+  it("should match snapshot with aria-level 2", () => {
+    const { container } = (0, import_react2.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ActionRequirement.default,
+        {
+          title: "title",
+          description: "description",
+          titleAsTextDisplay: true,
+          ariaLevelTitle: 2
+        }
+      ) })
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/cjs/Datepicker/web/Calendar.js

@@ -77,6 +77,9 @@ const Month = (0, import_styled_components.default)(import__.Text.Body2)`
 }) => `
     color: ${v3theme ? colors.primary : colors.text.primary};
     align-self: center;
+    &:first-letter {
+      text-transform: capitalize;
+    };
   `}
 `;
 const getDayFieldColor = (selected, disabled, colors, aux) => {
@@ -191,7 +194,8 @@ function Calendar({
   disablePastDates = false,
   disableFutureDates = false,
   disablePastFrom,
-  disableFutureFrom
+  disableFutureFrom,
+  locale
 }) {
   const [month, setMonth] = (0, import_react.useState)((/* @__PURE__ */ new Date()).getUTCMonth());
   const [year, setYear] = (0, import_react.useState)((/* @__PURE__ */ new Date()).getUTCFullYear());
@@ -318,6 +322,16 @@ function Calendar({
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, { children: getLastWeek() })
     ] });
   };
+  const getLocale = () => {
+    return Intl.DateTimeFormat.supportedLocalesOf(locale).length > 0 ? locale : "en-US";
+  };
+  const weekDays = Array.from(
+    { length: 7 },
+    (__, i) => new Intl.DateTimeFormat(getLocale(), {
+      weekday: "short",
+      timeZone: "UTC"
+    }).format(new Date(Date.UTC(2024, 0, 7 + i)))
+  );
   const prior = () => {
     let local = month - 1;
     if (local < 0) {
@@ -356,7 +370,7 @@ function Calendar({
               "data-testid": "previous-month-arrow"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Month, { bold: true, children: new Intl.DateTimeFormat("en-US", {
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Month, { bold: true, children: new Intl.DateTimeFormat(getLocale(), {
             month: "long",
             year: "numeric"
           }).format(new Date(year, month, 1, 0, 0, 0)) }),
@@ -375,15 +389,7 @@ function Calendar({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DaysWrapper, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Day, { children: "S" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Day, { children: "M" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Day, { children: "T" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Day, { children: "W" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Day, { children: "T" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Day, { children: "F" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Day, { children: "S" })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DaysWrapper, { children: weekDays.map((weekDay) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Day, { children: weekDay.toLocaleUpperCase().charAt(0) }, `${weekDay}`)) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Box, { children: getDays() })
   ] });
 }
@@ -396,6 +402,7 @@ Calendar.propTypes = {
   disablePastDates: import_prop_types.bool,
   disableFutureDates: import_prop_types.bool,
   disablePastFrom: (0, import_prop_types.instanceOf)(Date),
-  disableFutureFrom: (0, import_prop_types.instanceOf)(Date)
+  disableFutureFrom: (0, import_prop_types.instanceOf)(Date),
+  locale: import_prop_types.string
 };
 var Calendar_default = Calendar;

package/cjs/Datepicker/web/Datepicker.js

@@ -66,7 +66,6 @@ var import_react = __toESM(require("react"));
 var import_yoga_icons = require("@gympass/yoga-icons");
 var import_styled_components = __toESM(require("styled-components"));
 var import_prop_types = require("prop-types");
-var import_date_fns = require("date-fns");
 var import__ = require("../..");
 var import_Theme = require("../../Theme");
 var import_Calendar = __toESM(require("./Calendar"));
@@ -230,7 +229,8 @@ function Datepicker(_c) {
     disableFutureFrom,
     error,
     onOpen,
-    displayEndDateOnly = false
+    displayEndDateOnly = false,
+    locale
   } = _d, props = __objRest(_d, [
     "fullWidth",
     "type",
@@ -247,7 +247,8 @@ function Datepicker(_c) {
     "disableFutureFrom",
     "error",
     "onOpen",
-    "displayEndDateOnly"
+    "displayEndDateOnly",
+    "locale"
   ]);
   const [open, setOpen] = (0, import_react.useState)();
   const [startDateLocal, setStartDateLocal] = (0, import_react.useState)(startDate);
@@ -318,12 +319,21 @@ function Datepicker(_c) {
     if (!start && !end || displayEndDateOnly && !end) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputPlaceholder, { disabled, children: placeholder != null ? placeholder : `Select Date` });
     }
-    const dateFormat = "MMM d, yyyy";
+    const formattedDate = (date) => {
+      let month = new Intl.DateTimeFormat(locale, {
+        month: "short",
+        timeZone: "UTC"
+      }).format(date);
+      month = month.charAt(0).toUpperCase() + month.slice(1, 3);
+      const day = date.getUTCDate();
+      const year = date.getUTCFullYear();
+      return `${month} ${day}, ${year}`;
+    };
     if (displayEndDateOnly)
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, { disabled, children: end && (0, import_date_fns.format)(toUTC(end), dateFormat) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, { disabled, children: end && formattedDate(end) });
     return start && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Input, { disabled, children: [
-      (0, import_date_fns.format)(toUTC(start), dateFormat),
-      end && ` - ${(0, import_date_fns.format)(toUTC(end), dateFormat)}`
+      formattedDate(start),
+      end && ` - ${formattedDate(end)}`
     ] });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, __spreadProps(__spreadValues({ fullWidth, tabIndex: "0" }, props), { children: [
@@ -366,7 +376,8 @@ function Datepicker(_c) {
         disablePastDates,
         disableFutureDates,
         disablePastFrom,
-        disableFutureFrom
+        disableFutureFrom,
+        locale
       }
     ) })
   ] }));
@@ -387,7 +398,8 @@ Datepicker.propTypes = {
   disableFutureFrom: (0, import_prop_types.instanceOf)(Date),
   error: import_prop_types.string,
   onOpen: import_prop_types.func,
-  displayEndDateOnly: import_prop_types.bool
+  displayEndDateOnly: import_prop_types.bool,
+  locale: import_prop_types.string
 };
 var Datepicker_default = Datepicker;
 // Annotate the CommonJS export names for ESM import in node:

package/cjs/Datepicker/web/Datepicker.test.js

@@ -29,6 +29,10 @@ var import__ = require("../..");
 var import_Datepicker = require("./Datepicker");
 describe("<Datepicker />", () => {
   const testDate = new Date(2022, 7, 3, 14, 0, 0);
+  let originalDateTimeFormat;
+  beforeAll(() => {
+    originalDateTimeFormat = Intl.DateTimeFormat;
+  });
   describe("Snapshots", () => {
     it("should match snapshot when v3Theme is settled", () => {
       const { container } = (0, import_react2.render)(
@@ -249,4 +253,67 @@ describe("<Datepicker />", () => {
       expect(import_react2.screen.getByText("This is an error")).toBeVisible();
     });
   });
+  describe("Internationalization", () => {
+    let originalNavigator;
+    beforeEach(() => {
+      originalNavigator = global.navigator;
+    });
+    afterEach(() => {
+      global.Intl.DateTimeFormat = originalDateTimeFormat;
+      Object.defineProperty(global, "navigator", {
+        value: originalNavigator,
+        writable: true
+      });
+    });
+    it("should display calendar in English when locale is not supported", () => {
+      (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Datepicker, { type: "single", locale: "xx-XX" }) })
+      );
+      import_react2.fireEvent.click(import_react2.screen.getByRole("button"));
+      const currentDate = /* @__PURE__ */ new Date();
+      const currentMonth = new Intl.DateTimeFormat("en-US", {
+        month: "long"
+      }).format(currentDate);
+      expect(
+        import_react2.screen.getByText(new RegExp(currentMonth, "i"))
+      ).toBeInTheDocument();
+    });
+    it("should display calendar in Portuguese when browser locale is pt-BR", () => {
+      (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Datepicker, { type: "single", locale: "pt-BR" }) })
+      );
+      import_react2.fireEvent.click(import_react2.screen.getByRole("button"));
+      const currentDate = /* @__PURE__ */ new Date();
+      const months = [
+        "janeiro",
+        "fevereiro",
+        "mar\xE7o",
+        "abril",
+        "maio",
+        "junho",
+        "julho",
+        "agosto",
+        "setembro",
+        "outubro",
+        "novembro",
+        "dezembro"
+      ];
+      const currentMonth = months[currentDate.getMonth()];
+      expect(
+        import_react2.screen.getByText(new RegExp(currentMonth, "i"))
+      ).toBeInTheDocument();
+    });
+    it("should display only the first letter of each weekday in uppercase", () => {
+      (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Datepicker, { type: "single" }) })
+      );
+      import_react2.fireEvent.click(import_react2.screen.getByRole("button"));
+      const weekdayLetters = ["S", "M", "T", "W", "T", "F", "S"];
+      weekdayLetters.forEach((letter) => {
+        expect(import_react2.screen.getAllByText(letter).length).toBeGreaterThan(0);
+      });
+      expect(import_react2.screen.queryByText("sun")).not.toBeInTheDocument();
+      expect(import_react2.screen.queryByText("mon")).not.toBeInTheDocument();
+    });
+  });
 });

package/esm/ActionRequirement/web/ActionRequirement.js

@@ -19,7 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
-import { arrayOf, bool, node, oneOfType, string } from "prop-types";
+import { arrayOf, bool, node, oneOfType, string, number } from "prop-types";
 import styled from "styled-components";
 import { media } from "@gympass/yoga-helpers";
 import {
@@ -72,7 +72,8 @@ function ActionRequirement(props) {
     checkable,
     illustration,
     list,
-    titleAsTextDisplay = false
+    titleAsTextDisplay = false,
+    ariaLevelTitle = 1
   } = props;
   let primaryButton;
   let secondaryButton;
@@ -88,7 +89,7 @@ function ActionRequirement(props) {
   return /* @__PURE__ */ jsxs(StyledActionRequirement, __spreadProps(__spreadValues({}, props), { children: [
     illustration && /* @__PURE__ */ jsx(BoxIllustration, { "aria-hidden": true, children: illustration }),
     /* @__PURE__ */ jsxs(Content, { children: [
-      titleAsTextDisplay ? /* @__PURE__ */ jsx(Text.Display2, { as: "h1", children: title }) : /* @__PURE__ */ jsx(Title, { children: title }),
+      titleAsTextDisplay ? /* @__PURE__ */ jsx(Text.Display2, { as: "h1", "aria-level": ariaLevelTitle, children: title }) : /* @__PURE__ */ jsx(Title, { "aria-level": ariaLevelTitle, children: title }),
       /* @__PURE__ */ jsx(Text.Body1, { mt: "small", color: "deep", children: description }),
       list && /* @__PURE__ */ jsx(Box, { mt: "large", children: list }),
       checkable && /* @__PURE__ */ jsx(Box, { mt: "xxlarge", children: checkable }),
@@ -106,7 +107,8 @@ ActionRequirement.propTypes = {
   checkable: oneOfType([arrayOf(node), node]),
   illustration: oneOfType([arrayOf(node), node]),
   list: oneOfType([arrayOf(node), node]),
-  titleAsTextDisplay: bool
+  titleAsTextDisplay: bool,
+  ariaLevelTitle: number
 };
 var ActionRequirement_default = ActionRequirement;
 export {

package/esm/ActionRequirement/web/ActionRequirement.test.js

@@ -53,4 +53,18 @@ describe("<ActionRequirement />", () => {
     );
     expect(container).toMatchSnapshot();
   });
+  it("should match snapshot with aria-level 2", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        ActionRequirement,
+        {
+          title: "title",
+          description: "description",
+          titleAsTextDisplay: true,
+          ariaLevelTitle: 2
+        }
+      ) })
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/esm/Datepicker/web/Calendar.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { ChevronLeft, ChevronRight } from "@gympass/yoga-icons";
-import { oneOf, func, instanceOf, bool } from "prop-types";
+import { oneOf, func, instanceOf, bool, string } from "prop-types";
 import _ from "lodash";
 import { Icon, Text, Box } from "../..";
 const CalendarWrapper = styled.div`
@@ -44,6 +44,9 @@ const Month = styled(Text.Body2)`
 }) => `
     color: ${v3theme ? colors.primary : colors.text.primary};
     align-self: center;
+    &:first-letter {
+      text-transform: capitalize;
+    };
   `}
 `;
 const getDayFieldColor = (selected, disabled, colors, aux) => {
@@ -158,7 +161,8 @@ function Calendar({
   disablePastDates = false,
   disableFutureDates = false,
   disablePastFrom,
-  disableFutureFrom
+  disableFutureFrom,
+  locale
 }) {
   const [month, setMonth] = useState((/* @__PURE__ */ new Date()).getUTCMonth());
   const [year, setYear] = useState((/* @__PURE__ */ new Date()).getUTCFullYear());
@@ -285,6 +289,16 @@ function Calendar({
       /* @__PURE__ */ jsx(Row, { children: getLastWeek() })
     ] });
   };
+  const getLocale = () => {
+    return Intl.DateTimeFormat.supportedLocalesOf(locale).length > 0 ? locale : "en-US";
+  };
+  const weekDays = Array.from(
+    { length: 7 },
+    (__, i) => new Intl.DateTimeFormat(getLocale(), {
+      weekday: "short",
+      timeZone: "UTC"
+    }).format(new Date(Date.UTC(2024, 0, 7 + i)))
+  );
   const prior = () => {
     let local = month - 1;
     if (local < 0) {
@@ -323,7 +337,7 @@ function Calendar({
               "data-testid": "previous-month-arrow"
             }
           ),
-          /* @__PURE__ */ jsx(Month, { bold: true, children: new Intl.DateTimeFormat("en-US", {
+          /* @__PURE__ */ jsx(Month, { bold: true, children: new Intl.DateTimeFormat(getLocale(), {
             month: "long",
             year: "numeric"
           }).format(new Date(year, month, 1, 0, 0, 0)) }),
@@ -342,15 +356,7 @@ function Calendar({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(DaysWrapper, { children: [
-      /* @__PURE__ */ jsx(Day, { children: "S" }),
-      /* @__PURE__ */ jsx(Day, { children: "M" }),
-      /* @__PURE__ */ jsx(Day, { children: "T" }),
-      /* @__PURE__ */ jsx(Day, { children: "W" }),
-      /* @__PURE__ */ jsx(Day, { children: "T" }),
-      /* @__PURE__ */ jsx(Day, { children: "F" }),
-      /* @__PURE__ */ jsx(Day, { children: "S" })
-    ] }),
+    /* @__PURE__ */ jsx(DaysWrapper, { children: weekDays.map((weekDay) => /* @__PURE__ */ jsx(Day, { children: weekDay.toLocaleUpperCase().charAt(0) }, `${weekDay}`)) }),
     /* @__PURE__ */ jsx(Box, { children: getDays() })
   ] });
 }
@@ -363,7 +369,8 @@ Calendar.propTypes = {
   disablePastDates: bool,
   disableFutureDates: bool,
   disablePastFrom: instanceOf(Date),
-  disableFutureFrom: instanceOf(Date)
+  disableFutureFrom: instanceOf(Date),
+  locale: string
 };
 var Calendar_default = Calendar;
 export {

package/esm/Datepicker/web/Datepicker.js

@@ -34,7 +34,6 @@ import React, { useEffect, useRef, useState, useCallback } from "react";
 import { Booking, BookingFilled } from "@gympass/yoga-icons";
 import styled, { css } from "styled-components";
 import { bool, oneOf, func, instanceOf, string } from "prop-types";
-import { format } from "date-fns";
 import { Text } from "../..";
 import { theme } from "../../Theme";
 import Calendar from "./Calendar";
@@ -198,7 +197,8 @@ function Datepicker(_c) {
     disableFutureFrom,
     error,
     onOpen,
-    displayEndDateOnly = false
+    displayEndDateOnly = false,
+    locale
   } = _d, props = __objRest(_d, [
     "fullWidth",
     "type",
@@ -215,7 +215,8 @@ function Datepicker(_c) {
     "disableFutureFrom",
     "error",
     "onOpen",
-    "displayEndDateOnly"
+    "displayEndDateOnly",
+    "locale"
   ]);
   const [open, setOpen] = useState();
   const [startDateLocal, setStartDateLocal] = useState(startDate);
@@ -286,12 +287,21 @@ function Datepicker(_c) {
     if (!start && !end || displayEndDateOnly && !end) {
       return /* @__PURE__ */ jsx(InputPlaceholder, { disabled, children: placeholder != null ? placeholder : `Select Date` });
     }
-    const dateFormat = "MMM d, yyyy";
+    const formattedDate = (date) => {
+      let month = new Intl.DateTimeFormat(locale, {
+        month: "short",
+        timeZone: "UTC"
+      }).format(date);
+      month = month.charAt(0).toUpperCase() + month.slice(1, 3);
+      const day = date.getUTCDate();
+      const year = date.getUTCFullYear();
+      return `${month} ${day}, ${year}`;
+    };
     if (displayEndDateOnly)
-      return /* @__PURE__ */ jsx(Input, { disabled, children: end && format(toUTC(end), dateFormat) });
+      return /* @__PURE__ */ jsx(Input, { disabled, children: end && formattedDate(end) });
     return start && /* @__PURE__ */ jsxs(Input, { disabled, children: [
-      format(toUTC(start), dateFormat),
-      end && ` - ${format(toUTC(end), dateFormat)}`
+      formattedDate(start),
+      end && ` - ${formattedDate(end)}`
     ] });
   };
   return /* @__PURE__ */ jsxs(Wrapper, __spreadProps(__spreadValues({ fullWidth, tabIndex: "0" }, props), { children: [
@@ -334,7 +344,8 @@ function Datepicker(_c) {
         disablePastDates,
         disableFutureDates,
         disablePastFrom,
-        disableFutureFrom
+        disableFutureFrom,
+        locale
       }
     ) })
   ] }));
@@ -355,7 +366,8 @@ Datepicker.propTypes = {
   disableFutureFrom: instanceOf(Date),
   error: string,
   onOpen: func,
-  displayEndDateOnly: bool
+  displayEndDateOnly: bool,
+  locale: string
 };
 var Datepicker_default = Datepicker;
 export {

package/esm/Datepicker/web/Datepicker.test.js

@@ -6,6 +6,10 @@ import { ThemeProvider, Datepicker, v3theme } from "../..";
 import { toUTC } from "./Datepicker";
 describe("<Datepicker />", () => {
   const testDate = new Date(2022, 7, 3, 14, 0, 0);
+  let originalDateTimeFormat;
+  beforeAll(() => {
+    originalDateTimeFormat = Intl.DateTimeFormat;
+  });
   describe("Snapshots", () => {
     it("should match snapshot when v3Theme is settled", () => {
       const { container } = render(
@@ -226,4 +230,67 @@ describe("<Datepicker />", () => {
       expect(screen.getByText("This is an error")).toBeVisible();
     });
   });
+  describe("Internationalization", () => {
+    let originalNavigator;
+    beforeEach(() => {
+      originalNavigator = global.navigator;
+    });
+    afterEach(() => {
+      global.Intl.DateTimeFormat = originalDateTimeFormat;
+      Object.defineProperty(global, "navigator", {
+        value: originalNavigator,
+        writable: true
+      });
+    });
+    it("should display calendar in English when locale is not supported", () => {
+      render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Datepicker, { type: "single", locale: "xx-XX" }) })
+      );
+      fireEvent.click(screen.getByRole("button"));
+      const currentDate = /* @__PURE__ */ new Date();
+      const currentMonth = new Intl.DateTimeFormat("en-US", {
+        month: "long"
+      }).format(currentDate);
+      expect(
+        screen.getByText(new RegExp(currentMonth, "i"))
+      ).toBeInTheDocument();
+    });
+    it("should display calendar in Portuguese when browser locale is pt-BR", () => {
+      render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Datepicker, { type: "single", locale: "pt-BR" }) })
+      );
+      fireEvent.click(screen.getByRole("button"));
+      const currentDate = /* @__PURE__ */ new Date();
+      const months = [
+        "janeiro",
+        "fevereiro",
+        "mar\xE7o",
+        "abril",
+        "maio",
+        "junho",
+        "julho",
+        "agosto",
+        "setembro",
+        "outubro",
+        "novembro",
+        "dezembro"
+      ];
+      const currentMonth = months[currentDate.getMonth()];
+      expect(
+        screen.getByText(new RegExp(currentMonth, "i"))
+      ).toBeInTheDocument();
+    });
+    it("should display only the first letter of each weekday in uppercase", () => {
+      render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Datepicker, { type: "single" }) })
+      );
+      fireEvent.click(screen.getByRole("button"));
+      const weekdayLetters = ["S", "M", "T", "W", "T", "F", "S"];
+      weekdayLetters.forEach((letter) => {
+        expect(screen.getAllByText(letter).length).toBeGreaterThan(0);
+      });
+      expect(screen.queryByText("sun")).not.toBeInTheDocument();
+      expect(screen.queryByText("mon")).not.toBeInTheDocument();
+    });
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.129.2",
+  "version": "7.130.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -45,7 +45,7 @@
     "react-phone-input-2": "^2.15.1"
   },
   "devDependencies": {
-    "@gympass/yoga-icons": "^1.28.0",
+    "@gympass/yoga-icons": "^1.29.0",
     "@react-native-community/eslint-config": "^3.0.1",
     "@types/styled-components": "^5.1.34",
     "babel-plugin-inline-react-svg": "^1.1.1",
@@ -59,7 +59,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "80d9a26eac0590d41b55997aff7d267fb259e499",
+  "gitHead": "181e38376e72162bd97ae292a93c94caadf5cef2",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"

package/typings/index.d.ts

@@ -342,7 +342,7 @@ declare namespace Feedback {
     }
 }
 
-declare function Datepicker({ fullWidth, type, placeholder, startDate, endDate, onSelectSingle, disabled, onSelectRange, customOnSelectRange, disablePastDates, disableFutureDates, disablePastFrom, disableFutureFrom, error, onOpen, displayEndDateOnly, ...props }: {
+declare function Datepicker({ fullWidth, type, placeholder, startDate, endDate, onSelectSingle, disabled, onSelectRange, customOnSelectRange, disablePastDates, disableFutureDates, disablePastFrom, disableFutureFrom, error, onOpen, displayEndDateOnly, locale, ...props }: {
     [x: string]: any;
     fullWidth?: boolean | undefined;
     type: any;
@@ -360,6 +360,7 @@ declare function Datepicker({ fullWidth, type, placeholder, startDate, endDate,
     error: any;
     onOpen: any;
     displayEndDateOnly?: boolean | undefined;
+    locale: any;
 }): JSX.Element;
 declare namespace Datepicker {
     namespace propTypes {
@@ -379,6 +380,7 @@ declare namespace Datepicker {
         export { string as error };
         export { func as onOpen };
         export { bool as displayEndDateOnly };
+        export { string as locale };
     }
 }
 
@@ -408,6 +410,7 @@ declare namespace ActionRequirement {
         export const illustration: prop_types.Requireable<string | number | boolean | prop_types.ReactElementLike | prop_types.ReactNodeArray>;
         export const list: prop_types.Requireable<string | number | boolean | prop_types.ReactElementLike | prop_types.ReactNodeArray>;
         export { bool as titleAsTextDisplay };
+        export { number as ariaLevelTitle };
     }
 }