@nulogy/components 16.0.0 → 16.0.2

package/dist/src/VerticalDivider/VerticalDivider.story.js

@@ -1,15 +1,9 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from "../Type";
 import { VerticalDivider } from ".";
 export default {
     title: "Components/VerticalDivider",
     component: VerticalDivider,
 };
-export const Default = () => (React.createElement("div", null,
-    React.createElement(Text, { display: "inline" }, "Section A"),
-    React.createElement(VerticalDivider, null),
-    React.createElement(Text, { display: "inline" }, "Section B")));
-export const WithCustomColourAndSpacing = () => (React.createElement("div", null,
-    React.createElement(Text, { display: "inline" }, "Section A"),
-    React.createElement(VerticalDivider, { color: "darkBlue", mx: "x3" }),
-    React.createElement(Text, { display: "inline" }, "Section B")));
+export const Default = () => (_jsxs("div", { children: [_jsx(Text, { display: "inline", children: "Section A" }), _jsx(VerticalDivider, {}), _jsx(Text, { display: "inline", children: "Section B" })] }));
+export const WithCustomColourAndSpacing = () => (_jsxs("div", { children: [_jsx(Text, { display: "inline", children: "Section A" }), _jsx(VerticalDivider, { color: "darkBlue", mx: "x3" }), _jsx(Text, { display: "inline", children: "Section B" })] }));

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

@@ -1,40 +1,39 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const WithADefaultValue: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithABlankValue: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAnOptionSelected: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithWrappingText: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const TestMultiselectOverflow: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithANullValue: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { action } from "@storybook/addon-actions";
 import { Select } from "../index";
 import { Box } from "../Box";
@@ -33,40 +33,32 @@ const wrappingOptions = [
 export default {
     title: "VisualTests/Select",
 };
-export const WithADefaultValue = () => (React.createElement(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") }));
+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 = {
     name: "with a defaultValue",
 };
 export const WithABlankValue = () => {
     const optionsWithBlank = [{ value: null, label: "" }, ...options];
-    return (React.createElement(Select, { placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+    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 = {
     name: "with a blank value",
 };
-export const WithAnOptionSelected = () => (React.createElement(React.Fragment, null,
-    React.createElement(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") }),
-    React.createElement("br", null),
-    React.createElement(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") })));
+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 = {
     name: "with an option selected",
 };
-export const WithWrappingText = () => (React.createElement(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") }));
+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 = {
     name: "With wrapping text",
 };
-export const TestMultiselectOverflow = () => (React.createElement(React.Fragment, null,
-    React.createElement(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") }),
-    React.createElement(Box, { width: "300px" },
-        React.createElement(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") })),
-    React.createElement(Box, { width: "400px" },
-        React.createElement(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") }))));
+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 = {
     name: "test multiselect overflow",
 };
 export const WithANullValue = () => {
     const optionsWithBlank = [{ value: null, label: "Nullable" }, { value: null, label: "Other null" }, ...options];
-    return (React.createElement(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") }));
+    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 = {
     name: "with a null value",

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

@@ -1,23 +1,22 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Alert: () => React.JSX.Element;
-export declare const _AsyncSelect: () => React.JSX.Element;
-export declare const _Breadcrumbs: () => React.JSX.Element;
-export declare const _PrimaryButton: () => React.JSX.Element;
-export declare const _DatePicker: () => React.JSX.Element;
-export declare const _DropdownMenu: () => React.JSX.Element;
-export declare const _FieldLabel: () => React.JSX.Element;
-export declare const _Form: () => React.JSX.Element;
-export declare const _Link: () => React.JSX.Element;
-export declare const _List: () => React.JSX.Element;
-export declare const _Pagination: () => React.JSX.Element;
-export declare const _Radio: () => React.JSX.Element;
-export declare const _Select: () => React.JSX.Element;
-export declare const _Table: () => React.JSX.Element;
-export declare const _Tabs: () => React.JSX.Element;
-export declare const _TimePicker: () => React.JSX.Element;
-export declare const _TruncatedText: () => React.JSX.Element;
-export declare const _InlineValidation: () => React.JSX.Element;
+export declare const _Alert: () => import("react/jsx-runtime").JSX.Element;
+export declare const _AsyncSelect: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Breadcrumbs: () => import("react/jsx-runtime").JSX.Element;
+export declare const _PrimaryButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const _DatePicker: () => import("react/jsx-runtime").JSX.Element;
+export declare const _DropdownMenu: () => import("react/jsx-runtime").JSX.Element;
+export declare const _FieldLabel: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Form: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Link: () => import("react/jsx-runtime").JSX.Element;
+export declare const _List: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Pagination: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Radio: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Select: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Table: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Tabs: () => import("react/jsx-runtime").JSX.Element;
+export declare const _TimePicker: () => import("react/jsx-runtime").JSX.Element;
+export declare const _TruncatedText: () => import("react/jsx-runtime").JSX.Element;
+export declare const _InlineValidation: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Alert, AsyncSelect, Breadcrumbs, Link, Text, PrimaryButton, DatePicker, DropdownMenu, DropdownLink, DropdownButton, DropdownItem, FieldLabel, Form, Input, List, ListItem, Select, Radio, Tab, Tabs, TimePicker, TruncatedText, InlineValidation, Pagination, Table, } from "..";
 export default {
     title: "VisualTests/WithSpace",
@@ -7,35 +7,19 @@ const spaceProps = {
     p: "x1",
     mt: "x5",
 };
-export const _Alert = () => React.createElement(Alert, { ...spaceProps }, "Danger alert");
-export const _AsyncSelect = () => (React.createElement(AsyncSelect, { placeholder: "Filter Countries", className: "Select", classNamePrefix: "SelectTest", labelText: "Country", ...spaceProps }));
-export const _Breadcrumbs = () => (React.createElement(Breadcrumbs, { ...spaceProps },
-    React.createElement(Link, { href: "/" }, "Home"),
-    React.createElement(Link, { href: "/Tenants" }, "Tenants"),
-    React.createElement(Text, null, "Current Tenant")));
-export const _PrimaryButton = () => React.createElement(PrimaryButton, { ...spaceProps }, "Create project");
-export const _DatePicker = () => React.createElement(DatePicker, { ...spaceProps });
-export const _DropdownMenu = () => (React.createElement(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", ...spaceProps },
-    React.createElement(DropdownLink, { href: "/" }, "Dropdown Link"),
-    React.createElement(DropdownButton, { onClick: () => { } }, "Dropdown Button"),
-    React.createElement(DropdownItem, null,
-        React.createElement("a", { href: "/", style: { textDecoration: "none" } }, "Custom Link Component"))));
-export const _FieldLabel = () => (React.createElement(FieldLabel, { labelText: "Default label", helpText: "I am help text. I can give more details on the input below!", requirementText: "(Required)", ...spaceProps },
-    React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })));
-export const _Form = () => (React.createElement(Form, { mt: "x2", p: "x1" },
-    React.createElement(Input, { id: "name", labelText: "Name" }),
-    React.createElement(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }),
-    React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })));
-export const _Link = () => (React.createElement(Link, { as: "button", mt: "x2", p: "x1" }, "Link"));
-export const _List = () => (React.createElement(List, { leftAlign: true, ...spaceProps },
-    React.createElement(ListItem, null, "List Item 1"),
-    React.createElement(ListItem, null, "List Item 2 that is really really really really really really really really really long"),
-    React.createElement(ListItem, { mt: "x1" }, "List Item 3")));
-export const _Pagination = () => React.createElement(Pagination, { currentPage: 3, totalPages: 4, ...spaceProps });
-export const _Radio = () => (React.createElement(React.Fragment, null,
-    React.createElement(Radio, { id: "radio", error: true, labelText: "I am error", ...spaceProps }),
-    React.createElement(Radio, { id: "radio", defaultChecked: true, error: true, labelText: "I am error", ...spaceProps })));
-export const _Select = () => (React.createElement(Select, { defaultValue: 2, placeholder: "Please select inventory status", options: [
+export const _Alert = () => _jsx(Alert, { ...spaceProps, children: "Danger alert" });
+export const _AsyncSelect = () => (_jsx(AsyncSelect, { placeholder: "Filter Countries", className: "Select", classNamePrefix: "SelectTest", labelText: "Country", ...spaceProps }));
+export const _Breadcrumbs = () => (_jsxs(Breadcrumbs, { ...spaceProps, children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/Tenants", children: "Tenants" }), _jsx(Text, { children: "Current Tenant" })] }));
+export const _PrimaryButton = () => _jsx(PrimaryButton, { ...spaceProps, children: "Create project" });
+export const _DatePicker = () => _jsx(DatePicker, { ...spaceProps });
+export const _DropdownMenu = () => (_jsxs(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", ...spaceProps, children: [_jsx(DropdownLink, { href: "/", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" }), _jsx(DropdownItem, { children: _jsx("a", { href: "/", style: { textDecoration: "none" }, children: "Custom Link Component" }) })] }));
+export const _FieldLabel = () => (_jsx(FieldLabel, { labelText: "Default label", helpText: "I am help text. I can give more details on the input below!", requirementText: "(Required)", ...spaceProps, children: _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" }) }));
+export const _Form = () => (_jsxs(Form, { mt: "x2", p: "x1", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }));
+export const _Link = () => (_jsx(Link, { as: "button", mt: "x2", p: "x1", children: "Link" }));
+export const _List = () => (_jsxs(List, { leftAlign: true, ...spaceProps, children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { mt: "x1", children: "List Item 3" })] }));
+export const _Pagination = () => _jsx(Pagination, { currentPage: 3, totalPages: 4, ...spaceProps });
+export const _Radio = () => (_jsxs(_Fragment, { children: [_jsx(Radio, { id: "radio", error: true, labelText: "I am error", ...spaceProps }), _jsx(Radio, { id: "radio", defaultChecked: true, error: true, labelText: "I am error", ...spaceProps })] }));
+export const _Select = () => (_jsx(Select, { defaultValue: 2, placeholder: "Please select inventory status", options: [
         {
             label: "option 1",
             value: 1,
@@ -104,12 +88,8 @@ const rowData = [
         id: "r9",
     },
 ];
-export const _Table = () => React.createElement(Table, { columns: columns, rows: rowData, ...spaceProps });
-export const _Tabs = () => (React.createElement(Tabs, { ...spaceProps },
-    React.createElement(Tab, { className: "Tab1", label: "Tab 1" }, "Tab 1 Content"),
-    React.createElement(Tab, { className: "Tab2", label: "Tab 2" }, "Tab 2 Content"),
-    React.createElement(Tab, { className: "Tab3", label: "Tab 3" }, "Tab 3 Content"),
-    React.createElement(Tab, { className: "Tab4", label: "Tab 4" }, "Tab 4 Content")));
-export const _TimePicker = () => React.createElement(TimePicker, { labelText: "End Time", defaultValue: "12:38 PM", ...spaceProps });
-export const _TruncatedText = () => (React.createElement(TruncatedText, { ...spaceProps }, "Special instructions are provided for the shipment"));
-export const _InlineValidation = () => React.createElement(InlineValidation, { errorMessage: "Something has gone wrong", ...spaceProps });
+export const _Table = () => _jsx(Table, { columns: columns, rows: rowData, ...spaceProps });
+export const _Tabs = () => (_jsxs(Tabs, { ...spaceProps, children: [_jsx(Tab, { className: "Tab1", label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { className: "Tab2", label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { className: "Tab3", label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { className: "Tab4", label: "Tab 4", children: "Tab 4 Content" })] }));
+export const _TimePicker = () => _jsx(TimePicker, { labelText: "End Time", defaultValue: "12:38 PM", ...spaceProps });
+export const _TruncatedText = () => (_jsx(TruncatedText, { ...spaceProps, children: "Special instructions are provided for the shipment" }));
+export const _InlineValidation = () => _jsx(InlineValidation, { errorMessage: "Something has gone wrong", ...spaceProps });

package/dist/src/i18n.js

@@ -2,6 +2,7 @@ import i18n from "i18next";
 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";
@@ -25,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;