@nulogy/components 16.0.0 → 16.0.2

package/dist/src/LoadingAnimation/LoadingAnimation.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 interface Props extends React.ComponentPropsWithRef<"svg"> {
     inactive?: boolean;
 }
-export default function LoadingAnimation({ inactive }: Props): React.JSX.Element;
+export default function LoadingAnimation({ inactive }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/LoadingAnimation/LoadingAnimation.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from "styled-components";
 export default function LoadingAnimation({ inactive = false }) {
     const { colors } = useTheme();
@@ -6,24 +6,5 @@ export default function LoadingAnimation({ inactive = false }) {
     const color2 = inactive ? colors.lightGrey : colors.yellow;
     return (
     // Modified svg By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL
-    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "240px", height: "24px", viewBox: "0 0 100 10", preserveAspectRatio: "xMidYMid", role: "img" },
-        React.createElement("title", null, "Loading animation"),
-        React.createElement("g", { transform: "translate(4 5)" },
-            React.createElement("circle", { cx: "0", cy: "0", r: "4", fill: color1, transform: "scale(0.275039 0.275039)" },
-                React.createElement("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.4734848484848484s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }))),
-        React.createElement("g", { transform: "translate(22.4 5)" },
-            React.createElement("circle", { cx: "0", cy: "0", r: "4", fill: color2, transform: "scale(0.0862935 0.0862935)" },
-                React.createElement("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.37878787878787873s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }))),
-        React.createElement("g", { transform: "translate(40.0 5)" },
-            React.createElement("circle", { cx: "0", cy: "0", r: "4", fill: color1, transform: "scale(0.0000823166 0.0000823166)" },
-                React.createElement("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.284090909090909s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }))),
-        React.createElement("g", { transform: "translate(59.2 5)" },
-            React.createElement("circle", { cx: "0", cy: "0", r: "4", fill: color2, transform: "scale(0.0779504 0.0779504)" },
-                React.createElement("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.18939393939393936s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }))),
-        React.createElement("g", { transform: "translate(77.6 5)" },
-            React.createElement("circle", { cx: "0", cy: "0", r: "4", fill: color1, transform: "scale(0.262719 0.262719)" },
-                React.createElement("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.09469696969696968s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }))),
-        React.createElement("g", { transform: "translate(96 5)" },
-            React.createElement("circle", { cx: "0", cy: "0", r: "4", fill: color2, transform: "scale(0.49324 0.49324)" },
-                React.createElement("animateTransform", { attributeName: "transform", type: "scale", begin: "0s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" })))));
+    _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "240px", height: "24px", viewBox: "0 0 100 10", preserveAspectRatio: "xMidYMid", role: "img", children: [_jsx("title", { children: "Loading animation" }), _jsx("g", { transform: "translate(4 5)", children: _jsx("circle", { cx: "0", cy: "0", r: "4", fill: color1, transform: "scale(0.275039 0.275039)", children: _jsx("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.4734848484848484s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }) }) }), _jsx("g", { transform: "translate(22.4 5)", children: _jsx("circle", { cx: "0", cy: "0", r: "4", fill: color2, transform: "scale(0.0862935 0.0862935)", children: _jsx("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.37878787878787873s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }) }) }), _jsx("g", { transform: "translate(40.0 5)", children: _jsx("circle", { cx: "0", cy: "0", r: "4", fill: color1, transform: "scale(0.0000823166 0.0000823166)", children: _jsx("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.284090909090909s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }) }) }), _jsx("g", { transform: "translate(59.2 5)", children: _jsx("circle", { cx: "0", cy: "0", r: "4", fill: color2, transform: "scale(0.0779504 0.0779504)", children: _jsx("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.18939393939393936s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }) }) }), _jsx("g", { transform: "translate(77.6 5)", children: _jsx("circle", { cx: "0", cy: "0", r: "4", fill: color1, transform: "scale(0.262719 0.262719)", children: _jsx("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.09469696969696968s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }) }) }), _jsx("g", { transform: "translate(96 5)", children: _jsx("circle", { cx: "0", cy: "0", r: "4", fill: color2, transform: "scale(0.49324 0.49324)", children: _jsx("animateTransform", { attributeName: "transform", type: "scale", begin: "0s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }) }) })] }));
 }

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

@@ -1,18 +1,17 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Active: () => React.JSX.Element;
-export declare const Inactive: () => React.JSX.Element;
+export declare const Active: () => import("react/jsx-runtime").JSX.Element;
+export declare const Inactive: () => import("react/jsx-runtime").JSX.Element;
 export declare const PageExampleActive: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const PageExampleInactive: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/LoadingAnimation/LoadingAnimation.story.js

@@ -1,33 +1,16 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LoadingAnimation } from ".";
 import { Overlay, Box, Flex, Text, Alert, ControlIcon } from "../index";
 export default {
     title: "Components/LoadingAnimation",
 };
-export const Active = () => React.createElement(LoadingAnimation, null, "Example");
-export const Inactive = () => React.createElement(LoadingAnimation, { inactive: true }, "Example");
-export const PageExampleActive = () => (React.createElement(Overlay, { flexDirection: "column", m: { extraSmall: "x2", small: "x3" } },
-    React.createElement(Flex, { flexGrow: 2, flexDirection: "column", justifyContent: "center", margin: "auto", mb: "x4" },
-        React.createElement(Text, { mb: "x2", fontWeight: "medium", textAlign: "right" }, "1/4"),
-        React.createElement(Box, { mb: "x1" },
-            React.createElement(LoadingAnimation, null)),
-        React.createElement(Text, { fontSize: "small", color: "darkGrey" }, "Applying action ...")),
-    React.createElement(Flex, { justifyContent: "center", mb: "x1" },
-        React.createElement(ControlIcon, { icon: "refresh", disabled: true, mr: "x1", label: "Retry" }),
-        React.createElement(ControlIcon, { icon: "close", label: "Abort" }))));
+export const Active = () => _jsx(LoadingAnimation, { children: "Example" });
+export const Inactive = () => _jsx(LoadingAnimation, { inactive: true, children: "Example" });
+export const PageExampleActive = () => (_jsxs(Overlay, { flexDirection: "column", m: { extraSmall: "x2", small: "x3" }, children: [_jsxs(Flex, { flexGrow: 2, flexDirection: "column", justifyContent: "center", margin: "auto", mb: "x4", children: [_jsx(Text, { mb: "x2", fontWeight: "medium", textAlign: "right", children: "1/4" }), _jsx(Box, { mb: "x1", children: _jsx(LoadingAnimation, {}) }), _jsx(Text, { fontSize: "small", color: "darkGrey", children: "Applying action ..." })] }), _jsxs(Flex, { justifyContent: "center", mb: "x1", children: [_jsx(ControlIcon, { icon: "refresh", disabled: true, mr: "x1", label: "Retry" }), _jsx(ControlIcon, { icon: "close", label: "Abort" })] })] }));
 PageExampleActive.story = {
     name: "Page example - active",
 };
-export const PageExampleInactive = () => (React.createElement(Overlay, { flexDirection: "column", m: { extraSmall: "x2", small: "x3" } },
-    React.createElement(Flex, { flexGrow: 2, flexDirection: "column", justifyContent: "center", margin: "auto", mb: "x4" },
-        React.createElement(Text, { mb: "x2", fontWeight: "medium", color: "grey", textAlign: "right" }, "1/4"),
-        React.createElement(Box, { mb: "x1" },
-            React.createElement(LoadingAnimation, { inactive: true })),
-        React.createElement(Text, { fontSize: "small", color: "grey" }, "Applying action ...")),
-    React.createElement(Alert, { type: "warning", mb: "x2", position: "absolute", bottom: "x8" }, "This action takes longer than expected. Try again..."),
-    React.createElement(Flex, { justifyContent: "center", mb: "x1" },
-        React.createElement(ControlIcon, { icon: "refresh", mr: "x1", label: "Retry" }),
-        React.createElement(ControlIcon, { icon: "close", label: "Abort" }))));
+export const PageExampleInactive = () => (_jsxs(Overlay, { flexDirection: "column", m: { extraSmall: "x2", small: "x3" }, children: [_jsxs(Flex, { flexGrow: 2, flexDirection: "column", justifyContent: "center", margin: "auto", mb: "x4", children: [_jsx(Text, { mb: "x2", fontWeight: "medium", color: "grey", textAlign: "right", children: "1/4" }), _jsx(Box, { mb: "x1", children: _jsx(LoadingAnimation, { inactive: true }) }), _jsx(Text, { fontSize: "small", color: "grey", children: "Applying action ..." })] }), _jsx(Alert, { type: "warning", mb: "x2", position: "absolute", bottom: "x8", children: "This action takes longer than expected. Try again..." }), _jsxs(Flex, { justifyContent: "center", mb: "x1", children: [_jsx(ControlIcon, { icon: "refresh", mr: "x1", label: "Retry" }), _jsx(ControlIcon, { icon: "close", label: "Abort" })] })] }));
 PageExampleInactive.story = {
     name: "Page example - inactive",
 };

package/dist/src/MaybeTooltip/MaybeTooltip.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { TooltipProps } from "../Tooltip/Tooltip";
 export interface MaybeTooltipProps extends TooltipProps {
     /** Whether to enable the tooltip at all */
@@ -10,5 +9,5 @@ export interface MaybeTooltipProps extends TooltipProps {
  * Conditionally displays a tooltip.
  */
 declare function MaybeTooltip({ tooltip, showTooltip, placement, defaultOpen, showDelay, maxWidth, supportMobileTap: _supportMobileTap, // Note: supportMobileTap is handled internally by the new Tooltip
-className, children, }: MaybeTooltipProps): React.JSX.Element;
+className, children, }: MaybeTooltipProps): import("react/jsx-runtime").JSX.Element;
 export default MaybeTooltip;

package/dist/src/MaybeTooltip/MaybeTooltip.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from "../Tooltip";
 /**
  * Conditionally displays a tooltip.
@@ -6,8 +6,8 @@ import { Tooltip } from "../Tooltip";
 function MaybeTooltip({ tooltip, showTooltip = true, placement = "bottom", defaultOpen = false, showDelay = 100, maxWidth = "24em", supportMobileTap: _supportMobileTap = true, // Note: supportMobileTap is handled internally by the new Tooltip
 className, children, }) {
     if (!showTooltip) {
-        return React.createElement(React.Fragment, null, children);
+        return _jsx(_Fragment, { children: children });
     }
-    return (React.createElement(Tooltip, { tooltip: tooltip, placement: placement, defaultOpen: defaultOpen, showDelay: showDelay, maxWidth: maxWidth, className: className }, children));
+    return (_jsx(Tooltip, { tooltip: tooltip, placement: placement, defaultOpen: defaultOpen, showDelay: showDelay, maxWidth: maxWidth, className: className, children: children }));
 }
 export default MaybeTooltip;

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

@@ -1,10 +1,9 @@
-import React from "react";
 import type { StoryObj } from "@storybook/react";
 import MaybeTooltip from "./MaybeTooltip";
 declare const _default: {
     title: string;
     component: typeof MaybeTooltip;
-    render: (args: import("./MaybeTooltip").MaybeTooltipProps) => React.JSX.Element;
+    render: (args: import("./MaybeTooltip").MaybeTooltipProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
 type Story = StoryObj<typeof MaybeTooltip>;

package/dist/src/MaybeTooltip/MaybeTooltip.story.js

@@ -1,23 +1,22 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "../Type";
 import { Box } from "../Box";
 import MaybeTooltip from "./MaybeTooltip";
 export default {
     title: "Components/MaybeTooltip",
     component: MaybeTooltip,
-    render: (args) => (React.createElement(Box, { width: "100px" },
-        React.createElement(MaybeTooltip, { ...args }))),
+    render: (args) => (_jsx(Box, { width: "100px", children: _jsx(MaybeTooltip, { ...args }) })),
 };
 export const Default = {
     args: {
-        children: React.createElement(Text, null, "Hello"),
+        children: _jsx(Text, { children: "Hello" }),
         tooltip: "This is a tooltip",
         showTooltip: true,
     },
 };
 export const WithNoTooltip = {
     args: {
-        children: React.createElement(Text, null, "Hello"),
+        children: _jsx(Text, { children: "Hello" }),
         showTooltip: false,
     },
 };

package/dist/src/MiniTooltip/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 type TooltipProps = {
     children: ReactNode;
     content: ReactNode;
@@ -6,5 +6,5 @@ type TooltipProps = {
     sideOffset?: number;
     delayDuration?: number;
 };
-export declare function MiniTooltip({ children, content, sideOffset, hideTooltip, delayDuration, }: TooltipProps): React.JSX.Element;
+export declare function MiniTooltip({ children, content, sideOffset, hideTooltip, delayDuration, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/MiniTooltip/index.js

@@ -1,16 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { styled, keyframes } from "styled-components";
 import { transparentize } from "polished";
-import React from "react";
 export function MiniTooltip({ children, content, sideOffset = 4, hideTooltip = false, delayDuration = 700, }) {
     if (hideTooltip) {
-        return React.createElement(React.Fragment, null, children);
+        return _jsx(_Fragment, { children: children });
     }
-    return (React.createElement(TooltipPrimitive.Provider, { delayDuration: delayDuration },
-        React.createElement(TooltipPrimitive.Root, null,
-            React.createElement(TooltipPrimitive.Trigger, { asChild: true }, children),
-            React.createElement(TooltipPrimitive.Portal, null,
-                React.createElement(TooltipContent, { sideOffset: sideOffset }, content)))));
+    return (_jsx(TooltipPrimitive.Provider, { delayDuration: delayDuration, children: _jsxs(TooltipPrimitive.Root, { children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: children }), _jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipContent, { sideOffset: sideOffset, children: content }) })] }) }));
 }
 const slideUpAndFade = keyframes `
   from {

package/dist/src/Modal/Modal.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 type ModalProps = {
+    children?: React.ReactNode;
     isOpen?: boolean;
     title?: string;
     ariaLabel?: string;
@@ -19,7 +20,8 @@ type ModalProps = {
     footerContent?: React.ReactNode;
     parentSelector?: (...args: any) => HTMLElement;
 };
-declare const Modal: React.FC<React.PropsWithChildren<ModalProps>> & {
-    setAppElement: (element: string | HTMLElement) => void;
-};
+declare function Modal({ isOpen, shouldFocusAfterRender, shouldReturnFocusAfterClose, maxWidth, ariaHideApp, children, title, onRequestClose, onAfterOpen, ariaLabel, ariaDescribedBy, portalClassName, overlayClassName, className, id, appElement, footerContent, closeAriaLabel, parentSelector, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Modal {
+    var setAppElement: any;
+}
 export default Modal;

package/dist/src/Modal/Modal.js

@@ -1,4 +1,5 @@
-import React, { useContext } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from "react";
 import { styled, ThemeContext, useTheme } from "styled-components";
 import ReactModal from "react-modal";
 import { transparentize } from "polished";
@@ -55,26 +56,20 @@ const StyledReactModal = styled(ReactModal)(({ maxWidth }) => ({
     WebkitFontSmoothing: "antialiased",
     MozOsxFontSmoothing: "grayscale",
 }));
-const Modal = ({ isOpen = true, shouldFocusAfterRender = true, shouldReturnFocusAfterClose = true, maxWidth = "624px", ariaHideApp = true, children, title, onRequestClose, onAfterOpen, ariaLabel, ariaDescribedBy, portalClassName, overlayClassName, className, id, appElement, footerContent, closeAriaLabel, parentSelector, }) => {
+function Modal({ isOpen = true, shouldFocusAfterRender = true, shouldReturnFocusAfterClose = true, maxWidth = "624px", ariaHideApp = true, children, title, onRequestClose, onAfterOpen, ariaLabel, ariaDescribedBy, portalClassName, overlayClassName, className, id, appElement, footerContent, closeAriaLabel, parentSelector, }) {
     const modalHasHeader = Boolean(onRequestClose || title);
     const themeContext = useContext(ThemeContext);
-    return (React.createElement(StyledReactModal, { maxWidth: maxWidth, contentLabel: ariaLabel, onRequestClose: onRequestClose, onAfterOpen: onAfterOpen, shouldFocusAfterRender: shouldFocusAfterRender, shouldReturnFocusAfterClose: shouldReturnFocusAfterClose, isOpen: isOpen, portalClassName: portalClassName, overlayClassName: overlayClassName, className: className, id: id, aria: {
+    return (_jsx(StyledReactModal, { maxWidth: maxWidth, contentLabel: ariaLabel, onRequestClose: onRequestClose, onAfterOpen: onAfterOpen, shouldFocusAfterRender: shouldFocusAfterRender, shouldReturnFocusAfterClose: shouldReturnFocusAfterClose, isOpen: isOpen, portalClassName: portalClassName, overlayClassName: overlayClassName, className: className, id: id, aria: {
             labelledby: title ? "modal-title" : undefined,
             describedby: ariaDescribedBy,
         }, shouldCloseOnOverlayClick: true, shouldCloseOnEsc: true, style: {
             overlay: overlayStyle(themeContext),
-        }, appElement: appElement, ariaHideApp: ariaHideApp, parentSelector: parentSelector },
-        React.createElement(ModalWrapper, { closeAriaLabel: closeAriaLabel, modalHasHeader: modalHasHeader, title: title, onRequestClose: onRequestClose, footerContent: footerContent }, children)));
-};
+        }, appElement: appElement, ariaHideApp: ariaHideApp, parentSelector: parentSelector, children: _jsx(ModalWrapper, { closeAriaLabel: closeAriaLabel, modalHasHeader: modalHasHeader, title: title, onRequestClose: onRequestClose, footerContent: footerContent, children: children }) }));
+}
 function ModalWrapper({ modalHasHeader, title, onRequestClose, closeAriaLabel, children, footerContent, }) {
     const theme = useTheme();
     useScrollLock();
-    return (React.createElement(React.Fragment, null,
-        modalHasHeader && (React.createElement(ModalHeader, { hasCloseButton: Boolean(onRequestClose) },
-            title ? (React.createElement(Heading2, { id: "modal-title", mb: "none" }, title)) : (React.createElement("div", { style: { height: theme.space.x4 } })),
-            onRequestClose && React.createElement(ModalCloseButton, { onClick: onRequestClose, "aria-label": closeAriaLabel }))),
-        React.createElement(ModalContent, { hasFooter: !!footerContent }, children),
-        footerContent && React.createElement(ModalFooter, null, footerContent)));
+    return (_jsxs(_Fragment, { children: [modalHasHeader && (_jsxs(ModalHeader, { hasCloseButton: Boolean(onRequestClose), children: [title ? (_jsx(Heading2, { id: "modal-title", mb: "none", children: title })) : (_jsx("div", { style: { height: theme.space.x4 } })), onRequestClose && _jsx(ModalCloseButton, { onClick: onRequestClose, "aria-label": closeAriaLabel })] })), _jsx(ModalContent, { hasFooter: !!footerContent, children: children }), footerContent && _jsx(ModalFooter, { children: footerContent })] }));
 }
 Modal.setAppElement = ReactModal.setAppElement;
 export default Modal;

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

@@ -1,30 +1,8 @@
 import type { StoryObj } from "@storybook/react";
-import React from "react";
 import { Modal as NDSModal } from "../index";
 declare const _default: {
     title: string;
-    component: React.FC<React.PropsWithChildren<{
-        isOpen?: boolean;
-        title?: string;
-        ariaLabel?: string;
-        onRequestClose?: (...args: any[]) => any;
-        closeAriaLabel?: string;
-        onAfterOpen?: (...args: any[]) => any;
-        shouldFocusAfterRender?: boolean;
-        shouldReturnFocusAfterClose?: boolean;
-        ariaDescribedBy?: string;
-        maxWidth?: string;
-        portalClassName?: string;
-        overlayClassName?: string;
-        className?: string;
-        id?: string;
-        appElement?: JSX.Element;
-        ariaHideApp?: boolean;
-        footerContent?: React.ReactNode;
-        parentSelector?: (...args: any) => HTMLElement;
-    }>> & {
-        setAppElement: (element: string | HTMLElement) => void;
-    };
+    component: typeof NDSModal;
     args: {
         ariaHideApp: false;
     };

package/dist/src/Modal/Modal.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 { Modal as NDSModal, Button, QuietButton, PrimaryButton, ButtonGroup, Form, Input, Select, Text, DatePicker, } from "../index";
 if (process.env.NODE_ENV !== "test")
     NDSModal.setAppElement("#storybook-root");
@@ -11,9 +12,7 @@ const options = [
     { value: "progress", label: "In progress" },
     { value: "quarantine", label: "In quarantine" },
 ];
-const ModalButtons = (React.createElement(ButtonGroup, null,
-    React.createElement(PrimaryButton, null, "Add job to line"),
-    React.createElement(QuietButton, null, "Cancel")));
+const ModalButtons = (_jsxs(ButtonGroup, { children: [_jsx(PrimaryButton, { children: "Add job to line" }), _jsx(QuietButton, { children: "Cancel" })] }));
 export default {
     title: "Components/Modal",
     component: NDSModal,
@@ -42,26 +41,14 @@ export const WithScrollingContent = {
     args: {
         title: "Modal Title",
         footerContent: ModalButtons,
-        children: (React.createElement(React.Fragment, null,
-            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"))),
+        children: (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content" }), _jsx(Text, { children: "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content" }), _jsx(Text, { children: "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content" }), _jsx(Text, { children: "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content" }), _jsx(Text, { children: "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content" }), _jsx(Text, { children: "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content" })] })),
     },
     name: "with scrolling content",
 };
 export const WithScrollingContentWithoutFooterContent = {
     args: {
         title: "Modal Title",
-        children: (React.createElement(React.Fragment, null,
-            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"))),
+        children: (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content" }), _jsx(Text, { children: "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content" }), _jsx(Text, { children: "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content" }), _jsx(Text, { children: "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content" }), _jsx(Text, { children: "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content" }), _jsx(Text, { children: "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content" })] })),
     },
     name: "with scrolling content without footer content",
 };
@@ -95,8 +82,7 @@ export const WithSelect = {
         footerContent: ModalButtons,
         maxWidth: "456px",
         onRequestClose: () => { },
-        children: (React.createElement(Form, { id: "myForm", mb: "x2" },
-            React.createElement(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }))),
+        children: (_jsx(Form, { id: "myForm", mb: "x2", children: _jsx(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }) })),
     },
     name: "with select",
 };
@@ -106,14 +92,7 @@ export const WithSelectAndScrollingContent = {
         footerContent: ModalButtons,
         maxWidth: "456px",
         onRequestClose: () => { },
-        children: (React.createElement(Form, { id: "myForm", mb: "x2" },
-            React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
-            React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
-            React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
-            React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
-            React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
-            React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
-            React.createElement(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }))),
+        children: (_jsxs(Form, { id: "myForm", mb: "x2", children: [_jsx(Input, { name: "name", id: "name", labelText: "Name" }), _jsx(Input, { type: "number", name: "age", id: "age", labelText: "Age" }), _jsx(Input, { name: "name", id: "name", labelText: "Name" }), _jsx(Input, { type: "number", name: "age", id: "age", labelText: "Age" }), _jsx(Input, { name: "name", id: "name", labelText: "Name" }), _jsx(Input, { type: "number", name: "age", id: "age", labelText: "Age" }), _jsx(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" })] })),
     },
     name: "with select and scrolling content",
 };
@@ -124,22 +103,13 @@ export const WithParentSelector = {
         parentSelector: () => document.getElementById("parent-selector"),
     },
     name: "with a parent selector",
-    render: (args) => (React.createElement("div", { id: "parent-selector" },
-        React.createElement(NDSModal, { ...args }, "Content"))),
+    render: (args) => (_jsx("div", { id: "parent-selector", children: _jsx(NDSModal, { ...args, children: "Content" }) })),
 };
 export const ExampleControlledModal = {
-    render: () => React.createElement(ModalExample, null),
+    render: () => _jsx(ModalExample, {}),
     name: "example controlled modal",
 };
 const ModalExample = () => {
     const [isOpen, setIsOpen] = useState(false);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Modal"),
-        React.createElement(NDSModal, { title: "Edit Profile", footerContent: React.createElement(ButtonGroup, null,
-                React.createElement(PrimaryButton, { type: "submit", form: "myForm" }, "Add job to line"),
-                React.createElement(QuietButton, { onClick: () => setIsOpen(false) }, "Cancel")), onRequestClose: () => setIsOpen(false), isOpen: isOpen, maxWidth: "456px" },
-            React.createElement(Form, { id: "myForm", mb: "x2" },
-                React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
-                React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
-                React.createElement(DatePicker, { selected: new Date("Fri, 01 Jan 2019"), dateFormat: "MMMM d, yyyy", onChange: (val) => val, onInputChange: (val) => val })))));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Modal" }), _jsx(NDSModal, { title: "Edit Profile", footerContent: _jsxs(ButtonGroup, { children: [_jsx(PrimaryButton, { type: "submit", form: "myForm", children: "Add job to line" }), _jsx(QuietButton, { onClick: () => setIsOpen(false), children: "Cancel" })] }), onRequestClose: () => setIsOpen(false), isOpen: isOpen, maxWidth: "456px", children: _jsxs(Form, { id: "myForm", mb: "x2", children: [_jsx(Input, { name: "name", id: "name", labelText: "Name" }), _jsx(Input, { type: "number", name: "age", id: "age", labelText: "Age" }), _jsx(DatePicker, { selected: new Date("Fri, 01 Jan 2019"), dateFormat: "MMMM d, yyyy", onChange: (val) => val, onInputChange: (val) => val })] }) })] }));
 };

package/dist/src/Modal/ModalCloseButton.d.ts

@@ -1,6 +1,8 @@
-declare const ModalCloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+declare const ModalCloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: import("react").Ref<HTMLButtonElement>;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: import("react").Ref<HTMLButtonElement>;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 export default ModalCloseButton;

package/dist/src/Modal/ModalContent.d.ts

@@ -4,5 +4,5 @@ type ModalContentProps = React.ComponentPropsWithRef<"div"> & {
     hasFooter?: any;
     theme?: DefaultNDSThemeType;
 };
-declare const ModalContent: React.FC<React.PropsWithChildren<ModalContentProps>>;
+declare const ModalContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ModalContentProps>> & string;
 export default ModalContent;

package/dist/src/NDSProvider/ComponentVariantContext.d.ts

@@ -5,6 +5,6 @@ type ComponentVariantContextValue = {
     children?: React.ReactNode;
 };
 export declare const ComponentVariantContext: React.Context<ComponentVariantContextValue>;
-export default function ComponentVariantContextProvider({ variant, children }: ComponentVariantContextValue): React.JSX.Element;
+export default function ComponentVariantContextProvider({ variant, children }: ComponentVariantContextValue): import("react/jsx-runtime").JSX.Element;
 export declare function useComponentVariant(selectedVariant?: ComponentVariant): ComponentVariant;
 export {};

package/dist/src/NDSProvider/ComponentVariantContext.js

@@ -1,7 +1,8 @@
-import React, { createContext, useContext } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 export const ComponentVariantContext = createContext(undefined);
 export default function ComponentVariantContextProvider({ variant, children }) {
-    return React.createElement(ComponentVariantContext.Provider, { value: { variant: variant } }, children);
+    return _jsx(ComponentVariantContext.Provider, { value: { variant: variant }, children: children });
 }
 export function useComponentVariant(selectedVariant) {
     const context = useContext(ComponentVariantContext);

package/dist/src/NDSProvider/FeatureFlagsContext.d.ts

@@ -8,5 +8,5 @@ export interface FeatureFlagsContextValue {
     children?: React.ReactNode;
 }
 export declare const FeatureFlagsContext: React.Context<FeatureFlagsContextValue>;
-export default function FeatureFlagsProvider({ featureFlags, children }: FeatureFlagsContextValue): React.JSX.Element;
+export default function FeatureFlagsProvider({ featureFlags, children }: FeatureFlagsContextValue): import("react/jsx-runtime").JSX.Element;
 export declare function useFeatureFlags(): FeatureFlags;

package/dist/src/NDSProvider/FeatureFlagsContext.js

@@ -1,7 +1,8 @@
-import React, { createContext, useContext } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 export const FeatureFlagsContext = createContext(undefined);
 export default function FeatureFlagsProvider({ featureFlags, children }) {
-    return React.createElement(FeatureFlagsContext.Provider, { value: { featureFlags } }, children);
+    return _jsx(FeatureFlagsContext.Provider, { value: { featureFlags }, children: children });
 }
 export function useFeatureFlags() {
     const context = useContext(FeatureFlagsContext);

package/dist/src/NDSProvider/GlobalStylesComposer.d.ts

@@ -6,5 +6,5 @@ type GlobalStylesComposerProps = {
     disableGlobalStyles?: boolean;
     children?: React.ReactNode;
 };
-export default function GlobalStylesComposer({ theme, locale, disableGlobalStyles, children, }: GlobalStylesComposerProps): React.JSX.Element;
+export default function GlobalStylesComposer({ theme, locale, disableGlobalStyles, children, }: GlobalStylesComposerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/NDSProvider/GlobalStylesComposer.js

@@ -1,13 +1,10 @@
-import React from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Reset from "./Reset";
 import ModalStyleOverride from "./ModalStyleOverride";
 import GlobalStyles from "./GlobalStyles";
 export default function GlobalStylesComposer({ theme, locale, disableGlobalStyles, children, }) {
     if (disableGlobalStyles) {
-        return React.createElement(React.Fragment, null, children);
+        return _jsx(_Fragment, { children: children });
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Reset, null),
-        React.createElement(ModalStyleOverride, { theme: theme, locale: locale }),
-        React.createElement(GlobalStyles, { theme: theme, locale: locale }, children)));
+    return (_jsxs(_Fragment, { children: [_jsx(Reset, {}), _jsx(ModalStyleOverride, { theme: theme, locale: locale }), _jsx(GlobalStyles, { theme: theme, locale: locale, children: children })] }));
 }

package/dist/src/NDSProvider/LocaleContext.d.ts

@@ -8,4 +8,4 @@ export declare const useLocale: (locale?: string) => {
 export declare const LocaleContextProvider: ({ locale, children }: {
     locale: string;
     children: React.ReactNode;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/NDSProvider/LocaleContext.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 export const LocaleContext = React.createContext({ locale: "en" });
 export const useLocale = (locale) => {
@@ -8,5 +9,5 @@ export const useLocale = (locale) => {
     return locale ? { locale } : context;
 };
 export const LocaleContextProvider = ({ locale, children }) => {
-    return React.createElement(LocaleContext.Provider, { value: { locale } }, children);
+    return _jsx(LocaleContext.Provider, { value: { locale }, children: children });
 };

package/dist/src/NDSProvider/NDSProvider.d.ts

@@ -10,5 +10,5 @@ type NDSProviderProps = {
     variant?: ComponentVariant;
     featureFlags?: FeatureFlags;
 };
-declare function NDSProvider({ theme: customTheme, children, disableGlobalStyles, locale, variant, featureFlags, }: NDSProviderProps): React.JSX.Element;
+declare function NDSProvider({ theme: customTheme, children, disableGlobalStyles, locale, variant, featureFlags, }: NDSProviderProps): import("react/jsx-runtime").JSX.Element;
 export default NDSProvider;

package/dist/src/NDSProvider/NDSProvider.js

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { I18nextProvider } from "react-i18next";
 import i18n from "../i18n";
 import NDSThemeProvider from "../theme/NDSThemeProvider";
@@ -12,11 +13,6 @@ function NDSProvider({ theme: customTheme, children, disableGlobalStyles = false
     useEffect(() => {
         i18n.changeLanguage(locale);
     }, [locale]);
-    return (React.createElement(LocaleContext.Provider, { value: { locale } },
-        React.createElement(FeatureFlagsContextProvider, { featureFlags: featureFlags },
-            React.createElement(ComponentVariantContextProvider, { variant: variant },
-                React.createElement(I18nextProvider, { i18n: i18n },
-                    React.createElement(NDSThemeProvider, { customTheme: customTheme },
-                        React.createElement(GlobalStylesComposer, { locale: locale, disableGlobalStyles: disableGlobalStyles }, children)))))));
+    return (_jsx(LocaleContext.Provider, { value: { locale }, children: _jsx(FeatureFlagsContextProvider, { featureFlags: featureFlags, children: _jsx(ComponentVariantContextProvider, { variant: variant, children: _jsx(I18nextProvider, { i18n: i18n, children: _jsx(NDSThemeProvider, { customTheme: customTheme, children: _jsx(GlobalStylesComposer, { locale: locale, disableGlobalStyles: disableGlobalStyles, children: children }) }) }) }) }) }));
 }
 export default NDSProvider;

package/dist/src/NDSProvider/renderWithNDSProvider.spec-utils.js

@@ -1,6 +1,6 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from "@testing-library/react";
 import NDSProvider from "./NDSProvider";
 export const renderWithNDSProvider = (component, locale = "en_US") => {
-    return render(React.createElement(NDSProvider, { locale: locale }, component));
+    return render(_jsx(NDSProvider, { locale: locale, children: component }));
 };

package/dist/src/NavBarSearch/NavBarSearch.d.ts

@@ -7,5 +7,5 @@ declare const NavBarSearch: import("styled-components/dist/types").IStyledCompon
     [x: string]: any;
     name?: string;
     onSubmit: any;
-}) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+}) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
 import React from "react";