@nulogy/components 16.0.0 → 16.0.1

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

@@ -1,54 +1,53 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const _Link: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomFontSize: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithoutUnderline: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithADifferentColor: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const WithADifferentFontSize: () => React.JSX.Element;
+export declare const WithADifferentFontSize: () => import("react/jsx-runtime").JSX.Element;
 export declare const AsAButton: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const _ReactRouterLink: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAppTag: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const OpenInNewTab: () => React.JSX.Element;
+export declare const OpenInNewTab: () => import("react/jsx-runtime").JSX.Element;
 export declare const OpenInNewTabWithAppTag: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/Link/Link.story.js

@@ -1,42 +1,41 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { BrowserRouter, Link as ReactRouterLink } from "react-router-dom";
 import { Link } from "../index";
 export default {
     title: "Components/Link",
 };
-export const _Link = () => React.createElement(Link, { href: "http://nulogy.design" }, "Link");
+export const _Link = () => _jsx(Link, { href: "http://nulogy.design", children: "Link" });
 _Link.story = {
     name: "Link ",
 };
-export const WithCustomFontSize = () => (React.createElement(Link, { href: "http://nulogy.design", fontSize: "small" }, "Link"));
+export const WithCustomFontSize = () => (_jsx(Link, { href: "http://nulogy.design", fontSize: "small", children: "Link" }));
 WithCustomFontSize.story = {
     name: "with custom font size",
 };
-export const WithoutUnderline = () => (React.createElement(Link, { underline: false, href: "http://nulogy.design" }, "Link"));
+export const WithoutUnderline = () => (_jsx(Link, { underline: false, href: "http://nulogy.design", children: "Link" }));
 WithoutUnderline.story = {
     name: "Without underline",
 };
-export const WithADifferentColor = () => (React.createElement(Link, { color: "black", hover: "red", href: "http://nulogy.design" }, "Link"));
+export const WithADifferentColor = () => (_jsx(Link, { color: "black", hover: "red", href: "http://nulogy.design", children: "Link" }));
 WithADifferentColor.story = {
     name: "With a different color",
 };
-export const WithADifferentFontSize = () => (React.createElement(Link, { fontSize: "large", href: "http://nulogy.design" }, "Link"));
-export const AsAButton = () => React.createElement(Link, { as: "button" }, "Link");
+export const WithADifferentFontSize = () => (_jsx(Link, { fontSize: "large", href: "http://nulogy.design", children: "Link" }));
+export const AsAButton = () => _jsx(Link, { as: "button", children: "Link" });
 AsAButton.story = {
     name: "As a <button>",
 };
-export const _ReactRouterLink = () => (React.createElement(BrowserRouter, null,
-    React.createElement(ReactRouterLink, { component: Link, to: "/place" }, "Link")));
+export const _ReactRouterLink = () => (_jsx(BrowserRouter, { children: _jsx(ReactRouterLink, { component: Link, to: "/place", children: "Link" }) }));
 _ReactRouterLink.story = {
     name: "with react router",
 };
-export const WithAppTag = () => (React.createElement(Link, { href: "#production-scheduling", forApp: "production-scheduling" }, "POLI-120392"));
+export const WithAppTag = () => (_jsx(Link, { href: "#production-scheduling", forApp: "production-scheduling", children: "POLI-120392" }));
 WithAppTag.story = {
     // This story is referenced in the AppTag story. If you change the name, update the URL in the AppTag story.
     name: "With AppTag",
 };
-export const OpenInNewTab = () => (React.createElement(Link, { href: "#production-scheduling", openInNewTab: true }, "POLI-120392"));
-export const OpenInNewTabWithAppTag = () => (React.createElement(Link, { href: "#production-scheduling", forApp: "production-scheduling", openInNewTab: true }, "POLI-120392"));
+export const OpenInNewTab = () => (_jsx(Link, { href: "#production-scheduling", openInNewTab: true, children: "POLI-120392" }));
+export const OpenInNewTabWithAppTag = () => (_jsx(Link, { href: "#production-scheduling", forApp: "production-scheduling", openInNewTab: true, children: "POLI-120392" }));
 OpenInNewTabWithAppTag.story = {
     name: "Open in new tab with AppTag",
 };

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

@@ -1,29 +1,28 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _List: () => React.JSX.Element;
+export declare const _List: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithCustomColour: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomFontSizeAndLineHeight: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCompactSpacing: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithLeftAlignment: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/List/List.story.js

@@ -1,37 +1,22 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { List, ListItem } from "../index";
 export default {
     title: "Components/List",
 };
-export const _List = () => (React.createElement(List, null,
-    React.createElement(ListItem, null, "List Item 1"),
-    React.createElement(ListItem, null, "List Item 2 that is really really really really really really really really really long"),
-    React.createElement(ListItem, null, "List Item 3")));
-export const WithCustomColour = () => (React.createElement(List, { color: "red" },
-    React.createElement(ListItem, null, "List Item 1"),
-    React.createElement(ListItem, null, "List Item 2 that is really really really really really really really really really long"),
-    React.createElement(ListItem, null, "List Item 3")));
+export const _List = () => (_jsxs(List, { children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { children: "List Item 3" })] }));
+export const WithCustomColour = () => (_jsxs(List, { color: "red", children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { children: "List Item 3" })] }));
 WithCustomColour.story = {
     name: "With custom colour",
 };
-export const WithCustomFontSizeAndLineHeight = () => (React.createElement(List, { fontSize: "small", lineHeight: "smallTextBase" },
-    React.createElement(ListItem, null, "List Item 1"),
-    React.createElement(ListItem, null, "List Item 2 that is really really really really really really really really really long"),
-    React.createElement(ListItem, { fontSize: "large" }, "Larger List Item 3")));
+export const WithCustomFontSizeAndLineHeight = () => (_jsxs(List, { fontSize: "small", lineHeight: "smallTextBase", children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { fontSize: "large", children: "Larger List Item 3" })] }));
 WithCustomFontSizeAndLineHeight.story = {
     name: "With custom font size and line height",
 };
-export const WithCompactSpacing = () => (React.createElement(List, { compact: true },
-    React.createElement(ListItem, null, "List Item 1"),
-    React.createElement(ListItem, null, "List Item 2 that is really really really really really really really really really long"),
-    React.createElement(ListItem, null, "List Item 3")));
+export const WithCompactSpacing = () => (_jsxs(List, { compact: true, children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { children: "List Item 3" })] }));
 WithCompactSpacing.story = {
     name: "With compact spacing",
 };
-export const WithLeftAlignment = () => (React.createElement(List, { leftAlign: true },
-    React.createElement(ListItem, null, "List Item 1"),
-    React.createElement(ListItem, null, "List Item 2 that is really really really really really really really really really long"),
-    React.createElement(ListItem, null, "List Item 3")));
+export const WithLeftAlignment = () => (_jsxs(List, { leftAlign: true, children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { children: "List Item 3" })] }));
 WithLeftAlignment.story = {
     name: "With left alignment",
 };

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.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";
@@ -58,23 +59,17 @@ const StyledReactModal = styled(ReactModal)(({ maxWidth }) => ({
 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, }) => {
     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.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/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;