@nulogy/components 16.0.0 → 16.0.1

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,

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

@@ -1,7 +1,7 @@
-import React, { ComponentProps } from "react";
+import { ComponentProps } from "react";
 import { MaxWidthProps } from "styled-system";
 import { StyledBackLink } from "../TopBar.styled";
 interface BackLinkProps extends MaxWidthProps, ComponentProps<typeof StyledBackLink> {
 }
-export declare function BackLink({ children, maxWidth, ...props }: BackLinkProps): React.JSX.Element;
+export declare function BackLink({ children, maxWidth, ...props }: BackLinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/TopBar/components/BackLink.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from "../../Box";
 import useMediaQuery from "../../hooks/useMediaQuery";
 import { Icon } from "../../Icon";
@@ -12,8 +12,5 @@ const BACK_LINK_MAX_WIDTH = {
 };
 export function BackLink({ children, maxWidth = BACK_LINK_MAX_WIDTH, ...props }) {
     const md = useMediaQuery("phoneLandscape");
-    return (React.createElement(Box, { as: "li", flex: "1 1" },
-        React.createElement(StyledBackLink, { ...props, "data-testid": "topbar-back-link" },
-            React.createElement(Icon, { icon: "arrowBack" }),
-            md && (React.createElement(Text, { maxWidth: maxWidth, textOverflow: "ellipsis", overflow: "hidden", fontSize: "small" }, children)))));
+    return (_jsx(Box, { as: "li", flex: "1 1", children: _jsxs(StyledBackLink, { ...props, "data-testid": "topbar-back-link", children: [_jsx(Icon, { icon: "arrowBack" }), md && (_jsx(Text, { maxWidth: maxWidth, textOverflow: "ellipsis", overflow: "hidden", fontSize: "small", children: children }))] }) }));
 }

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

@@ -3,4 +3,4 @@ export declare function Menu({ children, defaultOpened, ...props }: {
     defaultOpened?: boolean;
     children: React.ReactNode;
     "aria-label"?: string;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/TopBar/components/Menu.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DialogContent } from "@reach/dialog";
 import { AnimatePresence } from "framer-motion";
 import React from "react";
@@ -41,14 +42,9 @@ export function Menu({ children, defaultOpened = false, ...props }) {
         }
         setShowMenu((s) => !s);
     }
-    return (React.createElement(Flex, { justifyContent: "flex-end", as: "li", color: "black", flex: "1 1" },
-        React.createElement(MenuButton, { onClick: toggle, "data-testid": "topbar-menu-button" },
-            React.createElement(Icon, { size: "x3", color: "midGrey", icon: showMenu ? "close" : "apps" })),
-        React.createElement(AnimatePresence, null, showMenu && (React.createElement(Overlay, { "data-testid": "topbar-menu-overlay", "data-visible": animationComplete ? "true" : undefined, initial: "hidden", animate: "visible", exit: "exit", variants: blurVariants, isOpen: showMenu, onAnimationComplete: () => {
-                if (showMenu) {
-                    setAnimationComplete(true);
-                }
-            }, onDismiss: close },
-            React.createElement(DialogContent, { "data-testid": "topbar-menu", "data-visible": animationComplete ? true : undefined, "aria-label": props["aria-label"] ?? t("menu options") },
-                React.createElement(MenuItemList, null, children)))))));
+    return (_jsxs(Flex, { justifyContent: "flex-end", as: "li", color: "black", flex: "1 1", children: [_jsx(MenuButton, { onClick: toggle, "data-testid": "topbar-menu-button", children: _jsx(Icon, { size: "x3", color: "midGrey", icon: showMenu ? "close" : "apps" }) }), _jsx(AnimatePresence, { children: showMenu && (_jsx(Overlay, { "data-testid": "topbar-menu-overlay", "data-visible": animationComplete ? "true" : undefined, initial: "hidden", animate: "visible", exit: "exit", variants: blurVariants, isOpen: showMenu, onAnimationComplete: () => {
+                        if (showMenu) {
+                            setAnimationComplete(true);
+                        }
+                    }, onDismiss: close, children: _jsx(DialogContent, { "data-testid": "topbar-menu", "data-visible": animationComplete ? true : undefined, "aria-label": props["aria-label"] ?? t("menu options"), children: _jsx(MenuItemList, { children: children }) }) })) })] }));
 }

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

@@ -1,2 +1,2 @@
 import React from "react";
-export declare function MenuItem({ children }: React.PropsWithChildren<{}>): React.JSX.Element;
+export declare function MenuItem({ children }: React.PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;

package/dist/src/TopBar/components/MenuItem.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { StyledMenuItem } from "../TopBar.styled";
 const fadeInVariants = {
     hidden: {
@@ -23,5 +23,5 @@ const fadeInVariants = {
     },
 };
 export function MenuItem({ children }) {
-    return (React.createElement(StyledMenuItem, { "data-testid": "topbar-menu-item", initial: "hidden", animate: "visible", exit: "hidden", variants: fadeInVariants }, children));
+    return (_jsx(StyledMenuItem, { "data-testid": "topbar-menu-item", initial: "hidden", animate: "visible", exit: "hidden", variants: fadeInVariants, children: children }));
 }

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

@@ -1,9 +1,9 @@
 import { IconName } from "@nulogy/icons";
-import React, { ComponentProps } from "react";
+import { ComponentProps } from "react";
 import { TileLink } from "../TopBar.styled";
 export interface MenuItemLinkProps extends ComponentProps<typeof TileLink> {
     title: string;
     description?: string;
     icon: IconName;
 }
-export declare function MenuItemLink({ description, title, icon, ...props }: MenuItemLinkProps): React.JSX.Element;
+export declare function MenuItemLink({ description, title, icon, ...props }: MenuItemLinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/TopBar/components/MenuItemLink.js

@@ -1,14 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
-import React from "react";
 import { Flex } from "../../Flex";
 import { Icon } from "../../Icon";
 import { Text } from "../../Type";
 import { TileLink } from "../TopBar.styled";
 const MotionText = motion(Text);
 export function MenuItemLink({ description, title, icon, ...props }) {
-    return (React.createElement(TileLink, { ...props },
-        React.createElement(Icon, { icon: icon, size: "x3" }),
-        React.createElement(Flex, { flexDirection: "column", justifyContent: "center" },
-            React.createElement(MotionText, { fontWeight: "medium", fontSize: "md", lineHeight: "base" }, title),
-            React.createElement(MotionText, { fontSize: "xs" }, description))));
+    return (_jsxs(TileLink, { ...props, children: [_jsx(Icon, { icon: icon, size: "x3" }), _jsxs(Flex, { flexDirection: "column", justifyContent: "center", children: [_jsx(MotionText, { fontWeight: "medium", fontSize: "md", lineHeight: "base", children: title }), _jsx(MotionText, { fontSize: "xs", children: description })] })] }));
 }

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

@@ -1,3 +1,3 @@
-import React, { ComponentProps } from "react";
+import { ComponentProps } from "react";
 import { StyledPageTitle } from "../TopBar.styled";
-export declare function PageTitle({ children, ...props }: ComponentProps<typeof StyledPageTitle>): React.JSX.Element;
+export declare function PageTitle({ children, ...props }: ComponentProps<typeof StyledPageTitle>): import("react/jsx-runtime").JSX.Element;

package/dist/src/TopBar/components/PageTitle.js

@@ -1,5 +1,5 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { StyledPageTitle } from "../TopBar.styled";
 export function PageTitle({ children, ...props }) {
-    return (React.createElement(StyledPageTitle, { "data-testid": "topbar-page-title", ...props }, children));
+    return (_jsx(StyledPageTitle, { "data-testid": "topbar-page-title", ...props, children: children }));
 }

package/dist/src/TopBar/stories/TopBar.backButton.story.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 declare const _default: {
     parameters: {
         layout: string;
@@ -14,6 +13,6 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const WithNoLabel: () => React.JSX.Element;
-export declare const WithACustomMaxWidth: () => React.JSX.Element;
-export declare const WithARouterLink: () => React.JSX.Element;
+export declare const WithNoLabel: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithACustomMaxWidth: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithARouterLink: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/TopBar/stories/TopBar.backButton.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link, BrowserRouter } from "react-router-dom";
 import { TopBar } from "../TopBar";
 import { legacy as theme } from "../../theme/theme";
@@ -18,23 +18,11 @@ export default {
     },
     title: "Components/TopBar/BackLink",
 };
-export const WithNoLabel = () => (React.createElement(TopBar.Root, null,
-    React.createElement(TopBar.BackLink, { href: "/cycle-counts" }),
-    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-    React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title, ...props }))))));
-export const WithACustomMaxWidth = () => (React.createElement(TopBar.Root, null,
-    React.createElement(TopBar.BackLink, { href: "/cycle-counts", maxWidth: {
-            small: "10ch",
-            medium: "8ch",
-            large: "12ch",
-            extraLarge: "16ch",
-        } }, "Cycle counts"),
-    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-    React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, { ...props })))))));
-export const WithARouterLink = () => (React.createElement(BrowserRouter, null,
-    React.createElement(TopBar.Root, null,
-        React.createElement(Link, { component: TopBar.BackLink, to: "/cycle-counts" }, "Cycle counts"),
-        React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-        React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-            React.createElement(TopBar.MenuItemLink, { ...props }))))))));
+export const WithNoLabel = () => (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { ...props }, props.title))) })] }));
+export const WithACustomMaxWidth = () => (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts", maxWidth: {
+                small: "10ch",
+                medium: "8ch",
+                large: "12ch",
+                extraLarge: "16ch",
+            }, children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }));
+export const WithARouterLink = () => (_jsx(BrowserRouter, { children: _jsxs(TopBar.Root, { children: [_jsx(Link, { component: TopBar.BackLink, to: "/cycle-counts", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }) }));

package/dist/src/TopBar/stories/TopBar.menu.story.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 declare const _default: {
     parameters: {
         layout: string;
@@ -15,8 +14,8 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const withDefaultOpenMenu: () => React.JSX.Element;
-export declare const WithOneMenuItem: () => React.JSX.Element;
-export declare const WithTwoItems: () => React.JSX.Element;
-export declare const WithThreeItems: () => React.JSX.Element;
-export declare const WithRouterLinks: () => React.JSX.Element;
+export declare const withDefaultOpenMenu: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithOneMenuItem: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithTwoItems: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithThreeItems: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithRouterLinks: () => import("react/jsx-runtime").JSX.Element;