@nulogy/components 16.0.0 → 16.0.2

package/dist/src/ToastContainer/ToastFunction.js

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

package/dist/src/Toggle/Toggle.js

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

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

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

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

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

package/dist/src/Toggle/ToggleButton.js

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

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

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

package/dist/src/Tokens/Tokens.story.js

@@ -1,80 +1,47 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useTheme } from "styled-components";
 import { Text, Box, Flex, Heading3 } from "..";
 export default {
     title: "Tokens",
 };
 const Palette = ({ colour, name }) => {
-    return (React.createElement(Box, { width: { extraSmall: 1, small: 1 / 6 } },
-        React.createElement(Box, { mr: "x2", mb: "x2", boxShadow: "medium", overflow: "hidden", borderRadius: "small" },
-            React.createElement(Box, { pt: { extraSmall: "x4", small: "x8" }, pb: { extraSmall: "x4", small: "x8" }, mb: "x1", bg: colour }),
-            React.createElement(Text, { mb: "half", px: "x1" }, name),
-            React.createElement(Text, { fontSize: "small", px: "x1", pb: "x1" }, colour))));
+    return (_jsx(Box, { width: { extraSmall: 1, small: 1 / 6 }, children: _jsxs(Box, { mr: "x2", mb: "x2", boxShadow: "medium", overflow: "hidden", borderRadius: "small", children: [_jsx(Box, { pt: { extraSmall: "x4", small: "x8" }, pb: { extraSmall: "x4", small: "x8" }, mb: "x1", bg: colour }), _jsx(Text, { mb: "half", px: "x1", children: name }), _jsx(Text, { fontSize: "small", px: "x1", pb: "x1", children: colour })] }) }));
 };
 export const Colors = () => {
     const theme = useTheme();
-    return (React.createElement(Flex, { flexWrap: "wrap" }, Object.keys(theme.colors).map((color) => (React.createElement(Palette, { key: color, colour: theme.colors[color], name: color })))));
+    return (_jsx(Flex, { flexWrap: "wrap", children: Object.keys(theme.colors).map((color) => (_jsx(Palette, { colour: theme.colors[color], name: color }, color))) }));
 };
 export const FontSizes = () => {
     const theme = useTheme();
-    return (React.createElement(Box, null, Object.keys(theme.fontSizes).map((fontSize) => (React.createElement(Text, { key: fontSize, mb: "x2", fontSize: fontSize },
-        fontSize,
-        ": ",
-        theme.fontSizes[fontSize])))));
+    return (_jsx(Box, { children: Object.keys(theme.fontSizes).map((fontSize) => (_jsxs(Text, { mb: "x2", fontSize: fontSize, children: [fontSize, ": ", theme.fontSizes[fontSize]] }, fontSize))) }));
 };
 export const LineHeights = () => {
     const theme = useTheme();
-    return (React.createElement(Box, { maxWidth: "500px" }, Object.keys(theme.lineHeights).map((lineHeight) => (React.createElement(React.Fragment, null,
-        React.createElement(Heading3, null, lineHeight),
-        React.createElement(Box, { mb: "x1" },
-            React.createElement(Text, { lineHeight: lineHeight }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
-            React.createElement(Text, { lineHeight: lineHeight }, "Maecenas at urna egestas, dignissim risus ut, posuere lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.")))))));
+    return (_jsx(Box, { maxWidth: "500px", children: Object.keys(theme.lineHeights).map((lineHeight) => (_jsxs(_Fragment, { children: [_jsx(Heading3, { children: lineHeight }), _jsxs(Box, { mb: "x1", children: [_jsx(Text, { lineHeight: lineHeight, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }), _jsx(Text, { lineHeight: lineHeight, children: "Maecenas at urna egestas, dignissim risus ut, posuere lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." })] })] }))) }));
 };
 export const FontWeights = () => {
     const theme = useTheme();
-    return (React.createElement(Box, null, Object.keys(theme.fontWeights).map((fontWeight) => (React.createElement(Text, { key: fontWeight, mb: "x2", fontWeight: fontWeight },
-        fontWeight,
-        ": ",
-        theme.fontWeights[fontWeight])))));
+    return (_jsx(Box, { children: Object.keys(theme.fontWeights).map((fontWeight) => (_jsxs(Text, { mb: "x2", fontWeight: fontWeight, children: [fontWeight, ": ", theme.fontWeights[fontWeight]] }, fontWeight))) }));
 };
 export const SpaceAndSize = () => {
     const theme = useTheme();
-    return (React.createElement(Box, null, Object.keys(theme.space).map((space) => (React.createElement(Flex, { key: space, mb: "x2", alignItems: "center", width: "300px" },
-        React.createElement(Flex, { width: "80px", justifyContent: "flex-end", mr: "x1" },
-            React.createElement(Box, { bg: "lightGrey", height: space, width: space })),
-        React.createElement(Text, null,
-            space,
-            " (",
-            theme.space[space],
-            ")"))))));
+    return (_jsx(Box, { children: Object.keys(theme.space).map((space) => (_jsxs(Flex, { mb: "x2", alignItems: "center", width: "300px", children: [_jsx(Flex, { width: "80px", justifyContent: "flex-end", mr: "x1", children: _jsx(Box, { bg: "lightGrey", height: space, width: space }) }), _jsxs(Text, { children: [space, " (", theme.space[space], ")"] })] }, space))) }));
 };
 export const Font = () => {
     const theme = useTheme();
-    return (React.createElement(Box, null, Object.keys(theme.fonts).map((font) => (React.createElement(Text, { key: font, mb: "x2", fontFamily: font },
-        font,
-        ": ",
-        theme.fonts[font])))));
+    return (_jsx(Box, { children: Object.keys(theme.fonts).map((font) => (_jsxs(Text, { mb: "x2", fontFamily: font, children: [font, ": ", theme.fonts[font]] }, font))) }));
 };
 export const Shadows = () => {
     const theme = useTheme();
-    return (React.createElement(Box, null, Object.keys(theme.shadows).map((shadow) => (React.createElement(Box, { key: shadow, mb: "x2", p: "x1", borderRadius: "small", boxShadow: shadow },
-        shadow,
-        ": ",
-        theme.shadows[shadow])))));
+    return (_jsx(Box, { children: Object.keys(theme.shadows).map((shadow) => (_jsxs(Box, { mb: "x2", p: "x1", borderRadius: "small", boxShadow: shadow, children: [shadow, ": ", theme.shadows[shadow]] }, shadow))) }));
 };
 export const Radii = () => {
     const theme = useTheme();
-    return (React.createElement(Flex, { maxWidth: "300px", flexDirection: "column", alignItems: "center" }, Object.keys(theme.radii).map((radius) => (React.createElement(Flex, { key: radius, mb: "x2", p: "x1", borderRadius: radius, bg: "blue", color: "white", size: radius === "circle" ? "200px" : "100%", alignItems: "center", justifyContent: "center" },
-        radius,
-        ": ",
-        theme.radii[radius])))));
+    return (_jsx(Flex, { maxWidth: "300px", flexDirection: "column", alignItems: "center", children: Object.keys(theme.radii).map((radius) => (_jsxs(Flex, { mb: "x2", p: "x1", borderRadius: radius, bg: "blue", color: "white", size: radius === "circle" ? "200px" : "100%", alignItems: "center", justifyContent: "center", children: [radius, ": ", theme.radii[radius]] }, radius))) }));
 };
 export const Breakpoints = () => {
     const theme = useTheme();
-    return (React.createElement(Box, null, Object.keys(theme.breakpoints)
-        .filter((bp) => bp !== "map")
-        .map((breakpoint) => (React.createElement(Text, { mb: "x2", key: breakpoint },
-        breakpoint,
-        ": ",
-        theme.breakpoints[breakpoint])))));
+    return (_jsx(Box, { children: Object.keys(theme.breakpoints)
+            .filter((bp) => bp !== "map")
+            .map((breakpoint) => (_jsxs(Text, { mb: "x2", children: [breakpoint, ": ", theme.breakpoints[breakpoint]] }, breakpoint))) }));
 };

package/dist/src/Tooltip/Tooltip.d.ts

@@ -16,4 +16,4 @@ export interface TooltipProps {
     /** Child element that triggers the tooltip */
     children?: React.ReactNode;
 }
-export default function Tooltip({ showDelay, defaultOpen, placement, maxWidth, className, tooltip, children, }: TooltipProps): React.JSX.Element;
+export default function Tooltip({ showDelay, defaultOpen, placement, maxWidth, className, tooltip, children, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Tooltip/Tooltip.js

@@ -1,13 +1,9 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { Tooltip as BaseTooltip, TooltipContent, TooltipTrigger, TooltipProvider, } from "./components/TooltipComponents";
 import { getPlacementProps } from "./helpers";
 export default function Tooltip({ showDelay = "100", defaultOpen = false, placement = "bottom", maxWidth = "24em", className, tooltip, children, }) {
     const delayDuration = typeof showDelay === "string" ? parseInt(showDelay, 10) : showDelay;
     const { side, align } = getPlacementProps(placement);
-    return (React.createElement(TooltipProvider, null,
-        React.createElement(BaseTooltip, { defaultOpen: defaultOpen, delayDuration: delayDuration, supportMobileTap: true },
-            React.createElement(TooltipTrigger, { asChild: true, "data-testid": "nds-tooltip-trigger" }, children),
-            React.createElement(TooltipPrimitive.Portal, null,
-                React.createElement(TooltipContent, { side: side, align: align, className: className, maxWidth: maxWidth }, tooltip)))));
+    return (_jsx(TooltipProvider, { children: _jsxs(BaseTooltip, { defaultOpen: defaultOpen, delayDuration: delayDuration, supportMobileTap: true, children: [_jsx(TooltipTrigger, { asChild: true, "data-testid": "nds-tooltip-trigger", children: children }), _jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipContent, { side: side, align: align, className: className, maxWidth: maxWidth, children: tooltip }) })] }) }));
 }

package/dist/src/Tooltip/Tooltip.story.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { Box, Button, DescriptionDetails, DescriptionList, DescriptionTerm, Divider, Flex, Icon, Link, StatusIndicator, Text, Tooltip, } from "../index";
 export default {
@@ -8,122 +9,46 @@ export default {
     },
 };
 export const Default = {
-    render: () => (React.createElement(Flex, { p: "x8" },
-        React.createElement(Tooltip, { tooltip: "I am a Tooltip!" },
-            React.createElement(Button, { "data-testid": "tooltip-trigger" }, "Button")))),
+    render: () => (_jsx(Flex, { p: "x8", children: _jsx(Tooltip, { tooltip: "I am a Tooltip!", children: _jsx(Button, { "data-testid": "tooltip-trigger", children: "Button" }) }) })),
 };
 export const WithWrappedText = {
-    render: () => (React.createElement(Flex, { p: "x8" },
-        React.createElement(Tooltip, { placement: "bottom", tooltip: "I am a Tooltip! I have very long text, and my default max-width is 24em (based on 14px font-size), which is equal to 336px, or approximately 45 characters.", defaultOpen: true },
-            React.createElement(Button, null, " Button ")))),
+    render: () => (_jsx(Flex, { p: "x8", children: _jsx(Tooltip, { placement: "bottom", tooltip: "I am a Tooltip! I have very long text, and my default max-width is 24em (based on 14px font-size), which is equal to 336px, or approximately 45 characters.", defaultOpen: true, children: _jsx(Button, { children: " Button " }) }) })),
     name: "with wrapped text",
 };
 export const WithCustomMaxWidth = {
-    render: (args) => (React.createElement(Flex, { p: "x8" },
-        React.createElement(Tooltip, { ...args, placement: "bottom", tooltip: "I am a Tooltip! I have very long text, but I have a smaller maxWidth prop that causes me to wrap frequently.", maxWidth: "128px", defaultOpen: true },
-            React.createElement(Button, null, " Button ")))),
+    render: (args) => (_jsx(Flex, { p: "x8", children: _jsx(Tooltip, { ...args, placement: "bottom", tooltip: "I am a Tooltip! I have very long text, but I have a smaller maxWidth prop that causes me to wrap frequently.", maxWidth: "128px", defaultOpen: true, children: _jsx(Button, { children: " Button " }) }) })),
     name: "with custom maxWidth",
 };
 export const WithPlacement = {
-    render: () => (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
-            React.createElement(Tooltip, { placement: "top-start", tooltip: "top-start", defaultOpen: true },
-                React.createElement(Button, null, "Tooltip trigger")),
-            React.createElement(Tooltip, { placement: "top", tooltip: "top", defaultOpen: true },
-                React.createElement(Button, null, "Tooltip trigger")),
-            React.createElement(Tooltip, { placement: "top-end", tooltip: "top-end", defaultOpen: true },
-                React.createElement(Button, null, "Tooltip trigger"))),
-        React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
-            React.createElement(Tooltip, { placement: "left-start", tooltip: "left-start", defaultOpen: true },
-                React.createElement(Button, null, "Tooltip trigger")),
-            React.createElement(Tooltip, { placement: "left", tooltip: "left", defaultOpen: true },
-                React.createElement(Button, null, "Tooltip trigger")),
-            React.createElement(Tooltip, { placement: "left-end", tooltip: "left-end", defaultOpen: true },
-                React.createElement(Button, null, "Tooltip trigger"))),
-        React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
-            React.createElement(Tooltip, { placement: "right-start", tooltip: "right-start", defaultOpen: true },
-                React.createElement(Button, null, "Tooltip trigger")),
-            React.createElement(Tooltip, { placement: "right", tooltip: "right", defaultOpen: true },
-                React.createElement(Button, null, "Tooltip trigger")),
-            React.createElement(Tooltip, { placement: "right-end", tooltip: "right-end", defaultOpen: true },
-                React.createElement(Button, null, "Tooltip trigger"))),
-        React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
-            React.createElement(Tooltip, { placement: "bottom-start", tooltip: "bottom-start", defaultOpen: true },
-                React.createElement(Button, null, "Tooltip trigger")),
-            React.createElement(Tooltip, { placement: "bottom", tooltip: "bottom", defaultOpen: true },
-                React.createElement(Button, null, "Tooltip trigger")),
-            React.createElement(Tooltip, { placement: "bottom-end", tooltip: "bottom-end", defaultOpen: true },
-                React.createElement(Button, null, "Tooltip trigger"))))),
+    render: () => (_jsxs(_Fragment, { children: [_jsxs(Flex, { my: "x6", mx: "x8", justifyContent: "space-around", children: [_jsx(Tooltip, { placement: "top-start", tooltip: "top-start", defaultOpen: true, children: _jsx(Button, { children: "Tooltip trigger" }) }), _jsx(Tooltip, { placement: "top", tooltip: "top", defaultOpen: true, children: _jsx(Button, { children: "Tooltip trigger" }) }), _jsx(Tooltip, { placement: "top-end", tooltip: "top-end", defaultOpen: true, children: _jsx(Button, { children: "Tooltip trigger" }) })] }), _jsxs(Flex, { my: "x6", mx: "x8", justifyContent: "space-around", children: [_jsx(Tooltip, { placement: "left-start", tooltip: "left-start", defaultOpen: true, children: _jsx(Button, { children: "Tooltip trigger" }) }), _jsx(Tooltip, { placement: "left", tooltip: "left", defaultOpen: true, children: _jsx(Button, { children: "Tooltip trigger" }) }), _jsx(Tooltip, { placement: "left-end", tooltip: "left-end", defaultOpen: true, children: _jsx(Button, { children: "Tooltip trigger" }) })] }), _jsxs(Flex, { my: "x6", mx: "x8", justifyContent: "space-around", children: [_jsx(Tooltip, { placement: "right-start", tooltip: "right-start", defaultOpen: true, children: _jsx(Button, { children: "Tooltip trigger" }) }), _jsx(Tooltip, { placement: "right", tooltip: "right", defaultOpen: true, children: _jsx(Button, { children: "Tooltip trigger" }) }), _jsx(Tooltip, { placement: "right-end", tooltip: "right-end", defaultOpen: true, children: _jsx(Button, { children: "Tooltip trigger" }) })] }), _jsxs(Flex, { my: "x6", mx: "x8", justifyContent: "space-around", children: [_jsx(Tooltip, { placement: "bottom-start", tooltip: "bottom-start", defaultOpen: true, children: _jsx(Button, { children: "Tooltip trigger" }) }), _jsx(Tooltip, { placement: "bottom", tooltip: "bottom", defaultOpen: true, children: _jsx(Button, { children: "Tooltip trigger" }) }), _jsx(Tooltip, { placement: "bottom-end", tooltip: "bottom-end", defaultOpen: true, children: _jsx(Button, { children: "Tooltip trigger" }) })] })] })),
     name: "with placement",
 };
 export const WithLinkPassedIn = {
-    render: (args) => (React.createElement(Tooltip, { ...args, placement: "bottom", tooltip: React.createElement(Link, { href: "/" }, " Link "), defaultOpen: true },
-        React.createElement(Button, null, " Button "))),
+    render: (args) => (_jsx(Tooltip, { ...args, placement: "bottom", tooltip: _jsx(Link, { href: "/", children: " Link " }), defaultOpen: true, children: _jsx(Button, { children: " Button " }) })),
     name: "with Link passed in",
 };
 export const WithButtonPassedIn = {
-    render: (args) => (React.createElement(Tooltip, { ...args, placement: "bottom", tooltip: React.createElement(Button, { href: "/" }, " Button "), defaultOpen: true },
-        React.createElement(Button, null, " Button "))),
+    render: (args) => (_jsx(Tooltip, { ...args, placement: "bottom", tooltip: _jsx(Button, { href: "/", children: " Button " }), defaultOpen: true, children: _jsx(Button, { children: " Button " }) })),
     name: "with Button passed in",
 };
 export const WithCustomShowDelay = {
-    render: (args) => (React.createElement(Tooltip, { ...args, placement: "bottom", tooltip: "Tooltip", showDelay: "1000" },
-        React.createElement(Button, null, " Button "))),
+    render: (args) => (_jsx(Tooltip, { ...args, placement: "bottom", tooltip: "Tooltip", showDelay: "1000", children: _jsx(Button, { children: " Button " }) })),
     name: "with custom showDelay",
 };
 export const WithOtherFocusableElements = {
-    render: () => (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-            React.createElement(Button, null, " Button ")),
-        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-            React.createElement(Link, { href: "/" }, " Link ")),
-        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-            React.createElement(Text, { mr: "x2", inline: true, bg: "blue" }, "Inline Text")),
-        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-            React.createElement(Box, { width: "200px", bg: "blue" }, "Box width 200px")),
-        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-            React.createElement(Box, { bg: "blue" }, "Box")))),
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Tooltip, { placement: "bottom", tooltip: "Tooltip", children: _jsx(Button, { children: " Button " }) }), _jsx(Tooltip, { placement: "bottom", tooltip: "Tooltip", children: _jsx(Link, { href: "/", children: " Link " }) }), _jsx(Tooltip, { placement: "bottom", tooltip: "Tooltip", children: _jsx(Text, { mr: "x2", inline: true, bg: "blue", children: "Inline Text" }) }), _jsx(Tooltip, { placement: "bottom", tooltip: "Tooltip", children: _jsx(Box, { width: "200px", bg: "blue", children: "Box width 200px" }) }), _jsx(Tooltip, { placement: "bottom", tooltip: "Tooltip", children: _jsx(Box, { bg: "blue", children: "Box" }) })] })),
     name: "with other focusable elements",
 };
 export const OpenByDefault = {
-    render: (args) => (React.createElement(Tooltip, { ...args, tooltip: "I am an open Tooltip!", defaultOpen: true },
-        React.createElement(Button, null, "Hover me"))),
+    render: (args) => (_jsx(Tooltip, { ...args, tooltip: "I am an open Tooltip!", defaultOpen: true, children: _jsx(Button, { children: "Hover me" }) })),
     name: "open by default",
 };
 export const WithCustomComponent = {
-    render: (args) => (React.createElement(Tooltip, { ...args, tooltip: "See me on hover!", defaultOpen: true },
-        React.createElement(CustomComponent, null))),
+    render: (args) => (_jsx(Tooltip, { ...args, tooltip: "See me on hover!", defaultOpen: true, children: _jsx(CustomComponent, {}) })),
 };
-const CustomComponent = React.forwardRef((props, forwardedRef) => (React.createElement("span", { ref: forwardedRef, ...props },
-    React.createElement(Text, { inline: true }, "This component uses the forwardedRef from the Tooltip wrapping it"))));
-const CustomTooltip = () => (React.createElement(Flex, { flexDirection: "column", width: "320px", p: "x1_5" },
-    React.createElement(Text, { fontSize: "smaller", fontWeight: "medium", textTransform: "uppercase", color: "midGrey" }, "Purchase Order"),
-    React.createElement(Text, { color: "darkGrey" }, "PO 12389"),
-    React.createElement(Divider, null),
-    React.createElement(DescriptionList, null,
-        React.createElement(DescriptionTerm, null, "Customer"),
-        React.createElement(DescriptionDetails, null, "Nulogy"),
-        React.createElement(DescriptionTerm, null,
-            React.createElement(Text, { display: "inline-flex", alignItems: "end" },
-                "Order number",
-                React.createElement(Icon, { icon: "info", size: "x3", paddingLeft: "half" }))),
-        React.createElement(DescriptionDetails, null,
-            React.createElement(Link, { href: "/customer-details" }, "P12-90381-2039")),
-        React.createElement(DescriptionTerm, null, "Status"),
-        React.createElement(DescriptionDetails, null,
-            React.createElement(StatusIndicator, { type: "success" }, "Paid")),
-        React.createElement(DescriptionTerm, null, "Amount"),
-        React.createElement(DescriptionDetails, null, "$202.12"),
-        React.createElement(DescriptionTerm, null, "Amount after exchange"),
-        React.createElement(DescriptionDetails, null,
-            React.createElement(Flex, { as: "span", alignItems: "center", gap: "half" },
-                "US $202.12 ",
-                React.createElement(Icon, { icon: "arrowForward", color: "midGrey" }),
-                " CA $287.43")))));
+const CustomComponent = React.forwardRef((props, forwardedRef) => (_jsx("span", { ref: forwardedRef, ...props, children: _jsx(Text, { inline: true, children: "This component uses the forwardedRef from the Tooltip wrapping it" }) })));
+const CustomTooltip = () => (_jsxs(Flex, { flexDirection: "column", width: "320px", p: "x1_5", children: [_jsx(Text, { fontSize: "smaller", fontWeight: "medium", textTransform: "uppercase", color: "midGrey", children: "Purchase Order" }), _jsx(Text, { color: "darkGrey", children: "PO 12389" }), _jsx(Divider, {}), _jsxs(DescriptionList, { children: [_jsx(DescriptionTerm, { children: "Customer" }), _jsx(DescriptionDetails, { children: "Nulogy" }), _jsx(DescriptionTerm, { children: _jsxs(Text, { display: "inline-flex", alignItems: "end", children: ["Order number", _jsx(Icon, { icon: "info", size: "x3", paddingLeft: "half" })] }) }), _jsx(DescriptionDetails, { children: _jsx(Link, { href: "/customer-details", children: "P12-90381-2039" }) }), _jsx(DescriptionTerm, { children: "Status" }), _jsx(DescriptionDetails, { children: _jsx(StatusIndicator, { type: "success", children: "Paid" }) }), _jsx(DescriptionTerm, { children: "Amount" }), _jsx(DescriptionDetails, { children: "$202.12" }), _jsx(DescriptionTerm, { children: "Amount after exchange" }), _jsx(DescriptionDetails, { children: _jsxs(Flex, { as: "span", alignItems: "center", gap: "half", children: ["US $202.12 ", _jsx(Icon, { icon: "arrowForward", color: "midGrey" }), " CA $287.43"] }) })] })] }));
 export const WithCustomTooltip = {
-    render: () => (React.createElement(Flex, { alignItems: "center", gap: "half" },
-        React.createElement(Text, { fontSize: "small", color: "darkGrey" }, "You can embed custom components in the tooltip"),
-        React.createElement(Tooltip, { maxWidth: "340px", tooltip: React.createElement(CustomTooltip, null), defaultOpen: true },
-            React.createElement(Icon, { icon: "info", size: "x3", color: "darkGrey" })))),
+    render: () => (_jsxs(Flex, { alignItems: "center", gap: "half", children: [_jsx(Text, { fontSize: "small", color: "darkGrey", children: "You can embed custom components in the tooltip" }), _jsx(Tooltip, { maxWidth: "340px", tooltip: _jsx(CustomTooltip, {}), defaultOpen: true, children: _jsx(Icon, { icon: "info", size: "x3", color: "darkGrey" }) })] })),
     name: "with custom tooltip",
 };

package/dist/src/Tooltip/components/TooltipComponents.d.ts

@@ -5,7 +5,7 @@ declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
 type TooltipProps = TooltipPrimitive.TooltipProps & {
     supportMobileTap?: boolean;
 };
-declare function Tooltip({ children, ...props }: TooltipProps): React.JSX.Element;
+declare function Tooltip({ children, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Tooltip {
     var displayName: string;
 }

package/dist/src/Tooltip/components/TooltipComponents.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { styled, keyframes, useTheme } from "styled-components";
@@ -21,12 +22,11 @@ const TooltipProvider = TooltipPrimitive.Provider;
 function Tooltip({ children, ...props }) {
     const [open, setOpen] = React.useState(props.defaultOpen ?? false);
     const hasHover = useHasHover();
-    return (React.createElement(TooltipPrimitive.Root, { delayDuration: !hasHover && props.supportMobileTap ? 0 : props.delayDuration, onOpenChange: setOpen, open: open },
-        React.createElement(TooltipTriggerContext.Provider, { value: {
+    return (_jsx(TooltipPrimitive.Root, { delayDuration: !hasHover && props.supportMobileTap ? 0 : props.delayDuration, onOpenChange: setOpen, open: open, children: _jsx(TooltipTriggerContext.Provider, { value: {
                 open,
                 setOpen,
                 supportMobileTap: props.supportMobileTap ?? false,
-            } }, children)));
+            }, children: children }) }));
 }
 Tooltip.displayName = TooltipPrimitive.Root.displayName;
 const TooltipTrigger = React.forwardRef(({ children, ...props }, ref) => {
@@ -42,7 +42,7 @@ const TooltipTrigger = React.forwardRef(({ children, ...props }, ref) => {
             onClickProp?.(e);
         }
     }, [setOpen, hasHover, supportMobileTap, onClickProp]);
-    return (React.createElement(TooltipPrimitive.Trigger, { ref: ref, ...props, onClick: onClick }, children));
+    return (_jsx(TooltipPrimitive.Trigger, { ref: ref, ...props, onClick: onClick, children: children }));
 });
 TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
 const slideUpAndFade = keyframes `
@@ -120,9 +120,7 @@ const StyledArrow = styled(TooltipPrimitive.Arrow)(({ theme }) => ({
 }));
 const TooltipContent = React.forwardRef(({ sideOffset = 4, children, ...props }, ref) => {
     const theme = useTheme();
-    return (React.createElement(StyledContent, { ref: ref, sideOffset: sideOffset, ...props },
-        children,
-        React.createElement(StyledArrow, { width: theme.space.x1_5, height: theme.space.x0_75 })));
+    return (_jsxs(StyledContent, { ref: ref, sideOffset: sideOffset, ...props, children: [children, _jsx(StyledArrow, { width: theme.space.x1_5, height: theme.space.x0_75 })] }));
 });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/src/TopBar/TopBar.d.ts

@@ -7,7 +7,7 @@ import { PageTitle } from "./components/PageTitle";
 export interface TopBarProps {
     children?: React.ReactNode;
 }
-export default function Root({ children }: TopBarProps): React.JSX.Element;
+export default function Root({ children }: TopBarProps): import("react/jsx-runtime").JSX.Element;
 export declare const TopBar: {
     Root: typeof Root;
     PageTitle: typeof PageTitle;

package/dist/src/TopBar/TopBar.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { BackLink } from "./components/BackLink";
 import { Menu } from "./components/Menu";
 import { MenuItem } from "./components/MenuItem";
@@ -6,9 +6,7 @@ import { MenuItemLink } from "./components/MenuItemLink";
 import { PageTitle } from "./components/PageTitle";
 import { Header, Navigation, NavigationItemsList } from "./TopBar.styled";
 export default function Root({ children }) {
-    return (React.createElement(Header, null,
-        React.createElement(Navigation, null,
-            React.createElement(NavigationItemsList, null, children))));
+    return (_jsx(Header, { children: _jsx(Navigation, { children: _jsx(NavigationItemsList, { children: children }) }) }));
 }
 export const TopBar = {
     Root,