@gympass/yoga 7.129.3 → 7.131.0

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/cjs/Input/web/Input.js

@@ -157,7 +157,8 @@ const Input = import_react.default.forwardRef(
       a11yId,
       closeAriaLabel = "Clear",
       includeAriaAttributes = true,
-      leftElement
+      leftElement,
+      clearButtonAriaLabel = "Clear"
     } = _b, props = __objRest(_b, [
       "cleanable",
       "children",
@@ -178,7 +179,8 @@ const Input = import_react.default.forwardRef(
       "a11yId",
       "closeAriaLabel",
       "includeAriaAttributes",
-      "leftElement"
+      "leftElement",
+      "clearButtonAriaLabel"
     ]);
     const inputRef = ref || (0, import_react.useRef)(null);
     const cleanField = (e) => {
@@ -257,6 +259,8 @@ const Input = import_react.default.forwardRef(
                 height: 20,
                 role: "button",
                 hasIconRight: !!rightIcon,
+                "aria-label": clearButtonAriaLabel,
+                "data-testid": "clearButtonAriaLabel",
                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Close, { "aria-label": closeAriaLabel })
               }
             ),
@@ -321,6 +325,8 @@ Input.propTypes = {
   /** this prop will be used in the aria-label of the clear input button. */
   closeAriaLabel: import_prop_types.string,
   /** element on the left */
-  leftElement: import_prop_types.node
+  leftElement: import_prop_types.node,
+  /** aria label for close button */
+  clearButtonAriaLabel: import_prop_types.string
 };
 var Input_default = Input;

package/cjs/Input/web/Input.test.js

@@ -187,5 +187,14 @@ describe("<Input />", () => {
       expect(inputElement).toBeInTheDocument();
       expect(inputElement).toHaveAttribute("aria-label", value);
     });
+    it("should have close aria label", () => {
+      const value = "test label clear";
+      const { getByTestId } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input, { label: "abc123", value: "foo", clearButtonAriaLabel: value }) })
+      );
+      const inputElement = getByTestId("clearButtonAriaLabel");
+      expect(inputElement).toBeInTheDocument();
+      expect(inputElement).toHaveAttribute("aria-label", value);
+    });
   });
 });

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/esm/Input/web/Input.js

@@ -135,7 +135,8 @@ const Input = React.forwardRef(
       a11yId,
       closeAriaLabel = "Clear",
       includeAriaAttributes = true,
-      leftElement
+      leftElement,
+      clearButtonAriaLabel = "Clear"
     } = _b, props = __objRest(_b, [
       "cleanable",
       "children",
@@ -156,7 +157,8 @@ const Input = React.forwardRef(
       "a11yId",
       "closeAriaLabel",
       "includeAriaAttributes",
-      "leftElement"
+      "leftElement",
+      "clearButtonAriaLabel"
     ]);
     const inputRef = ref || useRef(null);
     const cleanField = (e) => {
@@ -235,6 +237,8 @@ const Input = React.forwardRef(
                 height: 20,
                 role: "button",
                 hasIconRight: !!rightIcon,
+                "aria-label": clearButtonAriaLabel,
+                "data-testid": "clearButtonAriaLabel",
                 children: /* @__PURE__ */ jsx(Close, { "aria-label": closeAriaLabel })
               }
             ),
@@ -299,7 +303,9 @@ Input.propTypes = {
   /** this prop will be used in the aria-label of the clear input button. */
   closeAriaLabel: string,
   /** element on the left */
-  leftElement: node
+  leftElement: node,
+  /** aria label for close button */
+  clearButtonAriaLabel: string
 };
 var Input_default = Input;
 export {

package/esm/Input/web/Input.test.js

@@ -164,5 +164,14 @@ describe("<Input />", () => {
       expect(inputElement).toBeInTheDocument();
       expect(inputElement).toHaveAttribute("aria-label", value);
     });
+    it("should have close aria label", () => {
+      const value = "test label clear";
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { label: "abc123", value: "foo", clearButtonAriaLabel: value }) })
+      );
+      const inputElement = getByTestId("clearButtonAriaLabel");
+      expect(inputElement).toBeInTheDocument();
+      expect(inputElement).toHaveAttribute("aria-label", value);
+    });
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.129.3",
+  "version": "7.131.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": "018c3084ee875bada3f2ed90968b5d250cb5ae07",
+  "gitHead": "26df123dcfe659e0e80491e56d38db3ce457296c",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"

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

@@ -1638,46 +1638,46 @@ declare const composeTheme: (tokens: typeof yogaTokens, customTheming?: {}) => {
         length: number;
         toString(): string;
         toLocaleString(): string;
-        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)[];
+        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)[];
         join(separator?: string | undefined): string;
-        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]>;
+        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]>;
         keys(): IterableIterator<number>;
-        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[];
+        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[];
         flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
-        at(index: number): 0 | 1 | 2 | undefined;
-        [Symbol.iterator](): IterableIterator<0 | 1 | 2>;
+        at(index: number): 0 | 2 | 1 | undefined;
+        [Symbol.iterator](): IterableIterator<0 | 2 | 1>;
         [Symbol.unscopables](): {
             copyWithin: boolean;
             entries: boolean;

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

@@ -9,46 +9,46 @@ declare const v3theme: {
             length: number;
             toString(): string;
             toLocaleString(): string;
-            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)[];
+            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)[];
             join(separator?: string | undefined): string;
-            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]>;
+            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]>;
             keys(): IterableIterator<number>;
-            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[];
+            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[];
             flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
-            at(index: number): 0 | 1 | 2 | undefined;
-            [Symbol.iterator](): IterableIterator<0 | 1 | 2>;
+            at(index: number): 0 | 2 | 1 | undefined;
+            [Symbol.iterator](): IterableIterator<0 | 2 | 1>;
             [Symbol.unscopables](): {
                 copyWithin: boolean;
                 entries: boolean;

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 };
     }
 }