From 8b60e7ba720fa2233d2ff36d1b6970a970b7f588 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Mon, 9 Sep 2024 16:48:49 +0530
Subject: [PATCH 1/2] 2.3.13

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e3ad8765f..6921c2084 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.3.12",
+    "version": "2.3.13",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "@xola/ui-kit",
-            "version": "2.3.12",
+            "version": "2.3.13",
             "license": "MIT",
             "dependencies": {
                 "@headlessui/react": "^1.4.0",
diff --git a/package.json b/package.json
index 2318aec24..59006744c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.3.12",
+    "version": "2.3.13",
     "description": "Xola UI Kit",
     "license": "MIT",
     "repository": {

From 16bac1e4b524a6818ddaf5680d5ffe32ac5c6b59 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Mon, 16 Sep 2024 15:44:17 +0530
Subject: [PATCH 2/2] XS-414 Fixed issue

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

diff --git a/src/components/DatePicker/DatePicker.helpers.ts b/src/components/DatePicker/DatePicker.helpers.ts
index 33dd7e23d..9d4599af7 100644
--- a/src/components/DatePicker/DatePicker.helpers.ts
+++ b/src/components/DatePicker/DatePicker.helpers.ts
@@ -9,7 +9,7 @@ import type { DayPickerProps } from "react-day-picker";
 export type LocaleCode = keyof typeof locales;
 
 interface ExtendedDayPickerProps extends DayPickerProps {
-    monthsShort?: string;
+    monthsShort?: string[];
 }
 
 export type LocalizationProps = Pick<
@@ -19,12 +19,12 @@ export type LocalizationProps = Pick<
 
 const locales = {
     en: en,
-    en_US: en,
-    en_GB: enGB,
+    "en-US": en,
+    "en-GB": enGB,
 
     es: es,
-    es_ES: es,
-    es_MX: esMX,
+    "es-ES": es,
+    "es-MX": esMX,
 
     fr: fr,
     de: de,
diff --git a/src/components/DatePicker/LocalizedDayPicker.tsx b/src/components/DatePicker/LocalizedDayPicker.tsx
index 49ea8d03a..07dbc5169 100644
--- a/src/components/DatePicker/LocalizedDayPicker.tsx
+++ b/src/components/DatePicker/LocalizedDayPicker.tsx
@@ -1,22 +1,26 @@
 import clsx from "clsx";
 import React, { forwardRef, useContext, useEffect, useState } from "react";
 import DayPicker, { DayPickerProps } from "react-day-picker";
+import { kebabCase } from "lodash";
 import { Context } from "../Provider";
 import { getLocalizationProps, LocaleCode, LocalizationProps } from "./DatePicker.helpers";
 
 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({});
+        const localeCode = kebabCase(locale).toLowerCase();
 
         /** We don't want any localization-related props for "English" */
-        if (!locale || locale === "en" || locale === "en_US") return;
+        if (!localeCode || localeCode === "en" || localeCode === "en-us") return;
 
         getLocalizationProps(locale as LocaleCode).then(setLocalizationProps);
     }, [locale]);
 
+    /**
+     * Note: DayPicker expects locale in en-US, es, en-GB format
+     */
     return <DayPicker ref={ref} className={clsx(className)} {...localizationProps} {...rest} />;
 });