@nulogy/components 16.0.1 → 16.0.3

package/dist/src/VisualTests/Select.story.d.ts

@@ -3,38 +3,26 @@ declare const _default: {
 };
 export default _default;
 export declare const WithADefaultValue: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithABlankValue: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAnOptionSelected: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithWrappingText: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const TestMultiselectOverflow: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithANullValue: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/VisualTests/Select.story.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Select } from "../index";
 import { Box } from "../Box";
 const options = [
@@ -33,33 +33,33 @@ const wrappingOptions = [
 export default {
     title: "VisualTests/Select",
 };
-export const WithADefaultValue = () => (_jsx(Select, { defaultValue: options[0].value, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: options, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
-WithADefaultValue.story = {
+export const WithADefaultValue = {
+    render: () => (_jsx(Select, { defaultValue: options[0].value, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: options, labelText: "Inventory status", onInputChange: action("typed input value changed") })),
     name: "with a defaultValue",
 };
-export const WithABlankValue = () => {
-    const optionsWithBlank = [{ value: null, label: "" }, ...options];
-    return (_jsx(Select, { placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
-};
-WithABlankValue.story = {
+export const WithABlankValue = {
+    render: () => {
+        const optionsWithBlank = [{ value: null, label: "" }, ...options];
+        return (_jsx(Select, { placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+    },
     name: "with a blank value",
 };
-export const WithAnOptionSelected = () => (_jsxs(_Fragment, { children: [_jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] }));
-WithAnOptionSelected.story = {
+export const WithAnOptionSelected = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] })),
     name: "with an option selected",
 };
-export const WithWrappingText = () => (_jsx(Select, { initialIsOpen: true, value: options[0].value, placeholder: "Please select inventory status", options: wrappingOptions, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
-WithWrappingText.story = {
+export const WithWrappingText = {
+    render: () => (_jsx(Select, { initialIsOpen: true, value: options[0].value, placeholder: "Please select inventory status", options: wrappingOptions, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })),
     name: "With wrapping text",
 };
-export const TestMultiselectOverflow = () => (_jsxs(_Fragment, { children: [_jsx(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }), _jsx(Box, { width: "300px", children: _jsx(Select, { defaultValue: partnerCompanyName.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: partnerCompanyName, labelText: "PCN", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) }), _jsx(Box, { width: "400px", children: _jsx(Select, { defaultValue: options.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) })] }));
-TestMultiselectOverflow.story = {
+export const TestMultiselectOverflow = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }), _jsx(Box, { width: "300px", children: _jsx(Select, { defaultValue: partnerCompanyName.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: partnerCompanyName, labelText: "PCN", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) }), _jsx(Box, { width: "400px", children: _jsx(Select, { defaultValue: options.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) })] })),
     name: "test multiselect overflow",
 };
-export const WithANullValue = () => {
-    const optionsWithBlank = [{ value: null, label: "Nullable" }, { value: null, label: "Other null" }, ...options];
-    return (_jsx(Select, { defaultValue: null, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
-};
-WithANullValue.story = {
+export const WithANullValue = {
+    render: () => {
+        const optionsWithBlank = [{ value: null, label: "Nullable" }, { value: null, label: "Other null" }, ...options];
+        return (_jsx(Select, { defaultValue: null, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+    },
     name: "with a null value",
 };

package/dist/src/pages/ErrorPage.story.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Static: {
-    (): import("react/jsx-runtime").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     parameters: {
         chromatic: {
             disable: boolean;
@@ -12,9 +12,7 @@ export declare const Static: {
 };
 export declare const Base: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithALink: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const Maintenance: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/pages/ErrorPage.story.js

@@ -7,18 +7,18 @@ const ErrorPageAlertWidth = "432px";
 export default {
     title: "Pages/ErrorPage",
 };
-export const Static = () => (_jsxs(Text, { children: ["For non-React, static HTML error pages see the Nulogy error pages repository", " ", _jsx(Link, { href: "https://github.com/nulogy/error-pages", children: "on GitHub" }), " or preview them", " ", _jsx(Link, { href: "https://nulogy.github.io/error-pages/", children: "here" }), "."] }));
-Static.parameters = {
-    chromatic: { disable: true },
+export const Static = {
+    render: () => (_jsxs(Text, { children: ["For non-React, static HTML error pages see the Nulogy error pages repository", " ", _jsx(Link, { href: "https://github.com/nulogy/error-pages", children: "on GitHub" }), " or preview them", " ", _jsx(Link, { href: "https://nulogy.github.io/error-pages/", children: "here" }), "."] })),
+    parameters: {
+        chromatic: { disable: true },
+    },
 };
 export const Base = () => (_jsx(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2", children: _jsx(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto", children: _jsxs(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center", children: [_jsx(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: 0 }, mr: { extraSmall: 0, large: "x3" }, children: _jsx(Branding, { size: "large" }) }), _jsx(Box, { maxWidth: ErrorPageAlertWidth, children: _jsx(Alert, { type: "danger", title: "We're sorry, but something went wrong.", children: "We've been notified about this issue and we'll take a look at it shortly." }) })] }) }) }));
-/* eslint-disable jsx-a11y/anchor-is-valid */
-export const WithALink = () => {
-    const theme = useTheme();
-    return (_jsx(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2", children: _jsx(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto", children: _jsxs(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center", children: [_jsx(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: `-${theme.space.x4}` }, mr: { extraSmall: 0, large: "x3" }, children: _jsx(Branding, { size: "large" }) }), _jsxs(Box, { maxWidth: ErrorPageAlertWidth, children: [_jsx(Alert, { type: "danger", title: "We're sorry, but something went wrong.", mb: "x2", children: "We've been notified about this issue and we'll take a look at it shortly." }), _jsx(Link, { href: "#", children: "Back to homepage" })] })] }) }) }));
-};
-/* eslint-enable jsx-a11y/anchor-is-valid */
-WithALink.story = {
+export const WithALink = {
+    render: () => {
+        const theme = useTheme();
+        return (_jsx(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2", children: _jsx(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto", children: _jsxs(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center", children: [_jsx(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: `-${theme.space.x4}` }, mr: { extraSmall: 0, large: "x3" }, children: _jsx(Branding, { size: "large" }) }), _jsxs(Box, { maxWidth: ErrorPageAlertWidth, children: [_jsx(Alert, { type: "danger", title: "We're sorry, but something went wrong.", mb: "x2", children: "We've been notified about this issue and we'll take a look at it shortly." }), _jsx(Link, { href: "/", children: "Back to homepage" })] })] }) }) }));
+    },
     name: "With a link",
 };
 export const Maintenance = () => (_jsx(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2", children: _jsx(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto", children: _jsxs(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center", children: [_jsx(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: 0 }, mr: { extraSmall: 0, large: "x3" }, children: _jsx(Branding, { size: "large" }) }), _jsx(Box, { maxWidth: ErrorPageAlertWidth, children: _jsx(Alert, { children: "We are currently adding new features to Nulogy Quality Control. We should be online shortly." }) })] }) }) }));

package/dist/src/pages/LoginPage.story.d.ts

@@ -4,26 +4,18 @@ declare const _default: {
 export default _default;
 export declare const Base: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithRememberMe: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithForgotPasswordLink: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithError: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithErrorAndNoAdditionalText: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/pages/LoginPage.story.js

@@ -4,19 +4,19 @@ export default {
     title: "Pages/LoginPage",
 };
 export const Base = () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsxs(Form, { children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) }));
-export const WithRememberMe = () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsxs("form", { style: { width: "100%" }, children: [_jsx(Input, { mb: "x3", labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(Checkbox, { mb: "x3", labelText: "Remember me" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) }));
-WithRememberMe.story = {
+export const WithRememberMe = {
+    render: () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsxs("form", { style: { width: "100%" }, children: [_jsx(Input, { mb: "x3", labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(Checkbox, { mb: "x3", labelText: "Remember me" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) })),
     name: "with remember me",
 };
-export const WithForgotPasswordLink = () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsxs(Form, { style: { width: "100%" }, children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] }), _jsx(Box, { py: "x1", mt: "x1", children: _jsx(Link, { href: "/", children: "Forgot your password?" }) })] }) }) }));
-WithForgotPasswordLink.story = {
+export const WithForgotPasswordLink = {
+    render: () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsxs(Form, { style: { width: "100%" }, children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] }), _jsx(Box, { py: "x1", mt: "x1", children: _jsx(Link, { href: "/", children: "Forgot your password?" }) })] }) }) })),
     name: "with forgot password link",
 };
-export const WithError = () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsx(Alert, { mb: "x4", width: "100%", type: "danger", children: "text" }), _jsxs(Form, { style: { width: "100%" }, children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) }));
-WithError.story = {
+export const WithError = {
+    render: () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsx(Alert, { mb: "x4", width: "100%", type: "danger", children: "text" }), _jsxs(Form, { style: { width: "100%" }, children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) })),
     name: "with error",
 };
-export const WithErrorAndNoAdditionalText = () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x4", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Alert, { mb: "x4", width: "100%", type: "danger", children: "text" }), _jsxs(Form, { children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) }));
-WithErrorAndNoAdditionalText.story = {
+export const WithErrorAndNoAdditionalText = {
+    render: () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x4", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Alert, { mb: "x4", width: "100%", type: "danger", children: "text" }), _jsxs(Form, { children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) })),
     name: "with error and no additional text",
 };

package/dist/src/utils/story/dashed.d.ts

@@ -4,6 +4,4 @@ import { ComponentType } from "react";
  * to highlight its boundaries. To be used in Storybook exclusively.
  * Do not export for production.
  */
-export declare const dashed: <P extends Record<string, unknown>>(component: ComponentType<P>) => import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(import("react").PropsWithoutRef<P> & import("react").RefAttributes<import("react").Component<P, any, any>>) | (import("react").PropsWithRef<P & {
-    children?: import("react").ReactNode | undefined;
-}> & import("styled-components/dist/types").BaseObject), import("styled-components/dist/types").BaseObject>> & (string & (Omit<import("react").ComponentClass<P, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<P>, keyof import("react").Component<any, {}, any>>));
+export declare const dashed: <P extends Record<string, unknown>>(component: ComponentType<P>) => import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(import("react").PropsWithoutRef<P> & import("react").RefAttributes<import("react").Component<P, any, any>>) | (import("react").PropsWithRef<P> & import("styled-components/dist/types").BaseObject), import("styled-components/dist/types").BaseObject>> & (string & (Omit<import("react").ComponentClass<P, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<P>, keyof import("react").Component<any, {}, any>>));

package/dist/src/utils/story/resizable.d.ts

@@ -6,14 +6,16 @@ interface ResizableProps {
     showContainerOutline?: boolean;
 }
 export declare const Resizable: ({ children, containerWidth, onResize, showContainerOutline, }: ResizableProps) => import("react/jsx-runtime").JSX.Element;
-export declare const WidthText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
+export declare const WidthText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof React.HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("../..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;
     disabled?: boolean;
     textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
-} & import("../..").StyledProps & import("framer-motion").MotionProps, "ref"> & React.RefAttributes<HTMLElement | SVGElement>, never>> & string & Omit<import("framer-motion").CustomDomComponent<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
+} & import("../..").StyledProps & import("framer-motion").MotionProps, "ref"> & React.RefAttributes<HTMLElement | SVGElement>, "ref"> & {
+    ref?: React.Ref<HTMLElement | SVGElement>;
+}, never>> & string & Omit<import("framer-motion").CustomDomComponent<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof React.HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("../..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;

package/dist/src/utils/ts/FocusManager.d.ts

@@ -13,5 +13,5 @@ type FocusManagerProps = {
     defaultFocusedIndex: number | null;
     children: (handlers: ChildrenHandlers) => ReactNode;
 };
-declare const FocusManager: React.FC<React.PropsWithChildren<FocusManagerProps>>;
+declare function FocusManager({ children, refs, defaultFocusedIndex }: FocusManagerProps): import("react/jsx-runtime").JSX.Element;
 export default FocusManager;

package/dist/src/utils/ts/FocusManager.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-const FocusManager = ({ children, refs = undefined, defaultFocusedIndex, }) => {
+function FocusManager({ children, refs = undefined, defaultFocusedIndex }) {
     const [focusedIndex, setFocusedIndex] = useState(defaultFocusedIndex ?? 0);
     const prevFocusedIndex = useRef(focusedIndex);
     const focusPrevious = () => {
@@ -37,5 +37,5 @@ const FocusManager = ({ children, refs = undefined, defaultFocusedIndex, }) => {
             setFocusedIndex,
             handleArrowNavigation,
         }) }));
-};
+}
 export default FocusManager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "16.0.1",
+  "version": "16.0.3",
   "type": "module",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
@@ -9,9 +9,7 @@
   },
   "scripts": {
     "ci": "pnpm && pnpm build && pnpm build:verify && pnpm test && pnpm run check",
-    "start-server": "pnpm build:storybook && pnpm http-server -p 9999 ./storybook-static",
     "start": "concurrently \"pnpm build:watch\" \"pnpm start:storybook\"",
-    "start:cypress": "start-server-and-test start 9999 'cypress open'",
     "start:storybook": "storybook dev -p 9999",
     "clean:storybook": "rm -rf node_modules/.cache/storybook && rm -rf ./storybook-static",
     "build": "rm -rf dist && tsc -p tsconfig.build.json && vite build",
@@ -20,16 +18,17 @@
     "build:storybook": "storybook build --stats-json",
     "warn:prepush": "echo \"Make sure you also run all the other CI steps before pushing by running 'pnpm ci'\"",
     "check": "pnpm warn:prepush && pnpm check:types && pnpm check:lint && pnpm check:format",
-    "check:types": "tsc && cd cypress && tsc --noEmit",
+    "check:types": "tsc",
     "check:lint": "eslint '**/*.{js,ts,jsx,tsx}'",
     "check:format": "prettier -c .",
     "fix": "pnpm fix:lint && pnpm fix:format",
     "fix:lint": "pnpm check:lint --fix",
     "fix:format": "prettier -w .",
-    "test": "pnpm test:components && pnpm run test:cypress",
+    "test": "pnpm test:components && pnpm test:storybook",
     "test:components": "vitest run",
     "test:components:watch": "vitest",
-    "test:cypress": "start-server-and-test start-server 9999 'cypress run'",
+    "test:storybook": "vitest run --config vitest.storybook.config.ts",
+    "test:storybook:watch": "vitest --config vitest.storybook.config.ts",
     "test:visual": "npx chromatic --project-token $CHROMATIC_TOKEN --exit-zero-on-changes",
     "prepare": "husky"
   },
@@ -66,7 +65,7 @@
     "react": ">=16.10.2 <19.0.0",
     "react-dom": ">=16.10.2 <19.0.0",
     "styled-components": "^6.0.0",
-    "typescript": "4.9.5"
+    "typescript": ">=4.9.5"
   },
   "devDependencies": {
     "@apollo/client": "^3.11.8",
@@ -78,58 +77,50 @@
     "@semantic-release/github": "^8.0.7",
     "@semantic-release/npm": "^9.0.0",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@storybook/addon-a11y": "~8.6.15",
-    "@storybook/addon-actions": "~8.6.15",
-    "@storybook/addon-docs": "~8.6.15",
-    "@storybook/addon-storysource": "~8.6.14",
-    "@storybook/addon-toolbars": "~8.6.15",
-    "@storybook/addon-viewport": "~8.6.15",
-    "@storybook/react": "~8.6.15",
-    "@storybook/react-vite": "~8.6.15",
-    "@storybook/theming": "~8.6.14",
-    "@testing-library/react": "^12.1.5",
+    "@storybook/addon-a11y": "10.2.14",
+    "@storybook/addon-docs": "10.2.14",
+    "@storybook/addon-vitest": "10.2.14",
+    "@storybook/react-vite": "10.2.14",
+    "@testing-library/react": "^16.0.0",
     "@types/css-mediaquery": "^0.1.4",
     "@types/deep-equal": "^1.0.4",
     "@types/node": "^24.10.4",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.20",
-    "@types/react-router-dom": "5.3.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^8.49.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
     "chromatic": "^13.3.4",
     "concurrently": "^9.2.0",
     "css-mediaquery": "^0.1.2",
-    "cypress": "^13.17.0",
-    "cypress-enter-plugin": "^1.0.1",
-    "cypress-plugin-tab": "^1.0.1",
-    "cypress-real-events": "^1.14.0",
     "eslint": "^9.0.0",
     "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-prettier": "^5.2.0",
     "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-storybook": "10.2.14",
     "globals": "^15.0.0",
-    "graphql": "15.8.0",
-    "http-server": "^14.0.0",
+    "graphql": "16.13.0",
     "husky": "^9.1.7",
     "jsdom": "^27.2.0",
     "mockdate": "^3.0.5",
+    "playwright": "^1.58.2",
     "prettier": "^3.4.2",
     "re-resizable": "^6.10.3",
-    "react": "17.0.2",
+    "react": "18.3.1",
     "react-color": "^2.18.1",
-    "react-dom": "17.0.2",
-    "react-router-dom": "^5.3.3",
+    "react-dom": "18.3.1",
+    "react-router-dom": "^6.0.0",
     "semantic-release": "^24.2.5",
-    "start-server-and-test": "^2.1.3",
-    "storybook": "8.6.15",
+    "storybook": "10.2.14",
     "styled-components": "^6.1.19",
     "svg-sprite-loader": "^6.0.11",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.49.0",
     "vite": "^7.0.0",
-    "vitest": "^4.0.0"
+    "vitest": "^4.0.18"
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
@@ -162,8 +153,8 @@
   },
   "resolutions": {
     "@emotion/serialize": "1.1.3",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "csstype": "^3.2.3"
   }
 }