@spscommerce/ds-react 5.10.5-ie → 5.10.5-ie.2

package/dist/out-tsc/modal/SpsModal.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { SpsModalHeader } from "./SpsModalHeader";
+import { SpsModalOverlay } from "./SpsModalOverlay";
+import { SpsModalBody } from "./SpsModalBody";
+import { SpsModalFooter } from "./SpsModalFooter";
+import { SpsModalAction } from "./SpsModalAction";
+declare const propTypes: {
+    kind: PropTypes.Requireable<string>;
+    id: PropTypes.Requireable<string>;
+    isOpen: PropTypes.Requireable<boolean>;
+    header: PropTypes.Requireable<string | (() => string)>;
+    onClose: PropTypes.Requireable<(...args: any[]) => any>;
+    onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+    size: PropTypes.Requireable<string>;
+    backdrop: PropTypes.Requireable<string>;
+    actionRequired: PropTypes.Requireable<boolean>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsModalProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+declare function SpsModal(modalProps: SpsModalProps): React.ReactPortal;
+export { SpsModal, SpsModalHeader, SpsModalOverlay, SpsModalBody, SpsModalFooter, SpsModalAction, };

package/dist/out-tsc/modal/SpsModal.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare const SpsModalExamples: DSReactExamples;

package/dist/out-tsc/modal/SpsModal.examples.js

@@ -0,0 +1,138 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-one-expression-per-line */
+import * as React from "react";
+import { code } from "@spscommerce/utils";
+export var SpsModalExamples = {
+    generalUsage: {
+        label: "General Usage",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement(React.Fragment, null,
+                React.createElement("h5", { className: "mt-2" }, "Use a Modal:"),
+                React.createElement("ul", null,
+                    React.createElement("li", null, "When the user needs to confirm a basic decision, such as deleting a record."),
+                    React.createElement("li", null, "When important information needs to be displayed to the user before continuing."),
+                    React.createElement("li", null, "When a simple selection, such as a single form input, is required before proceeding.")),
+                React.createElement("h5", null, "Avoid a Modal:"),
+                React.createElement("ul", null,
+                    React.createElement("li", null,
+                        "When a complex form is required. Use a",
+                        " ",
+                        React.createElement(NavigateTo, { to: "Focused Task" }, "Focused Task View"),
+                        " instead."),
+                    React.createElement("li", null,
+                        "When sharing non-critical or tertiary information. Use a",
+                        " ",
+                        React.createElement(NavigateTo, { to: "Growlers" }, "Growler"),
+                        " instead."))));
+        },
+        examples: {
+            noCloseButton: {
+                description: function () { return (React.createElement(React.Fragment, null,
+                    React.createElement("h5", null, "Close Button"),
+                    React.createElement("p", null, "Remove the Close Button in the upper right of the Modal if the user must choose the course of action before proceeding."))); },
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        function secondaryAction() {\n                            console.log(\"Secondary action invoked\");\n                            setShowModal(false);\n                        }\n                    \n                        function primaryAction() {\n                            console.log(\"Primary action invoked\");\n                            setShowModal(false);\n                        }\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                    <SpsModalV2Footer>\n                                        <SpsButton onClick={secondaryAction}>Secondary Action</SpsButton>\n                                        <SpsButton kind={ButtonKind.KEY} onClick={primaryAction}>Primary Action</SpsButton>\n                                    </SpsModalV2Footer>\n                                    </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        function secondaryAction() {\n                            console.log(\"Secondary action invoked\");\n                            setShowModal(false);\n                        }\n                    \n                        function primaryAction() {\n                            console.log(\"Primary action invoked\");\n                            setShowModal(false);\n                        }\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                    <SpsModalV2Footer>\n                                        <SpsButton onClick={secondaryAction}>Secondary Action</SpsButton>\n                                        <SpsButton kind={ButtonKind.KEY} onClick={primaryAction}>Primary Action</SpsButton>\n                                    </SpsModalV2Footer>\n                                    </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    sizing: {
+        label: "Sizing",
+        description: function () { return (React.createElement("p", null, "There are 3 sizes of Modal: Small (4 columns), Medium (6 columns), and Large (8 columns). Use the size that best fits the content that needs to be in the Modal, erring towards the smallest size whenever possible.")); },
+    },
+    default: {
+        label: "Default",
+        description: function () { return (React.createElement("p", null, "Use Default Modals to inform the user of something with a neutral meaning. Use these as the default option for Modals.")); },
+        examples: {
+            small: {
+                description: "Small",
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Small Default Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                    onClose={() => setShowModal(false)}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Small Default Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                    onClose={() => setShowModal(false)}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+            medium: {
+                description: "Medium",
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Medium Default Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.MEDIUM}\n                                    onClose={() => setShowModal(false)}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Medium Default Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.MEDIUM}\n                                    onClose={() => setShowModal(false)}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+            large: {
+                description: "Large",
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Large Default Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.LARGE}\n                                    onClose={() => setShowModal(false)}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Large Default Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.LARGE}\n                                    onClose={() => setShowModal(false)}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    delete: {
+        label: "Delete",
+        description: function () { return (React.createElement("p", null, "Use Delete Modals to have the user confirm they want to continue with a destructive action. Be clear on what will happen if they continue.")); },
+        examples: {
+            small: {
+                description: "Small",
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Small Delete Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.SERIOUS_WARNING}\n                                    title=\"Delete\"\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Small Delete Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.SERIOUS_WARNING}\n                                    title=\"Delete\"\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+            medium: {
+                description: "Medium",
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Medium Delete Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.MEDIUM}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.SERIOUS_WARNING}\n                                    title=\"Delete\"\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Medium Delete Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.MEDIUM}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.SERIOUS_WARNING}\n                                    title=\"Delete\"\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+            large: {
+                description: "Large",
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Large Delete Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.LARGE}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.SERIOUS_WARNING}\n                                    title=\"Delete\"\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Large Delete Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.LARGE}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.SERIOUS_WARNING}\n                                    title=\"Delete\"\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    informational: {
+        label: "Informational",
+        description: function () { return (React.createElement("p", null, "Use Informational Modals to share impactful information with the user, such as telling them when an app will be down for maintenance.")); },
+        examples: {
+            small: {
+                description: "Small",
+                react: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Small Informational Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.INFO}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Small Informational Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.INFO}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+            medium: {
+                description: "Medium",
+                react: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Medium Informational Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.MEDIUM}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.INFO}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Medium Informational Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.MEDIUM}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.INFO}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+            large: {
+                description: "Large",
+                react: code(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Large Informational Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.LARGE}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.INFO}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Large Informational Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.LARGE}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.INFO}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    success: {
+        label: "Success",
+        description: function () { return (React.createElement("p", null, "Use Success Modals to confirm that an action has been completed successfully.")); },
+        examples: {
+            small: {
+                description: "Small",
+                react: code(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Small Success Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.SUCCESS}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Small Success Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.SUCCESS}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+            medium: {
+                description: "Medium",
+                react: code(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Medium Success Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.MEDIUM}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.SUCCESS}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Medium Success Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.MEDIUM}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.SUCCESS}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+            large: {
+                description: "Large",
+                react: code(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Large Success Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.LARGE}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.SUCCESS}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Large Success Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.LARGE}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.SUCCESS}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    warning: {
+        label: "Warning",
+        description: function () { return (React.createElement("p", null, "Use Warning Modals to warn of problems that may occur as a result of taking an action. When writing the message, be clear about what will happen if the user continues on the path.")); },
+        examples: {
+            small: {
+                description: "Small",
+                react: code(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Small Warning Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.WARNING}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Small Warning Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.WARNING}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+            medium: {
+                description: "Medium",
+                react: code(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Medium Warning Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.MEDIUM}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.WARNING}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Medium Warning Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.MEDIUM}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.WARNING}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+            large: {
+                description: "Large",
+                react: code(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Large Warning Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.LARGE}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.WARNING}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Large Warning Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.LARGE}\n                                    onClose={() => setShowModal(false)}\n                                    kind={ModalKind.WARNING}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+//# sourceMappingURL=SpsModal.examples.js.map

package/dist/out-tsc/modal/SpsModal.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsModal.examples.js","sourceRoot":"","sources":["../../../src/modal/SpsModal.examples.tsx"],"names":[],"mappings":";;;;AAAA,qCAAqC;AACrC,sDAAsD;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE1C,MAAM,CAAC,IAAM,gBAAgB,GAAoB;IAC/C,YAAY,EAAE;QACZ,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,UAAC,EAAc;gBAAZ,UAAU,gBAAA;YAAO,OAAA,CAC/B;gBACE,4BAAI,SAAS,EAAC,MAAM,mBAAkB;gBACtC;oBACE,8GAEK;oBACL,kHAGK;oBACL,uHAGK,CACF;gBACL,iDAAuB;gBACvB;oBACE;;wBACqD,GAAG;wBACtD,oBAAC,UAAU,IAAC,EAAE,EAAC,cAAc,wBAA+B;oCACzD;oBACL;;wBACuE,GAAG;wBACxE,oBAAC,UAAU,IAAC,EAAE,EAAC,UAAU,cAAqB;oCAC3C,CACF,CACJ,CACJ;QA5BgC,CA4BhC;QACD,QAAQ,EAAE;YACR,aAAa,EAAE;gBACb,WAAW,EAAE,cAAM,OAAA,CACjB;oBACE,+CAAqB;oBACrB,yJAGI,CACH,CACJ,EARkB,CAQlB;gBACD,KAAK,EAAE,IAAI,swDAAA,msDAgCF,IAAA;aACV;SACF;KACF;IACD,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,cAAM,OAAA,CACjB,sPAII,CACL,EANkB,CAMlB;KACF;IACD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,cAAM,OAAA,CACjB,wJAGI,CACL,EALkB,CAKlB;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,KAAK,EAAE,IAAI,slCAAA,mhCAmBF,IAAA;aACV;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,QAAQ;gBACrB,KAAK,EAAE,IAAI,wlCAAA,qhCAmBF,IAAA;aACV;YACD,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,KAAK,EAAE,IAAI,slCAAA,mhCAmBF,IAAA;aACV;SACF;KACF;IACD,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,cAAM,OAAA,CACjB,4KAGI,CACL,EALkB,CAKlB;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,KAAK,EAAE,IAAI,itCAAA,8oCAqBF,IAAA;aACV;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,QAAQ;gBACrB,KAAK,EAAE,IAAI,mtCAAA,gpCAqBF,IAAA;aACV;YACD,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,KAAK,EAAE,IAAI,itCAAA,8oCAqBF,IAAA;aACV;SACF;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,cAAM,OAAA,CACjB,uKAGI,CACL,EALkB,CAKlB;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,KAAK,EAAE,IAAI,upCAAA,olCAoBF,IAAA;aACV;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,QAAQ;gBACrB,KAAK,EAAE,IAAI,ypCAAA,slCAoBF,IAAA;aACV;YACD,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,KAAK,EAAE,IAAI,ypCAAA,olCAoBF,IAAA;aACV;SACF;KACF;IACD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,cAAM,OAAA,CACjB,+GAAoF,CACrF,EAFkB,CAElB;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,KAAK,EAAE,IAAI,spCAAA,ilCAoBF,IAAA;aACV;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,QAAQ;gBACrB,KAAK,EAAE,IAAI,wpCAAA,mlCAoBF,IAAA;aACV;YACD,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,KAAK,EAAE,IAAI,spCAAA,ilCAoBF,IAAA;aACV;SACF;KACF;IACD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,cAAM,OAAA,CACjB,qNAII,CACL,EANkB,CAMlB;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,KAAK,EAAE,IAAI,spCAAA,ilCAoBF,IAAA;aACV;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,QAAQ;gBACrB,KAAK,EAAE,IAAI,wpCAAA,mlCAoBF,IAAA;aACV;YACD,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,KAAK,EAAE,IAAI,spCAAA,ilCAoBF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/modal/SpsModal.js

@@ -0,0 +1,193 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+// Circular dep will be resolved when we delete the old modal
+/* eslint-disable import/no-cycle */
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import clsx from "clsx";
+import * as PropTypes from "../prop-types";
+import { selectChildren } from "../utils/selectChildren";
+import { SpsModalHeader } from "./SpsModalHeader";
+import { SpsModalOverlay } from "./SpsModalOverlay";
+import { SpsModalBody } from "./SpsModalBody";
+import { SpsModalFooter } from "./SpsModalFooter";
+import { SpsModalAction } from "./SpsModalAction";
+var propsDoc = {
+    kind: "string",
+    isOpen: "boolean",
+    header: "string | () => string",
+    size: "string",
+    backdrop: "string",
+    actionRequired: "boolean",
+    onOpen: "Function",
+    onClose: "Function",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { kind: PropTypes.string, id: PropTypes.string, isOpen: PropTypes.bool, header: PropTypes.oneOfType([
+        PropTypes.string, PropTypes.fun(),
+    ]), onClose: PropTypes.func, onOpen: PropTypes.func, size: PropTypes.string, backdrop: PropTypes.string, actionRequired: PropTypes.bool });
+function SpsModal(modalProps) {
+    var lastFocusable;
+    var isOpen = modalProps.isOpen;
+    // States
+    var _a = __read(React.useState(false), 2), visible = _a[0], setVisible = _a[1];
+    var _b = __read(React.useState(false), 2), isAsyncOn = _b[0], setIsAsyncOn = _b[1];
+    // Refs
+    var element = React.useRef();
+    // Effects
+    React.useEffect(function () { return document.body.classList.remove("modal-open"); }, []);
+    React.useEffect(function () {
+        if (!visible) {
+            document.body.classList.remove("modal-open");
+        }
+    }, [visible]);
+    var closeable = function () {
+        if (!modalProps.actionRequired && !isAsyncOn) {
+            /*
+             * sigh, this component is such a piece of trash
+             * will be resolved by deleting this entire file
+             */
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            return close;
+        }
+        return function () { };
+    };
+    var onKeyDown = function (e) {
+        switch (e.key) {
+            case "Escape":
+                closeable()();
+                break;
+            case "Tab":
+                if (e.target === lastFocusable) {
+                    e.preventDefault();
+                }
+                break;
+            default:
+        }
+    };
+    var open = function () {
+        document.addEventListener("keydown", onKeyDown);
+        document.body.classList.add("modal-open");
+        setVisible(true);
+        if (typeof modalProps.onOpen === "function") {
+            modalProps.onOpen();
+        }
+    };
+    function close() {
+        document.removeEventListener("keydown", onKeyDown);
+        document.body.classList.remove("modal-open");
+        setVisible(false);
+        if (typeof modalProps.onClose === "function") {
+            modalProps.onClose();
+        }
+    }
+    React.useEffect(function () {
+        if (isOpen) {
+            open();
+        }
+        else if (!isOpen) {
+            close();
+        }
+    }, [isOpen]);
+    var turnOnAsyncMode = function () {
+        setIsAsyncOn(true);
+    };
+    var turnOffAsyncMode = function () {
+        setIsAsyncOn(false);
+    };
+    var renderModalTemplate = function () {
+        var handleAsync = {
+            turnAsyncOn: turnOnAsyncMode,
+            turnAsyncOff: turnOffAsyncMode,
+            isAsyncOn: isAsyncOn,
+        };
+        var modalTypes = {
+            default: "sps-modal-legacy--default",
+            success: "sps-modal-legacy--success",
+            delete: "sps-modal-legacy--delete",
+            key: "sps-modal-legacy--key",
+            info: "sps-modal-legacy--info",
+            warning: "sps-modal-legacy--warning",
+        };
+        var modalSizes = {
+            small: "sps-modal-legacy__dialog--small",
+            large: "sps-modal-legacy__dialog--large",
+        };
+        var show = {
+            display: "block",
+            pointerEvents: "none",
+            paddingRight: "17px",
+        };
+        var hide = {
+            display: "none",
+        };
+        var id = modalProps.id, size = modalProps.size, backdrop = modalProps.backdrop, onClose = modalProps.onClose, onOpen = modalProps.onOpen, header = modalProps.header, kind = modalProps.kind, children = modalProps.children, className = modalProps.className, actionRequired = modalProps.actionRequired, testId = modalProps["data-testid"], rest = __rest(modalProps, ["id", "size", "backdrop", "onClose", "onOpen", "header", "kind", "children", "className", "actionRequired", "data-testid"]);
+        if (!kind) {
+            throw new Error("SpsModal: kind is a required field");
+        }
+        if (!id) {
+            throw new Error("SpsModal: id is a required field");
+        }
+        var modalClass = clsx("sps-modal-legacy", className, modalTypes[kind]);
+        var modalDialogClass = clsx("sps-modal-legacy__dialog", modalSizes[size]);
+        var _a = __read(selectChildren(children, [
+            [
+                { type: SpsModalAction }, { type: SpsModalFooter },
+            ],
+        ]), 2), actionsAndFooter = _a[0], otherChildren = _a[1];
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", __assign({ className: modalClass }, rest, { style: visible ? show : hide, role: "dialog", "data-testid": "" + testId, onKeyDown: onKeyDown, ref: element }),
+                React.createElement("div", { className: modalDialogClass, role: "document" },
+                    React.createElement("div", { className: "sps-modal-legacy__content" },
+                        header ? React.createElement(SpsModalHeader, { header: header }) : null,
+                        otherChildren,
+                        React.Children.map(actionsAndFooter, function (child) { return React.cloneElement(child, {
+                            closeModal: close,
+                            handleAsync: handleAsync,
+                        }); })))),
+            React.createElement(SpsModalOverlay, { id: "modal_overlay_" + id, backdrop: backdrop, onOverlayClick: closeable(), "data-testid": testId + "__overlay" })));
+    };
+    return ReactDOM.createPortal(React.createElement(React.Fragment, null, visible ? renderModalTemplate() : null), document.body);
+}
+Object.assign(SpsModal, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsModal",
+});
+export { SpsModal, SpsModalHeader, SpsModalOverlay, SpsModalBody, SpsModalFooter, SpsModalAction, };
+//# sourceMappingURL=SpsModal.js.map

package/dist/out-tsc/modal/SpsModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsModal.js","sourceRoot":"","sources":["../../../src/modal/SpsModal.tsx"],"names":[],"mappings":"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"}

package/dist/out-tsc/modal/SpsModalAction.d.ts

@@ -0,0 +1,18 @@
+import { ButtonKind } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    kind: PropTypes.Requireable<ButtonKind>;
+    closeModal: PropTypes.Requireable<() => void>;
+    handleAsync: PropTypes.Requireable<PropTypes.InferProps<{
+        turnAsyncOn: PropTypes.Requireable<(...args: any[]) => any>;
+        turnAsyncOff: PropTypes.Requireable<(...args: any[]) => any>;
+        isAsyncOn: PropTypes.Requireable<boolean>;
+    }>>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsModalActionProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsModalAction(props: SpsModalActionProps): JSX.Element;
+export {};

package/dist/out-tsc/modal/SpsModalAction.js

@@ -0,0 +1,73 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import * as React from "react";
+import { ButtonKind } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+import { SpsButton } from "../button/SpsButton";
+var propsDoc = {
+    kind: "ButtonKind",
+    closeModal: "() => void",
+    handleAsync: "{ turnAsyncOn: () => void, turnAsyncOff: () => void, isAsyncOn: boolean }",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { kind: PropTypes.enumValue(ButtonKind), closeModal: PropTypes.fun(), handleAsync: PropTypes.shape({
+        turnAsyncOn: PropTypes.func,
+        turnAsyncOff: PropTypes.func,
+        isAsyncOn: PropTypes.bool,
+    }) });
+export function SpsModalAction(props) {
+    var children = props.children, onClick = props.onClick, kind = props.kind, closeModal = props.closeModal, handleAsync = props.handleAsync;
+    var _a = __read(React.useState(false), 2), asyncButton = _a[0], setAsyncButton = _a[1];
+    var onClickFunc = closeModal;
+    if (onClick && typeof onClick === "function") {
+        onClickFunc = function () {
+            var result = onClick(null);
+            if (result !== undefined) {
+                if (result && typeof result.then === "function") {
+                    setAsyncButton(true);
+                    handleAsync.turnAsyncOn();
+                    result.then(function (shouldModalClose) {
+                        if (shouldModalClose !== false) {
+                            closeModal();
+                        }
+                        handleAsync.turnAsyncOff();
+                    });
+                }
+            }
+            else {
+                closeModal();
+            }
+        };
+    }
+    return (React.createElement(SpsButton, { kind: kind, onClick: onClickFunc, disabled: asyncButton ? false : handleAsync.isAsyncOn, spinning: asyncButton ? handleAsync.isAsyncOn : false }, children));
+}
+Object.assign(SpsModalAction, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsModalAction",
+});
+//# sourceMappingURL=SpsModalAction.js.map

package/dist/out-tsc/modal/SpsModalAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsModalAction.js","sourceRoot":"","sources":["../../../src/modal/SpsModalAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,IAAM,QAAQ,GAAG;IACf,IAAI,EAAE,YAAY;IAClB,UAAU,EAAE,YAAY;IACxB,WAAW,EAAE,2EAA2E;CACzF,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,IAAI,EAAE,SAAS,CAAC,SAAS,CAAa,UAAU,CAAC,EACjD,UAAU,EAAE,SAAS,CAAC,GAAG,EAAc,EACvC,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC;QAC3B,WAAW,EAAE,SAAS,CAAC,IAAI;QAC3B,YAAY,EAAE,SAAS,CAAC,IAAI;QAC5B,SAAS,EAAE,SAAS,CAAC,IAAI;KAC1B,CAAC,GACH,CAAC;AAIF,MAAM,UAAU,cAAc,CAAC,KAA0B;IAErD,IAAA,QAAQ,GAKN,KAAK,SALC,EACR,OAAO,GAIL,KAAK,QAJA,EACP,IAAI,GAGF,KAAK,KAHH,EACJ,UAAU,GAER,KAAK,WAFG,EACV,WAAW,GACT,KAAK,YADI,CACH;IAEJ,IAAA,KAAA,OAAgC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAApD,WAAW,QAAA,EAAE,cAAc,QAAyB,CAAC;IAC5D,IAAI,WAAW,GAAG,UAAU,CAAC;IAC7B,IAAI,OAAO,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;QAC5C,WAAW,GAAG;YACZ,IAAM,MAAM,GAAQ,OAAO,CAAC,IAAI,CAAC,CAAC;YAClC,IAAI,MAAM,KAAK,SAAS,EAAE;gBACxB,IAAI,MAAM,IAAI,OAAO,MAAM,CAAC,IAAI,KAAK,UAAU,EAAE;oBAC/C,cAAc,CAAC,IAAI,CAAC,CAAC;oBACrB,WAAW,CAAC,WAAW,EAAE,CAAC;oBAC1B,MAAM,CAAC,IAAI,CAAC,UAAC,gBAA0B;wBACrC,IAAI,gBAAgB,KAAK,KAAK,EAAE;4BAC9B,UAAU,EAAE,CAAC;yBACd;wBACD,WAAW,CAAC,YAAY,EAAE,CAAC;oBAC7B,CAAC,CAAC,CAAC;iBACJ;aACF;iBAAM;gBACL,UAAU,EAAE,CAAC;aACd;QACH,CAAC,CAAC;KACH;IACD,OAAO,CACL,oBAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,EACrD,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,IAEpD,QAAQ,CACC,CACb,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IAC5B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,gBAAgB;CAC9B,CAAC,CAAC"}

package/dist/out-tsc/modal/SpsModalBody.d.ts

@@ -0,0 +1,10 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsModalBodyProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsModalBody(props: SpsModalBodyProps): JSX.Element;
+export {};

package/dist/out-tsc/modal/SpsModalBody.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 * as React from "react";
+import clsx from "clsx";
+import * as PropTypes from "../prop-types";
+import { PortalContext } from "../utils/usePortal";
+var propsDoc = {};
+var propTypes = __assign({}, PropTypes.spsGlobalPropTypes);
+export function SpsModalBody(props) {
+    var children = props.children, className = props.className, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "unsafelyReplaceClassName"]);
+    var ref = React.useRef();
+    var bodyClass = unsafelyReplaceClassName || clsx("sps-modal-legacy__body", className);
+    return (React.createElement("div", __assign({ className: bodyClass }, rest, { ref: ref }),
+        React.createElement(PortalContext.Provider, { value: { parentElementRef: ref, fixed: true } }, children)));
+}
+Object.assign(SpsModalBody, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsModalBody",
+});
+//# sourceMappingURL=SpsModalBody.js.map

package/dist/out-tsc/modal/SpsModalBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsModalBody.js","sourceRoot":"","sources":["../../../src/modal/SpsModalBody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,IAAM,QAAQ,GAAG,EAAE,CAAC;AAEpB,IAAM,SAAS,gBACV,SAAS,CAAC,kBAAkB,CAChC,CAAC;AAIF,MAAM,UAAU,YAAY,CAAC,KAAwB;IAEjD,IAAA,QAAQ,GAIN,KAAK,SAJC,EACR,SAAS,GAGP,KAAK,UAHE,EACT,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EALH,qDAKL,CADQ,CACC;IAEV,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;IAE3B,IAAM,SAAS,GAAG,wBAAwB,IAAI,IAAI,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAC;IACxF,OAAO,CACL,sCAAK,SAAS,EAAE,SAAS,IAAM,IAAI,IAAE,GAAG,EAAE,GAAG;QAC3C,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,gBAAgB,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,IAClE,QAAQ,CACc,CACrB,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;IAC1B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,cAAc;CAC5B,CAAC,CAAC"}