@nulogy/components 16.0.2 → 16.0.3

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

@@ -3,61 +3,43 @@ declare const _default: {
 };
 export default _default;
 export declare const WithoutALabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithALongLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToDisabled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAHiddenLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithACustomIconSize: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithACustomColor: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithATooltipAndLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAComplicatedTooltipAndLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const rightAligned: {
-    (): import("react/jsx-runtime").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     parameters: {
         chromatic: {
             diffThreshold: number;
@@ -65,16 +47,12 @@ export declare const rightAligned: {
     };
 };
 export declare const WithACustomFontSize: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithNonTextChildren: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCustomHoverBackgroundThemeColor: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithCustomHoverBackgroundNonThemeColor: () => import("react/jsx-runtime").JSX.Element;

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

@@ -6,52 +6,54 @@ import { Box } from "../Box";
 export default {
     title: "Components/IconicButton",
 };
-export const WithoutALabel = () => _jsx(IconicButton, { icon: "delete" });
-WithoutALabel.story = {
+export const WithoutALabel = {
+    render: () => _jsx(IconicButton, { icon: "delete" }),
     name: "without a label",
 };
-export const WithLabel = () => _jsx(IconicButton, { icon: "delete", children: "Delete" });
-WithLabel.story = {
+export const WithLabel = {
+    render: () => _jsx(IconicButton, { icon: "delete", children: "Delete" }),
     name: "with label",
 };
-export const WithALongLabel = () => (_jsx(IconicButton, { icon: "user", children: "I am an Iconic Button with a really really really long label" }));
-WithALongLabel.story = {
+export const WithALongLabel = {
+    render: () => _jsx(IconicButton, { icon: "user", children: "I am an Iconic Button with a really really really long label" }),
     name: "with a long label",
 };
-export const SetToDisabled = () => (_jsxs(_Fragment, { children: [_jsx(IconicButton, { icon: "cancel", disabled: true, children: "Cancel" }), _jsx(IconicButton, { icon: "lock", disabled: true, children: "Lock" })] }));
-SetToDisabled.story = {
+export const SetToDisabled = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(IconicButton, { icon: "cancel", disabled: true, children: "Cancel" }), _jsx(IconicButton, { icon: "lock", disabled: true, children: "Lock" })] })),
     name: "set to disabled",
 };
-export const WithAHiddenLabel = () => (_jsx(IconicButton, { ml: "x6", labelHidden: true, icon: "user", children: "Hidden Label" }));
-WithAHiddenLabel.story = {
+export const WithAHiddenLabel = {
+    render: () => (_jsx(IconicButton, { ml: "x6", labelHidden: true, icon: "user", children: "Hidden Label" })),
     name: "with a hidden label",
 };
-export const WithACustomIconSize = () => (_jsx(IconicButton, { icon: "user", iconSize: "50px", labelHidden: true, children: "I am an Iconic Button" }));
-WithACustomIconSize.story = {
+export const WithACustomIconSize = {
+    render: () => (_jsx(IconicButton, { icon: "user", iconSize: "50px", labelHidden: true, children: "I am an Iconic Button" })),
     name: "with a custom icon size",
 };
-export const WithACustomColor = () => (_jsx(IconicButton, { color: "red", icon: "close", children: "Close" }));
-WithACustomColor.story = {
+export const WithACustomColor = {
+    render: () => (_jsx(IconicButton, { color: "red", icon: "close", children: "Close" })),
     name: "with a custom color",
 };
-export const WithATooltipAndLabel = () => (_jsx(IconicButton, { tooltip: "Stop job", icon: "close", children: "Stop" }));
-WithATooltipAndLabel.story = {
+export const WithATooltipAndLabel = {
+    render: () => (_jsx(IconicButton, { tooltip: "Stop job", icon: "close", children: "Stop" })),
     name: "with a tooltip and label",
 };
-export const WithAComplicatedTooltipAndLabel = () => (_jsx(IconicButton, { tooltip: _jsx(Box, { children: "Hello" }), icon: "close", children: "Please stop" }));
-WithAComplicatedTooltipAndLabel.story = {
+export const WithAComplicatedTooltipAndLabel = {
+    render: () => (_jsx(IconicButton, { tooltip: _jsx(Box, { children: "Hello" }), icon: "close", children: "Please stop" })),
     name: "with a complicated tooltip and label",
 };
-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 rightAligned = {
+    render: () => (_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" })] }) })),
+    parameters: {
+        chromatic: { diffThreshold: 0.3 },
+    },
 };
-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 = {
+export const WithACustomFontSize = {
+    render: () => (_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" })] })),
     name: "with a custom font size",
 };
-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 = {
+export const WithNonTextChildren = {
+    render: () => (_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" })] }) })),
     name: "with non text children",
 };
 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" }) }) }));

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

@@ -3,37 +3,27 @@ declare const _default: {
 };
 export default _default;
 export declare const _ButtonGroup: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAlignmentRight: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAlignmentSpaced: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const MoreButtonTypes: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WrappingButtons: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            viewport: {
-                defaultViewport: string;
-            };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
         };
     };
 };

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

@@ -3,24 +3,24 @@ import { Box, ButtonGroup, Button, PrimaryButton, DangerButton, QuietButton, Ico
 export default {
     title: "Components/ButtonGroup",
 };
-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 = {
+export const _ButtonGroup = {
+    render: () => (_jsx(Box, { bg: "whiteGrey", p: "x2", width: "500px", children: _jsxs(ButtonGroup, { children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] }) })),
     name: "ButtonGroup",
 };
-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 = {
+export const WithAlignmentRight = {
+    render: () => (_jsxs(ButtonGroup, { alignment: "right", p: "x2", bg: "whiteGrey", width: "500px", children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] })),
     name: "with alignment right",
 };
-export const WithAlignmentSpaced = () => (_jsxs(ButtonGroup, { alignment: "spaced", bg: "whiteGrey", p: "x2", width: "500px", children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(Button, { children: "Button" })] }));
-WithAlignmentSpaced.story = {
+export const WithAlignmentSpaced = {
+    render: () => (_jsxs(ButtonGroup, { alignment: "spaced", bg: "whiteGrey", p: "x2", width: "500px", children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(Button, { children: "Button" })] })),
     name: "with alignment spaced",
 };
-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 = {
+export const MoreButtonTypes = {
+    render: () => (_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" })] })),
     name: "more button types",
 };
-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 = {
+export const WrappingButtons = {
+    render: () => (_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" })] })] })),
     name: "wrapping buttons",
     parameters: { viewport: { defaultViewport: "extraSmall" } },
 };

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

@@ -4,14 +4,12 @@ declare const _default: {
 export default _default;
 export declare const _Card: () => import("react/jsx-runtime").JSX.Element;
 export declare const CustomCard: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const Cardset: () => import("react/jsx-runtime").JSX.Element;
 export declare const AdvancedUsage: {
-    (): import("react/jsx-runtime").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };

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

@@ -7,17 +7,19 @@ export default {
     title: "Components/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 = {
+export const CustomCard = {
+    render: () => (_jsx(Card, { bg: "black", color: "white", borderRadius: "small", p: "x1", children: "I am a custom card." })),
     name: "Custom card",
 };
 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 (_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 (_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",
+export const AdvancedUsage = {
+    render: () => {
+        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))) }) }) }));
+    },
+    parameters: {
+        layout: "fullscreen",
+    },
 };

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

@@ -4,54 +4,38 @@ declare const _default: {
 export default _default;
 export declare const _Checkbox: () => import("react/jsx-runtime").JSX.Element;
 export declare const Multiline: {
-    (): import("react/jsx-runtime").JSX.Element;
-    decorators: ((story: any) => import("react/jsx-runtime").JSX.Element)[];
+    render: () => import("react/jsx-runtime").JSX.Element;
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
 };
 export declare const SetToDefaultChecked: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToDisabled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const CheckboxWithNoLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToError: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToRequired: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const Indeterminate: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithState: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const UsingRefToControlFocus: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

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

@@ -21,43 +21,47 @@ export default {
     title: "Components/Checkbox",
 };
 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 = {
+export const Multiline = {
+    render: () => _jsx(Checkbox, { p: "x3", id: "checkbox", labelText: "Lorem ipsum dolor sit amet consecutor" }),
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: "200px" }, children: _jsx(Story, {}) })),
+    ],
+};
+export const SetToDefaultChecked = {
+    render: () => _jsx(Checkbox, { id: "checkbox", defaultChecked: true, labelText: "I am checked by default" }),
     name: "Set to defaultChecked",
 };
-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 = {
+export const SetToDisabled = {
+    render: () => (_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" })] })),
     name: "Set to disabled",
 };
-export const CheckboxWithNoLabel = () => (_jsx(_Fragment, { children: _jsx(Checkbox, {}) }));
-CheckboxWithNoLabel.story = {
+export const CheckboxWithNoLabel = {
+    render: () => (_jsx(_Fragment, { children: _jsx(Checkbox, {}) })),
     name: "Checkbox with no label",
 };
-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 = {
+export const SetToError = {
+    render: () => (_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" })] })),
     name: "Set to error",
 };
-export const SetToRequired = () => (_jsx(_Fragment, { children: _jsx(Checkbox, { id: "checkbox", labelText: "I am a checkbox", required: true }) }));
-SetToRequired.story = {
+export const SetToRequired = {
+    render: () => (_jsx(_Fragment, { children: _jsx(Checkbox, { id: "checkbox", labelText: "I am a checkbox", required: true }) })),
     name: "Set to required",
 };
-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 = {
+export const Indeterminate = {
+    render: () => (_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 })] })),
     name: "indeterminate",
 };
-export const WithState = () => _jsx(CheckboxWithState, {});
-WithState.story = {
+export const WithState = {
+    render: () => _jsx(CheckboxWithState, {}),
     name: "With state",
 };
-export const UsingRefToControlFocus = () => {
-    const ref = useRef(null);
-    const handleClick = () => {
-        ref.current.focus();
-    };
-    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 = {
+export const UsingRefToControlFocus = {
+    render: () => {
+        const ref = useRef(null);
+        const handleClick = () => {
+            ref.current.focus();
+        };
+        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" })] }));
+    },
     name: "using ref to control focus",
 };

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

@@ -3,33 +3,23 @@ declare const _default: {
 };
 export default _default;
 export declare const _CheckboxGroup: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const CheckboxGroupWithAllProps: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithErrorMessage: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithErrorList: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToDisabled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;

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

@@ -4,24 +4,24 @@ const errorList = ["Error message 1", "Error message 2"];
 export default {
     title: "Components/CheckboxGroup",
 };
-export const _CheckboxGroup = () => (_jsxs(CheckboxGroup, { labelText: "Setting Selection", name: "settingSelection", children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] }));
-_CheckboxGroup.story = {
+export const _CheckboxGroup = {
+    render: () => (_jsxs(CheckboxGroup, { labelText: "Setting Selection", name: "settingSelection", children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] })),
     name: "CheckboxGroup",
 };
-export const CheckboxGroupWithAllProps = () => (_jsxs(CheckboxGroup, { labelText: "Setting Selection", name: "settingSelection", helpText: "Select a setting from the menu below:", required: true, requirementText: "(Required)", hint: "This is a hint", defaultValue: ["a"], children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] }));
-CheckboxGroupWithAllProps.story = {
+export const CheckboxGroupWithAllProps = {
+    render: () => (_jsxs(CheckboxGroup, { labelText: "Setting Selection", name: "settingSelection", helpText: "Select a setting from the menu below:", required: true, requirementText: "(Required)", hint: "This is a hint", defaultValue: ["a"], children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] })),
     name: "CheckboxGroup with all props",
 };
-export const WithErrorMessage = () => (_jsxs(CheckboxGroup, { errorMessage: "Please select an option", labelText: "Setting Selection", name: "settingSelection", defaultValue: ["a"], children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] }));
-WithErrorMessage.story = {
+export const WithErrorMessage = {
+    render: () => (_jsxs(CheckboxGroup, { errorMessage: "Please select an option", labelText: "Setting Selection", name: "settingSelection", defaultValue: ["a"], children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] })),
     name: "with error message",
 };
-export const WithErrorList = () => (_jsxs(CheckboxGroup, { errorMessage: "Please select an option", errorList: errorList, labelText: "Setting Selection", name: "settingSelection", defaultValue: ["a"], children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] }));
-WithErrorList.story = {
+export const WithErrorList = {
+    render: () => (_jsxs(CheckboxGroup, { errorMessage: "Please select an option", errorList: errorList, labelText: "Setting Selection", name: "settingSelection", defaultValue: ["a"], children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] })),
     name: "with error list",
 };
-export const SetToDisabled = () => (_jsxs(CheckboxGroup, { disabled: true, labelText: "Setting Selection", name: "settingSelection", defaultValue: ["a"], children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] }));
-SetToDisabled.story = {
+export const SetToDisabled = {
+    render: () => (_jsxs(CheckboxGroup, { disabled: true, labelText: "Setting Selection", name: "settingSelection", defaultValue: ["a"], children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] })),
     name: "Set to disabled",
 };
 export const Controlled = () => (_jsxs(CheckboxGroup, { labelText: "Setting Selection", name: "settingSelection", checkedValue: ["a"], onChange: () => { }, children: [_jsx(Checkbox, { value: "a", labelText: "Option A" }), _jsx(Checkbox, { value: "b", labelText: "Option B" }), _jsx(Checkbox, { value: "c", labelText: "Option C" })] }));

package/dist/src/DatePickers/stories/DatePicker.story.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import { DatePicker } from "../index";
 declare const _default: {
     title: string;
@@ -11,6 +11,13 @@ export declare const Default: Story;
 export declare const WithCustomDateFormat: Story;
 export declare const WithCustomPlaceholder: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithErrorState: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithMinAndMaxDate: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithMinAndMaxDate: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const DisableFlipping: Story;
 export declare const UsingRefToControlFocus: () => import("react/jsx-runtime").JSX.Element;