@nulogy/components 16.0.0 → 16.0.1

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

package/dist/src/ToastContainer/ToastFunction.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { AnimatePresence } from "framer-motion";
 import { toast as _toast } from "react-hot-toast";
 import { Alert } from "../Alert";
@@ -8,13 +8,12 @@ const CustomToast = ({ isVisible, id, children, ...props }) => {
     const handleClose = () => {
         _toast.dismiss(id);
     };
-    return (React.createElement(AnimatePresence, null, isVisible && (React.createElement(AnimatedBox, { key: "notification", role: "alert", ...toastAnimationConfig },
-        React.createElement(Alert, { controlled: true, onClose: handleClose, ...props }, children)))));
+    return (_jsx(AnimatePresence, { children: isVisible && (_jsx(AnimatedBox, { role: "alert", ...toastAnimationConfig, children: _jsx(Alert, { controlled: true, onClose: handleClose, ...props, children: children }) }, "notification")) }));
 };
 const toast = {
-    danger: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, { id: t.id, isVisible: t.visible, type: "danger", ...props }, children)), { duration: props.isCloseable ? Infinity : options.duration, ...options }),
-    informative: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, { id: t.id, isVisible: t.visible, type: "informative", ...props }, children)), { duration: props.isCloseable ? Infinity : options.duration, ...options }),
-    success: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, { id: t.id, isVisible: t.visible, type: "success", ...props }, children)), { duration: props.isCloseable ? Infinity : options.duration, ...options }),
-    warning: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, { id: t.id, isVisible: t.visible, type: "warning", ...props }, children)), { duration: props.isCloseable ? Infinity : options.duration, ...options }),
+    danger: (children, props = {}, options = {}) => _toast.custom((t) => (_jsx(CustomToast, { id: t.id, isVisible: t.visible, type: "danger", ...props, children: children })), { duration: props.isCloseable ? Infinity : options.duration, ...options }),
+    informative: (children, props = {}, options = {}) => _toast.custom((t) => (_jsx(CustomToast, { id: t.id, isVisible: t.visible, type: "informative", ...props, children: children })), { duration: props.isCloseable ? Infinity : options.duration, ...options }),
+    success: (children, props = {}, options = {}) => _toast.custom((t) => (_jsx(CustomToast, { id: t.id, isVisible: t.visible, type: "success", ...props, children: children })), { duration: props.isCloseable ? Infinity : options.duration, ...options }),
+    warning: (children, props = {}, options = {}) => _toast.custom((t) => (_jsx(CustomToast, { id: t.id, isVisible: t.visible, type: "warning", ...props, children: children })), { duration: props.isCloseable ? Infinity : options.duration, ...options }),
 };
 export default toast;

package/dist/src/Toggle/Toggle.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect } from "react";
 import propTypes from "@styled-system/prop-types";
 import { FieldLabel } from "../FieldLabel";
@@ -36,10 +37,6 @@ const Toggle = React.forwardRef(({ checked, variant, className, labelText, requi
             console.warn("onChange or onClick is required when checked is set.");
         }
     }, []);
-    return (React.createElement(Field, { className: className, alignItems: "flex-start", py: "half", ...spaceProps },
-        React.createElement(FieldLabel, { htmlFor: id, labelText: labelText, requirementText: requirementText, helpText: helpText, hint: hint, disabled: disabled, variant: componentVariant, "data-testid": dataTestId },
-            React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
-                React.createElement(ToggleButton, { id: id, checked: _checked, onChange: _onChange, disabled: disabled, required: required, "aria-required": required, "aria-invalid": error, ...restProps, ref: ref }),
-                (onText || offText) && (React.createElement(Text, { disabled: disabled, mb: "none", ml: "x1", "aria-hidden": true }, _checked ? onText : offText))))));
+    return (_jsx(Field, { className: className, alignItems: "flex-start", py: "half", ...spaceProps, children: _jsx(FieldLabel, { htmlFor: id, labelText: labelText, requirementText: requirementText, helpText: helpText, hint: hint, disabled: disabled, variant: componentVariant, "data-testid": dataTestId, children: _jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(ToggleButton, { id: id, checked: _checked, onChange: _onChange, disabled: disabled, required: required, "aria-required": required, "aria-invalid": error, ...restProps, ref: ref }), (onText || offText) && (_jsx(Text, { disabled: disabled, mb: "none", ml: "x1", "aria-hidden": true, children: _checked ? onText : offText }))] }) }) }));
 });
 export default Toggle;

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

@@ -1,34 +1,33 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Toggle: () => React.JSX.Element;
+export declare const _Toggle: () => import("react/jsx-runtime").JSX.Element;
 export declare const ToggleWithAllProps: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };
 export declare const ToggleSetToDisabled: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };
 export declare const WithCustomId: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };
 export declare const WithText: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };
 export declare const WithLongText: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };
 export declare const WithContraintWidth: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };
 export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };

package/dist/src/Toggle/Toggle.story.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
 import { action } from "@storybook/addon-actions";
 import { Toggle, Button, Box } from "../index";
 import { dashed } from "../utils/story/dashed";
@@ -8,38 +9,35 @@ export default {
 };
 export const _Toggle = () => {
     const [toggled, setToggled] = useState(false);
-    return React.createElement(Toggle, { "data-testid": "toggle-example", toggled: toggled, onChange: (e) => setToggled(e.target.checked) });
+    return _jsx(Toggle, { "data-testid": "toggle-example", toggled: toggled, onChange: (e) => setToggled(e.target.checked) });
 };
 export const ToggleWithAllProps = () => {
     const [toggled, setToggled] = useState(true);
-    return (React.createElement(Toggle, { labelText: "Toggle", helpText: "Turns setting on/off", onText: "on", offText: "off", toggled: toggled, required: true, requirementText: "(Required)", onChange: (e) => setToggled(e.target.checked) }));
+    return (_jsx(Toggle, { labelText: "Toggle", helpText: "Turns setting on/off", onText: "on", offText: "off", toggled: toggled, required: true, requirementText: "(Required)", onChange: (e) => setToggled(e.target.checked) }));
 };
 ToggleWithAllProps.storyName = "Toggle with all props";
 export const ToggleSetToDisabled = () => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Toggle, { labelText: "Toggle", disabled: true, onText: "on", offText: "off", onChange: action("on change"), "data-testid": "toggle-example" }),
-        React.createElement(Toggle, { id: "toggle-2", disabled: true, onText: "on", offText: "off", toggled: true, labelText: "Toggle", onChange: action("on change") })));
+    return (_jsxs(_Fragment, { children: [_jsx(Toggle, { labelText: "Toggle", disabled: true, onText: "on", offText: "off", onChange: action("on change"), "data-testid": "toggle-example" }), _jsx(Toggle, { id: "toggle-2", disabled: true, onText: "on", offText: "off", toggled: true, labelText: "Toggle", onChange: action("on change") })] }));
 };
 ToggleSetToDisabled.storyName = "Toggle set to disabled";
 export const WithCustomId = () => {
     const [toggled, setToggled] = useState(true);
-    return (React.createElement(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked) }));
+    return (_jsx(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked) }));
 };
 WithCustomId.storyName = "With custom id";
 export const WithText = () => {
     const [toggled, setToggled] = useState(true);
-    return (React.createElement(Toggle, { labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked) }));
+    return (_jsx(Toggle, { labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked) }));
 };
 WithText.storyName = "With text";
 export const WithLongText = () => {
     const [toggled, setToggled] = useState(true);
-    return (React.createElement(Toggle, { labelText: "Toggle", toggled: toggled, onText: "this state has a very long text label to explain it's state", offText: "not this one", onChange: (e) => setToggled(e.target.checked) }));
+    return (_jsx(Toggle, { labelText: "Toggle", toggled: toggled, onText: "this state has a very long text label to explain it's state", offText: "not this one", onChange: (e) => setToggled(e.target.checked) }));
 };
 WithLongText.storyName = "With long text";
 export const WithContraintWidth = () => {
     const [toggled, setToggled] = useState(true);
-    return (React.createElement(DashedBox, { width: "200px", padding: "x2" },
-        React.createElement(Toggle, { labelText: "Toggle", onText: "This is a long On label for the toggle component.", offText: "This is a long Off label for the toggle component.", toggled: toggled, onChange: (e) => setToggled(e.target.checked) })));
+    return (_jsx(DashedBox, { width: "200px", padding: "x2", children: _jsx(Toggle, { labelText: "Toggle", onText: "This is a long On label for the toggle component.", offText: "This is a long Off label for the toggle component.", toggled: toggled, onChange: (e) => setToggled(e.target.checked) }) }));
 };
 WithContraintWidth.storyName = "With constraint width";
 export const UsingRefToControlFocus = () => {
@@ -48,8 +46,6 @@ export const UsingRefToControlFocus = () => {
     const handleClick = () => {
         ref.current.focus();
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked), ref: ref }),
-        React.createElement(Button, { onClick: handleClick }, "Focus the Toggle")));
+    return (_jsxs(_Fragment, { children: [_jsx(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked), ref: ref }), _jsx(Button, { onClick: handleClick, children: "Focus the Toggle" })] }));
 };
 UsingRefToControlFocus.storyName = "Using ref to control focus";

package/dist/src/Toggle/ToggleButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { motion } from "framer-motion";
 import { styled, useTheme } from "styled-components";
@@ -15,11 +16,11 @@ const animationConfig = {
 };
 function Switch({ children, disabled, checked }) {
     const componentVariant = useComponentVariant();
-    return (React.createElement(AnimatedBox, { marginTop: componentVariant === "touch" ? "x0_25" : "none", position: "relative", flexShrink: 0, height: "24px", width: "48px", bg: disabled ? "grey" : getSwitchBackground(checked), borderRadius: "20px", padding: "2px", boxShadow: "small", animate: checked ? "toggled" : "initial", whileHover: "active", whileFocus: "active" }, children));
+    return (_jsx(AnimatedBox, { marginTop: componentVariant === "touch" ? "x0_25" : "none", position: "relative", flexShrink: 0, height: "24px", width: "48px", bg: disabled ? "grey" : getSwitchBackground(checked), borderRadius: "20px", padding: "2px", boxShadow: "small", animate: checked ? "toggled" : "initial", whileHover: "active", whileFocus: "active", children: children }));
 }
 const Slider = ({ disabled, children }) => {
     const theme = useTheme();
-    return (React.createElement(motion.div, { className: "slider", initial: false, variants: {
+    return (_jsx(motion.div, { className: "slider", initial: false, variants: {
             active: {
                 boxShadow: disabled ? undefined : theme.shadows.focus,
                 scale: disabled ? undefined : animationConfig.scale,
@@ -35,7 +36,7 @@ const Slider = ({ disabled, children }) => {
             width: "20px",
             borderRadius: "50%",
             backgroundColor: disabled ? theme.colors.whiteGrey : theme.colors.white,
-        } }, children));
+        }, children: children }));
 };
 const ToggleInput = styled.input(({ disabled, theme }) => ({
     width: "1px",
@@ -51,8 +52,6 @@ const ToggleInput = styled.input(({ disabled, theme }) => ({
     },
 }));
 const ToggleButton = React.forwardRef(({ disabled, checked, ...props }, ref) => {
-    return (React.createElement(Switch, { disabled: disabled, checked: checked },
-        React.createElement(ToggleInput, { type: "checkbox", role: "switch", checked: checked, ref: ref, value: checked ? "on" : "off", disabled: disabled, ...props }),
-        React.createElement(Slider, { disabled: disabled })));
+    return (_jsxs(Switch, { disabled: disabled, checked: checked, children: [_jsx(ToggleInput, { type: "checkbox", role: "switch", checked: checked, ref: ref, value: checked ? "on" : "off", disabled: disabled, ...props }), _jsx(Slider, { disabled: disabled })] }));
 });
 export default ToggleButton;

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

@@ -1,14 +1,13 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Colors: () => React.JSX.Element;
-export declare const FontSizes: () => React.JSX.Element;
-export declare const LineHeights: () => React.JSX.Element;
-export declare const FontWeights: () => React.JSX.Element;
-export declare const SpaceAndSize: () => React.JSX.Element;
-export declare const Font: () => React.JSX.Element;
-export declare const Shadows: () => React.JSX.Element;
-export declare const Radii: () => React.JSX.Element;
-export declare const Breakpoints: () => React.JSX.Element;
+export declare const Colors: () => import("react/jsx-runtime").JSX.Element;
+export declare const FontSizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const LineHeights: () => import("react/jsx-runtime").JSX.Element;
+export declare const FontWeights: () => import("react/jsx-runtime").JSX.Element;
+export declare const SpaceAndSize: () => import("react/jsx-runtime").JSX.Element;
+export declare const Font: () => import("react/jsx-runtime").JSX.Element;
+export declare const Shadows: () => import("react/jsx-runtime").JSX.Element;
+export declare const Radii: () => import("react/jsx-runtime").JSX.Element;
+export declare const Breakpoints: () => import("react/jsx-runtime").JSX.Element;