@nulogy/components 16.0.0 → 16.0.1

package/dist/src/Button/IconicButton.story.d.ts

@@ -1,64 +1,63 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const WithoutALabel: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithLabel: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithALongLabel: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SetToDisabled: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAHiddenLabel: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithACustomIconSize: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithACustomColor: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithATooltipAndLabel: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAComplicatedTooltipAndLabel: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const rightAligned: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     parameters: {
         chromatic: {
             diffThreshold: number;
@@ -66,17 +65,17 @@ export declare const rightAligned: {
     };
 };
 export declare const WithACustomFontSize: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithNonTextChildren: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const WithCustomHoverBackgroundThemeColor: () => React.JSX.Element;
-export declare const WithCustomHoverBackgroundNonThemeColor: () => React.JSX.Element;
-export declare const WithLargerIcons: () => React.JSX.Element;
+export declare const WithCustomHoverBackgroundThemeColor: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomHoverBackgroundNonThemeColor: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithLargerIcons: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Button/IconicButton.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconicButton } from "../index";
 import { Flex } from "../Flex";
 import { StatusIndicator } from "../StatusIndicator";
@@ -6,69 +6,54 @@ import { Box } from "../Box";
 export default {
     title: "Components/IconicButton",
 };
-export const WithoutALabel = () => React.createElement(IconicButton, { icon: "delete" });
+export const WithoutALabel = () => _jsx(IconicButton, { icon: "delete" });
 WithoutALabel.story = {
     name: "without a label",
 };
-export const WithLabel = () => React.createElement(IconicButton, { icon: "delete" }, "Delete");
+export const WithLabel = () => _jsx(IconicButton, { icon: "delete", children: "Delete" });
 WithLabel.story = {
     name: "with label",
 };
-export const WithALongLabel = () => (React.createElement(IconicButton, { icon: "user" }, "I am an Iconic Button with a really really really long label"));
+export const WithALongLabel = () => (_jsx(IconicButton, { icon: "user", children: "I am an Iconic Button with a really really really long label" }));
 WithALongLabel.story = {
     name: "with a long label",
 };
-export const SetToDisabled = () => (React.createElement(React.Fragment, null,
-    React.createElement(IconicButton, { icon: "cancel", disabled: true }, "Cancel"),
-    React.createElement(IconicButton, { icon: "lock", disabled: true }, "Lock")));
+export const SetToDisabled = () => (_jsxs(_Fragment, { children: [_jsx(IconicButton, { icon: "cancel", disabled: true, children: "Cancel" }), _jsx(IconicButton, { icon: "lock", disabled: true, children: "Lock" })] }));
 SetToDisabled.story = {
     name: "set to disabled",
 };
-export const WithAHiddenLabel = () => (React.createElement(IconicButton, { ml: "x6", labelHidden: true, icon: "user" }, "Hidden Label"));
+export const WithAHiddenLabel = () => (_jsx(IconicButton, { ml: "x6", labelHidden: true, icon: "user", children: "Hidden Label" }));
 WithAHiddenLabel.story = {
     name: "with a hidden label",
 };
-export const WithACustomIconSize = () => (React.createElement(IconicButton, { icon: "user", iconSize: "50px", labelHidden: true }, "I am an Iconic Button"));
+export const WithACustomIconSize = () => (_jsx(IconicButton, { icon: "user", iconSize: "50px", labelHidden: true, children: "I am an Iconic Button" }));
 WithACustomIconSize.story = {
     name: "with a custom icon size",
 };
-export const WithACustomColor = () => (React.createElement(IconicButton, { color: "red", icon: "close" }, "Close"));
+export const WithACustomColor = () => (_jsx(IconicButton, { color: "red", icon: "close", children: "Close" }));
 WithACustomColor.story = {
     name: "with a custom color",
 };
-export const WithATooltipAndLabel = () => (React.createElement(IconicButton, { tooltip: "Stop job", icon: "close" }, "Stop"));
+export const WithATooltipAndLabel = () => (_jsx(IconicButton, { tooltip: "Stop job", icon: "close", children: "Stop" }));
 WithATooltipAndLabel.story = {
     name: "with a tooltip and label",
 };
-export const WithAComplicatedTooltipAndLabel = () => (React.createElement(IconicButton, { tooltip: React.createElement(Box, null, "Hello"), icon: "close" }, "Please stop"));
+export const WithAComplicatedTooltipAndLabel = () => (_jsx(IconicButton, { tooltip: _jsx(Box, { children: "Hello" }), icon: "close", children: "Please stop" }));
 WithAComplicatedTooltipAndLabel.story = {
     name: "with a complicated tooltip and label",
 };
-export const rightAligned = () => (React.createElement(Flex, { px: "x3", height: "150px" },
-    React.createElement(Flex, { justifyContent: "flex-end", alignItems: "flex-start", width: "100%" },
-        React.createElement(IconicButton, { icon: "rightArrow", labelHidden: true }, "I am an Iconic Button"),
-        React.createElement(IconicButton, { icon: "leftArrow", labelHidden: true }, "I am an Iconic Button 2"))));
+export const rightAligned = () => (_jsx(Flex, { px: "x3", height: "150px", children: _jsxs(Flex, { justifyContent: "flex-end", alignItems: "flex-start", width: "100%", children: [_jsx(IconicButton, { icon: "rightArrow", labelHidden: true, children: "I am an Iconic Button" }), _jsx(IconicButton, { icon: "leftArrow", labelHidden: true, children: "I am an Iconic Button 2" })] }) }));
 rightAligned.parameters = {
     chromatic: { diffThreshold: 0.3 },
 };
-export const WithACustomFontSize = () => (React.createElement(Flex, { flexDirection: "column" },
-    React.createElement(IconicButton, { fontSize: "small", tooltip: "Stop job", icon: "close" }, "This is an IconicButton with a small font size"),
-    React.createElement(IconicButton, { fontSize: "large", tooltip: "Stop job", icon: "close" }, "This is an IconicButton with a large font size"),
-    React.createElement(IconicButton, { fontSize: "48px", tooltip: "Stop job", icon: "close" }, "This is an IconicButton with 48px font size")));
+export const WithACustomFontSize = () => (_jsxs(Flex, { flexDirection: "column", children: [_jsx(IconicButton, { fontSize: "small", tooltip: "Stop job", icon: "close", children: "This is an IconicButton with a small font size" }), _jsx(IconicButton, { fontSize: "large", tooltip: "Stop job", icon: "close", children: "This is an IconicButton with a large font size" }), _jsx(IconicButton, { fontSize: "48px", tooltip: "Stop job", icon: "close", children: "This is an IconicButton with 48px font size" })] }));
 WithACustomFontSize.story = {
     name: "with a custom font size",
 };
-export const WithNonTextChildren = () => (React.createElement(IconicButton, { fontSize: "small", "aria-label": "warnings", icon: "warning" },
-    React.createElement(Flex, null,
-        React.createElement(Box, { as: "span", pr: "x1" }, "Warnings"),
-        React.createElement(StatusIndicator, { type: "informative" }, "3"))));
+export const WithNonTextChildren = () => (_jsx(IconicButton, { fontSize: "small", "aria-label": "warnings", icon: "warning", children: _jsxs(Flex, { children: [_jsx(Box, { as: "span", pr: "x1", children: "Warnings" }), _jsx(StatusIndicator, { type: "informative", children: "3" })] }) }));
 WithNonTextChildren.story = {
     name: "with non text children",
 };
-export const WithCustomHoverBackgroundThemeColor = () => (React.createElement(IconicButton, { hoverBackgroundColor: "lightYellow", fontSize: "small", "aria-label": "warnings", icon: "warning" },
-    React.createElement(Flex, null,
-        React.createElement(Box, { as: "span", pr: "x1" }, "Warnings"))));
-export const WithCustomHoverBackgroundNonThemeColor = () => (React.createElement(IconicButton, { hoverBackgroundColor: "#FA8072", fontSize: "small", "aria-label": "warnings", icon: "warning" },
-    React.createElement(Flex, null,
-        React.createElement(Box, { as: "span", pr: "x1" }, "Warnings"))));
-export const WithLargerIcons = () => React.createElement(IconicButton, { icon: "chatBubble" }, "Add comment");
+export const WithCustomHoverBackgroundThemeColor = () => (_jsx(IconicButton, { hoverBackgroundColor: "lightYellow", fontSize: "small", "aria-label": "warnings", icon: "warning", children: _jsx(Flex, { children: _jsx(Box, { as: "span", pr: "x1", children: "Warnings" }) }) }));
+export const WithCustomHoverBackgroundNonThemeColor = () => (_jsx(IconicButton, { hoverBackgroundColor: "#FA8072", fontSize: "small", "aria-label": "warnings", icon: "warning", children: _jsx(Flex, { children: _jsx(Box, { as: "span", pr: "x1", children: "Warnings" }) }) }));
+export const WithLargerIcons = () => _jsx(IconicButton, { icon: "chatBubble", children: "Add comment" });

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

@@ -1,34 +1,33 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const _ButtonGroup: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAlignmentRight: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAlignmentSpaced: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const MoreButtonTypes: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WrappingButtons: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
         parameters: {

package/dist/src/ButtonGroup/ButtonGroup.story.js

@@ -1,62 +1,25 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, ButtonGroup, Button, PrimaryButton, DangerButton, QuietButton, IconicButton } from "../index";
 export default {
     title: "Components/ButtonGroup",
 };
-export const _ButtonGroup = () => (React.createElement(Box, { bg: "whiteGrey", p: "x2", width: "500px" },
-    React.createElement(ButtonGroup, null,
-        React.createElement(PrimaryButton, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"))));
+export const _ButtonGroup = () => (_jsx(Box, { bg: "whiteGrey", p: "x2", width: "500px", children: _jsxs(ButtonGroup, { children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] }) }));
 _ButtonGroup.story = {
     name: "ButtonGroup",
 };
-export const WithAlignmentRight = () => (React.createElement(ButtonGroup, { alignment: "right", p: "x2", bg: "whiteGrey", width: "500px" },
-    React.createElement(PrimaryButton, null, "Button"),
-    React.createElement(Button, null, "Button"),
-    React.createElement(Button, null, "Button")));
+export const WithAlignmentRight = () => (_jsxs(ButtonGroup, { alignment: "right", p: "x2", bg: "whiteGrey", width: "500px", children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] }));
 WithAlignmentRight.story = {
     name: "with alignment right",
 };
-export const WithAlignmentSpaced = () => (React.createElement(ButtonGroup, { alignment: "spaced", bg: "whiteGrey", p: "x2", width: "500px" },
-    React.createElement(PrimaryButton, null, "Button"),
-    React.createElement(Button, null, "Button")));
+export const WithAlignmentSpaced = () => (_jsxs(ButtonGroup, { alignment: "spaced", bg: "whiteGrey", p: "x2", width: "500px", children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(Button, { children: "Button" })] }));
 WithAlignmentSpaced.story = {
     name: "with alignment spaced",
 };
-export const MoreButtonTypes = () => (React.createElement(ButtonGroup, { bg: "whiteGrey", p: "x2", width: "600px" },
-    React.createElement(PrimaryButton, null, "Button"),
-    React.createElement(DangerButton, null, "Button"),
-    React.createElement(Button, null, "Button"),
-    React.createElement(QuietButton, null, "Button"),
-    React.createElement(IconicButton, { icon: "menu" }),
-    React.createElement(IconicButton, { icon: "menu" }, "Button")));
+export const MoreButtonTypes = () => (_jsxs(ButtonGroup, { bg: "whiteGrey", p: "x2", width: "600px", children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(DangerButton, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(QuietButton, { children: "Button" }), _jsx(IconicButton, { icon: "menu" }), _jsx(IconicButton, { icon: "menu", children: "Button" })] }));
 MoreButtonTypes.story = {
     name: "more button types",
 };
-export const WrappingButtons = () => (React.createElement(React.Fragment, null,
-    React.createElement(ButtonGroup, { bg: "whiteGrey", p: "x2" },
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button")),
-    React.createElement(ButtonGroup, { alignment: "right", bg: "whiteGrey", p: "x2", mt: "x2" },
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"),
-        React.createElement(Button, null, "Button"))));
+export const WrappingButtons = () => (_jsxs(_Fragment, { children: [_jsxs(ButtonGroup, { bg: "whiteGrey", p: "x2", children: [_jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] }), _jsxs(ButtonGroup, { alignment: "right", bg: "whiteGrey", p: "x2", mt: "x2", children: [_jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] })] }));
 WrappingButtons.story = {
     name: "wrapping buttons",
     parameters: { viewport: { defaultViewport: "extraSmall" } },

package/dist/src/Card/Card.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
 import { BoxProps } from "../Box/Box";
-export default function Card({ borderRadius, boxShadow, py, px, position, children, ...props }: BoxProps): React.JSX.Element;
+export default function Card({ borderRadius, boxShadow, py, px, position, children, ...props }: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Card/Card.js

@@ -1,5 +1,5 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "../Box";
 export default function Card({ borderRadius = "medium", boxShadow = "small", py = "x2", px = "x2", position = "relative", children, ...props }) {
-    return (React.createElement(Box, { border: "1px solid", borderColor: "lightGrey", borderRadius: borderRadius, boxShadow: boxShadow, py: py, px: px, position: position, ...props }, children));
+    return (_jsx(Box, { border: "1px solid", borderColor: "lightGrey", borderRadius: borderRadius, boxShadow: boxShadow, py: py, px: px, position: position, ...props, children: children }));
 }

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

@@ -1,18 +1,17 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Card: () => React.JSX.Element;
+export declare const _Card: () => import("react/jsx-runtime").JSX.Element;
 export declare const CustomCard: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const Cardset: () => React.JSX.Element;
+export declare const Cardset: () => import("react/jsx-runtime").JSX.Element;
 export declare const AdvancedUsage: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };

package/dist/src/Card/Card.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ApplicationFrame, Card, CardSet, DescriptionDetails, DescriptionGroup, DescriptionList, DescriptionTerm, Icon, Link, Page, StatusIndicator, Tooltip, TopBar, } from "../index";
 import { Heading4, Text } from "../Type";
 import TruncatedText from "../TruncatedText/TruncatedText";
@@ -6,50 +6,17 @@ import { menuItems } from "../TopBar/stories/fixtures";
 export default {
     title: "Components/Card",
 };
-export const _Card = () => React.createElement(Card, null, "I am a card.");
-export const CustomCard = () => (React.createElement(Card, { bg: "black", color: "white", borderRadius: "small", p: "x1" }, "I am a custom card."));
+export const _Card = () => _jsx(Card, { children: "I am a card." });
+export const CustomCard = () => (_jsx(Card, { bg: "black", color: "white", borderRadius: "small", p: "x1", children: "I am a custom card." }));
 CustomCard.story = {
     name: "Custom card",
 };
-export const Cardset = () => (React.createElement(CardSet, null,
-    React.createElement(Card, null, "I am a 1st card in a cardset."),
-    React.createElement(Card, null, "I am a 2nd card in a cardset."),
-    React.createElement(Card, null, "I am a 3rd card in a cardset.")));
+export const Cardset = () => (_jsxs(CardSet, { children: [_jsx(Card, { children: "I am a 1st card in a cardset." }), _jsx(Card, { children: "I am a 2nd card in a cardset." }), _jsx(Card, { children: "I am a 3rd card in a cardset." })] }));
 function AdvancedCard() {
-    return (React.createElement(Card, null,
-        React.createElement(Heading4, null, "POLI-2304"),
-        React.createElement(DescriptionList, null,
-            React.createElement(DescriptionGroup, null,
-                React.createElement(DescriptionTerm, null, "Customer"),
-                React.createElement(DescriptionDetails, null, "Nulogy")),
-            React.createElement(DescriptionGroup, null,
-                React.createElement(DescriptionTerm, null,
-                    React.createElement(Text, { display: "inline-flex", alignItems: "center" },
-                        "Order number",
-                        React.createElement(Tooltip, { tooltip: "The unique identifier assigned to this order when it was placed by the customer." },
-                            React.createElement(Icon, { icon: "info", size: "x3", paddingLeft: "half" })))),
-                React.createElement(DescriptionDetails, null,
-                    React.createElement(Link, { href: "/customer-details" }, "P12-90381-2039"))),
-            React.createElement(DescriptionGroup, null,
-                React.createElement(DescriptionTerm, null, "Status"),
-                React.createElement(DescriptionDetails, null,
-                    React.createElement(StatusIndicator, { type: "success" }, "Paid"))),
-            React.createElement(DescriptionGroup, null,
-                React.createElement(DescriptionTerm, null, "Amount"),
-                React.createElement(DescriptionDetails, null, "$202.12")),
-            React.createElement(DescriptionGroup, null,
-                React.createElement(DescriptionTerm, null, "Notes"),
-                React.createElement(DescriptionDetails, null,
-                    React.createElement(TruncatedText, { fontSize: "small", maxCharacters: 200 }, "Due to severe weather disruptions and unforeseen logistical challenges, this shipment has been significantly delayed. The warehouse manager reported that mechanical issues with the transport vehicles coupled with a shortage of available staff, have extended processing times at the loading dock. Additionally, mandatory safety inspections and inventory verifications required extra time, further postponing the dispatch schedule. His detailed notes also mention that alternate transportation arrangements are being evaluated and urge all stakeholders to stay in close communication for updated delivery timelines."))))));
+    return (_jsxs(Card, { children: [_jsx(Heading4, { children: "POLI-2304" }), _jsxs(DescriptionList, { children: [_jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: "Customer" }), _jsx(DescriptionDetails, { children: "Nulogy" })] }), _jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: _jsxs(Text, { display: "inline-flex", alignItems: "center", children: ["Order number", _jsx(Tooltip, { tooltip: "The unique identifier assigned to this order when it was placed by the customer.", children: _jsx(Icon, { icon: "info", size: "x3", paddingLeft: "half" }) })] }) }), _jsx(DescriptionDetails, { children: _jsx(Link, { href: "/customer-details", children: "P12-90381-2039" }) })] }), _jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: "Status" }), _jsx(DescriptionDetails, { children: _jsx(StatusIndicator, { type: "success", children: "Paid" }) })] }), _jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: "Amount" }), _jsx(DescriptionDetails, { children: "$202.12" })] }), _jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: "Notes" }), _jsx(DescriptionDetails, { children: _jsx(TruncatedText, { fontSize: "small", maxCharacters: 200, children: "Due to severe weather disruptions and unforeseen logistical challenges, this shipment has been significantly delayed. The warehouse manager reported that mechanical issues with the transport vehicles coupled with a shortage of available staff, have extended processing times at the loading dock. Additionally, mandatory safety inspections and inventory verifications required extra time, further postponing the dispatch schedule. His detailed notes also mention that alternate transportation arrangements are being evaluated and urge all stakeholders to stay in close communication for updated delivery timelines." }) })] })] })] }));
 }
 export const AdvancedUsage = () => {
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(TopBar.Root, null,
-            React.createElement(TopBar.BackLink, { href: "/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 })))))) },
-        React.createElement(Page, { fullHeight: true },
-            React.createElement(CardSet, null, [...Array(10)].map((_, i) => (React.createElement(AdvancedCard, { key: i })))))));
+    return (_jsx(ApplicationFrame, { navBar: _jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/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))) })] }), children: _jsx(Page, { fullHeight: true, children: _jsx(CardSet, { children: [...Array(10)].map((_, i) => (_jsx(AdvancedCard, {}, i))) }) }) }));
 };
 AdvancedUsage.parameters = {
     layout: "fullscreen",

package/dist/src/Checkbox/Checkbox.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 { styled } from "styled-components";
 import propTypes from "@styled-system/prop-types";
 import { Box } from "../Box";
@@ -102,10 +103,6 @@ const Checkbox = forwardRef((props, ref) => {
     const componentVariant = useComponentVariant(variant);
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
-    return (React.createElement(Box, { className: className, px: "0", ...spaceProps },
-        React.createElement(ClickInputLabel, { variant: componentVariant, disabled: disabled },
-            React.createElement(CheckboxInput, { type: "checkbox", required: required, "aria-required": required, "aria-invalid": error, indeterminate: indeterminate, ref: ref, ...restProps }),
-            React.createElement(VisualCheckbox, { disabled: disabled, checked: checked, indeterminate: indeterminate, "data-testid": "visual-checkbox" }),
-            labelText && (React.createElement(Text, { fontSize: componentVariant === "touch" ? "md" : undefined, lineHeight: componentVariant === "touch" ? "base" : undefined, disabled: disabled, ml: "x1" }, labelText)))));
+    return (_jsx(Box, { className: className, px: "0", ...spaceProps, children: _jsxs(ClickInputLabel, { variant: componentVariant, disabled: disabled, children: [_jsx(CheckboxInput, { type: "checkbox", required: required, "aria-required": required, "aria-invalid": error, indeterminate: indeterminate, ref: ref, ...restProps }), _jsx(VisualCheckbox, { disabled: disabled, checked: checked, indeterminate: indeterminate, "data-testid": "visual-checkbox" }), labelText && (_jsx(Text, { fontSize: componentVariant === "touch" ? "md" : undefined, lineHeight: componentVariant === "touch" ? "base" : undefined, disabled: disabled, ml: "x1", children: labelText }))] }) }));
 });
 export default Checkbox;

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

@@ -1,57 +1,56 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Checkbox: () => React.JSX.Element;
+export declare const _Checkbox: () => import("react/jsx-runtime").JSX.Element;
 export declare const Multiline: {
-    (): React.JSX.Element;
-    decorators: ((story: any) => React.JSX.Element)[];
+    (): import("react/jsx-runtime").JSX.Element;
+    decorators: ((story: any) => import("react/jsx-runtime").JSX.Element)[];
 };
 export declare const SetToDefaultChecked: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SetToDisabled: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const CheckboxWithNoLabel: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SetToError: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SetToRequired: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const Indeterminate: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithState: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/Checkbox/Checkbox.story.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useRef } from "react";
 import { Checkbox, Button } from "../index";
 class CheckboxWithState extends React.Component {
@@ -13,52 +14,40 @@ class CheckboxWithState extends React.Component {
     }
     render() {
         const { checkbox1, checkbox2 } = this.state;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Checkbox, { id: "checkbox-1", checked: checkbox1, onChange: () => this.handleChange("checkbox1"), labelText: "I am controlled and checked" }),
-            React.createElement(Checkbox, { id: "checkbox-2", checked: checkbox2, onChange: () => this.handleChange("checkbox2"), labelText: "I am controlled and unchecked" })));
+        return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox-1", checked: checkbox1, onChange: () => this.handleChange("checkbox1"), labelText: "I am controlled and checked" }), _jsx(Checkbox, { id: "checkbox-2", checked: checkbox2, onChange: () => this.handleChange("checkbox2"), labelText: "I am controlled and unchecked" })] }));
     }
 }
 export default {
     title: "Components/Checkbox",
 };
-export const _Checkbox = () => React.createElement(Checkbox, { p: "x3", id: "checkbox", labelText: "I am a checkbox" });
-export const Multiline = () => React.createElement(Checkbox, { p: "x3", id: "checkbox", labelText: "Lorem ipsum dolor sit amet consecutor" });
-Multiline.decorators = [(story) => React.createElement("div", { style: { width: "200px" } }, story())];
-export const SetToDefaultChecked = () => React.createElement(Checkbox, { id: "checkbox", defaultChecked: true, labelText: "I am checked by default" });
+export const _Checkbox = () => _jsx(Checkbox, { p: "x3", id: "checkbox", labelText: "I am a checkbox" });
+export const Multiline = () => _jsx(Checkbox, { p: "x3", id: "checkbox", labelText: "Lorem ipsum dolor sit amet consecutor" });
+Multiline.decorators = [(story) => _jsx("div", { style: { width: "200px" }, children: story() })];
+export const SetToDefaultChecked = () => _jsx(Checkbox, { id: "checkbox", defaultChecked: true, labelText: "I am checked by default" });
 SetToDefaultChecked.story = {
     name: "Set to defaultChecked",
 };
-export const SetToDisabled = () => (React.createElement(React.Fragment, null,
-    React.createElement(Checkbox, { id: "checkbox-1", disabled: true, labelText: "I am disabled" }),
-    React.createElement(Checkbox, { id: "checkbox-2", checked: true, disabled: true, labelText: "I am disabled" })));
+export const SetToDisabled = () => (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox-1", disabled: true, labelText: "I am disabled" }), _jsx(Checkbox, { id: "checkbox-2", checked: true, disabled: true, labelText: "I am disabled" })] }));
 SetToDisabled.story = {
     name: "Set to disabled",
 };
-export const CheckboxWithNoLabel = () => (React.createElement(React.Fragment, null,
-    React.createElement(Checkbox, null)));
+export const CheckboxWithNoLabel = () => (_jsx(_Fragment, { children: _jsx(Checkbox, {}) }));
 CheckboxWithNoLabel.story = {
     name: "Checkbox with no label",
 };
-export const SetToError = () => (React.createElement(React.Fragment, null,
-    React.createElement(Checkbox, { id: "checkbox", error: true, labelText: "I am error" }),
-    React.createElement(Checkbox, { id: "checkbox", defaultChecked: true, error: true, labelText: "I am error" })));
+export const SetToError = () => (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox", error: true, labelText: "I am error" }), _jsx(Checkbox, { id: "checkbox", defaultChecked: true, error: true, labelText: "I am error" })] }));
 SetToError.story = {
     name: "Set to error",
 };
-export const SetToRequired = () => (React.createElement(React.Fragment, null,
-    React.createElement(Checkbox, { id: "checkbox", labelText: "I am a checkbox", required: true })));
+export const SetToRequired = () => (_jsx(_Fragment, { children: _jsx(Checkbox, { id: "checkbox", labelText: "I am a checkbox", required: true }) }));
 SetToRequired.story = {
     name: "Set to required",
 };
-export const Indeterminate = () => (React.createElement(React.Fragment, null,
-    React.createElement(Checkbox, { id: "checkbox", labelText: "I am an indeterminate checkbox", readOnly: true, checked: true, indeterminate: true }),
-    React.createElement(Checkbox, { id: "checkbox", labelText: "I am a unchecked indeterminate checkbox", readOnly: true, checked: false, indeterminate: true }),
-    React.createElement(Checkbox, { id: "checkbox", labelText: "I am an indeterminate checkbox with an error", readOnly: true, checked: true, indeterminate: true, error: true }),
-    React.createElement(Checkbox, { id: "checkbox", labelText: "I am a disabled indeterminate checkbox", readOnly: true, checked: true, indeterminate: true, disabled: true })));
+export const Indeterminate = () => (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox", labelText: "I am an indeterminate checkbox", readOnly: true, checked: true, indeterminate: true }), _jsx(Checkbox, { id: "checkbox", labelText: "I am a unchecked indeterminate checkbox", readOnly: true, checked: false, indeterminate: true }), _jsx(Checkbox, { id: "checkbox", labelText: "I am an indeterminate checkbox with an error", readOnly: true, checked: true, indeterminate: true, error: true }), _jsx(Checkbox, { id: "checkbox", labelText: "I am a disabled indeterminate checkbox", readOnly: true, checked: true, indeterminate: true, disabled: true })] }));
 Indeterminate.story = {
     name: "indeterminate",
 };
-export const WithState = () => React.createElement(CheckboxWithState, null);
+export const WithState = () => _jsx(CheckboxWithState, {});
 WithState.story = {
     name: "With state",
 };
@@ -67,9 +56,7 @@ export const UsingRefToControlFocus = () => {
     const handleClick = () => {
         ref.current.focus();
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Checkbox, { ref: ref, labelText: "I am a unchecked indeterminate checkbox", readOnly: true, checked: false, indeterminate: true }),
-        React.createElement(Button, { onClick: handleClick }, "Focus the Input")));
+    return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { ref: ref, labelText: "I am a unchecked indeterminate checkbox", readOnly: true, checked: false, indeterminate: true }), _jsx(Button, { onClick: handleClick, children: "Focus the Input" })] }));
 };
 UsingRefToControlFocus.story = {
     name: "using ref to control focus",

package/dist/src/Checkbox/CheckboxGroup.d.ts

@@ -16,5 +16,5 @@ interface CheckboxGroupProps {
     disabled?: boolean;
     hint?: string;
 }
-export default function CheckboxGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, hint, ...props }: CheckboxGroupProps): React.JSX.Element;
+export default function CheckboxGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, hint, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/Checkbox/CheckboxGroup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { styled } from "styled-components";
 import { HelpText, RequirementText } from "../FieldLabel";
@@ -9,21 +10,12 @@ import LabelText, { LabelContent } from "../FieldLabel/LabelText";
 import Checkbox from "./Checkbox";
 export default function CheckboxGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, hint, ...props }) {
     const otherProps = { ...props, errorMessage, errorList };
-    return (React.createElement(Fieldset, { className: className, id: id },
-        React.createElement(Legend, null,
-            React.createElement(LabelContent, { "data-testid": "label-content" },
-                React.createElement(LabelText, { "data-testid": "label-text" }, labelText),
-                requirementText && (React.createElement(RequirementText, { "data-testid": "requirement-text", ml: "none" }, requirementText)),
-                hint && (React.createElement(Tooltip, { tooltip: hint },
-                    React.createElement(InlineIcon, { color: "darkGrey", size: "x2", icon: "info" }))))),
-        helpText && React.createElement(HelpText, null, helpText),
-        getCheckboxButtons(otherProps),
-        React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
+    return (_jsxs(Fieldset, { className: className, id: id, children: [_jsx(Legend, { children: _jsxs(LabelContent, { "data-testid": "label-content", children: [_jsx(LabelText, { "data-testid": "label-text", children: labelText }), requirementText && (_jsx(RequirementText, { "data-testid": "requirement-text", ml: "none", children: requirementText })), hint && (_jsx(Tooltip, { tooltip: hint, children: _jsx(InlineIcon, { color: "darkGrey", size: "x2", icon: "info" }) }))] }) }), helpText && _jsx(HelpText, { children: helpText }), getCheckboxButtons(otherProps), _jsx(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })] }));
 }
 const getCheckboxButtons = (props) => {
     const checkboxButtons = React.Children.map(props.children, (checkbox) => {
         const { value, disabled, required, onChange, ...checkboxProps } = checkbox.props;
-        return (React.createElement(Checkbox, { ...checkboxProps, value: value, disabled: props.disabled || disabled, error: !!(props.errorMessage || props.errorList), required: props.required || required, name: props.name, defaultChecked: props.defaultValue ? props.defaultValue.includes(value) : undefined, checked: props.checkedValue ? props.checkedValue.includes(value) : undefined, onChange: props.onChange || onChange }));
+        return (_jsx(Checkbox, { ...checkboxProps, value: value, disabled: props.disabled || disabled, error: !!(props.errorMessage || props.errorList), required: props.required || required, name: props.name, defaultChecked: props.defaultValue ? props.defaultValue.includes(value) : undefined, checked: props.checkedValue ? props.checkedValue.includes(value) : undefined, onChange: props.onChange || onChange }));
     });
     return checkboxButtons;
 };