XS-414 Fixed issue

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,

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