@nulogy/components 15.2.1 → 15.2.3

package/dist/src/Layout/Sidebar.story.js

@@ -1,15 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { text } from "@storybook/addon-knobs";
 import React, { useState, useRef } from "react";
 import { ApplicationFrame, Breadcrumbs, Link, Page, Sidebar, Select, PrimaryButton, Box, Textarea, Heading3, Navigation, } from "..";
 import { useUrlProps } from "../utils/testing/useUrlProps";
@@ -20,22 +8,19 @@ export default {
         chromatic: { delay: 300 }, // time for sidebar animation
     },
 };
-const ExampleSidebar = (_a) => {
-    var { isOpen, onClose } = _a, props = __rest(_a, ["isOpen", "onClose"]);
-    return (React.createElement(Sidebar, Object.assign({ isOpen: isOpen, title: "Filters", onClose: onClose, footer: React.createElement(PrimaryButton, null, "Apply") }, props),
-        React.createElement(Select, { options: [{ label: "first option", value: 1 }], labelText: "Delivery:" }),
-        React.createElement(Select, { options: [], labelText: "Delivery:" }),
-        React.createElement(Select, { options: [], labelText: "Delivery:" }),
-        React.createElement(Select, { options: [], labelText: "Delivery:" }),
-        React.createElement(Select, { options: [], labelText: "Delivery:" }),
-        React.createElement(Select, { options: [], labelText: "Delivery:" }),
-        React.createElement(Select, { options: [], labelText: "Delivery:" }),
-        React.createElement(Select, { options: [], labelText: "Delivery:" }),
-        React.createElement(Select, { options: [], labelText: "Delivery:" }),
-        React.createElement(Select, { options: [], labelText: "Delivery:" }),
-        React.createElement(Select, { options: [], labelText: "Delivery:" }),
-        React.createElement(Select, { options: [], labelText: "Last Delivery:" })));
-};
+const ExampleSidebar = ({ isOpen, onClose, ...props }) => (React.createElement(Sidebar, { isOpen: isOpen, title: "Filters", onClose: onClose, footer: React.createElement(PrimaryButton, null, "Apply"), ...props },
+    React.createElement(Select, { options: [{ label: "first option", value: 1 }], labelText: "Delivery:" }),
+    React.createElement(Select, { options: [], labelText: "Delivery:" }),
+    React.createElement(Select, { options: [], labelText: "Delivery:" }),
+    React.createElement(Select, { options: [], labelText: "Delivery:" }),
+    React.createElement(Select, { options: [], labelText: "Delivery:" }),
+    React.createElement(Select, { options: [], labelText: "Delivery:" }),
+    React.createElement(Select, { options: [], labelText: "Delivery:" }),
+    React.createElement(Select, { options: [], labelText: "Delivery:" }),
+    React.createElement(Select, { options: [], labelText: "Delivery:" }),
+    React.createElement(Select, { options: [], labelText: "Delivery:" }),
+    React.createElement(Select, { options: [], labelText: "Delivery:" }),
+    React.createElement(Select, { options: [], labelText: "Last Delivery:" })));
 export const _Sidebar = () => {
     const [isOpen, setIsOpen] = useState(false);
     const triggerRef = useRef(null);
@@ -53,7 +38,7 @@ export const _Sidebar = () => {
             React.createElement(Box, { minWidth: "300px" },
                 React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
                 React.createElement(Box, { height: "3000px", width: "50%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
-            React.createElement(ExampleSidebar, Object.assign({ isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" }, urlProps)))));
+            React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger", ...urlProps }))));
 };
 export const WithoutOverlay = () => {
     const [isOpen, setIsOpen] = useState(false);
@@ -93,7 +78,7 @@ export const OpenByDefault = () => {
                 React.createElement(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
             React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" }))));
 };
-export const WithCustomOffset = () => {
+const WithCustomOffsetComponent = (args) => {
     const [isOpen, setIsOpen] = useState(true);
     const triggerRef = useRef(null);
     const toggleSidebar = () => {
@@ -109,7 +94,15 @@ export const WithCustomOffset = () => {
             React.createElement(Box, { minWidth: "300px" },
                 React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
                 React.createElement(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
-            React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger", offset: text("offset", "400px"), duration: text("duration", "0.5") }))));
+            React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger", ...args }))));
+};
+export const WithCustomOffset = {
+    args: {
+        offset: "400px",
+        duration: 0.5,
+    },
+    name: "With custom offset",
+    render: (args) => React.createElement(WithCustomOffsetComponent, { ...args }),
 };
 export const DontCloseOnOutsideClick = () => {
     const [isOpen, setIsOpen] = useState(false);

package/dist/src/Link/Link.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import styled from "styled-components";
 import { darken } from "polished";
 import { themeGet } from "@styled-system/theme-get";
@@ -17,8 +6,7 @@ import { addStyledProps } from "../StyledProps";
 import { AppTag } from "../AppTag";
 import { InlineFlex } from "../Flex";
 import { Icon } from "../Icon";
-export default function Link(_a) {
-    var { children, forApp, openInNewTab } = _a, props = __rest(_a, ["children", "forApp", "openInNewTab"]);
+export default function Link({ children, forApp, openInNewTab, ...props }) {
     const openInNewTabProps = openInNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {};
     const renderContent = () => {
         if (forApp || openInNewTab) {
@@ -29,7 +17,7 @@ export default function Link(_a) {
         }
         return children;
     };
-    return (React.createElement(Anchor, Object.assign({}, openInNewTabProps, props), renderContent()));
+    return (React.createElement(Anchor, { ...openInNewTabProps, ...props }, renderContent()));
 }
 const LinkWrapper = styled.span(({ underline = true }) => ({
     textDecoration: underline ? "underline" : "none",
@@ -45,10 +33,14 @@ function getColor(props) {
     return getColorFromProps(props) || props.theme.colors.blue;
 }
 const getHoverColor = (props) => (props.hover ? getColor(props) : darken("0.1", getColor(props)));
-const Anchor = styled.a((_a) => {
-    var { underline = true, as } = _a, props = __rest(_a, ["underline", "as"]);
-    return (Object.assign(Object.assign({}, resetButtonStyles), { padding: as === "button" ? "0" : undefined, textDecoration: underline ? "underline" : "none", fontSize: props.theme.fontSizes.base, color: getColor(props), "&:hover": {
-            cursor: "pointer",
-            color: getHoverColor(props),
-        } }));
-}, addStyledProps);
+const Anchor = styled.a(({ underline = true, as, ...props }) => ({
+    ...resetButtonStyles,
+    padding: as === "button" ? "0" : undefined,
+    textDecoration: underline ? "underline" : "none",
+    fontSize: props.theme.fontSizes.base,
+    color: getColor(props),
+    "&:hover": {
+        cursor: "pointer",
+        color: getHoverColor(props),
+    },
+}), addStyledProps);

package/dist/src/List/List.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyledProps } from "../StyledProps";
 interface Props extends React.ComponentPropsWithRef<"ul">, StyledProps {
     className?: string;

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

@@ -1,66 +1,44 @@
+import type { StoryObj } from "@storybook/react";
 import React from "react";
+import { Modal as NDSModal } from "../index";
 declare const _default: {
     title: string;
-};
-export default _default;
-export declare const _Modal: () => React.JSX.Element;
-export declare const WithCloseButton: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithScrollingContent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithScrollingContentWithoutFooterContent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithNoTitle: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithNoFooterContent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomMaxWidth: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithSelect: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithSelectAndScrollingContent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithParentSelector: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const ExampleControlledModal: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    component: React.FC<React.PropsWithChildren<{
+        isOpen?: boolean;
+        title?: string;
+        ariaLabel?: string;
+        onRequestClose?: (...args: any[]) => any;
+        closeAriaLabel?: string;
+        onAfterOpen?: (...args: any[]) => any;
+        shouldFocusAfterRender?: boolean;
+        shouldReturnFocusAfterClose?: boolean;
+        ariaDescribedBy?: string;
+        maxWidth?: string;
+        portalClassName?: string;
+        overlayClassName?: string;
+        className?: string;
+        id?: string;
+        appElement?: JSX.Element;
+        ariaHideApp?: boolean;
+        footerContent?: React.ReactNode;
+        parentSelector?: (...args: any) => HTMLElement;
+    }>> & {
+        setAppElement: (element: string | HTMLElement) => void;
+    };
+    args: {
+        ariaHideApp: false;
     };
 };
+export default _default;
+type Story = StoryObj<typeof NDSModal>;
+export declare const Default: Story;
+export declare const WithCloseButton: Story;
+export declare const WithScrollingContent: Story;
+export declare const WithScrollingContentWithoutFooterContent: Story;
+export declare const WithNoTitle: Story;
+export declare const WithNoFooterContent: Story;
+export declare const WithCustomMaxWidth: Story;
+export declare const WithSelect: Story;
+export declare const WithSelectAndScrollingContent: Story;
+export declare const WithParentSelector: Story;
+export declare const ExampleControlledModal: Story;

package/dist/src/Modal/Modal.story.js

@@ -1,12 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { Modal as NDSModal, Button, QuietButton, PrimaryButton, ButtonGroup, Form, Input, Select, Text, DatePicker, } from "../index";
-const env = process.env.NODE_ENV;
-if (env !== "test")
-    NDSModal.setAppElement("#root");
-const envProps = {
-    ariaHideApp: env === "test" ? false : undefined,
-};
-const Modal = (props) => React.createElement(NDSModal, Object.assign({}, envProps, props));
+if (process.env.NODE_ENV !== "test")
+    NDSModal.setAppElement("#storybook-root");
 const options = [
     { value: "accepted", label: "Accepted" },
     { value: "assigned", label: "Assigned to a line" },
@@ -16,105 +11,135 @@ const options = [
     { value: "progress", label: "In progress" },
     { value: "quarantine", label: "In quarantine" },
 ];
-class ModalExample extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isOpen: false,
-        };
-        this.openModal = this.openModal.bind(this);
-        this.closeModal = this.closeModal.bind(this);
-    }
-    openModal() {
-        this.setState({ isOpen: true });
-    }
-    closeModal() {
-        this.setState({ isOpen: false });
-    }
-    render() {
-        const { isOpen } = this.state;
-        const controlledModalButtons = (React.createElement(ButtonGroup, null,
-            React.createElement(PrimaryButton, { type: "submit", form: "myForm" }, "Add job to line"),
-            React.createElement(QuietButton, { onClick: this.closeModal }, "Cancel")));
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Button, { onClick: this.openModal }, "Open Modal"),
-            React.createElement(Modal, { title: "Edit Profile", footerContent: controlledModalButtons, onRequestClose: this.closeModal, isOpen: isOpen, maxWidth: "456px" },
-                React.createElement(Form, { id: "myForm", mb: "x2" },
-                    React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
-                    React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
-                    React.createElement(DatePicker, { selected: new Date("Fri, 01 Jan 2019"), dateFormat: "MMMM d, yyyy", onChange: (val) => val, onInputChange: (val) => val })))));
-    }
-}
-const modalButtons = (React.createElement(ButtonGroup, null,
+const ModalButtons = (React.createElement(ButtonGroup, null,
     React.createElement(PrimaryButton, null, "Add job to line"),
     React.createElement(QuietButton, null, "Cancel")));
 export default {
     title: "Components/Modal",
+    component: NDSModal,
+    args: {
+        ariaHideApp: process.env.NODE_ENV === "test" ? false : undefined,
+    },
+};
+export const Default = {
+    args: {
+        children: "Content Content Content",
+        title: "Modal Title",
+        footerContent: ModalButtons,
+        onRequestClose: () => { },
+    },
 };
-export const _Modal = () => (React.createElement(Modal, { footerContent: modalButtons, title: "Modal Title" }, "Content Content Content"));
-export const WithCloseButton = () => (React.createElement(Modal, { title: "Modal Title", footerContent: modalButtons, onRequestClose: () => { } }, "Content Content Content"));
-WithCloseButton.story = {
+export const WithCloseButton = {
+    args: {
+        children: "Content Content Content",
+        title: "Modal Title",
+        footerContent: ModalButtons,
+        onRequestClose: () => { },
+    },
     name: "with close button",
 };
-export const WithScrollingContent = () => (React.createElement(Modal, { title: "Modal Title", footerContent: modalButtons },
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content")));
-WithScrollingContent.story = {
+export const WithScrollingContent = {
+    args: {
+        title: "Modal Title",
+        footerContent: ModalButtons,
+        children: (React.createElement(React.Fragment, null,
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"))),
+    },
     name: "with scrolling content",
 };
-export const WithScrollingContentWithoutFooterContent = () => (React.createElement(Modal, { title: "Modal Title" },
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content")));
-WithScrollingContentWithoutFooterContent.story = {
+export const WithScrollingContentWithoutFooterContent = {
+    args: {
+        title: "Modal Title",
+        children: (React.createElement(React.Fragment, null,
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"))),
+    },
     name: "with scrolling content without footer content",
 };
-export const WithNoTitle = () => React.createElement(Modal, { footerContent: modalButtons }, "Content Content Content");
-WithNoTitle.story = {
+export const WithNoTitle = {
+    args: {
+        children: "Content Content Content",
+        footerContent: ModalButtons,
+    },
     name: "with no title",
 };
-export const WithNoFooterContent = () => (React.createElement(Modal, { title: "Without footerContent", onRequestClose: () => { } }, "Content Content Content"));
-WithNoFooterContent.story = {
+export const WithNoFooterContent = {
+    args: {
+        children: "Content Content Content",
+        title: "Without footerContent",
+        onRequestClose: () => { },
+    },
     name: "with no footerContent",
 };
-export const WithCustomMaxWidth = () => (React.createElement(Modal, { title: "Modal Title", footerContent: modalButtons, maxWidth: "1000px" }, "Content Content Content"));
-WithCustomMaxWidth.story = {
+export const WithCustomMaxWidth = {
+    args: {
+        children: "Content Content Content",
+        title: "Modal Title",
+        footerContent: ModalButtons,
+        maxWidth: "1000px",
+    },
     name: "with custom maxWidth",
 };
-export const WithSelect = () => (React.createElement(Modal, { title: "Edit Profile", footerContent: modalButtons, onRequestClose: () => { }, maxWidth: "456px" },
-    React.createElement(Form, { id: "myForm", mb: "x2" },
-        React.createElement(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }))));
-WithSelect.story = {
+export const WithSelect = {
+    args: {
+        title: "Edit Profile",
+        footerContent: ModalButtons,
+        maxWidth: "456px",
+        onRequestClose: () => { },
+        children: (React.createElement(Form, { id: "myForm", mb: "x2" },
+            React.createElement(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }))),
+    },
     name: "with select",
 };
-export const WithSelectAndScrollingContent = () => (React.createElement(Modal, { title: "Edit Profile", footerContent: modalButtons, onRequestClose: () => { }, maxWidth: "456px" },
-    React.createElement(Form, { id: "myForm", mb: "x2" },
-        React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
-        React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
-        React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
-        React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
-        React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
-        React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
-        React.createElement(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }))));
-WithSelectAndScrollingContent.story = {
+export const WithSelectAndScrollingContent = {
+    args: {
+        title: "Edit Profile",
+        footerContent: ModalButtons,
+        maxWidth: "456px",
+        onRequestClose: () => { },
+        children: (React.createElement(Form, { id: "myForm", mb: "x2" },
+            React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
+            React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
+            React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
+            React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
+            React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
+            React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
+            React.createElement(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }))),
+    },
     name: "with select and scrolling content",
 };
-export const WithParentSelector = () => {
-    const id = "wrapper";
-    return (React.createElement("div", { id: id },
-        React.createElement(Modal, { title: "Modal Title", footerContent: modalButtons, parentSelector: () => document.getElementById(id) }, "Content")));
-};
-WithParentSelector.story = {
+export const WithParentSelector = {
+    args: {
+        title: "Modal Title",
+        footerContent: ModalButtons,
+        parentSelector: () => document.getElementById("parent-selector"),
+    },
     name: "with a parent selector",
+    render: (args) => (React.createElement("div", { id: "parent-selector" },
+        React.createElement(NDSModal, { ...args }, "Content"))),
 };
-export const ExampleControlledModal = () => React.createElement(ModalExample, null);
-ExampleControlledModal.story = {
+export const ExampleControlledModal = {
+    render: () => React.createElement(ModalExample, null),
     name: "example controlled modal",
 };
+const ModalExample = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Modal"),
+        React.createElement(NDSModal, { title: "Edit Profile", footerContent: React.createElement(ButtonGroup, null,
+                React.createElement(PrimaryButton, { type: "submit", form: "myForm" }, "Add job to line"),
+                React.createElement(QuietButton, { onClick: () => setIsOpen(false) }, "Cancel")), onRequestClose: () => setIsOpen(false), isOpen: isOpen, maxWidth: "456px" },
+            React.createElement(Form, { id: "myForm", mb: "x2" },
+                React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
+                React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
+                React.createElement(DatePicker, { selected: new Date("Fri, 01 Jan 2019"), dateFormat: "MMMM d, yyyy", onChange: (val) => val, onInputChange: (val) => val })))));
+};

package/dist/src/Modal/ModalCloseButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const ModalCloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: import("react").Ref<HTMLButtonElement>;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {

package/dist/src/Modal/ModalFooter.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const ModalFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export default ModalFooter;

package/dist/src/Modal/ModalHeader.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const ModalHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     hasCloseButton?: boolean;
 }>> & string;

package/dist/src/NDSProvider/ComponentVariantContext.js

@@ -8,5 +8,5 @@ export function useComponentVariant(selectedVariant) {
     if (!context) {
         throw new Error(`useComponentVariant must be used within the NDSProvider`);
     }
-    return selectedVariant !== null && selectedVariant !== void 0 ? selectedVariant : context.variant;
+    return selectedVariant ?? context.variant;
 }

package/dist/src/NDSProvider/GlobalStyles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const GlobalStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     locale?: string;
 }>> & string;

package/dist/src/NDSProvider/ModalStyleOverride.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const ModalStyleOverride: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
     locale?: string;
 }>;

package/dist/src/NDSProvider/Reset.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Reset: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;
 export default Reset;

package/dist/src/NDSProvider/renderWithNDSProvider.spec-utils.d.ts

@@ -1 +1,3 @@
-export declare const renderWithNDSProvider: (component: any, locale?: string) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+import { type ReactNode } from "react";
+import { RenderResult } from "@testing-library/react";
+export declare const renderWithNDSProvider: (component: ReactNode, locale?: string) => RenderResult;

package/dist/src/NDSProvider/renderWithNDSProvider.spec-utils.js

@@ -1,4 +1,6 @@
 import React from "react";
 import { render } from "@testing-library/react";
 import NDSProvider from "./NDSProvider";
-export const renderWithNDSProvider = (component, locale = "en_US") => render(React.createElement(NDSProvider, { locale: locale }, component));
+export const renderWithNDSProvider = (component, locale = "en_US") => {
+    return render(React.createElement(NDSProvider, { locale: locale }, component));
+};

package/dist/src/NavBarSearch/NavBarSearch.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import styled from "styled-components";
 import { darken, transparentize } from "polished";
@@ -17,14 +6,13 @@ import { Flex } from "../Flex";
 import { Input } from "../Input";
 import { Icon } from "../Icon";
 import { subPx } from "../utils";
-const BaseNavBarSearch = (_a) => {
-    var { name = "global-search", onSubmit } = _a, props = __rest(_a, ["name", "onSubmit"]);
+const BaseNavBarSearch = ({ name = "global-search", onSubmit, ...props }) => {
     const handleOnSubmit = (e) => {
         e.preventDefault();
         onSubmit(e);
     };
     const { t } = useTranslation();
-    return (React.createElement("form", Object.assign({}, props, { onSubmit: handleOnSubmit }),
+    return (React.createElement("form", { ...props, onSubmit: handleOnSubmit },
         React.createElement(Flex, { role: "search" },
             React.createElement(Input, { id: "navbar-search", type: "search", "aria-labelledby": name, required: true, placeholder: t("search nulogy") }),
             React.createElement("button", { id: name, "aria-label": name },

package/dist/src/Navigation/Navigation.js

@@ -1,26 +1,13 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { useTheme } from "styled-components";
 import useMediaQuery from "../hooks/useMediaQuery";
 import DesktopNav from "./components/DesktopNav/DesktopNav";
 import MobileNav from "./components/MobileNav/MobileNav";
 import { NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY } from "./components/shared/constants";
-const Navigation = (_a) => {
-    var _b;
-    var { breakpoint = NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY } = _a, props = __rest(_a, ["breakpoint"]);
+const Navigation = ({ breakpoint = NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY, ...props }) => {
     const theme = useTheme();
-    const query = ((_b = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _b === void 0 ? void 0 : _b[breakpoint]) ? breakpoint : `(min-width: ${breakpoint})`;
+    const query = theme?.breakpoints?.[breakpoint] ? breakpoint : `(min-width: ${breakpoint})`;
     const largeScreen = useMediaQuery(query);
-    return React.createElement(React.Fragment, null, largeScreen ? React.createElement(DesktopNav, Object.assign({}, props)) : React.createElement(MobileNav, Object.assign({}, props)));
+    return React.createElement(React.Fragment, null, largeScreen ? React.createElement(DesktopNav, { ...props }) : React.createElement(MobileNav, { ...props }));
 };
 export default Navigation;