@spscommerce/ds-react 5.20.0 → 5.20.3-ie

package/dist/out-tsc/_template/SpsComponent.d.ts

@@ -0,0 +1,15 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    someProp: PropTypes.Requireable<boolean>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+/**
+ * replace HTMLDivElement with appropriate specific type
+ * e.g. HTMLButtonElement, or generic HTMLElement as applicable
+ */
+export declare type SpsComponentProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsComponent({ children, className, someProp, ...rest }: SpsComponentProps): JSX.Element;
+export {};

package/dist/out-tsc/_template/SpsComponent.examples.d.ts

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

package/dist/out-tsc/_template/SpsComponent.examples.js

@@ -0,0 +1,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var SpsComponentExamples = {
+    basic: {
+        label: "Basic",
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function Component() {\n                        return <>\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        return <>\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1;
+//# sourceMappingURL=SpsComponent.examples.js.map

package/dist/out-tsc/_template/SpsComponent.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsComponent.examples.js","sourceRoot":"","sources":["../../../src/_template/SpsComponent.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,oBAAoB,GAAoB;IACnD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,2NAAA,wJAKF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/_template/SpsComponent.js

@@ -0,0 +1,44 @@
+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 clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { I18nContext } from "../i18n";
+var propsDoc = {
+    someProp: "boolean",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { someProp: PropTypes.bool });
+var CSS_BLOCK = "sps-component";
+export function SpsComponent(_a) {
+    var children = _a.children, className = _a.className, someProp = _a.someProp, rest = __rest(_a, ["children", "className", "someProp"]);
+    // Remove if component has no built-in, non-configurable text
+    var t = React.useContext(I18nContext).t;
+    var classes = clsx(CSS_BLOCK, someProp && CSS_BLOCK + "--variant", className);
+    return (React.createElement("div", __assign({ "aria-label": t("design-system:translation.path"), className: classes }, rest), children));
+}
+Object.assign(SpsComponent, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsComponent",
+});
+//# sourceMappingURL=SpsComponent.js.map

package/dist/out-tsc/_template/SpsComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsComponent.js","sourceRoot":"","sources":["../../../src/_template/SpsComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,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;AAEtC,IAAM,QAAQ,GAAG;IACf,QAAQ,EAAE,SAAS;CACpB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,QAAQ,EAAE,SAAS,CAAC,IAAI,GACzB,CAAC;AAQF,IAAM,SAAS,GAAG,eAAe,CAAC;AAElC,MAAM,UAAU,YAAY,CAAC,EAKT;IAJlB,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACL,IAAI,cAJoB,qCAK5B,CADQ;IAEP,6DAA6D;IACrD,IAAA,CAAC,GAAK,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAlC,CAAmC;IAE5C,IAAM,OAAO,GAAG,IAAI,CAClB,SAAS,EACT,QAAQ,IAAO,SAAS,cAAW,EACnC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oDAAiB,CAAC,CAAC,gCAAgC,CAAC,EAAE,SAAS,EAAE,OAAO,IAAM,IAAI,GAC/E,QAAQ,CACL,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"}

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

@@ -0,0 +1,2 @@
+export * from "./SpsComponent";
+export * from "./SpsComponent.examples";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/_template/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC"}

package/dist/out-tsc/advanced-search/SpsAdvancedSearch.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import type { SpsFormArrayMeta, SpsFormGroupMeta } from "../form/hooks/useSpsForm";
+import type { SpsFormArray } from "../form/hooks/formArray";
+import type { SpsFormGroup } from "../form/hooks/formGroup";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    controlsDisabled: PropTypes.Requireable<boolean>;
+    footerLinks: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
+    formArray: PropTypes.Requireable<SpsFormArray<any>>;
+    formGroup: PropTypes.Requireable<SpsFormGroup>;
+    formMeta: PropTypes.Requireable<SpsFormArrayMeta<any> | SpsFormGroupMeta<any>>;
+    isOpen: PropTypes.Requireable<boolean>;
+    onClear: PropTypes.Requireable<() => void>;
+    onSubmit: PropTypes.Requireable<React.FormEventHandler<Element>>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsAdvancedSearchProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsAdvancedSearch(props: SpsAdvancedSearchProps): JSX.Element;
+export {};

package/dist/out-tsc/advanced-search/SpsAdvancedSearch.examples.d.ts

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

package/dist/out-tsc/advanced-search/SpsAdvancedSearch.examples.js

@@ -0,0 +1,43 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var SpsAdvancedSearchExamples = {
+    basic: {
+        label: "Basic Usage",
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function Component(props) {\n                        const [toolbarSearchText, setToolbarSearchText] = React.useState(\"\");\n                        const [advSearch, patchAdvSearch] = usePatchReducer({\n                            isOpen: true,\n                            enteredFields: 0,\n                        });\n\n                        const initValue = {\n                            sender: \"\",\n                            receiver: \"\",\n                            doctype: \"\",\n                            status: \"\",\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                        React.useEffect(() => {\n                            // Simulate that someone has entered a search term\n                            updateForm({\n                                ...formValue,\n                                receiver: \"Walmart\"\n                            });\n                            patchAdvSearch({ enteredFields: 1 });\n                        }, []);\n\n                        function handleToolbarSearchChange(event) {\n                            setToolbarSearchText(event.target.value);\n                        }\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            patchAdvSearch({ isOpen });\n                        }\n\n                        function handleAdvancedSearchSubmit() {\n                            patchAdvSearch({ enteredFields: diff(initValue, formValue).length });\n                        }\n\n                        function handleAdvancedSearchClear() {\n                            updateForm(initValue);\n                            patchAdvSearch({ enteredFields: 0 });\n                        }\n\n                        return <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput value={toolbarSearchText}\n                                        onChange={handleToolbarSearchChange}\n                                        disabled={advSearch.isOpen}\n                                        title=\"Search\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON}\n                                        icon={SpsIcon.SEARCH}\n                                        disabled={advSearch.isOpen}\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch}\n                                formMeta={formMeta}\n                                onSubmit={handleAdvancedSearchSubmit}\n                                onClear={handleAdvancedSearchClear}\n                            >\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.sender}\n                                            value={formValue.sender}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.receiver}\n                                            value={formValue.receiver}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.doctype}\n                                            value={formValue.doctype}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.status}\n                                            value={formValue.status}\n                                        />\n                                    </div>\n                                </div>\n                            </SpsAdvancedSearch>\n                        </>;\n                    }\n                "], ["\n                    function Component(props) {\n                        const [toolbarSearchText, setToolbarSearchText] = React.useState(\"\");\n                        const [advSearch, patchAdvSearch] = usePatchReducer({\n                            isOpen: true,\n                            enteredFields: 0,\n                        });\n\n                        const initValue = {\n                            sender: \"\",\n                            receiver: \"\",\n                            doctype: \"\",\n                            status: \"\",\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                        React.useEffect(() => {\n                            // Simulate that someone has entered a search term\n                            updateForm({\n                                ...formValue,\n                                receiver: \"Walmart\"\n                            });\n                            patchAdvSearch({ enteredFields: 1 });\n                        }, []);\n\n                        function handleToolbarSearchChange(event) {\n                            setToolbarSearchText(event.target.value);\n                        }\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            patchAdvSearch({ isOpen });\n                        }\n\n                        function handleAdvancedSearchSubmit() {\n                            patchAdvSearch({ enteredFields: diff(initValue, formValue).length });\n                        }\n\n                        function handleAdvancedSearchClear() {\n                            updateForm(initValue);\n                            patchAdvSearch({ enteredFields: 0 });\n                        }\n\n                        return <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput value={toolbarSearchText}\n                                        onChange={handleToolbarSearchChange}\n                                        disabled={advSearch.isOpen}\n                                        title=\"Search\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON}\n                                        icon={SpsIcon.SEARCH}\n                                        disabled={advSearch.isOpen}\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch}\n                                formMeta={formMeta}\n                                onSubmit={handleAdvancedSearchSubmit}\n                                onClear={handleAdvancedSearchClear}\n                            >\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.sender}\n                                            value={formValue.sender}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.receiver}\n                                            value={formValue.receiver}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.doctype}\n                                            value={formValue.doctype}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.status}\n                                            value={formValue.status}\n                                        />\n                                    </div>\n                                </div>\n                            </SpsAdvancedSearch>\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    b_disabledButtons: {
+        label: "Disabling the Clear/Search Buttons",
+        examples: {
+            disabledButtons: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function Component() {\n                        const [advSearch, setAdvSearch] = React.useState({\n                            isOpen: true,\n                            controlsDisabled: true,\n                        });\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            setAdvSearch({ isOpen });\n                        }\n\n                        return <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <i>quick search goes here</i>\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch}>\n                                <i>insert form here</i>\n                            </SpsAdvancedSearch>\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [advSearch, setAdvSearch] = React.useState({\n                            isOpen: true,\n                            controlsDisabled: true,\n                        });\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            setAdvSearch({ isOpen });\n                        }\n\n                        return <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <i>quick search goes here</i>\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch}>\n                                <i>insert form here</i>\n                            </SpsAdvancedSearch>\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    c_footerLink: {
+        label: "Footer Link",
+        description: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            <p>Some applications have a need to add a link button to the footer\n            as directed by the product design team.</p>\n        "], ["\n            <p>Some applications have a need to add a link button to the footer\n            as directed by the product design team.</p>\n        "]))),
+        examples: {
+            footerLink: {
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function Component(props) {\n                        const [advSearch, setAdvSearch] = React.useState({\n                            isOpen: true\n                        });\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            setAdvSearch({ isOpen });\n                        }\n\n                        return <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <i>quick search goes here</i>\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch}\n                                footerLinks={\n                                    <SpsButton kind={ButtonKind.LINK} icon={SpsIcon.GEAR}>\n                                        Advanced Search Defaults\n                                    </SpsButton>\n                                }\n                            >\n                                <i>insert form here</i>\n                            </SpsAdvancedSearch>\n                        </>;\n                    }\n                "], ["\n                    function Component(props) {\n                        const [advSearch, setAdvSearch] = React.useState({\n                            isOpen: true\n                        });\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            setAdvSearch({ isOpen });\n                        }\n\n                        return <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <i>quick search goes here</i>\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch}\n                                footerLinks={\n                                    <SpsButton kind={ButtonKind.LINK} icon={SpsIcon.GEAR}>\n                                        Advanced Search Defaults\n                                    </SpsButton>\n                                }\n                            >\n                                <i>insert form here</i>\n                            </SpsAdvancedSearch>\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    d_withTitle: {
+        label: "Title Bar With No List Toolbar Search",
+        description: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            <p>If you do not provide a search within the List Toolbar, then it will\n            act as a title bar and the Advanced Search will not be togglable.</p>\n        "], ["\n            <p>If you do not provide a search within the List Toolbar, then it will\n            act as a title bar and the Advanced Search will not be togglable.</p>\n        "]))),
+        examples: {
+            withTitle: {
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    function Component(props) {\n                        const [advSearch, patchAdvSearch] = usePatchReducer({\n                            isOpen: true,\n                        });\n\n                        return <>\n                            <SpsListToolbar title=\"Advanced Search\"\n                                advancedSearch={advSearch}\n                            />\n                            <SpsAdvancedSearch isOpen={advSearch.isOpen}>\n                                <i>insert form here</i>\n                            </SpsAdvancedSearch>\n                        </>;\n                    }\n                "], ["\n                    function Component(props) {\n                        const [advSearch, patchAdvSearch] = usePatchReducer({\n                            isOpen: true,\n                        });\n\n                        return <>\n                            <SpsListToolbar title=\"Advanced Search\"\n                                advancedSearch={advSearch}\n                            />\n                            <SpsAdvancedSearch isOpen={advSearch.isOpen}>\n                                <i>insert form here</i>\n                            </SpsAdvancedSearch>\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+//# sourceMappingURL=SpsAdvancedSearch.examples.js.map

package/dist/out-tsc/advanced-search/SpsAdvancedSearch.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsAdvancedSearch.examples.js","sourceRoot":"","sources":["../../../src/advanced-search/SpsAdvancedSearch.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,yBAAyB,GAAoB;IACxD,KAAK,EAAE;QACL,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,25JAAA,w1JA4FF,IAAA;aACV;SACF;KACF;IACD,iBAAiB,EAAE;QACjB,KAAK,EAAE,oCAAoC;QAC3C,QAAQ,EAAE;YACR,eAAe,EAAE;gBACf,KAAK,EAAE,IAAI,2oCAAA,wkCAwBF,IAAA;aACV;SACF;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,IAAI,yNAAA,sJAGZ,IAAA;QACL,QAAQ,EAAE;YACR,UAAU,EAAE;gBACV,KAAK,EAAE,IAAI,05CAAA,u1CA6BF,IAAA;aACV;SACF;KACF;IACD,WAAW,EAAE;QACX,KAAK,EAAE,uCAAuC;QAC9C,WAAW,EAAE,IAAI,uPAAA,oLAGZ,IAAA;QACL,QAAQ,EAAE;YACR,SAAS,EAAE;gBACT,KAAK,EAAE,IAAI,ktBAAA,+oBAeF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/advanced-search/SpsAdvancedSearch.js

@@ -0,0 +1,58 @@
+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 { ButtonKind, ButtonType } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import { SpsButton } from "../button/SpsButton";
+import { SpsForm, spsFormProps, spsFormPropTypes } from "../form/SpsForm";
+import { I18nContext } from "../i18n";
+import * as PropTypes from "../prop-types";
+import { contentOf } from "../utils/contentOf";
+var propsDoc = __assign(__assign({}, spsFormProps), { controlsDisabled: "boolean", footerLinks: "ReactNodeOrRenderFn", formMeta: "SpsFormArrayMeta<any> | SpsFormGroupMeta<any>", isOpen: "boolean", onClear: "() => void", onSubmit: "React.FormEventHandler" });
+var propTypes = __assign(__assign(__assign({}, PropTypes.spsGlobalPropTypes), spsFormPropTypes), { controlsDisabled: PropTypes.bool, footerLinks: PropTypes.nodeOrRenderFn, formArray: PropTypes.impl(), formGroup: PropTypes.impl(), formMeta: PropTypes.oneOfType([
+        PropTypes.impl(), PropTypes.impl(),
+    ]), isOpen: PropTypes.bool, onClear: PropTypes.fun(), onSubmit: PropTypes.fun() });
+export function SpsAdvancedSearch(props) {
+    var children = props.children, className = props.className, controlsDisabled = props.controlsDisabled, footerLinks = props.footerLinks, formArray = props.formArray, formGroup = props.formGroup, formMeta = props.formMeta, isOpen = props.isOpen, onClear = props.onClear, onSubmit = props.onSubmit, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "controlsDisabled", "footerLinks", "formArray", "formGroup", "formMeta", "isOpen", "onClear", "onSubmit", "unsafelyReplaceClassName"]);
+    var t = React.useContext(I18nContext).t;
+    function handleClear() {
+        if (onClear) {
+            onClear();
+        }
+    }
+    var toolbarClass = clsx(unsafelyReplaceClassName || "sps-advanced-search", isOpen && "sps-advanced-search--open", className);
+    return (React.createElement("div", __assign({ className: toolbarClass }, rest),
+        React.createElement(SpsForm, { onSubmit: onSubmit, formArray: formArray, formGroup: formGroup, formMeta: formMeta },
+            React.createElement("div", { className: "sps-advanced-search__form" }, children),
+            React.createElement("div", { className: "sps-advanced-search__footer" },
+                footerLinks && React.createElement("div", { id: "footer_links" }, contentOf(footerLinks)),
+                React.createElement("div", { className: "sps-advanced-search__footer-controls" },
+                    React.createElement(SpsButton, { kind: ButtonKind.DEFAULT, type: ButtonType.BUTTON, className: "mr-2", onClick: handleClear, disabled: controlsDisabled }, t("design-system:advancedSearch.clear")),
+                    React.createElement(SpsButton, { kind: ButtonKind.KEY, type: ButtonType.SUBMIT, disabled: controlsDisabled }, t("design-system:advancedSearch.search")))))));
+}
+Object.assign(SpsAdvancedSearch, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsAdvancedSearch",
+});
+//# sourceMappingURL=SpsAdvancedSearch.js.map

package/dist/out-tsc/advanced-search/SpsAdvancedSearch.js.map

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

package/dist/out-tsc/advanced-search/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SpsAdvancedSearch";
+export * from "./SpsAdvancedSearch.examples";

package/dist/out-tsc/advanced-search/index.js

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

package/dist/out-tsc/advanced-search/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/advanced-search/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC"}

package/dist/out-tsc/autocomplete/SpsAutocomplete.d.ts

@@ -0,0 +1,29 @@
+import { SpsIcon } from "@spscommerce/ds-shared";
+import type { Eventually } from "@spscommerce/utils";
+import * as React from "react";
+import type { SpsFormControl } from "../form/hooks/formControl";
+import type { SpsFormFieldMeta } from "../form/hooks/useSpsForm";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    debounce: PropTypes.Requireable<number>;
+    disabled: PropTypes.Requireable<boolean>;
+    formControl: PropTypes.Requireable<SpsFormControl<string>>;
+    formMeta: PropTypes.Requireable<SpsFormFieldMeta<string>>;
+    icon: PropTypes.Requireable<SpsIcon>;
+    onChange: PropTypes.Requireable<React.ChangeEventHandler<Element>>;
+    placeholder: PropTypes.Requireable<string>;
+    suggestions: PropTypes.Validator<string[] | Promise<string[]> | ((filter?: string) => Eventually<string[]>)>;
+    tallOptionList: PropTypes.Requireable<boolean>;
+    value: PropTypes.Requireable<string>;
+    zeroState: PropTypes.Requireable<string>;
+    loading: PropTypes.Requireable<boolean>;
+    maxHeightOptionListPx: PropTypes.Requireable<number>;
+    maxHeightOptionListRem: PropTypes.Requireable<number>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsAutocompleteProps = PropTypes.InferTS<typeof propTypes, HTMLInputElement>;
+export declare function SpsAutocomplete({ className, debounce, disabled, formControl, formMeta, onChange, icon, id, placeholder, suggestions, unsafelyReplaceClassName, tallOptionList, value, zeroState, loading, maxHeightOptionListPx, maxHeightOptionListRem, "data-testid": testId, ...rest }: SpsAutocompleteProps): JSX.Element;
+export {};

package/dist/out-tsc/autocomplete/SpsAutocomplete.examples.d.ts

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

package/dist/out-tsc/autocomplete/SpsAutocomplete.examples.js

@@ -0,0 +1,37 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var SpsAutocompleteExamples = {
+    basic: {
+        label: "Basic",
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const [color, setColor] = React.useState();\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        function handleChange(event) {\n                            setColor(event.target.value);\n                        }\n\n                        return (\n                            <SpsAutocomplete suggestions={colors}\n                                value={color}\n                                onChange={handleChange}\n                                placeholder=\"Enter a color\"\n                            />\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const [color, setColor] = React.useState();\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        function handleChange(event) {\n                            setColor(event.target.value);\n                        }\n\n                        return (\n                            <SpsAutocomplete suggestions={colors}\n                                value={color}\n                                onChange={handleChange}\n                                placeholder=\"Enter a color\"\n                            />\n                        );\n                    }\n                "]))),
+            },
+            disabled: {
+                jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    <SpsAutocomplete suggestions={[\"red\", \"blue\", \"green\"]} value=\"yellow\" disabled id=\"disabledAutocomplete\"/>\n                "], ["\n                    <SpsAutocomplete suggestions={[\"red\", \"blue\", \"green\"]} value=\"yellow\" disabled id=\"disabledAutocomplete\"/>\n                "]))),
+            },
+            form: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({ color: colors[0] });\n\n                        return (\n                            <SpsForm formMeta={formMeta}>\n                                <div className=\"sps-row\">\n                                    <div className=\"col-4\">\n                                        <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n                                        <SpsAutocomplete id=\"formHookAutocomplete\" suggestions={colors}\n                                            formMeta={formMeta.fields.color}\n                                            value={formValue.color}\n                                        />\n                                    </div>\n                                    <div className=\"col-8\">\n                                        <br/>\n                                        <p>Color: {formValue.color}</p>\n                                    </div>\n                                </div>\n                            </SpsForm>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({ color: colors[0] });\n\n                        return (\n                            <SpsForm formMeta={formMeta}>\n                                <div className=\"sps-row\">\n                                    <div className=\"col-4\">\n                                        <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n                                        <SpsAutocomplete id=\"formHookAutocomplete\" suggestions={colors}\n                                            formMeta={formMeta.fields.color}\n                                            value={formValue.color}\n                                        />\n                                    </div>\n                                    <div className=\"col-8\">\n                                        <br/>\n                                        <p>Color: {formValue.color}</p>\n                                    </div>\n                                </div>\n                            </SpsForm>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    b_async: {
+        label: "Async Autocomplete",
+        examples: {
+            func: {
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const [color, setColor] = React.useState();\n                        function colorSearch(search) {\n                            return [\"red\", \"blue\", \"green\"];\n                        }\n\n                        function handleChange(event) {\n                            setColor(event.target.value);\n                        }\n\n                        return (\n                            <SpsAutocomplete suggestions={colorSearch} value={color} onChange={handleChange} placeholder=\"Enter a color\"/>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const [color, setColor] = React.useState();\n                        function colorSearch(search) {\n                            return [\"red\", \"blue\", \"green\"];\n                        }\n\n                        function handleChange(event) {\n                            setColor(event.target.value);\n                        }\n\n                        return (\n                            <SpsAutocomplete suggestions={colorSearch} value={color} onChange={handleChange} placeholder=\"Enter a color\"/>\n                        );\n                    }\n                "]))),
+            },
+            debounce: {
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const [color, setColor] = React.useState();\n                        function colorSearch(search) {\n                            return [\"red\", \"blue\", \"green\"];\n                        }\n\n                        function handleChange(event) {\n                            setColor(event.target.value);\n                        }\n\n                        return (\n                            <SpsAutocomplete suggestions={colorSearch} debounce={1000} value={color} onChange={handleChange} placeholder=\"Enter a color\"/>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const [color, setColor] = React.useState();\n                        function colorSearch(search) {\n                            return [\"red\", \"blue\", \"green\"];\n                        }\n\n                        function handleChange(event) {\n                            setColor(event.target.value);\n                        }\n\n                        return (\n                            <SpsAutocomplete suggestions={colorSearch} debounce={1000} value={color} onChange={handleChange} placeholder=\"Enter a color\"/>\n                        );\n                    }\n                "]))),
+            },
+            promise: {
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const [color, setColor] = React.useState();\n                        function colorSearch(search) {\n                            return new Promise((resolve, reject) => {\n                                resolve([\"red\", \"blue\", \"green\"]);\n                            });\n                        }\n\n                        function handleChange(event) {\n                            setColor(event.target.value);\n                        }\n\n                        return (\n                            <SpsAutocomplete suggestions={colorSearch} value={color} onChange={handleChange} placeholder=\"Enter a color\"/>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const [color, setColor] = React.useState();\n                        function colorSearch(search) {\n                            return new Promise((resolve, reject) => {\n                                resolve([\"red\", \"blue\", \"green\"]);\n                            });\n                        }\n\n                        function handleChange(event) {\n                            setColor(event.target.value);\n                        }\n\n                        return (\n                            <SpsAutocomplete suggestions={colorSearch} value={color} onChange={handleChange} placeholder=\"Enter a color\"/>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+//# sourceMappingURL=SpsAutocomplete.examples.js.map

package/dist/out-tsc/autocomplete/SpsAutocomplete.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsAutocomplete.examples.js","sourceRoot":"","sources":["../../../src/autocomplete/SpsAutocomplete.examples.ts"],"names":[],"mappings":";;;;AACA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE1C,MAAM,CAAC,IAAM,uBAAuB,GAAoB;IACtD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,qwBAAA,ksBAiBF,IAAA;aACV;YACD,QAAQ,EAAE;gBACR,GAAG,EAAE,IAAI,kOAAA,+JAEA,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,KAAK,EAAE,IAAI,81CAAA,2xCAwBF,IAAA;aACV;SACF;KACF;IACD,OAAO,EAAE;QACP,KAAK,EAAE,oBAAoB;QAC3B,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,KAAK,EAAE,IAAI,wtBAAA,qpBAeF,IAAA;aACV;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,wuBAAA,qqBAeF,IAAA;aACV;YACD,OAAO,EAAE;gBACP,KAAK,EAAE,IAAI,s0BAAA,mwBAiBF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/autocomplete/SpsAutocomplete.js

@@ -0,0 +1,141 @@
+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;
+};
+import { SpsIcon } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import { useFormControlId } from "../form/hooks/useFormControlId";
+import { SpsFormComponentWrapper } from "../form/SpsFormComponentWrapper";
+import { SpsOptionList } from "../option-list/SpsOptionList";
+import * as PropTypes from "../prop-types";
+import { FauxChangeEvent, usePatchReducer, useInputPopup, } from "../utils/index";
+var propsDoc = {
+    debounce: "number",
+    disabled: "boolean",
+    formMeta: "SpsFormFieldMeta<string>",
+    icon: "SpsIcon",
+    onChange: "React.ChangeEventHandler",
+    placeholder: "string",
+    suggestions: {
+        type: "\n            Eventually<Iterable<string>>\n            | ((filter?: string) => Eventually<Iterable<string>>)\n        ",
+        required: true,
+    },
+    tallOptionList: "boolean",
+    value: "string",
+    zeroState: "string",
+    loading: "boolean",
+    maxHeightOptionListPx: "number",
+    maxHeightOptionListRem: "number",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { debounce: PropTypes.number, disabled: PropTypes.bool, formControl: PropTypes.impl(), formMeta: PropTypes.impl(), icon: PropTypes.enumValue(SpsIcon), onChange: PropTypes.fun(), placeholder: PropTypes.string, suggestions: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.string),
+        PropTypes.instanceOf(Promise),
+        PropTypes.fun(),
+    ]).isRequired, tallOptionList: PropTypes.bool, value: PropTypes.string, zeroState: PropTypes.string, loading: PropTypes.bool, maxHeightOptionListPx: PropTypes.number, maxHeightOptionListRem: PropTypes.number });
+export function SpsAutocomplete(_a) {
+    var className = _a.className, _b = _a.debounce, debounce = _b === void 0 ? 0 : _b, disabled = _a.disabled, formControl = _a.formControl, formMeta = _a.formMeta, onChange = _a.onChange, icon = _a.icon, id = _a.id, _c = _a.placeholder, placeholder = _c === void 0 ? "" : _c, suggestions = _a.suggestions, unsafelyReplaceClassName = _a.unsafelyReplaceClassName, tallOptionList = _a.tallOptionList, _d = _a.value, value = _d === void 0 ? "" : _d, zeroState = _a.zeroState, loading = _a.loading, maxHeightOptionListPx = _a.maxHeightOptionListPx, maxHeightOptionListRem = _a.maxHeightOptionListRem, testId = _a["data-testid"], rest = __rest(_a, ["className", "debounce", "disabled", "formControl", "formMeta", "onChange", "icon", "id", "placeholder", "suggestions", "unsafelyReplaceClassName", "tallOptionList", "value", "zeroState", "loading", "maxHeightOptionListPx", "maxHeightOptionListRem", "data-testid"]);
+    var meta = formMeta || formControl;
+    var _e = useFormControlId(id, meta), wrapperId = _e.wrapperId, controlId = _e.controlId;
+    var _f = __read(usePatchReducer({
+        keyDown: null,
+        opensUpward: false,
+    }), 2), state = _f[0], patchState = _f[1];
+    var rootRef = React.useRef();
+    var textInput = React.useRef();
+    var optionListRef = React.useRef();
+    var _g = useInputPopup(rootRef, optionListRef), showPopup = _g.showPopup, doShowPopup = _g.doShowPopup, doHidePopup = _g.doHidePopup;
+    function setAndPropagateValue(newValue, event) {
+        if (meta) {
+            meta.setValue(newValue);
+            meta.markAsDirty();
+        }
+        if (onChange) {
+            onChange(event || new FauxChangeEvent({ value: newValue }));
+        }
+    }
+    function clear(event) {
+        textInput.current.value = "";
+        setAndPropagateValue("");
+        event.stopPropagation();
+    }
+    function handleChange(event) {
+        setAndPropagateValue(event.target.value, event);
+    }
+    function handleKeyDown(event) {
+        if (!disabled) {
+            if (["Up",
+                "ArrowUp",
+                "Down",
+                "ArrowDown",
+                "Enter"].indexOf(event.key) > -1) {
+                event.preventDefault();
+                event.persist();
+            }
+            event.stopPropagation();
+            patchState({ keyDown: event });
+        }
+        if (event.key === "Tab") {
+            doHidePopup();
+        }
+    }
+    function handleSelfToggle(olIsOpen) {
+        if (olIsOpen) {
+            doShowPopup();
+        }
+        else {
+            doHidePopup();
+        }
+    }
+    function handlePositionFlip(opensUpward) {
+        patchState({ opensUpward: opensUpward });
+    }
+    var classes = clsx(unsafelyReplaceClassName || "sps-autocomplete", showPopup && "sps-autocomplete--open", showPopup && "z-stratum-dropdown", state.opensUpward && "sps-autocomplete--opens-upward", disabled && "sps-form-control--disabled", className);
+    return (React.createElement(SpsFormComponentWrapper, { id: wrapperId, className: classes, formControl: formControl, formMeta: formMeta, inputRef: textInput, ref: rootRef, focusInputOnClick: true, onClick: function (event) { return event.nativeEvent.stopImmediatePropagation(); }, "data-testId": "" + testId },
+        React.createElement("div", { className: "sps-text-input" },
+            React.createElement("div", { className: "sps-form-control" },
+                icon && React.createElement("i", { className: clsx("sps-text-input__icon", "sps-icon", "sps-icon-" + icon) }),
+                React.createElement("input", __assign({ type: "text", ref: textInput, value: value, className: "sps-text-input__input", placeholder: placeholder, onFocus: doShowPopup, onClick: doShowPopup, onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, id: controlId, "data-testid": testId + "__input" }, rest)),
+                value && !disabled && (React.createElement("i", { "aria-label": "clear", className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn", onClick: function (event) { return clear(event); } })))),
+        React.createElement(SpsOptionList, { id: wrapperId + "_options", ref: optionListRef, attachTo: rootRef, isOpen: showPopup, options: suggestions, hideInlineSearch: true, keyDown: state.keyDown, onOptionSelected: setAndPropagateValue, onPositionFlip: handlePositionFlip, onSelfToggle: handleSelfToggle, offsets: [1, 0], search: value, searchDebounce: debounce, tall: tallOptionList, zeroState: zeroState, loading: loading, maxHeightPx: maxHeightOptionListPx, maxHeightRem: maxHeightOptionListRem })));
+}
+Object.assign(SpsAutocomplete, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsAutocomplete",
+});
+//# sourceMappingURL=SpsAutocomplete.js.map

package/dist/out-tsc/autocomplete/SpsAutocomplete.js.map

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

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

@@ -0,0 +1,2 @@
+export * from "./SpsAutocomplete";
+export * from "./SpsAutocomplete.examples";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/autocomplete/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC"}

package/dist/out-tsc/button/SpsButton.d.ts

@@ -0,0 +1,18 @@
+import { ButtonKind, ButtonType, SpsIcon } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    disabled: PropTypes.Requireable<boolean>;
+    href: PropTypes.Requireable<string>;
+    icon: PropTypes.Requireable<SpsIcon>;
+    kind: PropTypes.Requireable<ButtonKind>;
+    spinning: PropTypes.Requireable<boolean>;
+    spinningTitle: PropTypes.Requireable<string>;
+    type: PropTypes.Requireable<ButtonType>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsButtonProps = PropTypes.InferTS<typeof propTypes, HTMLButtonElement | HTMLAnchorElement>;
+export declare function SpsButton(props: SpsButtonProps): JSX.Element;
+export {};

package/dist/out-tsc/button/SpsButton.examples.d.ts

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