From ac5d031d7cf985a9edebfa533d62712f7b3ea14d Mon Sep 17 00:00:00 2001
From: kirtesh-xola <kirtesh@xola.com>
Date: Thu, 29 Feb 2024 15:33:20 +0530
Subject: [PATCH 01/21] XS-25 feat(purchase-guests): adds
 `CircleCheckFilledIcon` and `WarningFilledIcon`

---
 src/icons/index.js                      |  2 ++
 src/icons/src/CircleCheckFilledIcon.jsx | 24 ++++++++++++++++++++++++
 src/icons/src/WarningFilledIcon.jsx     | 25 +++++++++++++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 src/icons/src/CircleCheckFilledIcon.jsx
 create mode 100644 src/icons/src/WarningFilledIcon.jsx

diff --git a/src/icons/index.js b/src/icons/index.js
index 3b102377e..a8b6f36b2 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -42,6 +42,7 @@ export { ChevronRightIcon } from "./src/ChevronRightIcon";
 export { ChevronUpIcon } from "./src/ChevronUpIcon";
 export { ChipIcon } from "./src/ChipIcon";
 export { CircleCheckIcon } from "./src/CircleCheckIcon";
+export { CircleCheckFilledIcon } from "./src/CircleCheckFilledIcon";
 export { CircleCrossIcon } from "./src/CircleCrossIcon";
 export { CircleCrossImage } from "./src/images/CircleCrossImage";
 export { CircleCrownIcon } from "./src/CircleCrownIcon";
@@ -202,6 +203,7 @@ export { VoucherIcon } from "./src/VoucherIcon";
 export { WaitlistIcon } from "./src/WaitlistIcon";
 export { WarningDiamondIcon } from "./src/WarningDiamondIcon";
 export { WarningIcon } from "./src/WarningIcon";
+export { WarningFilledIcon } from "./src/WarningFilledIcon";
 export { WarningTriangleIcon } from "./src/WarningTriangleIcon";
 export { WeightIcon } from "./src/WeightIcon";
 export { WifiIcon } from "./src/WifiIcon";
diff --git a/src/icons/src/CircleCheckFilledIcon.jsx b/src/icons/src/CircleCheckFilledIcon.jsx
new file mode 100644
index 000000000..420d157b8
--- /dev/null
+++ b/src/icons/src/CircleCheckFilledIcon.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { createIcon } from "./helpers/icon";
+
+export const CircleCheckFilledIcon = createIcon((props) => {
+    return (
+        <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M9.49929 17.0859C13.6888 17.0859 17.085 13.6897 17.085 9.5002C17.085 5.31073 13.6888 1.91449 9.49929 1.91449C5.30981 1.91449 1.91357 5.31073 1.91357 9.5002C1.91357 13.6897 5.30981 17.0859 9.49929 17.0859Z"
+                fill="currentColor"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M13.3569 6.92865L8.05329 12.0715L5.64258 9.73384"
+                stroke="white"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+});
+
+CircleCheckFilledIcon.tags = ["tick", "correct", "filled"];
diff --git a/src/icons/src/WarningFilledIcon.jsx b/src/icons/src/WarningFilledIcon.jsx
new file mode 100644
index 000000000..198b3b49c
--- /dev/null
+++ b/src/icons/src/WarningFilledIcon.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { createIcon } from "./helpers/icon";
+
+export const WarningFilledIcon = createIcon((props) => {
+    return (
+        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M16.3019 9.3168C16.3086 13.4083 13.0274 16.7498 8.92917 16.8034H8.92247C4.91131 16.857 1.61667 13.6628 1.5564 9.65162C1.54971 9.61814 1.54971 9.58466 1.54971 9.55787L1.54301 9.55117C1.52962 5.45229 4.81087 2.11077 8.90908 2.0505V2.04381C12.9135 1.98354 16.2082 5.17774 16.2685 9.1889C16.2685 9.21568 16.2685 9.24917 16.2685 9.27595L16.3019 9.3168Z"
+                fill="currentColor"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path d="M8.93555 10.1429V6.10181" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
+            <path
+                d="M8.93011 12.1254V12.1247C8.83636 12.1247 8.7627 12.1984 8.7627 12.2854C8.7627 12.3725 8.83636 12.4462 8.93011 12.4462V12.4455C9.01716 12.4388 9.09082 12.3651 9.09082 12.2714C9.08412 12.2647 9.08412 12.2647 9.08412 12.2647L9.07743 12.258C9.07073 12.1642 8.99707 12.0906 8.91002 12.0906H8.90332"
+                stroke="white"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+});
+
+WarningFilledIcon.tags = ["exclamation", "filled"];

From 4f9545179b4481ab92822eb16b692931e9f30ae3 Mon Sep 17 00:00:00 2001
From: kirtesh-xola <kirtesh@xola.com>
Date: Wed, 3 Apr 2024 12:28:54 +0530
Subject: [PATCH 02/21] feat: adds localization support for DatePicker

---
 .../DatePicker/DatePicker.helpers.ts          | 35 +++++++++++++++++++
 src/components/DatePicker/DatePicker.jsx      |  5 +--
 .../DatePicker/LocalizedDayPicker.tsx         | 21 +++++++++++
 src/components/DatePicker/RangeDatePicker.jsx |  6 ++--
 src/components/Provider.jsx                   |  8 +++--
 5 files changed, 68 insertions(+), 7 deletions(-)
 create mode 100644 src/components/DatePicker/DatePicker.helpers.ts
 create mode 100644 src/components/DatePicker/LocalizedDayPicker.tsx

diff --git a/src/components/DatePicker/DatePicker.helpers.ts b/src/components/DatePicker/DatePicker.helpers.ts
new file mode 100644
index 000000000..c2354a1d2
--- /dev/null
+++ b/src/components/DatePicker/DatePicker.helpers.ts
@@ -0,0 +1,35 @@
+import type { DayPickerProps } from "react-day-picker";
+
+export type LocaleCode = keyof typeof locales;
+
+export type LocalizationProps = Pick<
+    DayPickerProps,
+    "locale" | "months" | "weekdaysLong" | "weekdaysShort" | "firstDayOfWeek"
+>;
+
+const locales = {
+    en: import("dayjs/locale/en"),
+    en_US: import("dayjs/locale/en"),
+    en_GB: import("dayjs/locale/en-gb"),
+
+    es: import("dayjs/locale/es"),
+    es_ES: import("dayjs/locale/es"),
+    es_MX: import("dayjs/locale/es-mx"),
+};
+
+export const getLocalizationProps = async (localeCode: LocaleCode): Promise<Partial<LocalizationProps>> => {
+    try {
+        const locale = await locales[localeCode];
+
+        return {
+            locale: localeCode,
+            weekdaysLong: locale.weekdays,
+            weekdaysShort: locale.weekdaysShort,
+            months: locale.months,
+            firstDayOfWeek: locale.weekStart,
+        };
+    } catch (error) {
+        console.error("Error: React Day Picker localization error", error);
+        throw error;
+    }
+};
diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
index a2a21306f..740cce1b6 100644
--- a/src/components/DatePicker/DatePicker.jsx
+++ b/src/components/DatePicker/DatePicker.jsx
@@ -2,7 +2,7 @@ import clsx from "clsx";
 import dayjs from "dayjs";
 import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
-import DayPicker, { DateUtils } from "react-day-picker";
+import { DateUtils } from "react-day-picker";
 import "react-day-picker/lib/style.css";
 import "./DatePicker.css";
 import { isArray, isFunction } from "lodash";
@@ -14,6 +14,7 @@ import { RelativeDateRange } from "./RelativeDateRange";
 import RangeDatePicker from "./RangeDatePicker";
 import { UpcomingDatePicker } from "./UpcomingDatePicker";
 import { NavbarElement } from "./NavbarElement";
+import { LocalizedDayPicker } from "./LocalizedDayPicker";
 
 const variants = {
     single: "single",
@@ -227,7 +228,7 @@ export const DatePicker = ({
                         {...rest}
                     />
                 ) : (
-                    <DayPicker
+                    <LocalizedDayPicker
                         className={clsx(
                             "ui-date-picker rounded-lg pt-3",
                             useDateRangeStyle ? "date-range-picker" : null,
diff --git a/src/components/DatePicker/LocalizedDayPicker.tsx b/src/components/DatePicker/LocalizedDayPicker.tsx
new file mode 100644
index 000000000..f6adb4543
--- /dev/null
+++ b/src/components/DatePicker/LocalizedDayPicker.tsx
@@ -0,0 +1,21 @@
+import React, { useContext } from "react";
+import { Context } from "../Provider";
+import DayPicker, { DayPickerProps } from "react-day-picker";
+import { forwardRef, useEffect, useState } from "react";
+import { getLocalizationProps, LocaleCode, LocalizationProps } from "./DatePicker.helpers";
+
+export const LocalizedDayPicker = forwardRef<any, DayPickerProps>((props, ref) => {
+    const { locale } = useContext(Context);
+    const [localizationProps, setLocalizationProps] = useState<Partial<LocalizationProps>>({});
+
+    useEffect(() => {
+        setLocalizationProps({});
+
+        /** We don't want any localization-related props for "English" */
+        if (locale === "en") return;
+
+        getLocalizationProps(locale as LocaleCode).then(setLocalizationProps);
+    }, [locale]);
+
+    return <DayPicker ref={ref} {...localizationProps} {...props} />;
+});
diff --git a/src/components/DatePicker/RangeDatePicker.jsx b/src/components/DatePicker/RangeDatePicker.jsx
index 06d83994f..c5daf57bc 100644
--- a/src/components/DatePicker/RangeDatePicker.jsx
+++ b/src/components/DatePicker/RangeDatePicker.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import DayPicker from "react-day-picker";
 import clsx from "clsx";
 import { isArray, isFunction } from "lodash";
 import { Tooltip } from "../Tooltip";
@@ -8,6 +7,7 @@ import { now } from "../../helpers/date";
 import { NavbarElement } from "./NavbarElement";
 import { MonthYearSelector } from "./MonthYearSelector";
 import { Day } from "./Day";
+import { LocalizedDayPicker } from "./LocalizedDayPicker";
 
 const RangeDatePicker = ({
     getTooltip,
@@ -90,7 +90,7 @@ const RangeDatePicker = ({
 
     return (
         <div className="flex gap-4">
-            <DayPicker
+            <LocalizedDayPicker
                 className={clsx(
                     "ui-date-picker max-w-[400px] rounded-lg pt-3",
                     isDateRangeStyle ? "date-range-picker" : null,
@@ -110,7 +110,7 @@ const RangeDatePicker = ({
                 onTodayButtonClick={handleTodayClick}
                 {...rest}
             />
-            <DayPicker
+            <LocalizedDayPicker
                 className={clsx(
                     "ui-date-picker max-w-[400px] rounded-lg pt-3",
                     isDateRangeStyle ? "date-range-picker" : null,
diff --git a/src/components/Provider.jsx b/src/components/Provider.jsx
index 048ee77f5..d60fc8305 100644
--- a/src/components/Provider.jsx
+++ b/src/components/Provider.jsx
@@ -11,6 +11,10 @@ export const Context = createContext({
 
         return fallbackIdCounter++;
     },
+
+    localize: true,
+
+    locale: "en",
 });
 
 /**
@@ -18,14 +22,14 @@ export const Context = createContext({
  * Must be used from now on in order to generate correct component IDs.
  * Also a good place to implement any global state required for the UI Kit in the future.
  */
-export const Provider = ({ children }) => {
+export const Provider = ({ children, localize = true, locale = "en" }) => {
     const idCounterRef = useRef(1);
 
     const generateId = useCallback(() => {
         return idCounterRef.current++;
     }, [idCounterRef]);
 
-    const value = useMemo(() => ({ generateId }), [generateId]);
+    const value = useMemo(() => ({ generateId, localize, locale }), [generateId, localize, locale]);
 
     return <Context.Provider value={value}>{children}</Context.Provider>;
 };

From 1607d45e51551005f37dcabcb4cc985aaf69d5dc Mon Sep 17 00:00:00 2001
From: kirtesh-xola <kirtesh@xola.com>
Date: Fri, 12 Apr 2024 19:23:55 +0530
Subject: [PATCH 03/21] XS-30: adds translation-blacklist tag for DatePicker
 and Key

---
 src/components/DatePicker/DatePickerPopover.jsx  | 2 +-
 src/components/DatePicker/LocalizedDayPicker.tsx | 5 +++--
 src/components/Key.jsx                           | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/DatePicker/DatePickerPopover.jsx b/src/components/DatePicker/DatePickerPopover.jsx
index 0477168fa..a5cb05a45 100644
--- a/src/components/DatePicker/DatePickerPopover.jsx
+++ b/src/components/DatePicker/DatePickerPopover.jsx
@@ -110,7 +110,7 @@ const DefaultInput = forwardRef(({ className, ...rest }, reference) => {
                 <CalendarIcon className="z-10 inline-block" />
             </div>
 
-            <Input className={clsx("cursor-pointer px-8", className)} {...rest} />
+            <Input className={clsx("no-translate cursor-pointer px-8", className)} {...rest} />
 
             <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                 <DownArrowIcon className="inline-block" />
diff --git a/src/components/DatePicker/LocalizedDayPicker.tsx b/src/components/DatePicker/LocalizedDayPicker.tsx
index f6adb4543..e3becb6a2 100644
--- a/src/components/DatePicker/LocalizedDayPicker.tsx
+++ b/src/components/DatePicker/LocalizedDayPicker.tsx
@@ -3,8 +3,9 @@ import { Context } from "../Provider";
 import DayPicker, { DayPickerProps } from "react-day-picker";
 import { forwardRef, useEffect, useState } from "react";
 import { getLocalizationProps, LocaleCode, LocalizationProps } from "./DatePicker.helpers";
+import clsx from "clsx";
 
-export const LocalizedDayPicker = forwardRef<any, DayPickerProps>((props, ref) => {
+export const LocalizedDayPicker = forwardRef<any, DayPickerProps>(({ className, ...rest }, ref) => {
     const { locale } = useContext(Context);
     const [localizationProps, setLocalizationProps] = useState<Partial<LocalizationProps>>({});
 
@@ -17,5 +18,5 @@ export const LocalizedDayPicker = forwardRef<any, DayPickerProps>((props, ref) =
         getLocalizationProps(locale as LocaleCode).then(setLocalizationProps);
     }, [locale]);
 
-    return <DayPicker ref={ref} {...localizationProps} {...props} />;
+    return <DayPicker ref={ref} className={clsx("no-translate", className)} {...localizationProps} {...rest} />;
 });
diff --git a/src/components/Key.jsx b/src/components/Key.jsx
index 0039c137d..e15cf1f0e 100644
--- a/src/components/Key.jsx
+++ b/src/components/Key.jsx
@@ -10,7 +10,7 @@ export const Key = ({ char, className, ...rest }) => {
         <div
             className={clsx(
                 "ui-key",
-                "inline-flex h-5 items-center justify-center rounded bg-gray-lighter py-1 px-2 text-xs font-semibold text-gray",
+                "no-translate inline-flex h-5 items-center justify-center rounded bg-gray-lighter py-1 px-2 text-xs font-semibold text-gray",
                 key.length === 1 && "w-5",
                 className,
             )}

From 64050761904749d53c631a7d50898c78970394c2 Mon Sep 17 00:00:00 2001
From: kirtesh-xola <kirtesh@xola.com>
Date: Fri, 12 Jul 2024 14:43:51 +0530
Subject: [PATCH 04/21] fix: updates sidebar component to support `className`
 and `align` props

---
 src/components/Sidebar/Sidebar.Button.jsx |  8 ++++++--
 src/components/Sidebar/Sidebar.Link.jsx   | 17 +++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.Button.jsx b/src/components/Sidebar/Sidebar.Button.jsx
index a84817a6a..8cf2dee14 100644
--- a/src/components/Sidebar/Sidebar.Button.jsx
+++ b/src/components/Sidebar/Sidebar.Button.jsx
@@ -1,11 +1,15 @@
 import PropTypes from "prop-types";
 import React from "react";
+import clsx from "clsx";
 
-export const SidebarButton = ({ icon: Icon, label, ...rest }) => {
+export const SidebarButton = ({ icon: Icon, label, className, ...rest }) => {
     return (
         <button
             type="button"
-            className="ui-sidebar-button flex w-full cursor-pointer items-center rounded py-2 px-4 hover:bg-gray-darker"
+            className={clsx(
+                "ui-sidebar-button flex w-full cursor-pointer items-center rounded py-2 px-4 hover:bg-gray-darker",
+                className,
+            )}
             {...rest}
         >
             <div className="p-1.5">
diff --git a/src/components/Sidebar/Sidebar.Link.jsx b/src/components/Sidebar/Sidebar.Link.jsx
index 3cf6bff5b..6b9fa6213 100644
--- a/src/components/Sidebar/Sidebar.Link.jsx
+++ b/src/components/Sidebar/Sidebar.Link.jsx
@@ -4,7 +4,7 @@ import React from "react";
 import { ChevronRightIcon } from "../../icons";
 import { Dot } from "../Dot/Dot";
 
-export const SidebarLink = ({ isActive = false, icon: Icon, children, isSubMenuItem, ...rest }) => {
+export const SidebarLink = ({ isActive = false, icon: Icon, children, isSubMenuItem, align, ...rest }) => {
     return (
         <button
             type="button"
@@ -21,11 +21,19 @@ export const SidebarLink = ({ isActive = false, icon: Icon, children, isSubMenuI
             {...rest}
         >
             {isSubMenuItem ? (
-                <Dot className={clsx("mr-3", { "bg-white": isActive, "bg-gray": !isActive })} />
+                <Dot className={clsx("mr-3 shrink-0", { "bg-white": isActive, "bg-gray": !isActive })} />
             ) : (
-                <Icon className="h-5 w-5 xl:mr-3" />
+                <Icon className="h-5 w-5 shrink-0 xl:mr-3" />
             )}
-            <span className={clsx("hidden px-1 xl:inline", { "!inline text-left": isSubMenuItem })}>{children}</span>
+            <span
+                className={clsx(
+                    "hidden px-1 xl:inline",
+                    { "!inline text-left": isSubMenuItem },
+                    { "text-left": align === "left" },
+                )}
+            >
+                {children}
+            </span>
             {isSubMenuItem ? null : <ChevronRightIcon className="ml-auto hidden h-3 w-3 xl:inline" />}
         </button>
     );
@@ -34,6 +42,7 @@ export const SidebarLink = ({ isActive = false, icon: Icon, children, isSubMenuI
 SidebarLink.displayName = "Sidebar.Link";
 
 SidebarLink.propTypes = {
+    align: PropTypes.oneOf(["center", "left", "right"]),
     isActive: PropTypes.bool,
     icon: PropTypes.func,
     children: PropTypes.node.isRequired,

From ebc760dd65316cea78d3ed20594221bebb4edbe6 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Wed, 31 Jul 2024 15:53:31 +0530
Subject: [PATCH 05/21] XS-30 fixed date picker locale issues

---
 src/components/DatePicker/DatePicker.helpers.ts  | 3 +++
 src/components/DatePicker/DatePicker.jsx         | 9 +++++++--
 src/components/DatePicker/LocalizedDayPicker.tsx | 9 ++++-----
 src/components/DatePicker/RangeDatePicker.jsx    | 3 ++-
 src/components/Provider.jsx                      | 4 ++--
 5 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/DatePicker/DatePicker.helpers.ts b/src/components/DatePicker/DatePicker.helpers.ts
index c2354a1d2..befbf0aad 100644
--- a/src/components/DatePicker/DatePicker.helpers.ts
+++ b/src/components/DatePicker/DatePicker.helpers.ts
@@ -15,6 +15,9 @@ const locales = {
     es: import("dayjs/locale/es"),
     es_ES: import("dayjs/locale/es"),
     es_MX: import("dayjs/locale/es-mx"),
+
+    fr: import("dayjs/locale/fr"),
+    de: import("dayjs/locale/de"),
 };
 
 export const getLocalizationProps = async (localeCode: LocaleCode): Promise<Partial<LocalizationProps>> => {
diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
index 334e2c8c0..425e5f476 100644
--- a/src/components/DatePicker/DatePicker.jsx
+++ b/src/components/DatePicker/DatePicker.jsx
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import dayjs from "dayjs";
 import PropTypes from "prop-types";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState, useContext } from "react";
 import { DateUtils } from "react-day-picker";
 import "react-day-picker/lib/style.css";
 import "./DatePicker.css";
@@ -15,6 +15,7 @@ import { RelativeDateRange } from "./RelativeDateRange";
 import { UpcomingDatePicker } from "./UpcomingDatePicker";
 import { NavbarElement } from "./NavbarElement";
 import { LocalizedDayPicker } from "./LocalizedDayPicker";
+import { Context } from "../Provider";
 
 const variants = {
     single: "single",
@@ -39,9 +40,11 @@ export const DatePicker = ({
     components = {},
     getTooltip,
     upcomingDates,
+    locale,
     timezoneName = null, // seller timezone (e.g. "America/Los_Angeles") to return correct today date
     ...rest
 }) => {
+    const { locale:contextLocale } = useContext(Context);
     const initialValue = value ? (variant === variants.single ? value : value.from) : null;
     const [currentMonth, setCurrentMonth] = useState(initialValue ?? now(null, timezoneName).toDate());
     const [startMonth, setStartMonth] = useState(() => {
@@ -161,7 +164,7 @@ export const DatePicker = ({
     // TODO: Should be outside this component because this returns JSX
     const CaptionElement = useMemo(() => {
         return shouldShowYearPicker && currentMonth
-            ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} onChange={handleMonthChange} />
+            ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} locale={locale ?? contextLocale} onChange={handleMonthChange} />
             : undefined;
         // Adding `handleMonthChange` causes a lot of re-renders, and closes drop-down.
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -228,6 +231,7 @@ export const DatePicker = ({
                         handleEndMonthChange={handleEndMonthChange}
                         handleTodayClick={handleTodayClick}
                         selectedDays={selectedDays}
+                        locale={locale ?? contextLocale}
                         timezoneName={timezoneName}
                         {...rest}
                     />
@@ -290,5 +294,6 @@ DatePicker.propTypes = {
     shouldShowRelativeRanges: PropTypes.bool,
     components: PropTypes.shape({ Footer: PropTypes.oneOfType([PropTypes.node, PropTypes.func]) }),
     getTooltip: PropTypes.func,
+    locale: PropTypes.string,
     timezoneName: PropTypes.string,
 };
diff --git a/src/components/DatePicker/LocalizedDayPicker.tsx b/src/components/DatePicker/LocalizedDayPicker.tsx
index e3becb6a2..5103c0807 100644
--- a/src/components/DatePicker/LocalizedDayPicker.tsx
+++ b/src/components/DatePicker/LocalizedDayPicker.tsx
@@ -1,9 +1,8 @@
-import React, { useContext } from "react";
-import { Context } from "../Provider";
+import clsx from "clsx";
+import React, { forwardRef, useContext, useEffect, useState } from "react";
 import DayPicker, { DayPickerProps } from "react-day-picker";
-import { forwardRef, useEffect, useState } from "react";
+import { Context } from "../Provider";
 import { getLocalizationProps, LocaleCode, LocalizationProps } from "./DatePicker.helpers";
-import clsx from "clsx";
 
 export const LocalizedDayPicker = forwardRef<any, DayPickerProps>(({ className, ...rest }, ref) => {
     const { locale } = useContext(Context);
@@ -18,5 +17,5 @@ export const LocalizedDayPicker = forwardRef<any, DayPickerProps>(({ className,
         getLocalizationProps(locale as LocaleCode).then(setLocalizationProps);
     }, [locale]);
 
-    return <DayPicker ref={ref} className={clsx("no-translate", className)} {...localizationProps} {...rest} />;
+    return <DayPicker ref={ref} className={clsx(className)} {...localizationProps} {...rest} />;
 });
diff --git a/src/components/DatePicker/RangeDatePicker.jsx b/src/components/DatePicker/RangeDatePicker.jsx
index e7022144c..af227401c 100644
--- a/src/components/DatePicker/RangeDatePicker.jsx
+++ b/src/components/DatePicker/RangeDatePicker.jsx
@@ -24,6 +24,7 @@ const RangeDatePicker = ({
     handleStartMonthChange,
     handleEndMonthChange,
     handleTodayClick,
+    locale,
     timezoneName,
     ...rest
 }) => {
@@ -32,7 +33,7 @@ const RangeDatePicker = ({
 
     const createCaptionElement = (currentMonth, handleChange) =>
         shouldShowYearPicker && currentMonth
-            ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} onChange={handleChange} />
+            ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} locale={locale} onChange={handleChange} />
             : undefined;
 
     const CaptionStartElement = createCaptionElement(startMonth, handleStartMonthChange);
diff --git a/src/components/Provider.jsx b/src/components/Provider.jsx
index d60fc8305..07136efd0 100644
--- a/src/components/Provider.jsx
+++ b/src/components/Provider.jsx
@@ -14,7 +14,7 @@ export const Context = createContext({
 
     localize: true,
 
-    locale: "en",
+    locale: "en_US",
 });
 
 /**
@@ -22,7 +22,7 @@ export const Context = createContext({
  * Must be used from now on in order to generate correct component IDs.
  * Also a good place to implement any global state required for the UI Kit in the future.
  */
-export const Provider = ({ children, localize = true, locale = "en" }) => {
+export const Provider = ({ children, localize = true, locale = "en_US" }) => {
     const idCounterRef = useRef(1);
 
     const generateId = useCallback(() => {

From 1291542235505984fd0cf5f8c8d1b66a4d94fd55 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Wed, 31 Jul 2024 15:54:49 +0530
Subject: [PATCH 06/21] XS-30 fixed locale in month year selector

---
 src/components/DatePicker/MonthYearSelector.jsx | 8 ++++----
 src/components/Utilities/Currency.jsx           | 8 ++++++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/DatePicker/MonthYearSelector.jsx b/src/components/DatePicker/MonthYearSelector.jsx
index c29c20883..dd3b6b888 100644
--- a/src/components/DatePicker/MonthYearSelector.jsx
+++ b/src/components/DatePicker/MonthYearSelector.jsx
@@ -1,6 +1,6 @@
+import React from "react";
 import dayjs from "dayjs";
 import PropTypes from "prop-types";
-import React from "react";
 import { Select } from "../Forms/Select";
 
 const today = dayjs();
@@ -9,11 +9,11 @@ const getDiffInMonths = (to, from) => {
     return 12 * (to.getFullYear() - from.getFullYear()) + (to.getMonth() - from.getMonth());
 };
 
-export const MonthYearSelector = ({ date, onChange, currentMonth }) => {
-    const months = [...Array.from({ length: 12 }).keys()].map((m) => today.month(m).format("MMM"));
+export const MonthYearSelector = ({ date, locale, onChange, currentMonth }) => {
+    const months = [...Array.from({ length: 12 }).keys()].map((m) => today.locale(locale).month(m).format("MMM"));
     // 2012 as baseline + 5 years in future
     const years = [...Array.from({ length: today.year() - 2012 + 5 + 1 }).keys()].map((y) =>
-        today.year(2012 + y).format("YYYY"),
+        today.locale(locale).year(2012 + y).format("YYYY"),
     );
 
     /**
diff --git a/src/components/Utilities/Currency.jsx b/src/components/Utilities/Currency.jsx
index 1c42e1ded..bf28b2854 100644
--- a/src/components/Utilities/Currency.jsx
+++ b/src/components/Utilities/Currency.jsx
@@ -1,8 +1,9 @@
 import getUserLocale from "get-user-locale";
 import PropTypes from "prop-types";
-import React from "react";
+import React, { useContext } from "react";
 import { getSymbol, isZeroDecimal } from "../../helpers/currency";
 import { almostZero, numberFormat, roundNumber } from "../../helpers/numbers";
+import { Context } from "../Provider";
 
 const userLocale = getUserLocale();
 
@@ -15,7 +16,10 @@ export const Currency = ({
     isNarrowSymbolForm,
     children,
 }) => {
+    const {locale} = useContext(Context);
+
     let amount = children;
+
     if (almostZero(amount)) {
         amount = 0;
     }
@@ -25,7 +29,7 @@ export const Currency = ({
     if (compact) {
         return (
             <span className="ui-currency">
-                {getSymbol(currency, locale, isNarrowSymbolForm)}
+                {getSymbol(currency, locale , isNarrowSymbolForm)}
                 {formattedAmount}
             </span>
         );

From 3ff0046d9eacdeb7ca96169f1ee8f08332b0afe7 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Wed, 31 Jul 2024 15:55:48 +0530
Subject: [PATCH 07/21] XS-30 refactor

---
 src/components/Utilities/Currency.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Utilities/Currency.jsx b/src/components/Utilities/Currency.jsx
index bf28b2854..6d2181a65 100644
--- a/src/components/Utilities/Currency.jsx
+++ b/src/components/Utilities/Currency.jsx
@@ -19,7 +19,6 @@ export const Currency = ({
     const {locale} = useContext(Context);
 
     let amount = children;
-
     if (almostZero(amount)) {
         amount = 0;
     }
@@ -29,7 +28,7 @@ export const Currency = ({
     if (compact) {
         return (
             <span className="ui-currency">
-                {getSymbol(currency, locale , isNarrowSymbolForm)}
+                {getSymbol(currency, locale, isNarrowSymbolForm)}
                 {formattedAmount}
             </span>
         );

From a34cf45d57e55aa358c19ebd938f4d965ce78d9f Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Wed, 31 Jul 2024 16:16:07 +0530
Subject: [PATCH 08/21] XS-30 fixed currency

---
 src/components/Utilities/Currency.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/Utilities/Currency.jsx b/src/components/Utilities/Currency.jsx
index 6d2181a65..1c42e1ded 100644
--- a/src/components/Utilities/Currency.jsx
+++ b/src/components/Utilities/Currency.jsx
@@ -1,9 +1,8 @@
 import getUserLocale from "get-user-locale";
 import PropTypes from "prop-types";
-import React, { useContext } from "react";
+import React from "react";
 import { getSymbol, isZeroDecimal } from "../../helpers/currency";
 import { almostZero, numberFormat, roundNumber } from "../../helpers/numbers";
-import { Context } from "../Provider";
 
 const userLocale = getUserLocale();
 
@@ -16,8 +15,6 @@ export const Currency = ({
     isNarrowSymbolForm,
     children,
 }) => {
-    const {locale} = useContext(Context);
-
     let amount = children;
     if (almostZero(amount)) {
         amount = 0;

From fae85b75387071ad3c94fe6dd89c79afdb27f354 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Tue, 20 Aug 2024 15:14:34 +0530
Subject: [PATCH 09/21] XS-30 Added short months

---
 src/components/DatePicker/DatePicker.helpers.ts  | 3 ++-
 src/components/DatePicker/LocalizedDayPicker.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/DatePicker/DatePicker.helpers.ts b/src/components/DatePicker/DatePicker.helpers.ts
index befbf0aad..efaff0d31 100644
--- a/src/components/DatePicker/DatePicker.helpers.ts
+++ b/src/components/DatePicker/DatePicker.helpers.ts
@@ -4,7 +4,7 @@ export type LocaleCode = keyof typeof locales;
 
 export type LocalizationProps = Pick<
     DayPickerProps,
-    "locale" | "months" | "weekdaysLong" | "weekdaysShort" | "firstDayOfWeek"
+    "locale" | "months" | "monthsShort" | "weekdaysLong" | "weekdaysShort" | "firstDayOfWeek"
 >;
 
 const locales = {
@@ -29,6 +29,7 @@ export const getLocalizationProps = async (localeCode: LocaleCode): Promise<Part
             weekdaysLong: locale.weekdays,
             weekdaysShort: locale.weekdaysShort,
             months: locale.months,
+            monthsShort: locale.monthsShort,
             firstDayOfWeek: locale.weekStart,
         };
     } catch (error) {
diff --git a/src/components/DatePicker/LocalizedDayPicker.tsx b/src/components/DatePicker/LocalizedDayPicker.tsx
index 5103c0807..05ed1e565 100644
--- a/src/components/DatePicker/LocalizedDayPicker.tsx
+++ b/src/components/DatePicker/LocalizedDayPicker.tsx
@@ -12,7 +12,7 @@ export const LocalizedDayPicker = forwardRef<any, DayPickerProps>(({ className,
         setLocalizationProps({});
 
         /** We don't want any localization-related props for "English" */
-        if (locale === "en") return;
+        if (locale === "en" || locale === "en_US") return;
 
         getLocalizationProps(locale as LocaleCode).then(setLocalizationProps);
     }, [locale]);

From 098c6205c1763992670a5d6b3c507b61a56a3156 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Tue, 20 Aug 2024 18:11:30 +0530
Subject: [PATCH 10/21] XS-30 added console.logs

---
 src/components/DatePicker/DatePicker.jsx         | 1 +
 src/components/DatePicker/LocalizedDayPicker.tsx | 2 ++
 src/components/Provider.jsx                      | 2 +-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
index 4c46c064d..779f456a1 100644
--- a/src/components/DatePicker/DatePicker.jsx
+++ b/src/components/DatePicker/DatePicker.jsx
@@ -45,6 +45,7 @@ export const DatePicker = ({
     ...rest
 }) => {
     const { locale:contextLocale } = useContext(Context);
+    console.log("Date Picker - ui - kit ", contextLocale);
     const initialValue = value ? (variant === variants.single ? value : value.from) : null;
     const [currentMonth, setCurrentMonth] = useState(initialValue ?? now(null, timezoneName).toDate());
     const [startMonth, setStartMonth] = useState(() => {
diff --git a/src/components/DatePicker/LocalizedDayPicker.tsx b/src/components/DatePicker/LocalizedDayPicker.tsx
index 05ed1e565..563e51f2b 100644
--- a/src/components/DatePicker/LocalizedDayPicker.tsx
+++ b/src/components/DatePicker/LocalizedDayPicker.tsx
@@ -17,5 +17,7 @@ export const LocalizedDayPicker = forwardRef<any, DayPickerProps>(({ className,
         getLocalizationProps(locale as LocaleCode).then(setLocalizationProps);
     }, [locale]);
 
+    console.log("Loca-day-picker ", localizationProps);
+
     return <DayPicker ref={ref} className={clsx(className)} {...localizationProps} {...rest} />;
 });
diff --git a/src/components/Provider.jsx b/src/components/Provider.jsx
index 07136efd0..85b87cffd 100644
--- a/src/components/Provider.jsx
+++ b/src/components/Provider.jsx
@@ -24,7 +24,7 @@ export const Context = createContext({
  */
 export const Provider = ({ children, localize = true, locale = "en_US" }) => {
     const idCounterRef = useRef(1);
-
+    console.log("Logging from ui-kit ", locale);
     const generateId = useCallback(() => {
         return idCounterRef.current++;
     }, [idCounterRef]);

From ef5e5311eb122bc0857d3093f35574459d0566d1 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Wed, 21 Aug 2024 13:13:42 +0530
Subject: [PATCH 11/21] Moved locale files to import block

---
 .../DatePicker/DatePicker.helpers.ts          | 28 +++++++++++++------
 src/components/DatePicker/DatePicker.jsx      | 21 +++++++++-----
 .../DatePicker/LocalizedDayPicker.tsx         |  2 +-
 .../DatePicker/MonthYearSelector.jsx          |  7 +++--
 src/components/DatePicker/RangeDatePicker.jsx | 10 ++++---
 src/components/Drawer.jsx                     |  2 +-
 src/components/Provider.jsx                   |  2 +-
 src/components/Sidebar/Sidebar.Button.jsx     |  2 +-
 src/hooks/useViewportHeight.js                |  2 +-
 9 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/src/components/DatePicker/DatePicker.helpers.ts b/src/components/DatePicker/DatePicker.helpers.ts
index efaff0d31..c0ea08847 100644
--- a/src/components/DatePicker/DatePicker.helpers.ts
+++ b/src/components/DatePicker/DatePicker.helpers.ts
@@ -1,23 +1,33 @@
+import * as de from "dayjs/locale/de";
+import * as en from "dayjs/locale/en";
+import * as enGB from "dayjs/locale/en-gb";
+import * as es from "dayjs/locale/es";
+import * as esMX from "dayjs/locale/es-MX";
+import * as fr from "dayjs/locale/fr";
 import type { DayPickerProps } from "react-day-picker";
 
 export type LocaleCode = keyof typeof locales;
 
+interface ExtendedDayPickerProps extends DayPickerProps {
+    monthsShort?: string;
+}
+
 export type LocalizationProps = Pick<
-    DayPickerProps,
+    ExtendedDayPickerProps,
     "locale" | "months" | "monthsShort" | "weekdaysLong" | "weekdaysShort" | "firstDayOfWeek"
 >;
 
 const locales = {
-    en: import("dayjs/locale/en"),
-    en_US: import("dayjs/locale/en"),
-    en_GB: import("dayjs/locale/en-gb"),
+    en: en,
+    en_US: en,
+    en_GB: enGB,
 
-    es: import("dayjs/locale/es"),
-    es_ES: import("dayjs/locale/es"),
-    es_MX: import("dayjs/locale/es-mx"),
+    es: es,
+    es_ES: es,
+    es_MX: esMX,
 
-    fr: import("dayjs/locale/fr"),
-    de: import("dayjs/locale/de"),
+    fr: fr,
+    de: de,
 };
 
 export const getLocalizationProps = async (localeCode: LocaleCode): Promise<Partial<LocalizationProps>> => {
diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
index 779f456a1..4adb3bd17 100644
--- a/src/components/DatePicker/DatePicker.jsx
+++ b/src/components/DatePicker/DatePicker.jsx
@@ -1,21 +1,21 @@
 import clsx from "clsx";
 import dayjs from "dayjs";
 import PropTypes from "prop-types";
-import React, { useEffect, useMemo, useState, useContext } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { DateUtils } from "react-day-picker";
 import "react-day-picker/lib/style.css";
 import "./DatePicker.css";
 import { isArray, isFunction } from "lodash";
 import { Tooltip } from "../..";
 import { isSame, isValidTimeZoneName, now, toDate } from "../../helpers/date";
+import { Context } from "../Provider";
 import { Day } from "./Day";
+import { LocalizedDayPicker } from "./LocalizedDayPicker";
 import { MonthYearSelector } from "./MonthYearSelector";
+import { NavbarElement } from "./NavbarElement";
 import RangeDatePicker from "./RangeDatePicker";
 import { RelativeDateRange } from "./RelativeDateRange";
 import { UpcomingDatePicker } from "./UpcomingDatePicker";
-import { NavbarElement } from "./NavbarElement";
-import { LocalizedDayPicker } from "./LocalizedDayPicker";
-import { Context } from "../Provider";
 
 const variants = {
     single: "single",
@@ -44,8 +44,8 @@ export const DatePicker = ({
     timezoneName = null, // seller timezone (e.g. "America/Los_Angeles") to return correct today date
     ...rest
 }) => {
-    const { locale:contextLocale } = useContext(Context);
-    console.log("Date Picker - ui - kit ", contextLocale);
+    const { locale: contextLocale } = useContext(Context);
+    console.log("Date Picker - ui - kit", contextLocale);
     const initialValue = value ? (variant === variants.single ? value : value.from) : null;
     const [currentMonth, setCurrentMonth] = useState(initialValue ?? now(null, timezoneName).toDate());
     const [startMonth, setStartMonth] = useState(() => {
@@ -180,7 +180,14 @@ export const DatePicker = ({
     // TODO: Should be outside this component because this returns JSX
     const CaptionElement = useMemo(() => {
         return shouldShowYearPicker && currentMonth
-            ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} locale={locale ?? contextLocale} onChange={handleMonthChange} />
+            ? ({ date }) => (
+                  <MonthYearSelector
+                      date={date}
+                      currentMonth={currentMonth}
+                      locale={locale ?? contextLocale}
+                      onChange={handleMonthChange}
+                  />
+              )
             : undefined;
         // Adding `handleMonthChange` causes a lot of re-renders, and closes drop-down.
         // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/src/components/DatePicker/LocalizedDayPicker.tsx b/src/components/DatePicker/LocalizedDayPicker.tsx
index 563e51f2b..2db8b05cd 100644
--- a/src/components/DatePicker/LocalizedDayPicker.tsx
+++ b/src/components/DatePicker/LocalizedDayPicker.tsx
@@ -17,7 +17,7 @@ export const LocalizedDayPicker = forwardRef<any, DayPickerProps>(({ className,
         getLocalizationProps(locale as LocaleCode).then(setLocalizationProps);
     }, [locale]);
 
-    console.log("Loca-day-picker ", localizationProps);
+    console.log("Loca-day-picker", localizationProps);
 
     return <DayPicker ref={ref} className={clsx(className)} {...localizationProps} {...rest} />;
 });
diff --git a/src/components/DatePicker/MonthYearSelector.jsx b/src/components/DatePicker/MonthYearSelector.jsx
index dd3b6b888..5f2731668 100644
--- a/src/components/DatePicker/MonthYearSelector.jsx
+++ b/src/components/DatePicker/MonthYearSelector.jsx
@@ -1,6 +1,6 @@
-import React from "react";
 import dayjs from "dayjs";
 import PropTypes from "prop-types";
+import React from "react";
 import { Select } from "../Forms/Select";
 
 const today = dayjs();
@@ -13,7 +13,10 @@ export const MonthYearSelector = ({ date, locale, onChange, currentMonth }) => {
     const months = [...Array.from({ length: 12 }).keys()].map((m) => today.locale(locale).month(m).format("MMM"));
     // 2012 as baseline + 5 years in future
     const years = [...Array.from({ length: today.year() - 2012 + 5 + 1 }).keys()].map((y) =>
-        today.locale(locale).year(2012 + y).format("YYYY"),
+        today
+            .locale(locale)
+            .year(2012 + y)
+            .format("YYYY"),
     );
 
     /**
diff --git a/src/components/DatePicker/RangeDatePicker.jsx b/src/components/DatePicker/RangeDatePicker.jsx
index af227401c..46dac73dd 100644
--- a/src/components/DatePicker/RangeDatePicker.jsx
+++ b/src/components/DatePicker/RangeDatePicker.jsx
@@ -1,13 +1,13 @@
-import React from "react";
-import PropTypes from "prop-types";
 import clsx from "clsx";
 import { isArray, isFunction } from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
 import { now } from "../../helpers/date";
 import { Tooltip } from "../Tooltip";
 import { Day } from "./Day";
+import { LocalizedDayPicker } from "./LocalizedDayPicker";
 import { MonthYearSelector } from "./MonthYearSelector";
 import { NavbarElement } from "./NavbarElement";
-import { LocalizedDayPicker } from "./LocalizedDayPicker";
 
 const RangeDatePicker = ({
     getTooltip,
@@ -33,7 +33,9 @@ const RangeDatePicker = ({
 
     const createCaptionElement = (currentMonth, handleChange) =>
         shouldShowYearPicker && currentMonth
-            ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} locale={locale} onChange={handleChange} />
+            ? ({ date }) => (
+                  <MonthYearSelector date={date} currentMonth={currentMonth} locale={locale} onChange={handleChange} />
+              )
             : undefined;
 
     const CaptionStartElement = createCaptionElement(startMonth, handleStartMonthChange);
diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx
index 3d94575cf..18f8cc22b 100644
--- a/src/components/Drawer.jsx
+++ b/src/components/Drawer.jsx
@@ -2,9 +2,9 @@ import { Dialog, Transition } from "@headlessui/react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { forwardRef, Fragment } from "react";
-import { CloseIcon } from "../icons";
 import { isIosBrowser } from "../helpers/browser";
 import { useViewportHeight } from "../hooks/useViewportHeight";
+import { CloseIcon } from "../icons";
 import { Button } from "./Buttons/Button";
 
 const sizes = {
diff --git a/src/components/Provider.jsx b/src/components/Provider.jsx
index 85b87cffd..e3778ec34 100644
--- a/src/components/Provider.jsx
+++ b/src/components/Provider.jsx
@@ -24,7 +24,7 @@ export const Context = createContext({
  */
 export const Provider = ({ children, localize = true, locale = "en_US" }) => {
     const idCounterRef = useRef(1);
-    console.log("Logging from ui-kit ", locale);
+    console.log("Logging from ui-kit Provider -", locale);
     const generateId = useCallback(() => {
         return idCounterRef.current++;
     }, [idCounterRef]);
diff --git a/src/components/Sidebar/Sidebar.Button.jsx b/src/components/Sidebar/Sidebar.Button.jsx
index 8cf2dee14..493e62639 100644
--- a/src/components/Sidebar/Sidebar.Button.jsx
+++ b/src/components/Sidebar/Sidebar.Button.jsx
@@ -1,6 +1,6 @@
+import clsx from "clsx";
 import PropTypes from "prop-types";
 import React from "react";
-import clsx from "clsx";
 
 export const SidebarButton = ({ icon: Icon, label, className, ...rest }) => {
     return (
diff --git a/src/hooks/useViewportHeight.js b/src/hooks/useViewportHeight.js
index a2c7b74e6..4ea31c6db 100644
--- a/src/hooks/useViewportHeight.js
+++ b/src/hooks/useViewportHeight.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export const useViewportHeight = () => {
     const [viewportHeight, setViewportHeight] = useState(0);

From 309155e311defb76e54e57372e59b7086875b198 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Wed, 21 Aug 2024 17:58:47 +0530
Subject: [PATCH 12/21] XS-30 changed lot messge

---
 src/components/Provider.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Provider.jsx b/src/components/Provider.jsx
index e3778ec34..80b562cd5 100644
--- a/src/components/Provider.jsx
+++ b/src/components/Provider.jsx
@@ -24,7 +24,7 @@ export const Context = createContext({
  */
 export const Provider = ({ children, localize = true, locale = "en_US" }) => {
     const idCounterRef = useRef(1);
-    console.log("Logging from ui-kit Provider -", locale);
+    console.log("Locale in UI-KIT Provider -", locale);
     const generateId = useCallback(() => {
         return idCounterRef.current++;
     }, [idCounterRef]);

From ec7be9421777420c7cb590d61ac6d587877d1081 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Thu, 22 Aug 2024 09:54:34 +0530
Subject: [PATCH 13/21] XS-30 fixed es-MX issue

---
 src/components/DatePicker/DatePicker.helpers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DatePicker/DatePicker.helpers.ts b/src/components/DatePicker/DatePicker.helpers.ts
index c0ea08847..33dd7e23d 100644
--- a/src/components/DatePicker/DatePicker.helpers.ts
+++ b/src/components/DatePicker/DatePicker.helpers.ts
@@ -2,7 +2,7 @@ import * as de from "dayjs/locale/de";
 import * as en from "dayjs/locale/en";
 import * as enGB from "dayjs/locale/en-gb";
 import * as es from "dayjs/locale/es";
-import * as esMX from "dayjs/locale/es-MX";
+import * as esMX from "dayjs/locale/es-mx";
 import * as fr from "dayjs/locale/fr";
 import type { DayPickerProps } from "react-day-picker";
 

From 50d8d0778cdc4a6e5bf80b6f9b0846f71880c83e Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Thu, 22 Aug 2024 18:29:24 +0530
Subject: [PATCH 14/21] XS-30 Added Support for classnames to sidemenubar text

---
 src/components/Sidebar/Sidebar.Link.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Sidebar/Sidebar.Link.jsx b/src/components/Sidebar/Sidebar.Link.jsx
index 6b9fa6213..678d5b008 100644
--- a/src/components/Sidebar/Sidebar.Link.jsx
+++ b/src/components/Sidebar/Sidebar.Link.jsx
@@ -4,7 +4,7 @@ import React from "react";
 import { ChevronRightIcon } from "../../icons";
 import { Dot } from "../Dot/Dot";
 
-export const SidebarLink = ({ isActive = false, icon: Icon, children, isSubMenuItem, align, ...rest }) => {
+export const SidebarLink = ({ isActive = false, icon: Icon, children, isSubMenuItem, align, classNames, ...rest }) => {
     return (
         <button
             type="button"
@@ -30,6 +30,7 @@ export const SidebarLink = ({ isActive = false, icon: Icon, children, isSubMenuI
                     "hidden px-1 xl:inline",
                     { "!inline text-left": isSubMenuItem },
                     { "text-left": align === "left" },
+                    classNames?.text 
                 )}
             >
                 {children}

From 9ea1467d719141cd6e16a03ae1254da551e5b864 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Sun, 1 Sep 2024 23:15:09 +0530
Subject: [PATCH 15/21] XS-30 added condition for ignoring locale when its not
 there

---
 src/components/DatePicker/LocalizedDayPicker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DatePicker/LocalizedDayPicker.tsx b/src/components/DatePicker/LocalizedDayPicker.tsx
index 2db8b05cd..7efd4036b 100644
--- a/src/components/DatePicker/LocalizedDayPicker.tsx
+++ b/src/components/DatePicker/LocalizedDayPicker.tsx
@@ -12,7 +12,7 @@ export const LocalizedDayPicker = forwardRef<any, DayPickerProps>(({ className,
         setLocalizationProps({});
 
         /** We don't want any localization-related props for "English" */
-        if (locale === "en" || locale === "en_US") return;
+        if (!locale || locale === "en" || locale === "en_US") return;
 
         getLocalizationProps(locale as LocaleCode).then(setLocalizationProps);
     }, [locale]);

From fd7c6c5b924d7796d1881c9015057c1fd704dc56 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Thu, 5 Sep 2024 11:42:27 +0530
Subject: [PATCH 16/21] XS-30 removed console.logs, lint fix

---
 src/components/DatePicker/DatePicker.jsx         | 1 -
 src/components/DatePicker/LocalizedDayPicker.tsx | 2 --
 src/components/Provider.jsx                      | 2 +-
 src/components/Sidebar/Sidebar.Link.jsx          | 2 +-
 4 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
index e129c4e57..4e3efc6c0 100644
--- a/src/components/DatePicker/DatePicker.jsx
+++ b/src/components/DatePicker/DatePicker.jsx
@@ -45,7 +45,6 @@ export const DatePicker = ({
     ...rest
 }) => {
     const { locale: contextLocale } = useContext(Context);
-    console.log("Date Picker - ui - kit", contextLocale);
     const initialValue = value ? (variant === variants.single ? value : value.from) : null;
     const [currentMonth, setCurrentMonth] = useState(initialValue ?? now(null, timezoneName).toDate());
     const [startMonth, setStartMonth] = useState(() => {
diff --git a/src/components/DatePicker/LocalizedDayPicker.tsx b/src/components/DatePicker/LocalizedDayPicker.tsx
index 7efd4036b..4f20aca7c 100644
--- a/src/components/DatePicker/LocalizedDayPicker.tsx
+++ b/src/components/DatePicker/LocalizedDayPicker.tsx
@@ -17,7 +17,5 @@ export const LocalizedDayPicker = forwardRef<any, DayPickerProps>(({ className,
         getLocalizationProps(locale as LocaleCode).then(setLocalizationProps);
     }, [locale]);
 
-    console.log("Loca-day-picker", localizationProps);
-
     return <DayPicker ref={ref} className={clsx(className)} {...localizationProps} {...rest} />;
 });
diff --git a/src/components/Provider.jsx b/src/components/Provider.jsx
index 80b562cd5..07136efd0 100644
--- a/src/components/Provider.jsx
+++ b/src/components/Provider.jsx
@@ -24,7 +24,7 @@ export const Context = createContext({
  */
 export const Provider = ({ children, localize = true, locale = "en_US" }) => {
     const idCounterRef = useRef(1);
-    console.log("Locale in UI-KIT Provider -", locale);
+
     const generateId = useCallback(() => {
         return idCounterRef.current++;
     }, [idCounterRef]);
diff --git a/src/components/Sidebar/Sidebar.Link.jsx b/src/components/Sidebar/Sidebar.Link.jsx
index 678d5b008..6be086003 100644
--- a/src/components/Sidebar/Sidebar.Link.jsx
+++ b/src/components/Sidebar/Sidebar.Link.jsx
@@ -30,7 +30,7 @@ export const SidebarLink = ({ isActive = false, icon: Icon, children, isSubMenuI
                     "hidden px-1 xl:inline",
                     { "!inline text-left": isSubMenuItem },
                     { "text-left": align === "left" },
-                    classNames?.text 
+                    classNames?.text,
                 )}
             >
                 {children}

From d7403d880a5d7867f79870f7031ba8630592ec02 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Thu, 5 Sep 2024 17:12:44 +0530
Subject: [PATCH 17/21] XS-30 Added XO config

---
 .xo-config.json | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .xo-config.json

diff --git a/.xo-config.json b/.xo-config.json
new file mode 100644
index 000000000..8536300d0
--- /dev/null
+++ b/.xo-config.json
@@ -0,0 +1,5 @@
+{
+    "rules": {
+        "complexity": ["warn", { "max": 25 }]
+    }
+}

From 509998d5b6371d8e09bee6ac5f99d33068d38568 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Fri, 6 Sep 2024 12:58:27 +0530
Subject: [PATCH 18/21] XS-30 Dummy commit

---
 src/components/DatePicker/LocalizedDayPicker.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/DatePicker/LocalizedDayPicker.tsx b/src/components/DatePicker/LocalizedDayPicker.tsx
index 4f20aca7c..d07d7fe8c 100644
--- a/src/components/DatePicker/LocalizedDayPicker.tsx
+++ b/src/components/DatePicker/LocalizedDayPicker.tsx
@@ -7,6 +7,7 @@ import { getLocalizationProps, LocaleCode, LocalizationProps } from "./DatePicke
 export const LocalizedDayPicker = forwardRef<any, DayPickerProps>(({ className, ...rest }, ref) => {
     const { locale } = useContext(Context);
     const [localizationProps, setLocalizationProps] = useState<Partial<LocalizationProps>>({});
+    console.log("Locale ", locale);
 
     useEffect(() => {
         setLocalizationProps({});

From 4854c985951eb51423eb869a706d91eba188264d Mon Sep 17 00:00:00 2001
From: Rushi Vishavadia <rushi@xola.com>
Date: Fri, 6 Sep 2024 13:22:19 +0530
Subject: [PATCH 19/21] Fix unicorn/no-console-spaces param

---
 src/components/DatePicker/LocalizedDayPicker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DatePicker/LocalizedDayPicker.tsx b/src/components/DatePicker/LocalizedDayPicker.tsx
index d07d7fe8c..49ea8d03a 100644
--- a/src/components/DatePicker/LocalizedDayPicker.tsx
+++ b/src/components/DatePicker/LocalizedDayPicker.tsx
@@ -7,7 +7,7 @@ import { getLocalizationProps, LocaleCode, LocalizationProps } from "./DatePicke
 export const LocalizedDayPicker = forwardRef<any, DayPickerProps>(({ className, ...rest }, ref) => {
     const { locale } = useContext(Context);
     const [localizationProps, setLocalizationProps] = useState<Partial<LocalizationProps>>({});
-    console.log("Locale ", locale);
+    console.log("Locale", locale);
 
     useEffect(() => {
         setLocalizationProps({});

From 49b9d1ee4942b7d572226483b75cbfc6b477098c Mon Sep 17 00:00:00 2001
From: Rushi Vishavadia <rushi@xola.com>
Date: Fri, 6 Sep 2024 13:50:45 +0530
Subject: [PATCH 20/21] Update eslint.yml to use `ES_LINT_TOKEN`

---
 .github/workflows/eslint.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
index f3ae8e43d..4d475745b 100644
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@@ -48,7 +48,7 @@ jobs:
         with:
           check-name: "View Lint Report"
           markdown-report-on-step-summary: true
-          repo-token: "${{ github.token }}"
+          repo-token: ${{ secrets.ES_LINT_TOKEN }}
           report-json: "eslint_report.json"
 
 #      # OPTIONAL: save a copy of the usage report for download or use in another job

From e4f3eca0bd09c53dd30fe2f7a9e09b5957b644d2 Mon Sep 17 00:00:00 2001
From: Rushi Vishavadia <rushi@xola.com>
Date: Mon, 9 Sep 2024 15:24:18 +0530
Subject: [PATCH 21/21] npm audit fix by rushi

---
 package-lock.json | 50 ++++++++++++++++++++++++-----------------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e5dc41503..e3ad8765f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6958,9 +6958,9 @@
             }
         },
         "node_modules/@storybook/core-server/node_modules/ws": {
-            "version": "8.13.0",
-            "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-            "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+            "version": "8.18.0",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+            "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
             "dev": true,
             "engines": {
                 "node": ">=10.0.0"
@@ -13623,9 +13623,9 @@
             "dev": true
         },
         "node_modules/elliptic": {
-            "version": "6.5.4",
-            "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
-            "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+            "version": "6.5.7",
+            "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.7.tgz",
+            "integrity": "sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==",
             "dev": true,
             "dependencies": {
                 "bn.js": "^4.11.9",
@@ -22173,12 +22173,12 @@
             "dev": true
         },
         "node_modules/micromatch": {
-            "version": "4.0.5",
-            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-            "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+            "version": "4.0.8",
+            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+            "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
             "dev": true,
             "dependencies": {
-                "braces": "^3.0.2",
+                "braces": "^3.0.3",
                 "picomatch": "^2.3.1"
             },
             "engines": {
@@ -30067,8 +30067,9 @@
             }
         },
         "node_modules/ws": {
-            "version": "7.5.5",
-            "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==",
+            "version": "7.5.10",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+            "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
             "dev": true,
             "engines": {
                 "node": ">=8.3.0"
@@ -35989,9 +35990,9 @@
                     }
                 },
                 "ws": {
-                    "version": "8.13.0",
-                    "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-                    "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+                    "version": "8.18.0",
+                    "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+                    "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
                     "dev": true
                 }
             }
@@ -41066,9 +41067,9 @@
             "dev": true
         },
         "elliptic": {
-            "version": "6.5.4",
-            "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
-            "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+            "version": "6.5.7",
+            "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.7.tgz",
+            "integrity": "sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==",
             "dev": true,
             "requires": {
                 "bn.js": "^4.11.9",
@@ -47375,12 +47376,12 @@
             "dev": true
         },
         "micromatch": {
-            "version": "4.0.5",
-            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-            "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+            "version": "4.0.8",
+            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+            "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
             "dev": true,
             "requires": {
-                "braces": "^3.0.2",
+                "braces": "^3.0.3",
                 "picomatch": "^2.3.1"
             }
         },
@@ -53453,8 +53454,9 @@
             }
         },
         "ws": {
-            "version": "7.5.5",
-            "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==",
+            "version": "7.5.10",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+            "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
             "dev": true
         },
         "x-default-browser": {