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

package/dist/out-tsc/form/index.d.ts

@@ -0,0 +1,15 @@
+export * from "./hooks/useSpsForm";
+export * from "./hooks/formArray";
+export * from "./hooks/formControl";
+export * from "./hooks/formGroup";
+export * from "./hooks/SpsAbstractControl.interface";
+export * from "./hooks/SpsControlSet.interface";
+export * from "./hooks/useForm";
+export * from "./hooks/useServerSideValidation";
+export * from "./validation/SpsValidators";
+export * from "./validation/types";
+export * from "./validation/validate";
+export { SpsForm } from "./SpsForm";
+export * from "./SpsForm.examples";
+export * from "./AddRemoveFormRows.examples";
+export { SpsFormComponentWrapper } from "./SpsFormComponentWrapper";

package/dist/out-tsc/form/index.js

@@ -0,0 +1,16 @@
+export * from "./hooks/useSpsForm";
+export * from "./hooks/formArray";
+export * from "./hooks/formControl";
+export * from "./hooks/formGroup";
+export * from "./hooks/SpsAbstractControl.interface";
+export * from "./hooks/SpsControlSet.interface";
+export * from "./hooks/useForm";
+export * from "./hooks/useServerSideValidation";
+export * from "./validation/SpsValidators";
+export * from "./validation/types";
+export * from "./validation/validate";
+export { SpsForm } from "./SpsForm";
+export * from "./SpsForm.examples";
+export * from "./AddRemoveFormRows.examples";
+export { SpsFormComponentWrapper } from "./SpsFormComponentWrapper";
+//# sourceMappingURL=index.js.map

package/dist/out-tsc/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AAEnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sCAAsC,CAAC;AACrD,cAAc,iCAAiC,CAAC;AAChD,cAAc,iBAAiB,CAAC;AAChC,cAAc,iCAAiC,CAAC;AAEhD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,8BAA8B,CAAC;AAE7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/out-tsc/form/validation/SpsValidators.d.ts

@@ -0,0 +1,16 @@
+import type { SpsValidator, SpsValidatorFactory } from "./types";
+export declare const SpsValidators: Readonly<{
+    min: SpsValidatorFactory<string | number>;
+    max: SpsValidatorFactory<string | number>;
+    required: SpsValidator<any>;
+    minLength: SpsValidatorFactory<string>;
+    maxLength: SpsValidatorFactory<string>;
+    pattern: SpsValidatorFactory<string>;
+    alpha: SpsValidator<string>;
+    numeric: SpsValidator<string>;
+    nonNumeric: SpsValidator<string>;
+    OnBlurErrorKeys: Set<string>;
+    date: SpsValidator<import("@spscommerce/ds-shared").SimpleDate | import("@spscommerce/ds-shared").SimpleDateRange>;
+    dateRange: SpsValidator<import("@spscommerce/ds-shared").SimpleDateRange | import("moment").Duration>;
+    dateConstraint: SpsValidatorFactory<import("@spscommerce/ds-shared").SimpleDate | import("@spscommerce/ds-shared").SimpleDateRange>;
+}>;

package/dist/out-tsc/form/validation/SpsValidators.js

@@ -0,0 +1,84 @@
+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);
+};
+import * as dateValidators from "../../datepicker-v2/validation";
+import { OnBlurErrorKeys, AsTypingErrorKeys, PreventativeErrorKeys } from "./types";
+var min = function minValidatorFactory(minimumValue) {
+    return function minValidator(value) {
+        return Number(value) >= minimumValue
+            ? null
+            : { min: minimumValue };
+    };
+};
+OnBlurErrorKeys.add("min");
+var max = function maxValidatorFactory(maximumValue) {
+    return function (value) { return (Number(value) <= maximumValue
+        ? null
+        : { max: maximumValue }); };
+};
+AsTypingErrorKeys.add("max");
+var required = function requiredValidator(value) {
+    return typeof value === "undefined" || value === null || value === "" || Number.isNaN(value) || (value === null || value === void 0 ? void 0 : value.length) === 0
+        ? { required: true }
+        : null;
+};
+AsTypingErrorKeys.add("required");
+var minLength = function minLengthValidatorFactory(minimumLength) {
+    return function minLengthValidator(value) {
+        return value.length >= minimumLength
+            ? null
+            : { minLength: minimumLength };
+    };
+};
+OnBlurErrorKeys.add("minLength");
+var maxLength = function maxLengthValidatorFactory(maximumLength) {
+    return function maxLengthValidator(value) {
+        return value.length <= maximumLength
+            ? null
+            : { maxLength: maximumLength };
+    };
+};
+PreventativeErrorKeys.add("maxLength");
+var pattern = function patternValidatorFactory(validationPattern) {
+    var regex = validationPattern instanceof RegExp
+        ? validationPattern
+        : new RegExp(validationPattern);
+    return function patternValidator(value) {
+        return regex.test(value)
+            ? null
+            : { pattern: validationPattern };
+    };
+};
+OnBlurErrorKeys.add("pattern");
+var alpha = function alphaValidator(value) {
+    /*
+     * TODO: change regex to /^\p{L}*$/u once IE11 support
+     * is dropped, to match letters in all languages
+     */
+    return /^[A-Za-z]*$/.test(value)
+        ? null
+        : { alpha: true };
+};
+PreventativeErrorKeys.add("alpha");
+var numeric = function numericValidator(value) {
+    return /^[0-9,. ]*$/.test(value)
+        ? null
+        : { numeric: true };
+};
+PreventativeErrorKeys.add("numeric");
+var nonNumeric = function nonNumericValidator(value) {
+    return /^[^0-9]*$/.test(value)
+        ? null
+        : { nonNumeric: true };
+};
+PreventativeErrorKeys.add("nonNumeric");
+export var SpsValidators = Object.freeze(__assign(__assign({}, dateValidators), { min: min, max: max, required: required, minLength: minLength, maxLength: maxLength, pattern: pattern, alpha: alpha, numeric: numeric, nonNumeric: nonNumeric, OnBlurErrorKeys: OnBlurErrorKeys }));
+//# sourceMappingURL=SpsValidators.js.map

package/dist/out-tsc/form/validation/SpsValidators.js.map

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

package/dist/out-tsc/form/validation/types.d.ts

@@ -0,0 +1,7 @@
+export declare type SpsValidationErrors = Record<string, boolean | number | string | Record<string, any>>;
+export declare type SpsValidationStatus = SpsValidationErrors | null;
+export declare type SpsValidator<T> = (value: T) => SpsValidationStatus;
+export declare type SpsValidatorFactory<T> = (...args: any[]) => SpsValidator<T>;
+export declare const OnBlurErrorKeys: Set<string>;
+export declare const AsTypingErrorKeys: Set<string>;
+export declare const PreventativeErrorKeys: Set<string>;

package/dist/out-tsc/form/validation/types.js

@@ -0,0 +1,4 @@
+export var OnBlurErrorKeys = new Set();
+export var AsTypingErrorKeys = new Set();
+export var PreventativeErrorKeys = new Set();
+//# sourceMappingURL=types.js.map

package/dist/out-tsc/form/validation/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/form/validation/types.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,IAAM,eAAe,GAAG,IAAI,GAAG,EAAU,CAAC;AACjD,MAAM,CAAC,IAAM,iBAAiB,GAAG,IAAI,GAAG,EAAU,CAAC;AACnD,MAAM,CAAC,IAAM,qBAAqB,GAAG,IAAI,GAAG,EAAU,CAAC"}

package/dist/out-tsc/form/validation/validate.d.ts

@@ -0,0 +1,2 @@
+import type { SpsValidationErrors, SpsValidator } from "./types";
+export declare function validate<T>(value: T, validators?: Array<SpsValidator<T>>): SpsValidationErrors | null;

package/dist/out-tsc/form/validation/validate.js

@@ -0,0 +1,6 @@
+export function validate(value, validators) {
+    if (validators === void 0) { validators = []; }
+    var reduced = validators.reduce(function (errs, validator) { return Object.assign(errs, validator(value) || {}); }, {});
+    return Object.keys(reduced).length ? reduced : null;
+}
+//# sourceMappingURL=validate.js.map

package/dist/out-tsc/form/validation/validate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.js","sourceRoot":"","sources":["../../../../src/form/validation/validate.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,QAAQ,CACtB,KAAQ,EACR,UAAuC;IAAvC,2BAAA,EAAA,eAAuC;IAEvC,IAAM,OAAO,GAAI,UAAkB,CAAC,MAAM,CACxC,UACE,IAAyB,EACzB,SAA0B,IACF,OAAA,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,EAA3C,CAA2C,EACrE,EAAE,CACH,CAAC;IACF,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;AACtD,CAAC"}

package/dist/out-tsc/growler/SpsGrowler.d.ts

@@ -0,0 +1,17 @@
+import { GrowlerKind } from "@spscommerce/ds-shared";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    imgSrc: PropTypes.Requireable<string>;
+    kind: PropTypes.Requireable<GrowlerKind>;
+    onClose: PropTypes.Requireable<() => void>;
+    persist: PropTypes.Requireable<boolean>;
+    title: PropTypes.Requireable<string>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsGrowlerProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsGrowler(props: SpsGrowlerProps): React.ReactPortal;
+export {};

package/dist/out-tsc/growler/SpsGrowler.examples.d.ts

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

package/dist/out-tsc/growler/SpsGrowler.examples.js

@@ -0,0 +1,122 @@
+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 SpsGrowlerExamples = {
+    writingGuidelines: {
+        label: "Writing Guidelines",
+        customSection: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("p", null, "Use the following guidelines to write an effective Growler message."),
+            React.createElement("ul", null,
+                React.createElement("li", null,
+                    "Write all messages in sentence case.",
+                    React.createElement("ul", null,
+                        React.createElement("li", null, "Capitalize the first word of the message."),
+                        React.createElement("li", null, "Add punctuation, such as a period, at the end of the message."))),
+                React.createElement("li", null, "Keep messages as succinct as possible while also providing sufficient information to the customer."),
+                React.createElement("li", null, "If you can clearly convey your message in a single statement, use only the Primary Message."),
+                React.createElement("li", null, "If the message requires additional details, such as further information or instructions, use both the Primary and Secondary Messages.")),
+            React.createElement("p", null,
+                "For more examples of effective feedback message writing, refer to",
+                " ",
+                React.createElement("a", { href: "https://atlassian.design/content/messaging-guidelines", target: "_blank", rel: "noreferrer" }, "Atlassian's Messaging Guidelines"),
+                "."))); },
+    },
+    error: {
+        label: "Error",
+        description: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("p", null, "Acceptable message: Document ABC123 has not been sent. Check the form and try sending it again."),
+            React.createElement("p", null, "Unacceptable message: Can't send your document.\""))); },
+        examples: {
+            primary: {
+                description: "Primary Message Only",
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerError() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.ERROR}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Document ABC123 has not been sent.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerError() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.ERROR}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Document ABC123 has not been sent.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
+            },
+            primaryAndSecondary: {
+                description: "Primary and Secondary Messages",
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerError() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.ERROR}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Document ABC123 has not been sent.\"\n                                    >\n                                        Check the form and try sending it again.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerError() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.ERROR}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Document ABC123 has not been sent.\"\n                                    >\n                                        Check the form and try sending it again.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    information: {
+        label: "Information",
+        description: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("p", null, "Acceptable message: System maintenance notice. We'll be offline tonight from 9-11pm CST."),
+            React.createElement("p", null, "Unacceptable message: No access tonight."))); },
+        examples: {
+            primary: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerInfo() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.INFO}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"System maintenance tonight from 9-11pm CST.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerInfo() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.INFO}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"System maintenance tonight from 9-11pm CST.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
+            },
+            primaryAndSecondary: {
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerInfo() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.INFO}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"System maintenance notice\"\n                                    >\n                                        We'll be offline tonight from 9-11pm CST.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerInfo() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.INFO}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"System maintenance notice\"\n                                    >\n                                        We'll be offline tonight from 9-11pm CST.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    progress: {
+        label: "Progress",
+        description: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("p", null, "Acceptable message: Export in progress."),
+            React.createElement("p", null, "Unacceptable message: Please wait."))); },
+        examples: {
+            primary: {
+                description: "Primary Message Only",
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerProgress() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.PROGRESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Export in progress.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerProgress() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.PROGRESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Export in progress.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
+            },
+            primaryAndSecondary: {
+                description: "Primary and Secondary Messages",
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerProgress() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.PROGRESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Export in progress\"\n                                    >\n                                        We'll let you know when it's done.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerProgress() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.PROGRESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Export in progress\"\n                                    >\n                                        We'll let you know when it's done.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    success: {
+        label: "Success",
+        description: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("p", null, "Acceptable message: Message sent. Our support team will respond to your message within 24 hours."),
+            React.createElement("p", null, "Unacceptable message: Submitted."))); },
+        examples: {
+            primary: {
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerSuccess() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.SUCCESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Message sent.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerSuccess() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.SUCCESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Message sent.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
+            },
+            primaryAndSecondary: {
+                react: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerSuccess() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.SUCCESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Message sent.\"\n                                    >\n                                        Our support team will respond to your message within 24 hours.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerSuccess() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.SUCCESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Message sent.\"\n                                    >\n                                        Our support team will respond to your message within 24 hours.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    warning: {
+        label: "Warning",
+        description: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("p", null, "Accpetable message: No internet connection detected."),
+            React.createElement("p", null, "Unacceptable message: Warning: There is a problem."))); },
+        examples: {
+            primary: {
+                description: "Primary Message Only",
+                react: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerWarning() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.WARNING}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"No internet connection detected.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerWarning() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.WARNING}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"No internet connection detected.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
+            },
+            primaryAndSecondary: {
+                react: code(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerWarning() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.WARNING}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"No internet connection detected\"\n                                    >\n                                        Check your connection and try again.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerWarning() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.WARNING}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"No internet connection detected\"\n                                    >\n                                        Check your connection and try again.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    hook: {
+        label: "Hooks",
+        description: function () { return (React.createElement("p", null,
+            "If you use the useGrowlers hook, you should ideally invoke it and place",
+            " ",
+            React.createElement("code", null, "growlers()"),
+            " at the top level of your app, and pass down",
+            " ",
+            React.createElement("code", null, "createGrowler"),
+            ".")); },
+        examples: {
+            hook: {
+                react: code(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                    import { SpsButton, useGrowlers } from \"@spscommerce/ds-react\";\n                    import { GrowlerKind } from \"@spscommerce/ds-shared\";\n                    function SpsGrowlerHook() {\n                        const [growlers, createGrowler] = useGrowlers();\n\n                        function handleButtonClick() {\n                            createGrowler({\n                                kind: \"success\",\n                                title: \"Success!\",\n                                content: () => (\n                                    <a href=\"#\" title=\"Content can also be a string.\">\n                                        Look, I can put JSX in here!\n                                    </a>\n                                ),\n                                onClose() {\n                                    console.log(\"Growler closed.\");\n                                },\n                            });\n                        }\n\n                        return (\n                            <>\n                                <SpsButton onClick={handleButtonClick}>Add a growler</SpsButton>\n                                {growlers()}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, useGrowlers } from \"@spscommerce/ds-react\";\n                    import { GrowlerKind } from \"@spscommerce/ds-shared\";\n                    function SpsGrowlerHook() {\n                        const [growlers, createGrowler] = useGrowlers();\n\n                        function handleButtonClick() {\n                            createGrowler({\n                                kind: \"success\",\n                                title: \"Success!\",\n                                content: () => (\n                                    <a href=\"#\" title=\"Content can also be a string.\">\n                                        Look, I can put JSX in here!\n                                    </a>\n                                ),\n                                onClose() {\n                                    console.log(\"Growler closed.\");\n                                },\n                            });\n                        }\n\n                        return (\n                            <>\n                                <SpsButton onClick={handleButtonClick}>Add a growler</SpsButton>\n                                {growlers()}\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;
+//# sourceMappingURL=SpsGrowler.examples.js.map

package/dist/out-tsc/growler/SpsGrowler.examples.js.map

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

package/dist/out-tsc/growler/SpsGrowler.js

@@ -0,0 +1,147 @@
+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;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+import { GROWLER_FADEOUT_DURATION_MS, GROWLER_VISIBLE_DURATION_MS, GrowlerIcon, GrowlerKind, } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { I18nContext } from "../i18n";
+import { usePortal } from "../utils/usePortal";
+var propsDoc = {
+    imgSrc: "string",
+    kind: "GrowlerKind",
+    onClose: "() => void",
+    persist: "boolean",
+    title: "string",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { imgSrc: PropTypes.string, kind: PropTypes.enumValue(GrowlerKind), onClose: PropTypes.fun(), persist: PropTypes.bool, title: PropTypes.string });
+export function SpsGrowler(props) {
+    var children = props.children, className = props.className, imgSrc = props.imgSrc, _a = props.kind, kind = _a === void 0 ? GrowlerKind.INFO : _a, onClose = props.onClose, persist = props.persist, title = props.title, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "imgSrc", "kind", "onClose", "persist", "title", "unsafelyReplaceClassName"]);
+    var closeCallback = React.useRef(onClose);
+    React.useEffect(function () {
+        closeCallback.current = onClose;
+    }, [onClose]);
+    var t = React.useContext(I18nContext).t;
+    var _b = __read(React.useState(true), 2), shown = _b[0], setShown = _b[1];
+    var _c = __read(React.useState(false), 2), fade = _c[0], setFade = _c[1];
+    function createTimers() {
+        return [
+            window.setTimeout(function () { return setFade(true); }, GROWLER_VISIBLE_DURATION_MS),
+            window.setTimeout(function () {
+                setShown(false);
+                if (closeCallback.current) {
+                    closeCallback.current();
+                }
+            }, GROWLER_VISIBLE_DURATION_MS + GROWLER_FADEOUT_DURATION_MS),
+        ];
+    }
+    var timers = React.useRef([]);
+    function startTimers() {
+        if (!persist) {
+            timers.current = createTimers();
+        }
+    }
+    function clearTimers() {
+        var e_1, _a;
+        try {
+            for (var _b = __values(timers.current), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var timer = _c.value;
+                window.clearTimeout(timer);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        timers.current = [];
+    }
+    function cancelTimers() {
+        clearTimers();
+        setShown(true);
+        setFade(false);
+    }
+    function close() {
+        cancelTimers();
+        setFade(false);
+        setShown(false);
+        if (onClose) {
+            onClose();
+        }
+    }
+    var iconOrSpinnerClass = kind === GrowlerKind.PROGRESS
+        ? "sps-spinner"
+        : clsx("sps-icon", "sps-icon-" + GrowlerIcon.get(kind));
+    var classes = clsx(unsafelyReplaceClassName || "sps-growler", shown && "show", fade && "fade", "sps-growler--" + kind, className);
+    React.useEffect(function () {
+        startTimers();
+        return function () {
+            clearTimers();
+        };
+    }, []);
+    var portal = usePortal("sps-growler-display-area", ["sps-growler-area", "z-stratum-dialog"]);
+    return portal(React.createElement("div", __assign({ role: "alert", className: classes, onMouseEnter: cancelTimers, onMouseLeave: startTimers }, rest),
+        React.createElement("div", { className: "sps-growler__icon-box" },
+            imgSrc && React.createElement("img", { src: imgSrc, alt: "" }),
+            !imgSrc && React.createElement("i", { className: iconOrSpinnerClass, "aria-hidden": "true" })),
+        React.createElement("div", { className: "sps-growler__message-box" },
+            React.createElement("div", { className: "sps-growler__message-box-text" },
+                title && React.createElement("span", { className: "sps-growler__message-box-title d-block" }, title),
+                React.createElement("div", { className: "sps-growler__message-box-subtitle" }, children)),
+            React.createElement("button", { type: "button", className: "sps-growler__close-button", "aria-hidden": "true", onClick: close },
+                React.createElement("i", { className: "sps-icon sps-icon-x", title: t("design-system:growler.dismiss") })))));
+}
+Object.assign(SpsGrowler, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsGrowler",
+});
+//# sourceMappingURL=SpsGrowler.js.map

package/dist/out-tsc/growler/SpsGrowler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsGrowler.js","sourceRoot":"","sources":["../../../src/growler/SpsGrowler.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EACL,2BAA2B,EAAE,2BAA2B,EAAE,WAAW,EAAE,WAAW,GACnF,MAAM,wBAAwB,CAAC;AAChC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,IAAM,QAAQ,GAAG;IACf,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,YAAY;IACrB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,MAAM,EAAE,SAAS,CAAC,MAAM,EACxB,IAAI,EAAE,SAAS,CAAC,SAAS,CAAc,WAAW,CAAC,EACnD,OAAO,EAAE,SAAS,CAAC,GAAG,EAAc,EACpC,OAAO,EAAE,SAAS,CAAC,IAAI,EACvB,KAAK,EAAE,SAAS,CAAC,MAAM,GACxB,CAAC;AAIF,MAAM,UAAU,UAAU,CAAC,KAAsB;IAE7C,IAAA,QAAQ,GASN,KAAK,SATC,EACR,SAAS,GAQP,KAAK,UARE,EACT,MAAM,GAOJ,KAAK,OAPD,EACN,KAME,KAAK,KANgB,EAAvB,IAAI,mBAAG,WAAW,CAAC,IAAI,KAAA,EACvB,OAAO,GAKL,KAAK,QALA,EACP,OAAO,GAIL,KAAK,QAJA,EACP,KAAK,GAGH,KAAK,MAHF,EACL,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EAVH,sGAUL,CADQ,CACC;IAEV,IAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC5C,KAAK,CAAC,SAAS,CAAC;QACd,aAAa,CAAC,OAAO,GAAG,OAAO,CAAC;IAClC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEN,IAAA,CAAC,GAAK,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAlC,CAAmC;IAEtC,IAAA,KAAA,OAAoB,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAA,EAAvC,KAAK,QAAA,EAAE,QAAQ,QAAwB,CAAC;IACzC,IAAA,KAAA,OAAkB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAtC,IAAI,QAAA,EAAE,OAAO,QAAyB,CAAC;IAE9C,SAAS,YAAY;QACnB,OAAO;YACL,MAAM,CAAC,UAAU,CAAC,cAAM,OAAA,OAAO,CAAC,IAAI,CAAC,EAAb,CAAa,EAAE,2BAA2B,CAAC;YACnE,MAAM,CAAC,UAAU,CAAC;gBAChB,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAChB,IAAI,aAAa,CAAC,OAAO,EAAE;oBACzB,aAAa,CAAC,OAAO,EAAE,CAAC;iBACzB;YACH,CAAC,EAAE,2BAA2B,GAAG,2BAA2B,CAAC;SAC9D,CAAC;IACJ,CAAC;IAED,IAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAW,EAAE,CAAC,CAAC;IAE1C,SAAS,WAAW;QAClB,IAAI,CAAC,OAAO,EAAE;YACZ,MAAM,CAAC,OAAO,GAAG,YAAY,EAAE,CAAC;SACjC;IACH,CAAC;IAED,SAAS,WAAW;;;YAClB,KAAoB,IAAA,KAAA,SAAA,MAAM,CAAC,OAAO,CAAA,gBAAA,4BAAE;gBAA/B,IAAM,KAAK,WAAA;gBACd,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;aAC5B;;;;;;;;;QACD,MAAM,CAAC,OAAO,GAAG,EAAE,CAAC;IACtB,CAAC;IAED,SAAS,YAAY;QACnB,WAAW,EAAE,CAAC;QACd,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,SAAS,KAAK;QACZ,YAAY,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,IAAI,OAAO,EAAE;YACX,OAAO,EAAE,CAAC;SACX;IACH,CAAC;IAED,IAAM,kBAAkB,GAAG,IAAI,KAAK,WAAW,CAAC,QAAQ;QACtD,CAAC,CAAC,aAAa;QACf,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,cAAY,WAAW,CAAC,GAAG,CAAC,IAAI,CAAG,CAAC,CAAC;IAE1D,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,aAAa,EACzC,KAAK,IAAI,MAAM,EACf,IAAI,IAAI,MAAM,EACd,kBAAgB,IAAM,EACtB,SAAS,CACV,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC;QACd,WAAW,EAAE,CAAC;QAEd,OAAO;YACL,WAAW,EAAE,CAAC;QAChB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,MAAM,GAAG,SAAS,CAAC,0BAA0B,EAAE,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE/F,OAAO,MAAM,CACX,sCACE,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,WAAW,IACrB,IAAI;QAER,6BAAK,SAAS,EAAC,uBAAuB;YACnC,MAAM,IAAI,6BAAK,GAAG,EAAE,MAAM,EAAE,GAAG,EAAC,EAAE,GAAG;YACrC,CAAC,MAAM,IAAI,2BAAG,SAAS,EAAE,kBAAkB,iBAAc,MAAM,GAAG,CAC/D;QACN,6BAAK,SAAS,EAAC,0BAA0B;YACvC,6BAAK,SAAS,EAAC,+BAA+B;gBAC3C,KAAK,IAAI,8BAAM,SAAS,EAAC,wCAAwC,IAAE,KAAK,CAAQ;gBACjF,6BAAK,SAAS,EAAC,mCAAmC,IAC/C,QAAQ,CACL,CACF;YACN,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,2BAA2B,iBACzB,MAAM,EAClB,OAAO,EAAE,KAAK;gBAEd,2BAAG,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,CAAC,CAAC,+BAA+B,CAAC,GAAI,CACzE,CACL,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;IACxB,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,YAAY;CAC1B,CAAC,CAAC"}

package/dist/out-tsc/growler/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SpsGrowler";
+export * from "./useGrowlers";
+export * from "./SpsGrowler.examples";

package/dist/out-tsc/growler/index.js

@@ -0,0 +1,4 @@
+export * from "./SpsGrowler";
+export * from "./useGrowlers";
+export * from "./SpsGrowler.examples";
+//# sourceMappingURL=index.js.map

package/dist/out-tsc/growler/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/growler/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC"}

package/dist/out-tsc/growler/useGrowlers.d.ts

@@ -0,0 +1,12 @@
+import { GrowlerKind } from "@spscommerce/ds-shared";
+import type { ReactNodeOrRenderFn } from "../prop-types";
+export interface GrowlerConfig {
+    title?: string;
+    content: ReactNodeOrRenderFn;
+    kind?: GrowlerKind;
+    imgSrc?: string;
+    onClose?: () => void;
+    closed?: boolean;
+    id?: string;
+}
+export declare function useGrowlers(): [() => JSX.Element[], (config: GrowlerConfig) => void];