@nulogy/components 16.0.0 → 16.0.2

package/dist/src/Checkbox/Checkbox.story.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useRef } from "react";
 import { Checkbox, Button } from "../index";
 class CheckboxWithState extends React.Component {
@@ -13,52 +14,40 @@ class CheckboxWithState extends React.Component {
     }
     render() {
         const { checkbox1, checkbox2 } = this.state;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Checkbox, { id: "checkbox-1", checked: checkbox1, onChange: () => this.handleChange("checkbox1"), labelText: "I am controlled and checked" }),
-            React.createElement(Checkbox, { id: "checkbox-2", checked: checkbox2, onChange: () => this.handleChange("checkbox2"), labelText: "I am controlled and unchecked" })));
+        return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox-1", checked: checkbox1, onChange: () => this.handleChange("checkbox1"), labelText: "I am controlled and checked" }), _jsx(Checkbox, { id: "checkbox-2", checked: checkbox2, onChange: () => this.handleChange("checkbox2"), labelText: "I am controlled and unchecked" })] }));
     }
 }
 export default {
     title: "Components/Checkbox",
 };
-export const _Checkbox = () => React.createElement(Checkbox, { p: "x3", id: "checkbox", labelText: "I am a checkbox" });
-export const Multiline = () => React.createElement(Checkbox, { p: "x3", id: "checkbox", labelText: "Lorem ipsum dolor sit amet consecutor" });
-Multiline.decorators = [(story) => React.createElement("div", { style: { width: "200px" } }, story())];
-export const SetToDefaultChecked = () => React.createElement(Checkbox, { id: "checkbox", defaultChecked: true, labelText: "I am checked by default" });
+export const _Checkbox = () => _jsx(Checkbox, { p: "x3", id: "checkbox", labelText: "I am a checkbox" });
+export const Multiline = () => _jsx(Checkbox, { p: "x3", id: "checkbox", labelText: "Lorem ipsum dolor sit amet consecutor" });
+Multiline.decorators = [(story) => _jsx("div", { style: { width: "200px" }, children: story() })];
+export const SetToDefaultChecked = () => _jsx(Checkbox, { id: "checkbox", defaultChecked: true, labelText: "I am checked by default" });
 SetToDefaultChecked.story = {
     name: "Set to defaultChecked",
 };
-export const SetToDisabled = () => (React.createElement(React.Fragment, null,
-    React.createElement(Checkbox, { id: "checkbox-1", disabled: true, labelText: "I am disabled" }),
-    React.createElement(Checkbox, { id: "checkbox-2", checked: true, disabled: true, labelText: "I am disabled" })));
+export const SetToDisabled = () => (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox-1", disabled: true, labelText: "I am disabled" }), _jsx(Checkbox, { id: "checkbox-2", checked: true, disabled: true, labelText: "I am disabled" })] }));
 SetToDisabled.story = {
     name: "Set to disabled",
 };
-export const CheckboxWithNoLabel = () => (React.createElement(React.Fragment, null,
-    React.createElement(Checkbox, null)));
+export const CheckboxWithNoLabel = () => (_jsx(_Fragment, { children: _jsx(Checkbox, {}) }));
 CheckboxWithNoLabel.story = {
     name: "Checkbox with no label",
 };
-export const SetToError = () => (React.createElement(React.Fragment, null,
-    React.createElement(Checkbox, { id: "checkbox", error: true, labelText: "I am error" }),
-    React.createElement(Checkbox, { id: "checkbox", defaultChecked: true, error: true, labelText: "I am error" })));
+export const SetToError = () => (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox", error: true, labelText: "I am error" }), _jsx(Checkbox, { id: "checkbox", defaultChecked: true, error: true, labelText: "I am error" })] }));
 SetToError.story = {
     name: "Set to error",
 };
-export const SetToRequired = () => (React.createElement(React.Fragment, null,
-    React.createElement(Checkbox, { id: "checkbox", labelText: "I am a checkbox", required: true })));
+export const SetToRequired = () => (_jsx(_Fragment, { children: _jsx(Checkbox, { id: "checkbox", labelText: "I am a checkbox", required: true }) }));
 SetToRequired.story = {
     name: "Set to required",
 };
-export const Indeterminate = () => (React.createElement(React.Fragment, null,
-    React.createElement(Checkbox, { id: "checkbox", labelText: "I am an indeterminate checkbox", readOnly: true, checked: true, indeterminate: true }),
-    React.createElement(Checkbox, { id: "checkbox", labelText: "I am a unchecked indeterminate checkbox", readOnly: true, checked: false, indeterminate: true }),
-    React.createElement(Checkbox, { id: "checkbox", labelText: "I am an indeterminate checkbox with an error", readOnly: true, checked: true, indeterminate: true, error: true }),
-    React.createElement(Checkbox, { id: "checkbox", labelText: "I am a disabled indeterminate checkbox", readOnly: true, checked: true, indeterminate: true, disabled: true })));
+export const Indeterminate = () => (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox", labelText: "I am an indeterminate checkbox", readOnly: true, checked: true, indeterminate: true }), _jsx(Checkbox, { id: "checkbox", labelText: "I am a unchecked indeterminate checkbox", readOnly: true, checked: false, indeterminate: true }), _jsx(Checkbox, { id: "checkbox", labelText: "I am an indeterminate checkbox with an error", readOnly: true, checked: true, indeterminate: true, error: true }), _jsx(Checkbox, { id: "checkbox", labelText: "I am a disabled indeterminate checkbox", readOnly: true, checked: true, indeterminate: true, disabled: true })] }));
 Indeterminate.story = {
     name: "indeterminate",
 };
-export const WithState = () => React.createElement(CheckboxWithState, null);
+export const WithState = () => _jsx(CheckboxWithState, {});
 WithState.story = {
     name: "With state",
 };
@@ -67,9 +56,7 @@ export const UsingRefToControlFocus = () => {
     const handleClick = () => {
         ref.current.focus();
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Checkbox, { ref: ref, labelText: "I am a unchecked indeterminate checkbox", readOnly: true, checked: false, indeterminate: true }),
-        React.createElement(Button, { onClick: handleClick }, "Focus the Input")));
+    return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { ref: ref, labelText: "I am a unchecked indeterminate checkbox", readOnly: true, checked: false, indeterminate: true }), _jsx(Button, { onClick: handleClick, children: "Focus the Input" })] }));
 };
 UsingRefToControlFocus.story = {
     name: "using ref to control focus",

package/dist/src/Checkbox/CheckboxGroup.d.ts

@@ -16,5 +16,5 @@ interface CheckboxGroupProps {
     disabled?: boolean;
     hint?: string;
 }
-export default function CheckboxGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, hint, ...props }: CheckboxGroupProps): React.JSX.Element;
+export default function CheckboxGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, hint, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/Checkbox/CheckboxGroup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { styled } from "styled-components";
 import { HelpText, RequirementText } from "../FieldLabel";
@@ -9,21 +10,12 @@ import LabelText, { LabelContent } from "../FieldLabel/LabelText";
 import Checkbox from "./Checkbox";
 export default function CheckboxGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, hint, ...props }) {
     const otherProps = { ...props, errorMessage, errorList };
-    return (React.createElement(Fieldset, { className: className, id: id },
-        React.createElement(Legend, null,
-            React.createElement(LabelContent, { "data-testid": "label-content" },
-                React.createElement(LabelText, { "data-testid": "label-text" }, labelText),
-                requirementText && (React.createElement(RequirementText, { "data-testid": "requirement-text", ml: "none" }, requirementText)),
-                hint && (React.createElement(Tooltip, { tooltip: hint },
-                    React.createElement(InlineIcon, { color: "darkGrey", size: "x2", icon: "info" }))))),
-        helpText && React.createElement(HelpText, null, helpText),
-        getCheckboxButtons(otherProps),
-        React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
+    return (_jsxs(Fieldset, { className: className, id: id, children: [_jsx(Legend, { children: _jsxs(LabelContent, { "data-testid": "label-content", children: [_jsx(LabelText, { "data-testid": "label-text", children: labelText }), requirementText && (_jsx(RequirementText, { "data-testid": "requirement-text", ml: "none", children: requirementText })), hint && (_jsx(Tooltip, { tooltip: hint, children: _jsx(InlineIcon, { color: "darkGrey", size: "x2", icon: "info" }) }))] }) }), helpText && _jsx(HelpText, { children: helpText }), getCheckboxButtons(otherProps), _jsx(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })] }));
 }
 const getCheckboxButtons = (props) => {
     const checkboxButtons = React.Children.map(props.children, (checkbox) => {
         const { value, disabled, required, onChange, ...checkboxProps } = checkbox.props;
-        return (React.createElement(Checkbox, { ...checkboxProps, value: value, disabled: props.disabled || disabled, error: !!(props.errorMessage || props.errorList), required: props.required || required, name: props.name, defaultChecked: props.defaultValue ? props.defaultValue.includes(value) : undefined, checked: props.checkedValue ? props.checkedValue.includes(value) : undefined, onChange: props.onChange || onChange }));
+        return (_jsx(Checkbox, { ...checkboxProps, value: value, disabled: props.disabled || disabled, error: !!(props.errorMessage || props.errorList), required: props.required || required, name: props.name, defaultChecked: props.defaultValue ? props.defaultValue.includes(value) : undefined, checked: props.checkedValue ? props.checkedValue.includes(value) : undefined, onChange: props.onChange || onChange }));
     });
     return checkboxButtons;
 };

package/dist/src/Checkbox/CheckboxGroup.story.d.ts

@@ -1,36 +1,35 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const _CheckboxGroup: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const CheckboxGroupWithAllProps: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithErrorMessage: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithErrorList: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SetToDisabled: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const Controlled: () => React.JSX.Element;
+export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Checkbox/CheckboxGroup.story.js

@@ -1,45 +1,27 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox, CheckboxGroup } from "../index";
 const errorList = ["Error message 1", "Error message 2"];
 export default {
     title: "Components/CheckboxGroup",
 };
-export const _CheckboxGroup = () => (React.createElement(CheckboxGroup, { labelText: "Setting Selection", name: "settingSelection" },
-    React.createElement(Checkbox, { value: "a", labelText: "Option A" }),
-    React.createElement(Checkbox, { value: "b", labelText: "Option B" }),
-    React.createElement(Checkbox, { value: "c", labelText: "Option C" })));
+export const _CheckboxGroup = () => (_jsxs(CheckboxGroup, { labelText: "Setting Selection", name: "settingSelection", children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] }));
 _CheckboxGroup.story = {
     name: "CheckboxGroup",
 };
-export const CheckboxGroupWithAllProps = () => (React.createElement(CheckboxGroup, { labelText: "Setting Selection", name: "settingSelection", helpText: "Select a setting from the menu below:", required: true, requirementText: "(Required)", hint: "This is a hint", defaultValue: ["a"] },
-    React.createElement(Checkbox, { value: "a", labelText: "Option A" }),
-    React.createElement(Checkbox, { value: "b", labelText: "Option B" }),
-    React.createElement(Checkbox, { value: "c", labelText: "Option C" })));
+export const CheckboxGroupWithAllProps = () => (_jsxs(CheckboxGroup, { labelText: "Setting Selection", name: "settingSelection", helpText: "Select a setting from the menu below:", required: true, requirementText: "(Required)", hint: "This is a hint", defaultValue: ["a"], children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] }));
 CheckboxGroupWithAllProps.story = {
     name: "CheckboxGroup with all props",
 };
-export const WithErrorMessage = () => (React.createElement(CheckboxGroup, { errorMessage: "Please select an option", labelText: "Setting Selection", name: "settingSelection", defaultValue: ["a"] },
-    React.createElement(Checkbox, { value: "a", labelText: "Option A" }),
-    React.createElement(Checkbox, { value: "b", labelText: "Option B" }),
-    React.createElement(Checkbox, { value: "c", labelText: "Option C" })));
+export const WithErrorMessage = () => (_jsxs(CheckboxGroup, { errorMessage: "Please select an option", labelText: "Setting Selection", name: "settingSelection", defaultValue: ["a"], children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] }));
 WithErrorMessage.story = {
     name: "with error message",
 };
-export const WithErrorList = () => (React.createElement(CheckboxGroup, { errorMessage: "Please select an option", errorList: errorList, labelText: "Setting Selection", name: "settingSelection", defaultValue: ["a"] },
-    React.createElement(Checkbox, { value: "a", labelText: "Option A" }),
-    React.createElement(Checkbox, { value: "b", labelText: "Option B" }),
-    React.createElement(Checkbox, { value: "c", labelText: "Option C" })));
+export const WithErrorList = () => (_jsxs(CheckboxGroup, { errorMessage: "Please select an option", errorList: errorList, labelText: "Setting Selection", name: "settingSelection", defaultValue: ["a"], children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] }));
 WithErrorList.story = {
     name: "with error list",
 };
-export const SetToDisabled = () => (React.createElement(CheckboxGroup, { disabled: true, labelText: "Setting Selection", name: "settingSelection", defaultValue: ["a"] },
-    React.createElement(Checkbox, { value: "a", labelText: "Option A" }),
-    React.createElement(Checkbox, { value: "b", labelText: "Option B" }),
-    React.createElement(Checkbox, { value: "c", labelText: "Option C" })));
+export const SetToDisabled = () => (_jsxs(CheckboxGroup, { disabled: true, labelText: "Setting Selection", name: "settingSelection", defaultValue: ["a"], children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] }));
 SetToDisabled.story = {
     name: "Set to disabled",
 };
-export const Controlled = () => (React.createElement(CheckboxGroup, { labelText: "Setting Selection", name: "settingSelection", checkedValue: ["a"], onChange: () => { } },
-    React.createElement(Checkbox, { value: "a", labelText: "Option A" }),
-    React.createElement(Checkbox, { value: "b", labelText: "Option B" }),
-    React.createElement(Checkbox, { value: "c", labelText: "Option C" })));
+export const Controlled = () => (_jsxs(CheckboxGroup, { labelText: "Setting Selection", name: "settingSelection", checkedValue: ["a"], onChange: () => { }, children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] }));

package/dist/src/DatePickers/DatePicker.js

@@ -1,4 +1,5 @@
-import React, { forwardRef, useState, useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from "react";
 import { subDays, addDays, isValid, isAfter, isBefore, isSameDay } from "date-fns";
 import { BasePicker } from "./shared/components/BasePicker";
 import { DatePickerHeader } from "./shared/components/DatePickerHeader";
@@ -34,6 +35,6 @@ const DatePicker = forwardRef(({ selected, dateFormat = DEFAULT_DATE_FORMAT, onC
             ref.setOpen(!isOpen);
         }
     };
-    return (React.createElement(BasePicker, { ...props, selected: selectedDate, dateFormat: dateFormat, onChange: handleSelectedDateChange, ref: datePickerRef, defaultFormat: DEFAULT_DATE_FORMAT, defaultPlaceholder: DEFAULT_PLACEHOLDER, showMonthYearPicker: false, disabledKeyboardNavigation: true, onUpKeyPress: handleUpKey, onDownKeyPress: handleDownKey, onEnterKeyPress: handleEnterKey, renderHeader: (headerProps) => (React.createElement(DatePickerHeader, { locale: props.locale, ...headerProps })) }));
+    return (_jsx(BasePicker, { ...props, selected: selectedDate, dateFormat: dateFormat, onChange: handleSelectedDateChange, ref: datePickerRef, defaultFormat: DEFAULT_DATE_FORMAT, defaultPlaceholder: DEFAULT_PLACEHOLDER, showMonthYearPicker: false, disabledKeyboardNavigation: true, onUpKeyPress: handleUpKey, onDownKeyPress: handleDownKey, onEnterKeyPress: handleEnterKey, renderHeader: (headerProps) => (_jsx(DatePickerHeader, { locale: props.locale, ...headerProps })) }));
 });
 export default DatePicker;

package/dist/src/DatePickers/MonthPicker.js

@@ -1,4 +1,5 @@
-import React, { forwardRef, useState, useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from "react";
 import { noop } from "../utils/noop";
 import { BasePicker } from "./shared/components/BasePicker";
 import { MonthDatePickerHeader } from "./custom/MonthPickerHeader";
@@ -24,6 +25,6 @@ const MonthPicker = forwardRef(({ selected, dateFormat = DEFAULT_MONTH_FORMAT, o
             ref.setOpen(!isOpen);
         }
     };
-    return (React.createElement(BasePicker, { ...props, selected: selectedDate, onChange: handleSelectedDateChange, ref: monthPickerRef, dateFormat: dateFormat, defaultFormat: DEFAULT_MONTH_FORMAT, defaultPlaceholder: DEFAULT_PLACEHOLDER, showMonthYearPicker: true, renderHeader: (headerProps) => (React.createElement(MonthDatePickerHeader, { locale: props.locale, ...headerProps })), onUpKeyPress: handleUpKey, onDownKeyPress: handleDownKey, onEnterKeyPress: handleEnterKey }));
+    return (_jsx(BasePicker, { ...props, selected: selectedDate, onChange: handleSelectedDateChange, ref: monthPickerRef, dateFormat: dateFormat, defaultFormat: DEFAULT_MONTH_FORMAT, defaultPlaceholder: DEFAULT_PLACEHOLDER, showMonthYearPicker: true, renderHeader: (headerProps) => (_jsx(MonthDatePickerHeader, { locale: props.locale, ...headerProps })), onUpKeyPress: handleUpKey, onDownKeyPress: handleDownKey, onEnterKeyPress: handleEnterKey }));
 });
 export default MonthPicker;

package/dist/src/DatePickers/WeekPicker.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import propTypes from "@styled-system/prop-types";
 import { addDays, endOfWeek, getWeek, getYear, isAfter, isBefore, isSameDay, isValid, startOfWeek, subDays, } from "date-fns";
 import React, { forwardRef, useEffect, useState } from "react";
@@ -99,7 +100,7 @@ const WeekPicker = forwardRef(({ dateFormat, errorMessage, errorList, inputProps
         }
     };
     const renderCustomHeader = (props) => {
-        return React.createElement(DatePickerHeader, { locale: currentLocale, ...props });
+        return _jsx(DatePickerHeader, { locale: currentLocale, ...props });
     };
     const weekPickerRefHandler = (r) => {
         if (datePickerRef) {
@@ -114,11 +115,7 @@ const WeekPicker = forwardRef(({ dateFormat, errorMessage, errorList, inputProps
         placeholder: (inputProps && inputProps.placeholder) ||
             (finalDateFormat === defaultDateFormat ? defaultPlaceholder : finalDateFormat),
     };
-    const customInput = (React.createElement(DatePickerInput, { locale: currentLocale, variant: componentVariant, inputProps: customInputProps, dateFormat: finalDateFormat, onInputChange: handleInputChange, onUpKeyPress: handleUpKey, onDownKeyPress: handleDownKey, onEnterKeyPress: handleEnterKey }));
-    return (React.createElement(Field, { className: `${className} nds-date-picker`, ...spaceProps },
-        React.createElement(DatePickerStyles, null),
-        React.createElement(WeekPickerStyles, { variant: componentVariant }),
-        React.createElement(ReactDatePicker, { showWeekNumbers: true, showWeekPicker: true, weekLabel: weekShorthand, calendarStartDay: WEEK_START_DAY, selected: selectedDate, openToDate: selectedDate, dateFormat: finalDateFormat, onChange: handleSelectedDateChange, customInput: customInput, renderCustomHeader: renderCustomHeader, strictParsing: true, minDate: roundedMinDate, maxDate: roundedMaxDate, locale: NDS_TO_DATE_FN_LOCALES_MAP[currentLocale], ref: weekPickerRefHandler, onFocus: onFocus, onBlur: onBlur, popperModifiers: getPopperModifiers(disableFlipping), disabledKeyboardNavigation: true }),
-        React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
+    const customInput = (_jsx(DatePickerInput, { locale: currentLocale, variant: componentVariant, inputProps: customInputProps, dateFormat: finalDateFormat, onInputChange: handleInputChange, onUpKeyPress: handleUpKey, onDownKeyPress: handleDownKey, onEnterKeyPress: handleEnterKey }));
+    return (_jsxs(Field, { className: `${className} nds-date-picker`, ...spaceProps, children: [_jsx(DatePickerStyles, {}), _jsx(WeekPickerStyles, { variant: componentVariant }), _jsx(ReactDatePicker, { showWeekNumbers: true, showWeekPicker: true, weekLabel: weekShorthand, calendarStartDay: WEEK_START_DAY, selected: selectedDate, openToDate: selectedDate, dateFormat: finalDateFormat, onChange: handleSelectedDateChange, customInput: customInput, renderCustomHeader: renderCustomHeader, strictParsing: true, minDate: roundedMinDate, maxDate: roundedMaxDate, locale: NDS_TO_DATE_FN_LOCALES_MAP[currentLocale], ref: weekPickerRefHandler, onFocus: onFocus, onBlur: onBlur, popperModifiers: getPopperModifiers(disableFlipping), disabledKeyboardNavigation: true }), _jsx(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })] }));
 });
 export default WeekPicker;

package/dist/src/DatePickers/custom/MonthPickerHeader.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
 import { ReactDatePickerCustomHeaderProps } from "react-datepicker";
 export declare function MonthDatePickerHeader({ date, increaseYear, decreaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: ReactDatePickerCustomHeaderProps & {
     locale?: string;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/DatePickers/custom/MonthPickerHeader.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { ControlIcon } from "../../Button";
 import { Flex } from "../../Flex";
@@ -6,8 +6,5 @@ import { localizedFormat } from "../../utils/localized-date-fns";
 import { Text } from "../../Type";
 export function MonthDatePickerHeader({ date, increaseYear, decreaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }) {
     const { t } = useTranslation();
-    return (React.createElement(Flex, { justifyContent: "space-between", alignItems: "center", pb: "x1_5" },
-        React.createElement(ControlIcon, { icon: "leftArrow", label: t("go to previous year"), onClick: decreaseYear, disabled: prevMonthButtonDisabled }),
-        React.createElement(Text, { fontWeight: "bold", color: "blackBlue", px: "x8", fontSize: "large", style: { textTransform: "capitalize" } }, localizedFormat(date, "yyyy", locale)),
-        React.createElement(ControlIcon, { icon: "rightArrow", label: t("go to next year"), onClick: increaseYear, disabled: nextMonthButtonDisabled })));
+    return (_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", pb: "x1_5", children: [_jsx(ControlIcon, { icon: "leftArrow", label: t("go to previous year"), onClick: decreaseYear, disabled: prevMonthButtonDisabled }), _jsx(Text, { fontWeight: "bold", color: "blackBlue", px: "x8", fontSize: "large", style: { textTransform: "capitalize" }, children: localizedFormat(date, "yyyy", locale) }), _jsx(ControlIcon, { icon: "rightArrow", label: t("go to next year"), onClick: increaseYear, disabled: nextMonthButtonDisabled })] }));
 }

package/dist/src/DatePickers/shared/components/BasePicker.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useState } from "react";
 import propTypes from "@styled-system/prop-types";
 import ReactDatePicker from "react-datepicker";
@@ -43,7 +44,7 @@ export const BasePicker = forwardRef(({ dateFormat, errorMessage, errorList, inp
         ...inputProps,
         placeholder: (inputProps && inputProps.placeholder) || (dateFormat === defaultFormat ? defaultPlaceholder : dateFormat),
     };
-    const customInput = (React.createElement(DatePickerInput, { locale: currentLocale, variant: componentVariant, inputProps: customInputProps, dateFormat: dateFormat, onInputChange: handleInputChange, onUpKeyPress: onUpKeyPress, onDownKeyPress: onDownKeyPress, onEnterKeyPress: handleEnterKey }));
+    const customInput = (_jsx(DatePickerInput, { locale: currentLocale, variant: componentVariant, inputProps: customInputProps, dateFormat: dateFormat, onInputChange: handleInputChange, onUpKeyPress: onUpKeyPress, onDownKeyPress: onDownKeyPress, onEnterKeyPress: handleEnterKey }));
     const pickerRefHandler = (r) => {
         if (pickerRef) {
             pickerRef["current"] = r;
@@ -51,8 +52,5 @@ export const BasePicker = forwardRef(({ dateFormat, errorMessage, errorList, inp
         onRefChange(r);
     };
     const spaceProps = getSubset(props, propTypes.space);
-    return (React.createElement(Field, { className: `${className} nds-date-picker`, ...spaceProps },
-        React.createElement(DatePickerStyles, null),
-        React.createElement(ReactDatePicker, { highlightDates: highlightDates, selected: selected, openToDate: selected, dateFormat: dateFormat, onChange: onChange, customInput: customInput, renderCustomHeader: renderHeader, strictParsing: true, minDate: minDate, maxDate: maxDate, locale: NDS_TO_DATE_FN_LOCALES_MAP[currentLocale], ref: pickerRefHandler, onFocus: onFocus, onBlur: onBlur, showMonthYearPicker: showMonthYearPicker, showWeekNumbers: showWeekNumbers, name: name, required: required, onEnterKeyPress: onEnterKeyPress, popperModifiers: getPopperModifiers(disableFlipping), disabledKeyboardNavigation: disabledKeyboardNavigation }),
-        React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
+    return (_jsxs(Field, { className: `${className} nds-date-picker`, ...spaceProps, children: [_jsx(DatePickerStyles, {}), _jsx(ReactDatePicker, { highlightDates: highlightDates, selected: selected, openToDate: selected, dateFormat: dateFormat, onChange: onChange, customInput: customInput, renderCustomHeader: renderHeader, strictParsing: true, minDate: minDate, maxDate: maxDate, locale: NDS_TO_DATE_FN_LOCALES_MAP[currentLocale], ref: pickerRefHandler, onFocus: onFocus, onBlur: onBlur, showMonthYearPicker: showMonthYearPicker, showWeekNumbers: showWeekNumbers, name: name, required: required, onEnterKeyPress: onEnterKeyPress, popperModifiers: getPopperModifiers(disableFlipping), disabledKeyboardNavigation: disabledKeyboardNavigation }), _jsx(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })] }));
 });

package/dist/src/DatePickers/shared/components/DatePickerHeader.d.ts

@@ -8,8 +8,8 @@ type Props = {
     nextMonthButtonDisabled: boolean;
     locale?: string;
 };
-export declare function DatePickerHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: Props): React.JSX.Element;
+export declare function DatePickerHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: Props): import("react/jsx-runtime").JSX.Element;
 export declare function MonthDatePickerHeader({ date, increaseYear, decreaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: ReactDatePickerCustomHeaderProps & {
     locale?: string;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/DatePickers/shared/components/DatePickerHeader.js

@@ -1,19 +1,13 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { Flex } from "../../../Flex";
 import { Text } from "../../../Type";
 import { ControlIcon } from "../../../Button";
 import { localizedFormat } from "../../../utils/localized-date-fns";
 export function DatePickerHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }) {
-    return (React.createElement(Flex, { justifyContent: "space-between", alignItems: "center", py: "half", px: "x1" },
-        React.createElement(ControlIcon, { icon: "leftArrow", label: "go to previous month", onClick: decreaseMonth, disabled: prevMonthButtonDisabled }),
-        React.createElement(Text, { fontWeight: "bold", color: "blackBlue", px: "x1", ml: "half", fontSize: "large", style: { textTransform: "capitalize" } }, localizedFormat(date, "MMMM yyyy", locale)),
-        React.createElement(ControlIcon, { icon: "rightArrow", label: "go to next month", onClick: increaseMonth, disabled: nextMonthButtonDisabled })));
+    return (_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", py: "half", px: "x1", children: [_jsx(ControlIcon, { icon: "leftArrow", label: "go to previous month", onClick: decreaseMonth, disabled: prevMonthButtonDisabled }), _jsx(Text, { fontWeight: "bold", color: "blackBlue", px: "x1", ml: "half", fontSize: "large", style: { textTransform: "capitalize" }, children: localizedFormat(date, "MMMM yyyy", locale) }), _jsx(ControlIcon, { icon: "rightArrow", label: "go to next month", onClick: increaseMonth, disabled: nextMonthButtonDisabled })] }));
 }
 export function MonthDatePickerHeader({ date, increaseYear, decreaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }) {
     const { t } = useTranslation();
-    return (React.createElement(Flex, { justifyContent: "space-between", alignItems: "center", pb: "x1_5" },
-        React.createElement(ControlIcon, { icon: "leftArrow", label: t("go to previous year"), onClick: decreaseYear, disabled: prevMonthButtonDisabled }),
-        React.createElement(Text, { fontWeight: "bold", color: "blackBlue", px: "x8", fontSize: "large", style: { textTransform: "capitalize" } }, localizedFormat(date, "yyyy", locale)),
-        React.createElement(ControlIcon, { icon: "rightArrow", label: t("go to next year"), onClick: increaseYear, disabled: nextMonthButtonDisabled })));
+    return (_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", pb: "x1_5", children: [_jsx(ControlIcon, { icon: "leftArrow", label: t("go to previous year"), onClick: decreaseYear, disabled: prevMonthButtonDisabled }), _jsx(Text, { fontWeight: "bold", color: "blackBlue", px: "x8", fontSize: "large", style: { textTransform: "capitalize" }, children: localizedFormat(date, "yyyy", locale) }), _jsx(ControlIcon, { icon: "rightArrow", label: t("go to next year"), onClick: increaseYear, disabled: nextMonthButtonDisabled })] }));
 }

package/dist/src/DatePickers/shared/components/DatePickerInput.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import { InputField, InputFieldDefaultProps } from "../../../Input/InputField";
@@ -29,6 +30,6 @@ const DatePickerInput = forwardRef(({ onChange, onClick, onBlur, onFocus, onInpu
                 break;
         }
     };
-    return (React.createElement(InputField, { onBlur: onBlur, onFocus: onFocus, ref: ref, variant: variant, "aria-label": ariaLabel || t("select a date"), autoComplete: "off", value: value, placeholder: placeholder, iconRight: "calendarToday", iconRightSize: "x2", onClick: onClick, onKeyDown: handleKeyDown, onChange: handleChange, ...inputFieldProps }));
+    return (_jsx(InputField, { onBlur: onBlur, onFocus: onFocus, ref: ref, variant: variant, "aria-label": ariaLabel || t("select a date"), autoComplete: "off", value: value, placeholder: placeholder, iconRight: "calendarToday", iconRightSize: "x2", onClick: onClick, onKeyDown: handleKeyDown, onChange: handleChange, ...inputFieldProps }));
 });
 export default DatePickerInput;

package/dist/src/DatePickers/stories/DatePicker.story.d.ts

@@ -9,8 +9,8 @@ export default _default;
 type Story = StoryObj<typeof DatePicker>;
 export declare const Default: Story;
 export declare const WithCustomDateFormat: Story;
-export declare const WithCustomPlaceholder: () => React.JSX.Element;
-export declare const WithErrorState: () => React.JSX.Element;
-export declare const WithMinAndMaxDate: () => React.JSX.Element;
+export declare const WithCustomPlaceholder: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithErrorState: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithMinAndMaxDate: () => import("react/jsx-runtime").JSX.Element;
 export declare const DisableFlipping: Story;
-export declare const UsingRefToControlFocus: () => React.JSX.Element;
+export declare const UsingRefToControlFocus: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/DatePickers/stories/DatePicker.story.js

@@ -1,4 +1,5 @@
-import React, { useRef } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { action } from "@storybook/addon-actions";
 import { DatePicker } from "../index";
 import { Button } from "../..";
@@ -44,9 +45,9 @@ export const WithCustomDateFormat = {
         },
     },
 };
-export const WithCustomPlaceholder = () => (React.createElement(DatePicker, { dateFormat: "MMMM d, yyyy", onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date", placeholder: "Month day, year" } }));
-export const WithErrorState = () => (React.createElement(DatePicker, { dateFormat: "MMMM d, yyyy", onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" }, errorMessage: "The date is invalid" }));
-export const WithMinAndMaxDate = () => (React.createElement(DatePicker, { selected: new Date("2019-01-05T05:00:00.000Z"), minDate: new Date("2019-01-03T05:00:00.000Z"), maxDate: new Date("2019-01-10T05:00:00.000Z"), onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" } }));
+export const WithCustomPlaceholder = () => (_jsx(DatePicker, { dateFormat: "MMMM d, yyyy", onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date", placeholder: "Month day, year" } }));
+export const WithErrorState = () => (_jsx(DatePicker, { dateFormat: "MMMM d, yyyy", onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" }, errorMessage: "The date is invalid" }));
+export const WithMinAndMaxDate = () => (_jsx(DatePicker, { selected: new Date("2019-01-05T05:00:00.000Z"), minDate: new Date("2019-01-03T05:00:00.000Z"), maxDate: new Date("2019-01-10T05:00:00.000Z"), onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" } }));
 export const DisableFlipping = {
     args: {
         selected: selectedDateExamples[0],
@@ -72,7 +73,5 @@ export const UsingRefToControlFocus = () => {
     const handleClick = () => {
         ref.current.setFocus();
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(DatePicker, { dateFormat: "MMMM d, yyyy", onChange: action("date changed"), onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" }, ref: ref }),
-        React.createElement(Button, { onClick: handleClick }, "Focus the Toggle")));
+    return (_jsxs(_Fragment, { children: [_jsx(DatePicker, { dateFormat: "MMMM d, yyyy", onChange: action("date changed"), onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" }, ref: ref }), _jsx(Button, { onClick: handleClick, children: "Focus the Toggle" })] }));
 };

package/dist/src/DatePickers/stories/MonthPicker.story.d.ts

@@ -1,11 +1,10 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const WithPlaceholder: () => React.JSX.Element;
-export declare const Disabled: () => React.JSX.Element;
-export declare const WithDefaultValue: () => React.JSX.Element;
-export declare const WithMinMaxDate: () => React.JSX.Element;
-export declare const AdvancedUsage: () => React.JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithPlaceholder: () => import("react/jsx-runtime").JSX.Element;
+export declare const Disabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithDefaultValue: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithMinMaxDate: () => import("react/jsx-runtime").JSX.Element;
+export declare const AdvancedUsage: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/DatePickers/stories/MonthPicker.story.js

@@ -1,29 +1,30 @@
-import React, { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import { format } from "date-fns";
 import MonthPicker from "../MonthPicker";
 export default {
     title: "Components/DatePickers/MonthPicker",
 };
 export const Default = () => {
-    return React.createElement(MonthPicker, { inputProps: { labelText: "Expiry Date" } });
+    return _jsx(MonthPicker, { inputProps: { labelText: "Expiry Date" } });
 };
 export const WithPlaceholder = () => {
-    return React.createElement(MonthPicker, { inputProps: { labelText: "Expiry Date", placeholder: "Select month" } });
+    return _jsx(MonthPicker, { inputProps: { labelText: "Expiry Date", placeholder: "Select month" } });
 };
 export const Disabled = () => {
-    return React.createElement(MonthPicker, { inputProps: { labelText: "Expiry Date", disabled: true } });
+    return _jsx(MonthPicker, { inputProps: { labelText: "Expiry Date", disabled: true } });
 };
 export const WithDefaultValue = () => {
     const defaultDate = new Date();
     defaultDate.setMonth(defaultDate.getMonth() - 1);
-    return React.createElement(MonthPicker, { inputProps: { labelText: "Expiry Date" }, selected: defaultDate });
+    return _jsx(MonthPicker, { inputProps: { labelText: "Expiry Date" }, selected: defaultDate });
 };
 export const WithMinMaxDate = () => {
     const minDate = new Date();
     minDate.setFullYear(minDate.getFullYear() - 1);
     const maxDate = new Date();
     maxDate.setFullYear(maxDate.getFullYear() + 1);
-    return React.createElement(MonthPicker, { inputProps: { labelText: "Expiry Date" }, minDate: minDate, maxDate: new Date() });
+    return _jsx(MonthPicker, { inputProps: { labelText: "Expiry Date" }, minDate: minDate, maxDate: new Date() });
 };
 export const AdvancedUsage = () => {
     const [selectedDate, setSelectedDate] = useState(null);
@@ -39,7 +40,7 @@ export const AdvancedUsage = () => {
         setInputValue(value);
         // Custom validation could be implemented here
     };
-    return (React.createElement(MonthPicker, { selected: selectedDate, onChange: handleMonthChange, onInputChange: handleInputChange, minDate: new Date(2023, 0, 1), maxDate: new Date(), errorMessage: hasError ? "Please select a valid month" : undefined, inputProps: {
+    return (_jsx(MonthPicker, { selected: selectedDate, onChange: handleMonthChange, onInputChange: handleInputChange, minDate: new Date(2023, 0, 1), maxDate: new Date(), errorMessage: hasError ? "Please select a valid month" : undefined, inputProps: {
             value: inputValue,
             inputWidth: "300px",
             placeholder: "Select a month",

package/dist/src/DatePickers/stories/WeekPicker.story.d.ts

@@ -1,13 +1,12 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const WithError: () => React.JSX.Element;
-export declare const WithMinMaxDates: () => React.JSX.Element;
-export declare const WithCustomDateFormat: () => React.JSX.Element;
-export declare const WithPreselectedDate: () => React.JSX.Element;
-export declare const WithCustomLocale: () => React.JSX.Element;
-export declare const Disabled: () => React.JSX.Element;
-export declare const AdvancedUsage: () => React.JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithError: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithMinMaxDates: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomDateFormat: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithPreselectedDate: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomLocale: () => import("react/jsx-runtime").JSX.Element;
+export declare const Disabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const AdvancedUsage: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/DatePickers/stories/WeekPicker.story.js

@@ -1,21 +1,20 @@
-import React, { useState } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { format } from "date-fns";
 import { Text } from "../../Type";
 import WeekPicker from "../WeekPicker";
 export default {
     title: "Components/DatePickers/WeekPicker",
 };
-export const Default = () => React.createElement(WeekPicker, { inputProps: { labelText: "Expiry Date" } });
-export const WithError = () => (React.createElement(WeekPicker, { inputProps: { labelText: "Week Selection" }, errorMessage: "Please select a valid week" }));
+export const Default = () => _jsx(WeekPicker, { inputProps: { labelText: "Expiry Date" } });
+export const WithError = () => (_jsx(WeekPicker, { inputProps: { labelText: "Week Selection" }, errorMessage: "Please select a valid week" }));
 export const WithMinMaxDates = () => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Text, { mb: "x2" }, "If a min or a max day falls in the middle of the week, no day in the week will be selectable."),
-        React.createElement(WeekPicker, { inputProps: { labelText: "Select Week" }, minDate: new Date("01/15/2025"), maxDate: new Date("01/29/2025") })));
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { mb: "x2", children: "If a min or a max day falls in the middle of the week, no day in the week will be selectable." }), _jsx(WeekPicker, { inputProps: { labelText: "Select Week" }, minDate: new Date("01/15/2025"), maxDate: new Date("01/29/2025") })] }));
 };
-export const WithCustomDateFormat = () => (React.createElement(WeekPicker, { inputProps: { labelText: "Week", inputWidth: "320px" }, dateFormat: "'Week starting' dd/MM/yyyy" }));
-export const WithPreselectedDate = () => (React.createElement(WeekPicker, { inputProps: { labelText: "Selected Week" }, selected: new Date("01/21/2025") }));
-export const WithCustomLocale = () => React.createElement(WeekPicker, { inputProps: { labelText: "Semaine" }, locale: "fr_FR" });
-export const Disabled = () => (React.createElement(WeekPicker, { inputProps: {
+export const WithCustomDateFormat = () => (_jsx(WeekPicker, { inputProps: { labelText: "Week", inputWidth: "320px" }, dateFormat: "'Week starting' dd/MM/yyyy" }));
+export const WithPreselectedDate = () => (_jsx(WeekPicker, { inputProps: { labelText: "Selected Week" }, selected: new Date("01/21/2025") }));
+export const WithCustomLocale = () => _jsx(WeekPicker, { inputProps: { labelText: "Semaine" }, locale: "fr_FR" });
+export const Disabled = () => (_jsx(WeekPicker, { inputProps: {
         labelText: "Week Selection",
         disabled: true,
     } }));
@@ -33,7 +32,7 @@ export const AdvancedUsage = () => {
         setInputValue(value);
         // Custom validation could be implemented here
     };
-    return (React.createElement(WeekPicker, { selected: selectedWeek?.startDate, onChange: handleWeekChange, onInputChange: handleInputChange, minDate: new Date(2023, 0, 1), maxDate: new Date(), errorMessage: hasError ? "Please select a valid week" : undefined, inputProps: {
+    return (_jsx(WeekPicker, { selected: selectedWeek?.startDate, onChange: handleWeekChange, onInputChange: handleInputChange, minDate: new Date(2023, 0, 1), maxDate: new Date(), errorMessage: hasError ? "Please select a valid week" : undefined, inputProps: {
             value: inputValue,
             inputWidth: "560px",
             placeholder: "Select a week",