@nulogy/components 16.0.0 → 16.0.2

package/dist/src/Alert/Alert.d.ts

@@ -22,5 +22,5 @@ declare const _default: import("styled-components/dist/types").IStyledComponentB
     type?: NotificationType;
     onClose?: any;
     controlled?: boolean;
-}, never>> & string & Omit<({ children, isCloseable, title, type, closeAriaLabel, onClose, controlled, ...props }: AlertProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+}, never>> & string & Omit<({ children, isCloseable, title, type, closeAriaLabel, onClose, controlled, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
 export default _default;

package/dist/src/Alert/Alert.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { styled } from "styled-components";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { Box } from "../Box";
@@ -47,12 +48,6 @@ const Alert = ({ children, isCloseable = false, title, type = "informative", clo
     };
     if (!isVisible)
         return null;
-    return (React.createElement(Flex, { bg: alertColours[type].backgroundColor, p: "x2", borderRadius: "medium", borderLeftWidth: "4px", borderLeftColor: alertColours[type].borderColor, borderLeftStyle: "solid", role: "alert", alignItems: children ? "flex-start" : undefined, ...props },
-        type === "danger" && React.createElement(Icon, { size: "x3", icon: "error", mr: "x1", color: alertColours[type].borderColor }),
-        type === "success" && React.createElement(Icon, { size: "x3", icon: "check", mr: "x1", color: alertColours[type].borderColor }),
-        React.createElement(Flex, { flexDirection: "column", gap: componentVariant === "touch" ? "half" : "none", mr: "auto" },
-            title && React.createElement(Text, { fontWeight: "bold" }, title),
-            React.createElement(Box, null, children)),
-        isCloseable && React.createElement(CloseButton, { onClick: hideAlert, "aria-label": closeAriaLabel })));
+    return (_jsxs(Flex, { bg: alertColours[type].backgroundColor, p: "x2", borderRadius: "medium", borderLeftWidth: "4px", borderLeftColor: alertColours[type].borderColor, borderLeftStyle: "solid", role: "alert", alignItems: children ? "flex-start" : undefined, ...props, children: [type === "danger" && _jsx(Icon, { size: "x3", icon: "error", mr: "x1", color: alertColours[type].borderColor }), type === "success" && _jsx(Icon, { size: "x3", icon: "check", mr: "x1", color: alertColours[type].borderColor }), _jsxs(Flex, { flexDirection: "column", gap: componentVariant === "touch" ? "half" : "none", mr: "auto", children: [title && _jsx(Text, { fontWeight: "bold", children: title }), _jsx(Box, { children: children })] }), isCloseable && _jsx(CloseButton, { onClick: hideAlert, "aria-label": closeAriaLabel })] }));
 };
 export default styled(Alert)(styles);

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

@@ -10,7 +10,7 @@ declare const _default: {
         type?: import("./Alert").NotificationType;
         onClose?: any;
         controlled?: boolean;
-    }, never>> & string & Omit<({ children, isCloseable, title, type, closeAriaLabel, onClose, controlled, ...props }: import("./Alert").AlertProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+    }, never>> & string & Omit<({ children, isCloseable, title, type, closeAriaLabel, onClose, controlled, ...props }: import("./Alert").AlertProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
 };
 export default _default;
 type Story = StoryObj<typeof Alert>;

package/dist/src/Alert/Alert.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Alert, Flex } from "../index";
 import { Link } from "../Link";
 export default {
@@ -7,10 +7,7 @@ export default {
 };
 const alertTypes = ["danger", "informative", "success", "warning"];
 export const AlertTypes = {
-    render: () => (React.createElement(Flex, { flexDirection: "column", gap: "x1" }, alertTypes.map((type) => (React.createElement(Alert, { key: type, type: type, title: type },
-        "This is an alert with type \"",
-        type,
-        "\""))))),
+    render: () => (_jsx(Flex, { flexDirection: "column", gap: "x1", children: alertTypes.map((type) => (_jsxs(Alert, { type: type, title: type, children: ["This is an alert with type \"", type, "\""] }, type))) })),
 };
 export const WithACloseButton = {
     args: {
@@ -29,10 +26,7 @@ export const WithATitle = {
 };
 export const WithALink = {
     args: {
-        children: (React.createElement(React.Fragment, null,
-            "An alert with ",
-            React.createElement(Link, { href: "/" }, "linked details"),
-            ".")),
+        children: (_jsxs(_Fragment, { children: ["An alert with ", _jsx(Link, { href: "/", children: "linked details" }), "."] })),
     },
     name: "With a link",
 };

package/dist/src/Alert/CloseButton.d.ts

@@ -3,5 +3,5 @@ type CloseButtonProps = {
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     "aria-label": string;
 };
-declare const CloseButton: ({ onClick, "aria-label": ariaLabel }: CloseButtonProps) => React.JSX.Element;
+declare const CloseButton: ({ onClick, "aria-label": ariaLabel }: CloseButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default CloseButton;

package/dist/src/Alert/CloseButton.js

@@ -1,10 +1,9 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { Flex } from "../Flex";
 import { ControlIcon } from "../Button";
 const CloseButton = ({ onClick, "aria-label": ariaLabel }) => {
     const { t } = useTranslation();
-    return (React.createElement(Flex, { ml: "x2", height: "x3" },
-        React.createElement(ControlIcon, { size: "x3", icon: "close", onClick: onClick, "aria-label": ariaLabel || t("close"), label: t("close") })));
+    return (_jsx(Flex, { ml: "x2", height: "x3", children: _jsx(ControlIcon, { size: "x3", icon: "close", onClick: onClick, "aria-label": ariaLabel || t("close"), label: t("close") }) }));
 };
 export default CloseButton;

package/dist/src/AppTag/AppTag.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { NulogyAppName } from "../types/NulogyApp";
 import { AppTagType } from "./types";
 export type AppTagProps = {
@@ -6,4 +5,4 @@ export type AppTagProps = {
     type?: AppTagType;
     hideTooltip?: boolean;
 };
-export default function AppTag({ app, type, hideTooltip }: AppTagProps): React.JSX.Element;
+export default function AppTag({ app, type, hideTooltip }: AppTagProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/AppTag/AppTag.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled, useTheme } from "styled-components";
 import { Text } from "../Type";
 import { APP_ABBREVIATIONS, APP_DISPLAY_NAMES } from "../types/NulogyApp";
@@ -10,11 +10,7 @@ export default function AppTag({ app, type = "active", hideTooltip = false }) {
     const theme = useTheme();
     const abbreviation = APP_ABBREVIATIONS[app];
     const displayName = APP_DISPLAY_NAMES[app];
-    return (React.createElement(MiniTooltip, { content: displayName, hideTooltip: hideTooltip },
-        React.createElement(Wrapper, { "$type": type },
-            React.createElement(LogoWrapper, { "$type": type },
-                React.createElement(NulogyLogo, { width: theme.space.x1, height: theme.space.x1 })),
-            React.createElement(Text, { fontSize: "smaller", fontWeight: "bold", color: theme.colors[appTagColors[type].primary], px: "x0_75", pl: "x0_5", lineHeight: "smallerText", letterSpacing: ".05em" }, abbreviation))));
+    return (_jsx(MiniTooltip, { content: displayName, hideTooltip: hideTooltip, children: _jsxs(Wrapper, { "$type": type, children: [_jsx(LogoWrapper, { "$type": type, children: _jsx(NulogyLogo, { width: theme.space.x1, height: theme.space.x1 }) }), _jsx(Text, { fontSize: "smaller", fontWeight: "bold", color: theme.colors[appTagColors[type].primary], px: "x0_75", pl: "x0_5", lineHeight: "smallerText", letterSpacing: ".05em", children: abbreviation })] }) }));
 }
 const Wrapper = styled.span(({ theme, $type }) => {
     const color = theme.colors[appTagColors[$type].secondary];

package/dist/src/AppTag/components/NulogyLogo.d.ts

@@ -1,2 +1,2 @@
 import React from "react";
-export default function NulogyLogo({ width, height, ...props }: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export default function NulogyLogo({ width, height, ...props }: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/src/AppTag/components/NulogyLogo.js

@@ -1,5 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function NulogyLogo({ width = 8, height = 8, ...props }) {
-    return (React.createElement("svg", { width: width, height: height, viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        React.createElement("path", { d: "M6.75004 0.290783L8 0.872348V6.10892C8 7.23335 6.80591 7.43084 5.99989 7.56333C6.4609 7.43084 6.7526 7.28197 6.75004 6.10892V1.45441L5.50008 0.872348L6.75004 0.290783ZM1.49987 7.27255V4.07344C1.49987 3.7514 1.70755 3.38717 1.95959 3.26163L3.25007 2.61655V4.65104L4.50003 5.52785C4.75207 5.67671 5.25017 5.68019 5.25017 5.23657V4.36373L4.74951 4.07245V0L0.938216 1.63404C0.420065 1.85585 0 2.55502 0 3.2001V8L1.49987 7.27255Z", fill: "white" })));
+    return (_jsx("svg", { width: width, height: height, viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M6.75004 0.290783L8 0.872348V6.10892C8 7.23335 6.80591 7.43084 5.99989 7.56333C6.4609 7.43084 6.7526 7.28197 6.75004 6.10892V1.45441L5.50008 0.872348L6.75004 0.290783ZM1.49987 7.27255V4.07344C1.49987 3.7514 1.70755 3.38717 1.95959 3.26163L3.25007 2.61655V4.65104L4.50003 5.52785C4.75207 5.67671 5.25017 5.68019 5.25017 5.23657V4.36373L4.74951 4.07245V0L0.938216 1.63404C0.420065 1.85585 0 2.55502 0 3.2001V8L1.49987 7.27255Z", fill: "white" }) }));
 }

package/dist/src/AppTag/stories/AppTag.story.d.ts

@@ -1,12 +1,11 @@
-import React from "react";
 import { AppTag } from "..";
 declare const _default: {
     title: string;
     component: typeof AppTag;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithoutATooltip: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };

package/dist/src/AppTag/stories/AppTag.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AppTag } from "..";
 import { APP_DISPLAY_NAMES } from "../../types/NulogyApp";
 import { Table } from "../../Table";
@@ -19,16 +19,14 @@ export const Default = () => {
     const rows = appNames.map((appName) => ({
         id: appName,
         name: APP_DISPLAY_NAMES[appName],
-        active: React.createElement(AppTag, { app: appName, type: "active" }),
-        inactive: React.createElement(AppTag, { app: appName, type: "inactive" }),
-        interactive: React.createElement(AppTag, { app: appName, type: "interactive" }),
+        active: _jsx(AppTag, { app: appName, type: "active" }),
+        inactive: _jsx(AppTag, { app: appName, type: "inactive" }),
+        interactive: _jsx(AppTag, { app: appName, type: "interactive" }),
     }));
-    return React.createElement(Table, { rowHovers: false, columns: columns, rows: rows });
+    return _jsx(Table, { rowHovers: false, columns: columns, rows: rows });
 };
 export const WithoutATooltip = () => {
     const appNames = Object.keys(APP_DISPLAY_NAMES);
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-        React.createElement(Heading1, { compact: true }, "AppTag without tooltip"),
-        React.createElement(Flex, { gap: "x2" }, appNames.map((appName) => (React.createElement(AppTag, { key: appName, app: appName, type: "active", hideTooltip: true }))))));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Heading1, { compact: true, children: "AppTag without tooltip" }), _jsx(Flex, { gap: "x2", children: appNames.map((appName) => (_jsx(AppTag, { app: appName, type: "active", hideTooltip: true }, appName))) })] }));
 };
 WithoutATooltip.storyName = "Without a tooltip";

package/dist/src/AppTag/stories/AppTag.usecases.story.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { AppTag } from "..";
 declare const _default: {
     title: string;
@@ -6,22 +5,22 @@ declare const _default: {
 };
 export default _default;
 export declare const WithALink: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };
 export declare const WithText: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };
 export declare const WithMessages: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };
 export declare const WithTooltip: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };
 export declare const InsideAModal: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };

package/dist/src/AppTag/stories/AppTag.usecases.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AppTag } from "..";
 import { Flex, InlineFlex } from "../../Flex";
 import { Icon } from "../../Icon";
@@ -15,31 +15,11 @@ export default {
     component: AppTag,
 };
 export const WithALink = () => {
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-        React.createElement(Flex, { flexDirection: "column", gap: "x1" },
-            React.createElement(Heading1, { compact: true }, "AppTag with Link"),
-            React.createElement(Text, { fontSize: "sm" },
-                "These examples show the ",
-                React.createElement(Code, null, "Link"),
-                " component used with the ",
-                React.createElement(Code, null, "forApp"),
-                " prop. See the",
-                " ",
-                React.createElement(Link, { href: "/?path=/story/components-link--with-app-tag" }, "With AppTag"),
-                " Link story for more examples.")),
-        React.createElement(InlineFlex, { flexDirection: "column", gap: "x2" },
-            React.createElement(Link, { href: "#app", forApp: "digital-quality-inspection" }, "POLI-120392"),
-            React.createElement(Link, { underline: false, href: "#app", forApp: "supplier-collaboration" }, "POLI-120392"))));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Flex, { flexDirection: "column", gap: "x1", children: [_jsx(Heading1, { compact: true, children: "AppTag with Link" }), _jsxs(Text, { fontSize: "sm", children: ["These examples show the ", _jsx(Code, { children: "Link" }), " component used with the ", _jsx(Code, { children: "forApp" }), " prop. See the", " ", _jsx(Link, { href: "/?path=/story/components-link--with-app-tag", children: "With AppTag" }), " Link story for more examples."] })] }), _jsxs(InlineFlex, { flexDirection: "column", gap: "x2", children: [_jsx(Link, { href: "#app", forApp: "digital-quality-inspection", children: "POLI-120392" }), _jsx(Link, { underline: false, href: "#app", forApp: "supplier-collaboration", children: "POLI-120392" })] })] }));
 };
 WithALink.storyName = "With a Link";
 export const WithText = () => {
-    return (React.createElement(InlineFlex, { flexDirection: "column", gap: "x2" },
-        React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
-            React.createElement(Text, null, "Entity reference"),
-            React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" })),
-        React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
-            React.createElement(Text, { color: "midGrey" }, "Inactive entity reference"),
-            React.createElement(AppTag, { app: "supplier-collaboration", type: "inactive" }))));
+    return (_jsxs(InlineFlex, { flexDirection: "column", gap: "x2", children: [_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(Text, { children: "Entity reference" }), _jsx(AppTag, { app: "digital-quality-inspection", type: "active" })] }), _jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(Text, { color: "midGrey", children: "Inactive entity reference" }), _jsx(AppTag, { app: "supplier-collaboration", type: "inactive" })] })] }));
 };
 WithText.storyName = "With text";
 export const WithMessages = () => {
@@ -51,68 +31,42 @@ export const WithMessages = () => {
         {
             id: "status-indicator",
             type: "Using a StatusIndicator",
-            example: (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
-                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }),
-                React.createElement(StatusIndicator, { type: "informative" }, "New"))),
+            example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsx(StatusIndicator, { type: "informative", children: "New" })] })),
         },
         {
             id: "custom-component",
             type: "Using a custom component",
-            example: (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
-                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }),
-                React.createElement(InlineFlex, { alignItems: "center", gap: "x0_25", bg: "lightRed", pl: "x0_5", pr: "x1", borderRadius: "rounded" },
-                    React.createElement(Icon, { icon: "error", size: "x2", color: "red" }),
-                    React.createElement(Text, { fontSize: "smaller", letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: "medium", color: "red" }, "Transaction failed")))),
+            example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsxs(InlineFlex, { alignItems: "center", gap: "x0_25", bg: "lightRed", pl: "x0_5", pr: "x1", borderRadius: "rounded", children: [_jsx(Icon, { icon: "error", size: "x2", color: "red" }), _jsx(Text, { fontSize: "smaller", letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: "medium", color: "red", children: "Transaction failed" })] })] })),
         },
         {
             id: "icon-text",
             type: "Using Icon and Text",
-            example: (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
-                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }),
-                React.createElement(InlineFlex, { alignItems: "center", gap: "x0_25", pl: "x0_5", pr: "x1", borderRadius: "rounded" },
-                    React.createElement(Icon, { icon: "warning", size: "x2", color: "yellow" }),
-                    React.createElement(Text, { fontSize: "small", color: "black" }, "Requires attention")))),
+            example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsxs(InlineFlex, { alignItems: "center", gap: "x0_25", pl: "x0_5", pr: "x1", borderRadius: "rounded", children: [_jsx(Icon, { icon: "warning", size: "x2", color: "yellow" }), _jsx(Text, { fontSize: "small", color: "black", children: "Requires attention" })] })] })),
         },
         {
             id: "text-icon",
             type: "Using Text and Icon",
-            example: (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
-                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }),
-                React.createElement(InlineFlex, { alignItems: "center", gap: "x0_75" },
-                    React.createElement(Text, { fontSize: "small" }, "Processing"),
-                    React.createElement(Icon, { icon: "loading" })))),
+            example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsxs(InlineFlex, { alignItems: "center", gap: "x0_75", children: [_jsx(Text, { fontSize: "small", children: "Processing" }), _jsx(Icon, { icon: "loading" })] })] })),
         },
         {
             id: "text-only",
             type: "Using Text",
-            example: (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
-                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }),
-                React.createElement(Text, { fontSize: "small" }, "Processed"))),
+            example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsx(Text, { fontSize: "small", children: "Processed" })] })),
         },
         {
             id: "truncated-text",
             type: "Using TruncatedText",
-            example: (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
-                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }),
-                React.createElement(TruncatedText, { fontSize: "small", color: "red" }, "Transaction failed because the supplier did not provide the required information."))),
+            example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsx(TruncatedText, { fontSize: "small", color: "red", children: "Transaction failed because the supplier did not provide the required information." })] })),
         },
     ];
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-        React.createElement(Table, { rowHovers: false, columns: columns, rows: rows })));
+    return (_jsx(Flex, { flexDirection: "column", gap: "x2", children: _jsx(Table, { rowHovers: false, columns: columns, rows: rows }) }));
 };
 WithMessages.storyName = "With messages";
 export const WithTooltip = () => {
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-        React.createElement(Tooltip, { tooltip: "This is a tooltip" },
-            React.createElement(InlineFlex, { alignItems: "center", gap: "half", alignSelf: "flex-start" },
-                React.createElement(Text, null, "Entity reference"),
-                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" })))));
+    return (_jsx(Flex, { flexDirection: "column", gap: "x2", children: _jsx(Tooltip, { tooltip: "This is a tooltip", children: _jsxs(InlineFlex, { alignItems: "center", gap: "half", alignSelf: "flex-start", children: [_jsx(Text, { children: "Entity reference" }), _jsx(AppTag, { app: "digital-quality-inspection", type: "active" })] }) }) }));
 };
 WithTooltip.storyName = "With Tooltip";
 export const InsideAModal = () => {
-    return (React.createElement(Modal, { title: "Modal Title" },
-        React.createElement(Flex, { flexDirection: "column", gap: "half" },
-            React.createElement(Text, null, "The point of this test is to see if the tooltip is visible and shown over the modal and its overlay"),
-            React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }))));
+    return (_jsx(Modal, { title: "Modal Title", children: _jsxs(Flex, { flexDirection: "column", gap: "half", children: [_jsx(Text, { children: "The point of this test is to see if the tooltip is visible and shown over the modal and its overlay" }), _jsx(AppTag, { app: "digital-quality-inspection", type: "active" })] }) }));
 };
 InsideAModal.storyName = "Inside a Modal";

package/dist/src/AsyncSelect/AsyncSelect.graphql.story.d.ts

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

package/dist/src/AsyncSelect/AsyncSelect.graphql.story.js

@@ -1,6 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { gql, useLazyQuery } from "@apollo/client";
 import { MockedProvider } from "@apollo/client/testing";
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { AsyncSelect } from "../index";
 export default {
     title: "Components/AsyncSelect/GraphQL",
@@ -46,7 +47,6 @@ const AsyncSelectWithApollo = () => {
         }
         return [];
     }, [data, getCountries]);
-    return React.createElement(AsyncSelect, { placeholder: "Search for a country", loadOptions: loadOptions, labelText: "Country" });
+    return _jsx(AsyncSelect, { placeholder: "Search for a country", loadOptions: loadOptions, labelText: "Country" });
 };
-export const WithApolloClientExample = () => (React.createElement(MockedProvider, { mocks: mocks, addTypename: false },
-    React.createElement(AsyncSelectWithApollo, null)));
+export const WithApolloClientExample = () => (_jsx(MockedProvider, { mocks: mocks, addTypename: false, children: _jsx(AsyncSelectWithApollo, {}) }));

package/dist/src/AsyncSelect/AsyncSelect.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import AsyncReactSelect from "react-select/async";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "styled-components";
@@ -18,27 +19,24 @@ const AsyncSelect = forwardRef(({ autocomplete, labelText, required, requirement
     const error = !!(errorMessage || errorList);
     const componentVariant = useComponentVariant(variant);
     noOptionsMessage || (noOptionsMessage = () => t("no options"));
-    return (React.createElement(Field, { ...spaceProps },
-        React.createElement(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText },
-            React.createElement(AsyncReactSelect, { className: className, classNamePrefix: classNamePrefix, noOptionsMessage: noOptionsMessage || t("no options"), value: value, ref: ref, defaultInputValue: defaultValue, placeholder: placeholder || t("start typing"), styles: customStyles({
-                    hasIcon: Boolean(props.iconLeft),
-                    theme,
-                    error,
-                    variant,
-                    maxHeight,
-                    windowed: false,
-                    hasDefaultOptions: Boolean(defaultOptions),
-                }), isDisabled: disabled, isSearchable: autocomplete, "aria-required": required, required: required, "aria-invalid": error, defaultMenuIsOpen: initialIsOpen, inputId: id, onBlur: onBlur, onChange: onChange, name: name, isMulti: multiselect, menuIsOpen: menuIsOpen, onMenuOpen: onMenuOpen, onMenuClose: onMenuClose, menuPosition: menuPosition, onInputChange: onInputChange, components: {
-                    Option: (props) => (React.createElement(SelectOption, { variant: componentVariant, ...props }, props.children)),
-                    Control: SelectControl,
-                    MultiValue: SelectMultiValue,
-                    ClearIndicator: SelectClearIndicator,
-                    DropdownIndicator: SelectDropdownIndicator,
-                    SelectContainer: SelectContainer,
-                    Menu: SelectMenu,
-                    Input: SelectInput,
-                    ...components,
-                }, "aria-label": ariaLabel, cacheOptions: cacheOptions, defaultOptions: defaultOptions, loadOptions: loadOptions, isClearable: isClearable, ...props }),
-            React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList }))));
+    return (_jsx(Field, { ...spaceProps, children: _jsxs(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText, children: [_jsx(AsyncReactSelect, { className: className, classNamePrefix: classNamePrefix, noOptionsMessage: noOptionsMessage || t("no options"), value: value, ref: ref, defaultInputValue: defaultValue, placeholder: placeholder || t("start typing"), styles: customStyles({
+                        hasIcon: Boolean(props.iconLeft),
+                        theme,
+                        error,
+                        variant,
+                        maxHeight,
+                        windowed: false,
+                        hasDefaultOptions: Boolean(defaultOptions),
+                    }), isDisabled: disabled, isSearchable: autocomplete, "aria-required": required, required: required, "aria-invalid": error, defaultMenuIsOpen: initialIsOpen, inputId: id, onBlur: onBlur, onChange: onChange, name: name, isMulti: multiselect, menuIsOpen: menuIsOpen, onMenuOpen: onMenuOpen, onMenuClose: onMenuClose, menuPosition: menuPosition, onInputChange: onInputChange, components: {
+                        Option: (props) => (_jsx(SelectOption, { variant: componentVariant, ...props, children: props.children })),
+                        Control: SelectControl,
+                        MultiValue: SelectMultiValue,
+                        ClearIndicator: SelectClearIndicator,
+                        DropdownIndicator: SelectDropdownIndicator,
+                        SelectContainer: SelectContainer,
+                        Menu: SelectMenu,
+                        Input: SelectInput,
+                        ...components,
+                    }, "aria-label": ariaLabel, cacheOptions: cacheOptions, defaultOptions: defaultOptions, loadOptions: loadOptions, isClearable: isClearable, ...props }), _jsx(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })] }) }));
 });
 export default AsyncSelect;

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

@@ -1,29 +1,28 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithDefaultOptions: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithADefaultValue: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const Multiselect: () => React.JSX.Element;
-export declare const WithAClearButton: () => React.JSX.Element;
+export declare const Multiselect: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithAClearButton: () => import("react/jsx-runtime").JSX.Element;
 export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const Controlled: () => React.JSX.Element;
-export declare const WithIcon: () => React.JSX.Element;
-export declare const WithACustomNoOptionsMessage: () => React.JSX.Element;
+export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithACustomNoOptionsMessage: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/AsyncSelect/AsyncSelect.story.js

@@ -1,4 +1,5 @@
-import React, { useRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { action } from "@storybook/addon-actions";
 import { useState } from "react";
 import { AsyncSelect, Button, Flex } from "../index";
@@ -6,8 +7,8 @@ import { loadMatchingProvinces } from "./fixtures";
 export default {
     title: "Components/AsyncSelect",
 };
-export const Default = () => (React.createElement(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
-export const WithDefaultOptions = () => (React.createElement(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", onInputChange: action("typed input value changed"), isClearable: true, defaultOptions: [
+export const Default = () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
+export const WithDefaultOptions = () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", onInputChange: action("typed input value changed"), isClearable: true, defaultOptions: [
         {
             value: "ON",
             label: "Ontario",
@@ -20,20 +21,18 @@ export const WithDefaultOptions = () => (React.createElement(AsyncSelect, { plac
 WithDefaultOptions.story = {
     name: "With default options",
 };
-export const WithADefaultValue = () => (React.createElement(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", defaultValue: "Ontario", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
+export const WithADefaultValue = () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", defaultValue: "Ontario", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
 WithADefaultValue.story = {
     name: "With a default value",
 };
-export const Multiselect = () => (React.createElement(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Provinces", multiselect: true, onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
-export const WithAClearButton = () => (React.createElement(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Provinces", isClearable: true, onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
+export const Multiselect = () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Provinces", multiselect: true, onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
+export const WithAClearButton = () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Provinces", isClearable: true, onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
 export const UsingRefToControlFocus = () => {
     const ref = useRef(null);
     const handleClick = () => {
         ref.current.focus();
     };
-    return (React.createElement(Flex, { gap: "x2", flexDirection: "column" },
-        React.createElement(AsyncSelect, { ref: ref, placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", defaultValue: "Ontario", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }),
-        React.createElement(Button, { onClick: handleClick }, "Focus the Input")));
+    return (_jsxs(Flex, { gap: "x2", flexDirection: "column", children: [_jsx(AsyncSelect, { ref: ref, placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", defaultValue: "Ontario", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }), _jsx(Button, { onClick: handleClick, children: "Focus the Input" })] }));
 };
 UsingRefToControlFocus.story = {
     name: "using ref to control focus",
@@ -46,9 +45,7 @@ export const Controlled = () => {
     const handleClear = () => {
         setValue(null);
     };
-    return (React.createElement(Flex, { gap: "x2", flexDirection: "column" },
-        React.createElement(AsyncSelect, { onChange: handleChange, value: value, labelText: "Province", loadOptions: loadMatchingProvinces }),
-        React.createElement(Button, { onClick: handleClear }, "Clear")));
+    return (_jsxs(Flex, { gap: "x2", flexDirection: "column", children: [_jsx(AsyncSelect, { onChange: handleChange, value: value, labelText: "Province", loadOptions: loadMatchingProvinces }), _jsx(Button, { onClick: handleClear, children: "Clear" })] }));
 };
-export const WithIcon = () => (React.createElement(AsyncSelect, { iconLeft: "search", placeholder: "Search for a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
-export const WithACustomNoOptionsMessage = () => (React.createElement(AsyncSelect, { placeholder: "Enter a province", noOptionsMessage: () => "No provinces found", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
+export const WithIcon = () => (_jsx(AsyncSelect, { iconLeft: "search", placeholder: "Search for a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
+export const WithACustomNoOptionsMessage = () => (_jsx(AsyncSelect, { placeholder: "Enter a province", noOptionsMessage: () => "No provinces found", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));

package/dist/src/AsyncSelect/AsyncSelectComponents.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, InputProps, MenuProps, MultiValueProps, Props } from "react-select";
 import { GroupBase } from "react-select";
 import { OptionProps } from "react-select";
@@ -9,14 +8,14 @@ interface CustomSelectProps<Option, IsMulti extends boolean, Group extends Group
 }
 export declare const SelectControl: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, children, ...props }: ControlProps<Option, IsMulti, Group> & {
     selectProps: CustomSelectProps<Option, IsMulti, Group>;
-}) => React.JSX.Element;
-export declare const SelectMultiValue: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>) => React.JSX.Element;
-export declare const SelectClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>) => React.JSX.Element;
-export declare const SelectDropdownIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>) => React.JSX.Element;
-export declare const SelectContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>) => React.JSX.Element;
-export declare const SelectInput: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>) => React.JSX.Element;
-export declare const SelectMenu: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectMultiValue: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectDropdownIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInput: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectMenu: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;
 export declare function SelectOption<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: OptionProps<Option, IsMulti, Group> & {
     variant?: ComponentVariant;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};