@nulogy/components 16.0.0 → 16.0.1

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",

package/dist/src/DateRange/DateRange.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
 import { isBefore, isSameDay } from "date-fns";
 import { useTranslation } from "react-i18next";
 import { DatePicker } from "../DatePickers";
@@ -99,21 +100,15 @@ const DateRange = forwardRef(({ dateFormat, onRangeChange, onStartDateChange, on
         error: rangeError,
         ...startDateInputProps,
     };
-    const startDateInput = (React.createElement(React.Fragment, null,
-        React.createElement(DatePicker, { dateFormat: dateFormat, selected: startDate, onChange: changeStartDateHandler, inputProps: startInputProps, errorMessage: startDateErrorMessage, minDate: minDate, maxDate: maxDate, highlightDates: highlightDates(startDate, endDate), locale: locale, disableFlipping: disableFlipping, ref: dateRef1 }),
-        showTimes && (React.createElement(StartTime, { variant: componentVariant, selected: startTime, defaultValue: defaultStartTime, "aria-label": t("select a start time"), minTime: minTime, maxTime: maxTime, timeFormat: timeFormat, interval: interval, onChange: changeStartTimeHandler, locale: locale, "data-testid": "daterange-start-time", ref: timeRef1, error: !!rangeError, ...startTimeProps }))));
-    const endDateInput = (React.createElement(React.Fragment, null,
-        showTimes && (React.createElement(EndTime, { variant: componentVariant, selected: endTime, defaultValue: defaultEndTime, minTime: minTime, maxTime: maxTime, timeFormat: timeFormat, interval: interval, onChange: changeEndTimeHandler, locale: locale, "aria-label": t("select an end time"), "data-testid": "daterange-end-time", ref: timeRef2, error: !!rangeError, ...endTimeProps })),
-        React.createElement(DatePicker, { dateFormat: dateFormat, selected: endDate, onChange: changeEndDateHandler, inputProps: {
-                "aria-label": t("select an end date"),
-                error: rangeError,
-                ...endDateInputProps,
-            }, errorMessage: endDateErrorMessage, minDate: minDate, maxDate: maxDate, highlightDates: highlightDates(startDate, endDate), locale: locale, disableFlipping: disableFlipping, ref: dateRef2 })));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(DateRangeStyles, null),
-        React.createElement(RangeContainer, { variant: componentVariant, labelProps: {
-                ...labelProps,
-                labelText: labelProps.labelText === DEFAULT_LABEL ? t("date range") : labelProps.labelText,
-            }, startComponent: startDateInput, endComponent: endDateInput, errorMessages: !disableRangeValidation ? [t(rangeError), errorMessage] : [errorMessage], ...props })));
+    const startDateInput = (_jsxs(_Fragment, { children: [_jsx(DatePicker, { dateFormat: dateFormat, selected: startDate, onChange: changeStartDateHandler, inputProps: startInputProps, errorMessage: startDateErrorMessage, minDate: minDate, maxDate: maxDate, highlightDates: highlightDates(startDate, endDate), locale: locale, disableFlipping: disableFlipping, ref: dateRef1 }), showTimes && (_jsx(StartTime, { variant: componentVariant, selected: startTime, defaultValue: defaultStartTime, "aria-label": t("select a start time"), minTime: minTime, maxTime: maxTime, timeFormat: timeFormat, interval: interval, onChange: changeStartTimeHandler, locale: locale, "data-testid": "daterange-start-time", ref: timeRef1, error: !!rangeError, ...startTimeProps }))] }));
+    const endDateInput = (_jsxs(_Fragment, { children: [showTimes && (_jsx(EndTime, { variant: componentVariant, selected: endTime, defaultValue: defaultEndTime, minTime: minTime, maxTime: maxTime, timeFormat: timeFormat, interval: interval, onChange: changeEndTimeHandler, locale: locale, "aria-label": t("select an end time"), "data-testid": "daterange-end-time", ref: timeRef2, error: !!rangeError, ...endTimeProps })), _jsx(DatePicker, { dateFormat: dateFormat, selected: endDate, onChange: changeEndDateHandler, inputProps: {
+                    "aria-label": t("select an end date"),
+                    error: rangeError,
+                    ...endDateInputProps,
+                }, errorMessage: endDateErrorMessage, minDate: minDate, maxDate: maxDate, highlightDates: highlightDates(startDate, endDate), locale: locale, disableFlipping: disableFlipping, ref: dateRef2 })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DateRangeStyles, {}), _jsx(RangeContainer, { variant: componentVariant, labelProps: {
+                    ...labelProps,
+                    labelText: labelProps.labelText === DEFAULT_LABEL ? t("date range") : labelProps.labelText,
+                }, startComponent: startDateInput, endComponent: endDateInput, errorMessages: !disableRangeValidation ? [t(rangeError), errorMessage] : [errorMessage], ...props })] }));
 });
 export default DateRange;

package/dist/src/DateRange/DateRange.story.d.ts

@@ -1,17 +1,16 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const DefaultStartAndEndDate: () => React.JSX.Element;
-export declare const DisabledRangeValidation: () => React.JSX.Element;
-export declare const WithCustomError: () => React.JSX.Element;
-export declare const CustomizingInputProps: () => React.JSX.Element;
-export declare const Disabled: () => React.JSX.Element;
-export declare const IndividualInputError: () => React.JSX.Element;
-export declare const WithTimes: () => React.JSX.Element;
-export declare const CustomizingInputPropsWithTimes: () => React.JSX.Element;
-export declare const WithDefaultStartAndEndTimes: () => React.JSX.Element;
-export declare const WithTimeError: () => React.JSX.Element;
-export declare const UsingRefToControlFocus: () => React.JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultStartAndEndDate: () => import("react/jsx-runtime").JSX.Element;
+export declare const DisabledRangeValidation: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomError: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomizingInputProps: () => import("react/jsx-runtime").JSX.Element;
+export declare const Disabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const IndividualInputError: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithTimes: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomizingInputPropsWithTimes: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithDefaultStartAndEndTimes: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithTimeError: () => import("react/jsx-runtime").JSX.Element;
+export declare const UsingRefToControlFocus: () => import("react/jsx-runtime").JSX.Element;