@nulogy/components 16.0.0 → 16.0.2

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

@@ -1,64 +1,63 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const Default: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomTimeFormat: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomTimeInterval: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomPlaceholder: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const disabled: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithErrorState: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithMinAndMaxTime: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomDefault: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithValue: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/TimePicker/TimePicker.story.js

@@ -1,46 +1,47 @@
-import React, { useState, useRef } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
 import { action } from "@storybook/addon-actions";
 import { TimePicker, Button } from "../index";
 export default {
     title: "Components/TimePicker",
 };
-export const Default = () => (React.createElement(TimePicker, { p: "x3", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Start Time" }));
+export const Default = () => (_jsx(TimePicker, { p: "x3", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Start Time" }));
 Default.story = {
     name: "default",
 };
-export const WithCustomTimeFormat = () => (React.createElement(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" }));
+export const WithCustomTimeFormat = () => (_jsx(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" }));
 WithCustomTimeFormat.story = {
     name: "with custom time format",
 };
-export const WithCustomTimeInterval = () => (React.createElement(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", interval: 30, onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" }));
+export const WithCustomTimeInterval = () => (_jsx(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", interval: 30, onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" }));
 WithCustomTimeInterval.story = {
     name: "with custom time interval",
 };
-export const WithCustomPlaceholder = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--" }));
+export const WithCustomPlaceholder = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--" }));
 WithCustomPlaceholder.story = {
     name: "with custom placeholder",
 };
-export const disabled = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--", disabled: true }));
+export const disabled = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--", disabled: true }));
 disabled.story = {
     name: "disabled",
 };
-export const WithErrorState = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", errorMessage: "This time is invalid" }));
+export const WithErrorState = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", errorMessage: "This time is invalid" }));
 WithErrorState.story = {
     name: "with error state",
 };
-export const WithMinAndMaxTime = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", minTime: "09:00", maxTime: "21:00" }));
+export const WithMinAndMaxTime = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", minTime: "09:00", maxTime: "21:00" }));
 WithMinAndMaxTime.story = {
     name: "with min and max time",
 };
-export const WithCustomDefault = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", defaultValue: "12:38 PM" }));
+export const WithCustomDefault = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", defaultValue: "12:38 PM" }));
 WithCustomDefault.story = {
     name: "with custom default",
 };
 const ControlledTimePicker = () => {
     const [value, setValue] = useState("13:43");
-    return React.createElement(TimePicker, { onChange: setValue, onInputChange: setValue, labelText: "End Time", value: value });
+    return _jsx(TimePicker, { onChange: setValue, onInputChange: setValue, labelText: "End Time", value: value });
 };
-export const WithValue = () => React.createElement(ControlledTimePicker, null);
+export const WithValue = () => _jsx(ControlledTimePicker, {});
 WithValue.story = {
     name: "with value",
 };
@@ -49,9 +50,7 @@ export const UsingRefToControlFocus = () => {
     const handleClick = () => {
         ref.current.focus();
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", ref: ref }),
-        React.createElement(Button, { onClick: handleClick }, "Focus the Toggle")));
+    return (_jsxs(_Fragment, { children: [_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", ref: ref }), _jsx(Button, { onClick: handleClick, children: "Focus the Toggle" })] }));
 };
 UsingRefToControlFocus.story = {
     name: "using ref to control focus",

package/dist/src/TimePicker/TimePickerInput.d.ts

@@ -2,5 +2,7 @@ import { InputFieldProps } from "../Input/InputField";
 type TimePickerInputProps = InputFieldProps & {
     dropdownIsOpen: boolean;
 };
-declare const TimePickerInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, TimePickerInputProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
+declare const TimePickerInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLInputElement>;
+}, TimePickerInputProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
 export default TimePickerInput;

package/dist/src/TimeRange/TimeRange.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-declare const TimeRange: React.ForwardRefExoticComponent<Omit<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+type TimeRangeProps = SpaceProps & {
     variant?: ComponentVariant;
     timeFormat?: string;
     onRangeChange?: (range: {
@@ -24,5 +24,6 @@ declare const TimeRange: React.ForwardRefExoticComponent<Omit<SpaceProps<Require
     endAriaLabel?: string;
     endTimeProps?: any;
     startTimeProps?: any;
-}, "ref"> & React.RefAttributes<unknown>>;
+};
+declare const TimeRange: React.ForwardRefExoticComponent<Omit<TimeRangeProps, "ref"> & React.RefAttributes<unknown>>;
 export default TimeRange;

package/dist/src/TimeRange/TimeRange.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef, useImperativeHandle, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { TimePicker } from "../TimePicker";
 import { RangeContainer } from "../RangeContainer";
@@ -71,9 +72,9 @@ const TimeRange = forwardRef(({ timeFormat, onRangeChange, onStartTimeChange, on
             });
         }
     };
-    const startInput = (React.createElement(TimePicker, { timeFormat: timeFormat, defaultValue: defaultStartTime, selected: startTime, onChange: changeStartTimeHandler, minTime: minTime, maxTime: endTime || maxTime, interval: interval, "aria-label": startAriaLabel || t("select a start time"), "data-testid": "timerange-start-time", ref: inputRef1, error: rangeError, variant: componentVariant, ...startTimeProps }));
-    const endInput = (React.createElement(TimePicker, { timeFormat: timeFormat, defaultValue: defaultEndTime, selected: endTime, onChange: changeEndTimeHandler, maxTime: maxTime, minTime: startTime || minTime, interval: interval, "aria-label": endAriaLabel || t("select an end time"), "data-testid": "timerange-end-time", ref: inputRef2, error: rangeError, variant: componentVariant, ...endTimeProps }));
-    return (React.createElement(RangeContainer, { labelProps: {
+    const startInput = (_jsx(TimePicker, { timeFormat: timeFormat, defaultValue: defaultStartTime, selected: startTime, onChange: changeStartTimeHandler, minTime: minTime, maxTime: endTime || maxTime, interval: interval, "aria-label": startAriaLabel || t("select a start time"), "data-testid": "timerange-start-time", ref: inputRef1, error: rangeError, variant: componentVariant, ...startTimeProps }));
+    const endInput = (_jsx(TimePicker, { timeFormat: timeFormat, defaultValue: defaultEndTime, selected: endTime, onChange: changeEndTimeHandler, maxTime: maxTime, minTime: startTime || minTime, interval: interval, "aria-label": endAriaLabel || t("select an end time"), "data-testid": "timerange-end-time", ref: inputRef2, error: rangeError, variant: componentVariant, ...endTimeProps }));
+    return (_jsx(RangeContainer, { labelProps: {
             ...labelProps,
             labelText: labelProps.labelText === DEFAULT_LABEL ? t("time range") : labelProps.labelText,
         }, startComponent: startInput, endComponent: endInput, errorMessages: !disableRangeValidation ? [rangeError, errorMessage] : [errorMessage], variant: componentVariant, ...props }));

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

@@ -1,34 +1,33 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const Default: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const DefaultSelections: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithRangeValidation: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithMinAndMaxTimeRange: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/TimeRange/TimeRange.story.js

@@ -1,23 +1,24 @@
-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 { Button, PrimaryButton } from "..";
 import TimeRange from "./TimeRange";
 export default {
     title: "Components/TimeRange",
 };
-export const Default = () => (React.createElement(TimeRange, { p: "x3", onRangeChange: action("range changed"), onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
+export const Default = () => (_jsx(TimeRange, { p: "x3", onRangeChange: action("range changed"), onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
 Default.story = {
     name: "default",
 };
-export const DefaultSelections = () => (React.createElement(TimeRange, { onRangeChange: action("range changed"), defaultStartTime: "12:00 AM", defaultEndTime: "01:30 PM", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
+export const DefaultSelections = () => (_jsx(TimeRange, { onRangeChange: action("range changed"), defaultStartTime: "12:00 AM", defaultEndTime: "01:30 PM", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
 DefaultSelections.story = {
     name: "default selections",
 };
-export const WithRangeValidation = () => (React.createElement(TimeRange, { onRangeChange: action("range changed"), defaultStartTime: "12:00 AM", defaultEndTime: "03:30 AM", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
+export const WithRangeValidation = () => (_jsx(TimeRange, { onRangeChange: action("range changed"), defaultStartTime: "12:00 AM", defaultEndTime: "03:30 AM", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
 WithRangeValidation.story = {
     name: "with range validation",
 };
-export const WithMinAndMaxTimeRange = () => (React.createElement(TimeRange, { onRangeChange: action("range changed"), minTime: "09:00", maxTime: "18:30", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
+export const WithMinAndMaxTimeRange = () => (_jsx(TimeRange, { onRangeChange: action("range changed"), minTime: "09:00", maxTime: "18:30", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
 WithMinAndMaxTimeRange.story = {
     name: "with min and max time range",
 };
@@ -29,10 +30,7 @@ export const UsingRefToControlFocus = () => {
     const handleClick2 = () => {
         ref.current.inputRef2.focus();
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TimeRange, { onRangeChange: action("range changed"), onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed"), ref: ref }),
-        React.createElement(Button, { onClick: handleClick, ml: "x2" }, "Focus the First Input"),
-        React.createElement(PrimaryButton, { onClick: handleClick2, ml: "x2" }, "Focus the Second Input")));
+    return (_jsxs(_Fragment, { children: [_jsx(TimeRange, { onRangeChange: action("range changed"), onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed"), ref: ref }), _jsx(Button, { onClick: handleClick, ml: "x2", children: "Focus the First Input" }), _jsx(PrimaryButton, { onClick: handleClick2, ml: "x2", children: "Focus the Second Input" })] }));
 };
 UsingRefToControlFocus.story = {
     name: "using ref to control focus",

package/dist/src/Toast/Toast.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { AlertProps } from "../Alert/Alert";
 type ToastProps = AlertProps & {
     triggered?: boolean;
@@ -32,5 +31,5 @@ export declare const toastAnimationConfig: {
         };
     };
 };
-export declare const Toast: ({ triggered, isCloseable, showDuration, onHide, onShow, children, onHidden, zIndex, ...props }: ToastProps) => React.JSX.Element;
+export declare const Toast: ({ triggered, isCloseable, showDuration, onHide, onShow, children, onHidden, zIndex, ...props }: ToastProps) => import("react/jsx-runtime").JSX.Element;
 export default Toast;

package/dist/src/Toast/Toast.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { AnimatePresence } from "framer-motion";
 import Alert from "../Alert/Alert";
 import { AnimatedBox } from "../Box";
@@ -73,7 +74,6 @@ export const Toast = ({ triggered = false, isCloseable = false, showDuration = T
     const handleCloseButtonClick = () => {
         hideToast(0);
     };
-    return (React.createElement(AnimatePresence, { initial: false }, visible && (React.createElement(AnimatedBox, { onMouseEnter: onMouseIn, onFocus: onMouseIn, onMouseLeave: onMouseOut, onBlur: onMouseOut, position: "fixed", bottom: "0", left: "0", right: "0", marginLeft: "auto", marginRight: "auto", width: "fit-content", zIndex: zIndex, boxShadow: "medium", layout: true, ...toastAnimationConfig },
-        React.createElement(Alert, { minWidth: "200px", maxWidth: "600px", isCloseable: isCloseable, onClose: handleCloseButtonClick, controlled: true, ...props }, children)))));
+    return (_jsx(AnimatePresence, { initial: false, children: visible && (_jsx(AnimatedBox, { onMouseEnter: onMouseIn, onFocus: onMouseIn, onMouseLeave: onMouseOut, onBlur: onMouseOut, position: "fixed", bottom: "0", left: "0", right: "0", marginLeft: "auto", marginRight: "auto", width: "fit-content", zIndex: zIndex, boxShadow: "medium", layout: true, ...toastAnimationConfig, children: _jsx(Alert, { minWidth: "200px", maxWidth: "600px", isCloseable: isCloseable, onClose: handleCloseButtonClick, controlled: true, ...props, children: children }) })) }));
 };
 export default Toast;

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

@@ -1,41 +1,40 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Toast: () => React.JSX.Element;
+export declare const _Toast: () => import("react/jsx-runtime").JSX.Element;
 export declare const _MultipleToastsExample: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const CustomizeLengthOfTimeToastIsVisible: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCloseButton: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithModal: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const CloseableWithMultiLineMessage: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const MultipleCloseableToastsExample: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/Toast/Toast.story.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { Button, DangerButton, IconicButton, Modal, PrimaryButton, Flex, Toast } from "../index";
 export default {
     title: "Components/Toast",
@@ -12,11 +13,9 @@ export const _Toast = () => {
         const onHideHandler = () => {
             setTriggered(false);
         };
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Button, { onClick: triggerToast }, "Save Changes"),
-            React.createElement(Toast, { triggered: triggered, onHide: onHideHandler }, "Saved")));
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: triggerToast, children: "Save Changes" }), _jsx(Toast, { triggered: triggered, onHide: onHideHandler, children: "Saved" })] }));
     };
-    return React.createElement(ToastWithTrigger, null);
+    return _jsx(ToastWithTrigger, {});
 };
 export const _MultipleToastsExample = () => {
     const MultipleToastsExample = () => {
@@ -68,17 +67,11 @@ export const _MultipleToastsExample = () => {
                 type: "danger",
             },
         ];
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Flex, { alignItems: "center" },
-                React.createElement(PrimaryButton, { onClick: () => triggerToast(TOAST_ACTIONS.SAVE), mr: "x2" }, "Save Changes"),
-                React.createElement(Button, { onClick: () => triggerToast(TOAST_ACTIONS.RESET), mr: "x2" }, "Reset"),
-                React.createElement(DangerButton, { onClick: () => triggerToast(TOAST_ACTIONS.ERROR), mr: "x2" }, "Trigger Error"),
-                React.createElement(IconicButton, { icon: "delete", onClick: () => triggerToast(TOAST_ACTIONS.DELETE) }, "Delete")),
-            TOASTS.map((toast) => {
-                return (React.createElement(Toast, { triggered: currentToast === toast.action, onHide: () => onHideHandler(toast.action), type: toast.type, key: toast.action }, toast.message));
-            })));
+        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(PrimaryButton, { onClick: () => triggerToast(TOAST_ACTIONS.SAVE), mr: "x2", children: "Save Changes" }), _jsx(Button, { onClick: () => triggerToast(TOAST_ACTIONS.RESET), mr: "x2", children: "Reset" }), _jsx(DangerButton, { onClick: () => triggerToast(TOAST_ACTIONS.ERROR), mr: "x2", children: "Trigger Error" }), _jsx(IconicButton, { icon: "delete", onClick: () => triggerToast(TOAST_ACTIONS.DELETE), children: "Delete" })] }), TOASTS.map((toast) => {
+                    return (_jsx(Toast, { triggered: currentToast === toast.action, onHide: () => onHideHandler(toast.action), type: toast.type, children: toast.message }, toast.action));
+                })] }));
     };
-    return React.createElement(MultipleToastsExample, null);
+    return _jsx(MultipleToastsExample, {});
 };
 _MultipleToastsExample.story = {
     name: "multiple toasts example",
@@ -92,11 +85,9 @@ export const CustomizeLengthOfTimeToastIsVisible = () => {
         const onHideHandler = () => {
             setTriggered(false);
         };
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Button, { onClick: triggerToast }, "Save Changes"),
-            React.createElement(Toast, { triggered: triggered, onHide: onHideHandler, showDuration: 5000 }, "Saved")));
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: triggerToast, children: "Save Changes" }), _jsx(Toast, { triggered: triggered, onHide: onHideHandler, showDuration: 5000, children: "Saved" })] }));
     };
-    return React.createElement(ToastWithTrigger, null);
+    return _jsx(ToastWithTrigger, {});
 };
 CustomizeLengthOfTimeToastIsVisible.story = {
     name: "customize length of time toast is visible",
@@ -110,18 +101,14 @@ export const WithCloseButton = () => {
         const onHideHandler = () => {
             setTriggered(false);
         };
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Button, { onClick: triggerToast }, "Save Changes"),
-            React.createElement(Toast, { triggered: triggered, onHide: onHideHandler, isCloseable: true }, "An error occurred while saving results. Please try again")));
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: triggerToast, children: "Save Changes" }), _jsx(Toast, { triggered: triggered, onHide: onHideHandler, isCloseable: true, children: "An error occurred while saving results. Please try again" })] }));
     };
-    return React.createElement(ToastWithTrigger, null);
+    return _jsx(ToastWithTrigger, {});
 };
 WithCloseButton.story = {
     name: "with close button",
 };
-export const WithModal = () => (React.createElement(React.Fragment, null,
-    React.createElement(Toast, { triggered: true, type: "danger", isCloseable: true, zIndex: 1001 }, "Something went wrong. Try again."),
-    React.createElement(Modal, { title: "Modal Title", onRequestClose: () => { }, maxWidth: "456px" }, "Modal Body")));
+export const WithModal = () => (_jsxs(_Fragment, { children: [_jsx(Toast, { triggered: true, type: "danger", isCloseable: true, zIndex: 1001, children: "Something went wrong. Try again." }), _jsx(Modal, { title: "Modal Title", onRequestClose: () => { }, maxWidth: "456px", children: "Modal Body" })] }));
 WithModal.story = {
     name: "with a modal",
 };
@@ -133,9 +120,7 @@ export const CloseableWithMultiLineMessage = () => {
     const onHideHandler = () => {
         setTriggered(false);
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: triggerToast }, "Save Changes"),
-        React.createElement(Toast, { triggered: triggered, onHide: onHideHandler, type: "danger", isCloseable: true }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quidem eveniet, repellat accusamus error reiciendis libero. Totam autem distinctio vo")));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: triggerToast, children: "Save Changes" }), _jsx(Toast, { triggered: triggered, onHide: onHideHandler, type: "danger", isCloseable: true, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quidem eveniet, repellat accusamus error reiciendis libero. Totam autem distinctio vo" })] }));
 };
 CloseableWithMultiLineMessage.story = {
     name: "closeable with a 150 character long multi-line message",
@@ -173,17 +158,11 @@ export const MultipleCloseableToastsExample = () => {
                 message: "An error occurred, please retry",
             },
         ];
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Flex, { alignItems: "center" },
-                React.createElement(PrimaryButton, { onClick: () => triggerToast(TOAST_ACTIONS.SAVE), mr: "x2" }, "Save Changes"),
-                React.createElement(Button, { onClick: () => triggerToast(TOAST_ACTIONS.RESET), mr: "x2" }, "Reset"),
-                React.createElement(DangerButton, { onClick: () => triggerToast(TOAST_ACTIONS.ERROR), mr: "x2" }, "Trigger Error"),
-                React.createElement(IconicButton, { icon: "delete", onClick: () => triggerToast(TOAST_ACTIONS.DELETE) }, "Delete")),
-            TOASTS.map((toast) => {
-                return (React.createElement(Toast, { triggered: currentToasts.includes(toast.action), onHide: () => onHideHandler(toast.action), type: "danger", key: toast.action, isCloseable: true }, toast.message));
-            })));
+        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(PrimaryButton, { onClick: () => triggerToast(TOAST_ACTIONS.SAVE), mr: "x2", children: "Save Changes" }), _jsx(Button, { onClick: () => triggerToast(TOAST_ACTIONS.RESET), mr: "x2", children: "Reset" }), _jsx(DangerButton, { onClick: () => triggerToast(TOAST_ACTIONS.ERROR), mr: "x2", children: "Trigger Error" }), _jsx(IconicButton, { icon: "delete", onClick: () => triggerToast(TOAST_ACTIONS.DELETE), children: "Delete" })] }), TOASTS.map((toast) => {
+                    return (_jsx(Toast, { triggered: currentToasts.includes(toast.action), onHide: () => onHideHandler(toast.action), type: "danger", isCloseable: true, children: toast.message }, toast.action));
+                })] }));
     };
-    return React.createElement(MultipleToastsExample, null);
+    return _jsx(MultipleToastsExample, {});
 };
 MultipleCloseableToastsExample.story = {
     name: "multiple closeable toasts example",

package/dist/src/ToastContainer/ToastContainer.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { ToasterProps } from "react-hot-toast";
 import { ToastOptions } from "./ToastFunction";
 type ToastContainerProps = {
@@ -6,5 +5,5 @@ type ToastContainerProps = {
     maxVisibleToasts?: number;
     toastOptions?: ToastOptions;
 } & Omit<ToasterProps, "gutter" | "toastOptions">;
-declare const ToastContainer: ({ gap, position, reverseOrder, containerClassName, toastOptions, maxVisibleToasts, ...props }: ToastContainerProps) => React.JSX.Element;
+declare const ToastContainer: ({ gap, position, reverseOrder, containerClassName, toastOptions, maxVisibleToasts, ...props }: ToastContainerProps) => import("react/jsx-runtime").JSX.Element;
 export default ToastContainer;

package/dist/src/ToastContainer/ToastContainer.js

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { toast as _toast, Toaster, useToasterStore } from "react-hot-toast";
 import { useTheme } from "styled-components";
 import { TOAST_SHOW_DURATION } from "../Toast/Toast";
@@ -12,7 +13,7 @@ const ToastContainer = ({ gap, position = "bottom-center", reverseOrder = false,
             .filter((_, i) => i >= maxVisibleToasts)
             .forEach((t) => _toast.dismiss(t.id));
     }, [toasts, maxVisibleToasts]);
-    return (React.createElement(Toaster, { gutter: gap || numberFromDimension(theme.space.x1), toastOptions: {
+    return (_jsx(Toaster, { gutter: gap || numberFromDimension(theme.space.x1), toastOptions: {
             custom: { ...toastOptions },
         }, position: position, reverseOrder: reverseOrder, containerClassName: containerClassName, ...props }));
 };

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

@@ -1,5 +1,4 @@
-import React from "react";
-export declare const WithEverything: () => React.JSX.Element;
+export declare const WithEverything: () => import("react/jsx-runtime").JSX.Element;
 declare const _default: {
     title: string;
 };

package/dist/src/ToastContainer/ToastContainer.story.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { PrimaryButton } from "../Button";
 import { Input } from "../Input";
 import { Flex } from "../Flex";
@@ -27,56 +28,30 @@ export const WithEverything = () => {
         { value: "warning", label: "Warning" },
         { value: "danger", label: "Danger" },
     ];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Heading1, null, "Toast container playground"),
-        React.createElement(Flex, { gap: "x3", flexDirection: "column", maxWidth: "600px" },
-            React.createElement(Flex, { flexDirection: "column", flexBasis: "100%", gap: "x2" },
-                React.createElement(Flex, { flexDirection: "column" },
-                    React.createElement(Text, { fontWeight: "bold" },
-                        "1) Add the ",
-                        "<ToastContainer />",
-                        " to a top level component in your UI tree. The ",
-                        "<ToastContainer />",
-                        " ",
-                        "should always be mounted when you call the `toast` function bellow"),
-                    React.createElement("pre", null, `import { ToastContainer } from "@nulogy/components"`),
-                    React.createElement("pre", null, `<ToastContainer position="${position}" maxVisibleToasts={${maxVisibleToasts}} toastOptions={{ duration: ${duration} }} />`)),
-                React.createElement(Input, { value: duration, labelText: "Show duration in milliseconds", onChange: (event) => {
-                        setDuration(Number(event.target.value));
-                    } }),
-                React.createElement(Input, { value: maxVisibleToasts, labelText: "Maximum number of visible toasts", onChange: (event) => {
-                        setMaxVisibleToasts(Number(event.target.value));
-                    } }),
-                React.createElement(Select, { defaultValue: position, options: [
-                        { value: "bottom-center", label: "Bottom center" },
-                        { value: "bottom-left", label: "Bottom left" },
-                        { value: "bottom-right", label: "Bottom right" },
-                        { value: "top-center", label: "Top center" },
-                        { value: "top-left", label: "Top left" },
-                        { value: "top-right", label: "Top right" },
-                    ], labelText: "Position", onChange: (value) => setPosition(value) })),
-            React.createElement(Flex, { flexDirection: "column", flexBasis: "100%", gap: "x2" },
-                React.createElement(Flex, { flexDirection: "column" },
-                    React.createElement(Text, { fontWeight: "bold" }, "Trigger toasts from anywhere using the `toast` function"),
-                    React.createElement("pre", null, `import { toast } from "@nulogy/components"`),
-                    React.createElement("pre", null, toastFunctionTemplate ?? getToastFunctionTemplate())),
-                React.createElement(Flex, { gap: "x2", flexDirection: "column" },
-                    React.createElement(Select, { defaultValue: type, options: [{ value: "random", label: "Random" }, ...types], labelText: "Type", onChange: (value) => setType(value) }),
-                    React.createElement(Select, { defaultValue: behavior, options: [
-                            { label: "Random", value: "random" },
-                            { label: "Dismissible", value: "dismissible" },
-                            { label: "Auto-dismissed", value: "auto" },
-                        ], labelText: "Behavior", onChange: (value) => setBehavior(value) }),
-                    React.createElement(PrimaryButton, { onClick: () => {
-                            const toastTypeValue = toastType();
-                            const isClosableValue = isCloseable();
-                            setToastFunctionTemplate(getToastFunctionTemplate({ isClosable: isClosableValue, toastType: toastTypeValue }));
-                            toast[toastTypeValue]("This is a toast content", {
-                                title: `This is a '${toastTypeValue}' type toast title`,
-                                isCloseable: isClosableValue,
-                            });
-                        } }, "Trigger toast"))),
-            React.createElement(ToastContainer, { position: position, toastOptions: { duration }, maxVisibleToasts: maxVisibleToasts }))));
+    return (_jsxs(_Fragment, { children: [_jsx(Heading1, { children: "Toast container playground" }), _jsxs(Flex, { gap: "x3", flexDirection: "column", maxWidth: "600px", children: [_jsxs(Flex, { flexDirection: "column", flexBasis: "100%", gap: "x2", children: [_jsxs(Flex, { flexDirection: "column", children: [_jsxs(Text, { fontWeight: "bold", children: ["1) Add the ", "<ToastContainer />", " to a top level component in your UI tree. The ", "<ToastContainer />", " ", "should always be mounted when you call the `toast` function bellow"] }), _jsx("pre", { children: `import { ToastContainer } from "@nulogy/components"` }), _jsx("pre", { children: `<ToastContainer position="${position}" maxVisibleToasts={${maxVisibleToasts}} toastOptions={{ duration: ${duration} }} />` })] }), _jsx(Input, { value: duration, labelText: "Show duration in milliseconds", onChange: (event) => {
+                                    setDuration(Number(event.target.value));
+                                } }), _jsx(Input, { value: maxVisibleToasts, labelText: "Maximum number of visible toasts", onChange: (event) => {
+                                    setMaxVisibleToasts(Number(event.target.value));
+                                } }), _jsx(Select, { defaultValue: position, options: [
+                                    { value: "bottom-center", label: "Bottom center" },
+                                    { value: "bottom-left", label: "Bottom left" },
+                                    { value: "bottom-right", label: "Bottom right" },
+                                    { value: "top-center", label: "Top center" },
+                                    { value: "top-left", label: "Top left" },
+                                    { value: "top-right", label: "Top right" },
+                                ], labelText: "Position", onChange: (value) => setPosition(value) })] }), _jsxs(Flex, { flexDirection: "column", flexBasis: "100%", gap: "x2", children: [_jsxs(Flex, { flexDirection: "column", children: [_jsx(Text, { fontWeight: "bold", children: "Trigger toasts from anywhere using the `toast` function" }), _jsx("pre", { children: `import { toast } from "@nulogy/components"` }), _jsx("pre", { children: toastFunctionTemplate ?? getToastFunctionTemplate() })] }), _jsxs(Flex, { gap: "x2", flexDirection: "column", children: [_jsx(Select, { defaultValue: type, options: [{ value: "random", label: "Random" }, ...types], labelText: "Type", onChange: (value) => setType(value) }), _jsx(Select, { defaultValue: behavior, options: [
+                                            { label: "Random", value: "random" },
+                                            { label: "Dismissible", value: "dismissible" },
+                                            { label: "Auto-dismissed", value: "auto" },
+                                        ], labelText: "Behavior", onChange: (value) => setBehavior(value) }), _jsx(PrimaryButton, { onClick: () => {
+                                            const toastTypeValue = toastType();
+                                            const isClosableValue = isCloseable();
+                                            setToastFunctionTemplate(getToastFunctionTemplate({ isClosable: isClosableValue, toastType: toastTypeValue }));
+                                            toast[toastTypeValue]("This is a toast content", {
+                                                title: `This is a '${toastTypeValue}' type toast title`,
+                                                isCloseable: isClosableValue,
+                                            });
+                                        }, children: "Trigger toast" })] })] }), _jsx(ToastContainer, { position: position, toastOptions: { duration }, maxVisibleToasts: maxVisibleToasts })] })] }));
 };
 export default {
     title: "Components/ToastContainer",