@nulogy/components 15.4.1 → 16.0.1

package/dist/src/i18n.js

@@ -1,8 +1,8 @@
 import i18n from "i18next";
-/* eslint-disable */
 import de_DE from "../locales/de_DE.json";
 import en_US from "../locales/en_US.json";
 import es_ES from "../locales/es_ES.json";
+import ja_JP from "../locales/ja_JP.json";
 import es_MX from "../locales/es_MX.json";
 import fr_FR from "../locales/fr_FR.json";
 import nl_NL from "../locales/nl_NL.json";
@@ -10,7 +10,6 @@ import pl_PL from "../locales/pl_PL.json";
 import pt_BR from "../locales/pt_BR.json";
 import ro_RO from "../locales/ro_RO.json";
 import zh_CN from "../locales/zh_CN.json";
-/* eslint-enable */
 const resources = {
     de_DE: {
         nds: de_DE,
@@ -27,6 +26,9 @@ const resources = {
     fr_FR: {
         nds: fr_FR,
     },
+    ja_JP: {
+        nds: ja_JP,
+    },
     nl_NL: {
         nds: nl_NL,
     },

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

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

package/dist/src/locale.story.js

@@ -1,9 +1,10 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import deDE from "../locales/de_DE.json";
 import enUS from "../locales/en_US.json";
 import esES from "../locales/es_ES.json";
 import esMX from "../locales/es_MX.json";
 import frFR from "../locales/fr_FR.json";
+import jaJP from "../locales/ja_JP.json";
 import nlNL from "../locales/nl_NL.json";
 import plPL from "../locales/pl_PL.json";
 import ptBR from "../locales/pt_BR.json";
@@ -34,6 +35,10 @@ const locales = {
         name: "French (France)",
         keys: frFR,
     },
+    ja_JP: {
+        name: "Japanese (Japan)",
+        keys: jaJP,
+    },
     nl_NL: {
         name: "Dutch",
         keys: nlNL,
@@ -58,9 +63,7 @@ const locales = {
 const getColumns = () => {
     return Object.keys(locales).map((locale) => ({
         label: locales[locale].name,
-        headerFormatter: ({ label }) => (React.createElement(Flex, { flexDirection: "column" },
-            React.createElement(Text, null, label),
-            React.createElement(Text, { fontSize: "small", color: "midGrey" }, locale))),
+        headerFormatter: ({ label }) => (_jsxs(Flex, { flexDirection: "column", children: [_jsx(Text, { children: label }), _jsx(Text, { fontSize: "small", color: "midGrey", children: locale })] })),
         dataKey: locale,
         width: "8%",
     }));
@@ -88,6 +91,4 @@ export default {
         layout: "fullscreen",
     },
 };
-export const LocaleTable = () => (React.createElement(Box, { p: "x3" },
-    React.createElement(Heading1, null, "Locale Translations"),
-    React.createElement(Table, { columns: getColumns(), rows: getRows(), rowBorder: true, rowHovers: true, stickyHeader: true, className: "LocaleTable" })));
+export const LocaleTable = () => (_jsxs(Box, { p: "x3", children: [_jsx(Heading1, { children: "Locale Translations" }), _jsx(Table, { columns: getColumns(), rows: getRows(), rowBorder: true, rowHovers: true, stickyHeader: true, className: "LocaleTable" })] }));

package/dist/src/locales.const.d.ts

@@ -4,6 +4,7 @@ export declare const NDS_TO_DATE_FN_LOCALES_MAP: {
     readonly es_MX: Locale;
     readonly es_ES: Locale;
     readonly fr_FR: Locale;
+    readonly ja_JP: Locale;
     readonly nl_NL: Locale;
     readonly pl_PL: Locale;
     readonly pt_BR: Locale;
@@ -26,6 +27,10 @@ export declare const ALL_NDS_LOCALES: readonly [{
     readonly label: "France (French)";
     readonly value: "fr_FR";
     readonly dateFnsValue: Locale;
+}, {
+    readonly label: "Japanese (Japan)";
+    readonly value: "ja_JP";
+    readonly dateFnsValue: Locale;
 }, {
     readonly label: "Dutch (Netherlands)";
     readonly value: "nl_NL";

package/dist/src/locales.const.js

@@ -1,11 +1,12 @@
 /* These locales are exported for use in the docs site and storybook */
-import { enUS, de, fr, es, ptBR, ro, pl, nl, zhCN } from "date-fns/locale";
+import { enUS, de, fr, es, ja, ptBR, ro, pl, nl, zhCN } from "date-fns/locale";
 export const NDS_TO_DATE_FN_LOCALES_MAP = {
     de_DE: de,
     en_US: enUS,
     es_MX: es,
     es_ES: es,
     fr_FR: fr,
+    ja_JP: ja,
     nl_NL: nl,
     pl_PL: pl,
     pt_BR: ptBR,
@@ -33,6 +34,11 @@ export const ALL_NDS_LOCALES = [
         value: "fr_FR",
         dateFnsValue: NDS_TO_DATE_FN_LOCALES_MAP.fr_FR,
     },
+    {
+        label: "Japanese (Japan)",
+        value: "ja_JP",
+        dateFnsValue: NDS_TO_DATE_FN_LOCALES_MAP.ja_JP,
+    },
     {
         label: "Dutch (Netherlands)",
         value: "nl_NL",

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

@@ -1,21 +1,20 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const Static: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     parameters: {
         chromatic: {
             disable: boolean;
         };
     };
 };
-export declare const Base: () => React.JSX.Element;
+export declare const Base: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithALink: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const Maintenance: () => React.JSX.Element;
+export declare const Maintenance: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from "styled-components";
 import { Alert, Box, Branding, Flex, Link } from "../index";
 import { Text } from "../Type";
@@ -7,44 +7,18 @@ const ErrorPageAlertWidth = "432px";
 export default {
     title: "Pages/ErrorPage",
 };
-export const Static = () => (React.createElement(Text, null,
-    "For non-React, static HTML error pages see the Nulogy error pages repository",
-    " ",
-    React.createElement(Link, { href: "https://github.com/nulogy/error-pages" }, "on GitHub"),
-    " or preview them",
-    " ",
-    React.createElement(Link, { href: "https://nulogy.github.io/error-pages/" }, "here"),
-    "."));
+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 Base = () => (React.createElement(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2" },
-    React.createElement(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto" },
-        React.createElement(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center" },
-            React.createElement(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: 0 }, mr: { extraSmall: 0, large: "x3" } },
-                React.createElement(Branding, { size: "large" })),
-            React.createElement(Box, { maxWidth: ErrorPageAlertWidth },
-                React.createElement(Alert, { type: "danger", title: "We're sorry, but something went wrong." }, "We've been notified about this issue and we'll take a look at it shortly."))))));
+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 (React.createElement(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2" },
-        React.createElement(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto" },
-            React.createElement(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center" },
-                React.createElement(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: `-${theme.space.x4}` }, mr: { extraSmall: 0, large: "x3" } },
-                    React.createElement(Branding, { size: "large" })),
-                React.createElement(Box, { maxWidth: ErrorPageAlertWidth },
-                    React.createElement(Alert, { type: "danger", title: "We're sorry, but something went wrong.", mb: "x2" }, "We've been notified about this issue and we'll take a look at it shortly."),
-                    React.createElement(Link, { href: "#" }, "Back to homepage"))))));
+    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 = {
     name: "With a link",
 };
-export const Maintenance = () => (React.createElement(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2" },
-    React.createElement(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto" },
-        React.createElement(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center" },
-            React.createElement(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: 0 }, mr: { extraSmall: 0, large: "x3" } },
-                React.createElement(Branding, { size: "large" })),
-            React.createElement(Box, { maxWidth: ErrorPageAlertWidth },
-                React.createElement(Alert, null, "We are currently adding new features to Nulogy Quality Control. We should be online shortly."))))));
+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

@@ -1,29 +1,28 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Base: () => React.JSX.Element;
+export declare const Base: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithRememberMe: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithForgotPasswordLink: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithError: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithErrorAndNoAdditionalText: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

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

@@ -1,71 +1,22 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Alert, Box, Branding, Checkbox, Flex, Form, Input, Link, PrimaryButton, Text } from "../index";
 export default {
     title: "Pages/LoginPage",
 };
-export const Base = () => (React.createElement(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%" },
-    React.createElement(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1 },
-        React.createElement(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" },
-            React.createElement(Box, { mb: "x2", width: "100%" },
-                React.createElement(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" })),
-            React.createElement(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4" }, "Additional Text"),
-            React.createElement(Form, null,
-                React.createElement(Input, { labelText: "Email" }),
-                React.createElement(Input, { type: "password", labelText: "Password" }),
-                React.createElement(PrimaryButton, { fullWidth: true }, "Sign In"))))));
-export const WithRememberMe = () => (React.createElement(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%" },
-    React.createElement(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1 },
-        React.createElement(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" },
-            React.createElement(Box, { mb: "x2", width: "100%" },
-                React.createElement(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" })),
-            React.createElement(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4" }, "Additional Text"),
-            React.createElement("form", { style: { width: "100%" } },
-                React.createElement(Input, { mb: "x3", labelText: "Email" }),
-                React.createElement(Input, { type: "password", labelText: "Password" }),
-                React.createElement(Checkbox, { mb: "x3", labelText: "Remember me" }),
-                React.createElement(PrimaryButton, { fullWidth: true }, "Sign In"))))));
+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 = {
     name: "with remember me",
 };
-export const WithForgotPasswordLink = () => (React.createElement(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%" },
-    React.createElement(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1 },
-        React.createElement(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" },
-            React.createElement(Box, { mb: "x2", width: "100%" },
-                React.createElement(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" })),
-            React.createElement(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4" }, "Additional Text"),
-            React.createElement(Form, { style: { width: "100%" } },
-                React.createElement(Input, { labelText: "Email" }),
-                React.createElement(Input, { type: "password", labelText: "Password" }),
-                React.createElement(PrimaryButton, { fullWidth: true }, "Sign In")),
-            React.createElement(Box, { py: "x1", mt: "x1" },
-                React.createElement(Link, { href: "/" }, "Forgot your password?"))))));
+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 = {
     name: "with forgot password link",
 };
-export const WithError = () => (React.createElement(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%" },
-    React.createElement(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1 },
-        React.createElement(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" },
-            React.createElement(Box, { mb: "x2", width: "100%" },
-                React.createElement(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" })),
-            React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase", mb: "x4" }, "Additional Text"),
-            React.createElement(Alert, { mb: "x4", width: "100%", type: "danger" }, "text"),
-            React.createElement(Form, { style: { width: "100%" } },
-                React.createElement(Input, { labelText: "Email" }),
-                React.createElement(Input, { type: "password", labelText: "Password" }),
-                React.createElement(PrimaryButton, { fullWidth: true }, "Sign In"))))));
+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 = {
     name: "with error",
 };
-export const WithErrorAndNoAdditionalText = () => (React.createElement(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%" },
-    React.createElement(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1 },
-        React.createElement(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" },
-            React.createElement(Box, { mb: "x4", width: "100%" },
-                React.createElement(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" })),
-            React.createElement(Alert, { mb: "x4", width: "100%", type: "danger" }, "text"),
-            React.createElement(Form, null,
-                React.createElement(Input, { labelText: "Email" }),
-                React.createElement(Input, { type: "password", labelText: "Password" }),
-                React.createElement(PrimaryButton, { fullWidth: true }, "Sign In"))))));
+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 = {
     name: "with error and no additional text",
 };

package/dist/src/theme/NDSThemeProvider.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
 export default function NDSThemeProvider({ customTheme, children }: {
     customTheme: any;
     children: any;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/theme/NDSThemeProvider.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import isPropValid from "@emotion/is-prop-valid";
 import { StyleSheetManager, ThemeProvider } from "styled-components";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
@@ -6,8 +6,7 @@ import { useNDSTheme } from "./useNDSTheme";
 export default function NDSThemeProvider({ customTheme, children }) {
     const variant = useComponentVariant();
     const theme = useNDSTheme(variant, customTheme);
-    return (React.createElement(StyleSheetManager, { enableVendorPrefixes: true, shouldForwardProp: shouldForwardProp },
-        React.createElement(ThemeProvider, { theme: theme }, children)));
+    return (_jsx(StyleSheetManager, { enableVendorPrefixes: true, shouldForwardProp: shouldForwardProp, children: _jsx(ThemeProvider, { theme: theme, children: children }) }));
 }
 function shouldForwardProp(propName, target) {
     if (typeof target === "string") {

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

@@ -6,6 +6,6 @@ export default class DetectOutsideClick extends React.Component<any, any, any> {
     handleOutsideClick(e: any): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 import React from "react";

package/dist/src/utils/DetectOutsideClick.js

@@ -1,3 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 /**
  * @deprecated use `useClickOutside` instead
@@ -34,6 +35,6 @@ export default class DetectOutsideClick extends React.Component {
     }
     render() {
         const { children } = this.props;
-        return React.createElement(React.Fragment, null, children);
+        return _jsx(_Fragment, { children: children });
     }
 }

package/dist/src/utils/PopperArrow.js

@@ -1,6 +1,6 @@
 import { styled } from "styled-components";
 const getThemeColor = (color, theme) => (theme.colors[color] ? theme.colors[color] : color);
-const positionArrow = (placement, theme) => {
+const positionArrow = (placement) => {
     const location = String(placement).split("-")[0];
     switch (location) {
         case "top":
@@ -130,7 +130,7 @@ const PopperArrow = styled.div(({ theme }) => ({
     },
 }), ({ placement = "bottom", borderColor = "grey", backgroundColor = "white", theme }) => ({
     ...drawArrow(placement, borderColor, backgroundColor, theme),
-}), ({ placement = "bottom", theme }) => ({
-    ...positionArrow(placement, theme),
+}), ({ placement = "bottom" }) => ({
+    ...positionArrow(placement),
 }));
 export default PopperArrow;

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

@@ -11,6 +11,6 @@ declare class ScrollIndicators extends React.Component<any, any, any> {
     componentDidMount(): void;
     contentHiddenBelow(): boolean;
     contentHiddenAbove(): boolean;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 import React from "react";

package/dist/src/utils/ScrollIndicators.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 { position } from "styled-system";
@@ -14,12 +15,9 @@ const ScrollIndicatorWrapper = styled.div(({ theme }) => ({
     pointerEvents: "none",
 }), position);
 const ScrollIndicatorTop = () => {
-    return (React.createElement(ScrollIndicatorWrapper, { top: 0 },
-        React.createElement(Icon, { margin: "0 auto", display: "block", color: "darkGrey", icon: "upArrow" })));
+    return (_jsx(ScrollIndicatorWrapper, { top: 0, children: _jsx(Icon, { margin: "0 auto", display: "block", color: "darkGrey", icon: "upArrow" }) }));
 };
-const ScrollIndicatorBottom = () => (React.createElement(ScrollIndicatorWrapper, { bottom: 1 },
-    React.createElement(Icon, { display: "block", margin: "0 auto", color: "darkGrey", icon: "downArrow" })));
-/* eslint-disable react/destructuring-assignment */
+const ScrollIndicatorBottom = () => (_jsx(ScrollIndicatorWrapper, { bottom: 1, children: _jsx(Icon, { display: "block", margin: "0 auto", color: "darkGrey", icon: "downArrow" }) }));
 class ScrollIndicators extends React.Component {
     constructor() {
         super();
@@ -49,14 +47,10 @@ class ScrollIndicators extends React.Component {
         return this.state.scrollTop !== 0 && this.offsetHeight < this.scrollHeight;
     }
     render() {
-        return (React.createElement("div", { style: { position: "relative" } },
-            this.contentHiddenAbove() && React.createElement(ScrollIndicatorTop, null),
-            React.cloneElement(this.props.children, {
-                ref: this.menuRef,
-                onScroll: this.handleScroll,
-            }),
-            this.contentHiddenBelow() && React.createElement(ScrollIndicatorBottom, null)));
+        return (_jsxs("div", { style: { position: "relative" }, children: [this.contentHiddenAbove() && _jsx(ScrollIndicatorTop, {}), React.cloneElement(this.props.children, {
+                    ref: this.menuRef,
+                    onScroll: this.handleScroll,
+                }), this.contentHiddenBelow() && _jsx(ScrollIndicatorBottom, {})] }));
     }
 }
-/* eslint-enable react/destructuring-assignment */
 export default ScrollIndicators;

package/dist/src/utils/noop.js

@@ -2,6 +2,4 @@
  * No operation function that does nothing and returns nothing.
  * Useful as a default callback or placeholder.
  */
-export function noop() {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-}
+export function noop() { }

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

@@ -1,7 +1,6 @@
-import React from "react";
 import { BoxProps } from "../../Box";
 /**
  * A dialognaly striped and bordered rectangle that can be used as a placeholder for content.
  * To be used in Storybook exclusively. Do not export for production.
  */
-export declare function Placeholder(props: BoxProps): React.JSX.Element;
+export declare function Placeholder(props: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/utils/story/placeholder.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { transparentize } from "polished";
-import React from "react";
 import { styled } from "styled-components";
 import { addStyledProps } from "../../StyledProps";
 const Contianer = styled.div(({ theme }) => ({
@@ -24,10 +24,5 @@ const Svg = styled.svg(({ theme }) => ({
  * To be used in Storybook exclusively. Do not export for production.
  */
 export function Placeholder(props) {
-    return (React.createElement(Contianer, { ...props },
-        React.createElement(Svg, { fill: "none" },
-            React.createElement("defs", null,
-                React.createElement("pattern", { id: "diagonal-stripes", x: "0", y: "0", width: "10", height: "10", patternUnits: "userSpaceOnUse" },
-                    React.createElement("path", { d: "M-3 13 15-5M-5 5l18-18M-1 21 17 3" }))),
-            React.createElement("rect", { stroke: "none", fill: "url(#diagonal-stripes)", width: "100%", height: "100%" }))));
+    return (_jsx(Contianer, { ...props, children: _jsxs(Svg, { fill: "none", children: [_jsx("defs", { children: _jsx("pattern", { id: "diagonal-stripes", x: "0", y: "0", width: "10", height: "10", patternUnits: "userSpaceOnUse", children: _jsx("path", { d: "M-3 13 15-5M-5 5l18-18M-1 21 17 3" }) }) }), _jsx("rect", { stroke: "none", fill: "url(#diagonal-stripes)", width: "100%", height: "100%" })] }) }));
 }

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

@@ -5,7 +5,7 @@ interface ResizableProps {
     onResize?: (width: number) => void;
     showContainerOutline?: boolean;
 }
-export declare const Resizable: ({ children, containerWidth, onResize, showContainerOutline, }: ResizableProps) => React.JSX.Element;
+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> & {
     variant?: import("../../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;

package/dist/src/utils/story/resizable.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { Resizable as ReResizable } from "re-resizable";
 import { styled } from "styled-components";
@@ -9,16 +10,12 @@ const CONTAINER_BORDER_WIDTH = 2 * 2; // 2px * 2 sides (left and right)
 export const Resizable = ({ children, containerWidth = "100%", onResize, showContainerOutline = false, }) => {
     const [width, setWidth] = useState(containerWidth);
     const [showWidth, setShowWidth] = useState(false);
-    const WidthIndicator = (React.createElement(AnimatePresence, null, showWidth && (React.createElement(WidthText, { fontSize: "sm", color: "midGrey", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, width))));
-    return (React.createElement(ReResizable, { enable: { right: true }, size: { width: width }, handleComponent: { right: React.createElement(ResizeHandle, null) }, onResizeStart: () => setShowWidth(true), onResizeStop: () => setShowWidth(false), onResize: (_, __, ref) => {
+    const WidthIndicator = (_jsx(AnimatePresence, { children: showWidth && (_jsx(WidthText, { fontSize: "sm", color: "midGrey", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: width })) }));
+    return (_jsx(ReResizable, { enable: { right: true }, size: { width: width }, handleComponent: { right: _jsx(ResizeHandle, {}) }, onResizeStart: () => setShowWidth(true), onResizeStop: () => setShowWidth(false), onResize: (_, __, ref) => {
             const width = Math.round(ref.getBoundingClientRect().width);
             setWidth(`${width - (showContainerOutline ? CONTAINER_BORDER_WIDTH : 0)}px`);
             onResize?.(width - (showContainerOutline ? CONTAINER_BORDER_WIDTH : 0));
-        } }, showContainerOutline ? (React.createElement(DashedBox, null,
-        children,
-        WidthIndicator)) : (React.createElement(Box, null,
-        children,
-        WidthIndicator))));
+        }, children: showContainerOutline ? (_jsxs(DashedBox, { children: [children, WidthIndicator] })) : (_jsxs(Box, { children: [children, WidthIndicator] })) }));
 };
 export const WidthText = styled(motion(Text)) `
   position: absolute;

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

@@ -5,8 +5,8 @@ type Reference = {
 };
 type ChildrenHandlers = {
     focusedIndex: number;
-    handleArrowNavigation: Function;
-    setFocusedIndex: Function;
+    handleArrowNavigation: (e: React.KeyboardEvent) => void;
+    setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
 };
 type FocusManagerProps = {
     refs?: Array<Reference>;

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

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 const FocusManager = ({ children, refs = undefined, defaultFocusedIndex, }) => {
     const [focusedIndex, setFocusedIndex] = useState(defaultFocusedIndex ?? 0);
     const prevFocusedIndex = useRef(focusedIndex);
@@ -31,10 +32,10 @@ const FocusManager = ({ children, refs = undefined, defaultFocusedIndex, }) => {
             prevFocusedIndex.current = focusedIndex;
         }
     }, [focusedIndex, refs]);
-    return (React.createElement(React.Fragment, null, children({
-        focusedIndex,
-        setFocusedIndex,
-        handleArrowNavigation,
-    })));
+    return (_jsx(_Fragment, { children: children({
+            focusedIndex,
+            setFocusedIndex,
+            handleArrowNavigation,
+        }) }));
 };
 export default FocusManager;

package/dist/src/utils/useScrollLock.js

@@ -75,7 +75,6 @@ export function useScrollLock(options = {}) {
         return () => {
             unlock();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [autoLock, lockTarget, widthReflow]);
     return { isLocked, lock, unlock };
 }

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

@@ -2,5 +2,4 @@ declare namespace _default {
     let title: string;
 }
 export default _default;
-export function _UseWindowDimensions(): React.JSX.Element;
-import React from "react";
+export function _UseWindowDimensions(): import("react/jsx-runtime").JSX.Element;