@spscommerce/ds-react 5.20.3-ie → 5.20.5

package/lib/tabs-v2/SpsTab.d.ts

@@ -0,0 +1,6 @@
+import type { TabListState } from "@react-stately/tabs";
+import type { Node } from "@react-types/shared";
+export default function SpsTab<T>({ item, state, }: {
+    item: Node<T>;
+    state: TabListState<T>;
+}): JSX.Element;

package/lib/tabs-v2/SpsTabPanel.d.ts

@@ -0,0 +1,5 @@
+import type { TabListState } from "@react-stately/tabs";
+import type { AriaTabPanelProps } from "@react-types/tabs";
+export default function SpsTabPanel<T>({ state, ...props }: {
+    state: TabListState<T>;
+} & AriaTabPanelProps): JSX.Element;

package/lib/tabs-v2/SpsTabsV2.d.ts

@@ -0,0 +1,2 @@
+import type { TabListProps } from "@react-types/tabs";
+export default function SpsTabsV2(props: TabListProps<Record<string, unknown>>): JSX.Element;

package/lib/tabs-v2/index.d.ts

@@ -0,0 +1,4 @@
+import SpsTab from "./SpsTab";
+import SpsTabPanel from "./SpsTabPanel";
+import SpsTabsV2 from "./SpsTabsV2";
+export { SpsTab, SpsTabPanel, SpsTabsV2, };

package/lib/zero-state/SpsMicroZeroState.d.ts

@@ -1,6 +1,7 @@
 import { SpsIcon } from "@spscommerce/ds-shared";
 import * as PropTypes from "../prop-types";
 declare const propTypes: {
+    illustration: PropTypes.Requireable<string>;
     icon: PropTypes.Requireable<SpsIcon>;
     heading: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
     subHeading: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;

package/lib/zero-state/SpsZeroState.d.ts

@@ -1,6 +1,7 @@
 import * as PropTypes from "../prop-types";
 declare const propTypes: {
-    artwork: PropTypes.Validator<string>;
+    illustration: PropTypes.Requireable<string>;
+    artwork: PropTypes.Requireable<string>;
     heading: PropTypes.Validator<string>;
     subHeading: PropTypes.Requireable<string>;
     children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.20.3-ie",
+  "version": "5.20.5",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -13,6 +13,10 @@
     "access": "public"
   },
   "dependencies": {
+    "@react-aria/tabs": "^3.0.1",
+    "@react-stately/tabs": "^3.0.1",
+    "@react-types/shared": "^3.8.0",
+    "@react-types/tabs": "^3.0.1",
     "axe-prop-types": "^1.0.9",
     "clsx": "^1.0.3",
     "lodash.isplainobject": "^4.0.6",
@@ -23,20 +27,24 @@
     "tiny-invariant": "^1.0.4"
   },
   "peerDependencies": {
-    "@spscommerce/ds-colors": "5.20.3-ie",
-    "@spscommerce/ds-shared": "5.20.3-ie",
-    "@spscommerce/positioning": "5.20.3-ie",
-    "@spscommerce/utils": "5.20.3-ie",
+    "@react-stately/collections": "^3.3.3",
+    "@spscommerce/ds-colors": "5.20.5",
+    "@spscommerce/ds-illustrations": "5.20.5",
+    "@spscommerce/ds-shared": "5.20.5",
+    "@spscommerce/positioning": "5.20.5",
+    "@spscommerce/utils": "5.20.5",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },
   "devDependencies": {
-    "@spscommerce/ds-colors": "5.20.3-ie",
-    "@spscommerce/ds-shared": "5.20.3-ie",
-    "@spscommerce/positioning": "5.20.3-ie",
-    "@spscommerce/utils": "5.20.3-ie",
+    "@react-stately/collections": "^3.3.3",
+    "@spscommerce/ds-colors": "5.20.5",
+    "@spscommerce/ds-illustrations": "5.20.5",
+    "@spscommerce/ds-shared": "5.20.5",
+    "@spscommerce/positioning": "5.20.5",
+    "@spscommerce/utils": "5.20.5",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",
@@ -50,12 +58,12 @@
     "typescript": "^4.4.4"
   },
   "scripts": {
-    "build": "pnpm run build:es5 && pnpm run build:js && pnpm run build:types",
-    "build:es5": "tsc -p tsconfig.json",
-    "build:js": "rollup -c rollup.config.js",
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
     "watch": "vite build --watch",
     "clean": "git clean -fdX",
     "pub": "pnpm pack && node ../../scripts/publish-package.js"
-  }
+  },
+  "readme": "[//]: # \"START_AUTOGENERATED\"\n\n## [@spscommerce/ds-react](https://github.com/spscommerce/ui-angular/tree/master/packages/@spscommerce/ds-react#readme)\n\n![release: 1.1.0](https://img.shields.io/badge/release-1.1.0-blue.svg?style=flat-square)\n![build: passing](https://img.shields.io/badge/build-passing-green.svg?style=flat-square)\n![tests: failing](https://img.shields.io/badge/tests-failing-red.svg?style=flat-square)\n\nSPS Design System React components \n \n ### Installation \n \n ```shell\nnpm install --save @spscommerce/ds-react\n```\n\n#### Peer Dependencies\n\n<div class=\"row\">\n    <div class=\"col-5\"> \n    <table class=\"sps-table\">\n        <thead class=\"sps-table__head\">\n            <tr class=\"sps-table__row\">\n                <th class=\"sps-table__header\">\n                    <span class=\"sps-table__header-cell-body\">    \n                        Package\n                    </span>\n                </th>\n                <th class=\"sps-table__header text-right\">\n                    <span class=\"sps-table__header-cell-body\">    \n                        Version\n                    </span>\n                </th>\n            </tr>\n        </thead>\n        <tbody class=\"sps-table__body\">\n            <tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-shared#readme\">@spscommerce/ds-shared</a></td><td class=\"sps-table__cell text-right\">^1.1.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/positioning#readme\">@spscommerce/positioning</a></td><td class=\"sps-table__cell text-right\">^1.1.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/utils#readme\">@spscommerce/utils</a></td><td class=\"sps-table__cell text-right\">^1.1.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"lukeed/clsx\">clsx</a></td><td class=\"sps-table__cell text-right\">^1.0.3</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://momentjs.com\">moment</a></td><td class=\"sps-table__cell text-right\">^2.25.3</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"http://momentjs.com/timezone/\">moment-timezone</a></td><td class=\"sps-table__cell text-right\">^0.5.28</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"ai/nanoid\">nanoid</a></td><td class=\"sps-table__cell text-right\">^2.1.6</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://facebook.github.io/react/\">prop-types</a></td><td class=\"sps-table__cell text-right\">^15.7.2</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://reactjs.org/\">react</a></td><td class=\"sps-table__cell text-right\">^16.9.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://reactjs.org/\">react-dom</a></td><td class=\"sps-table__cell text-right\">^16.9.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://scroll-into-view-if-needed.netlify.com\">scroll-into-view-if-needed</a></td><td class=\"sps-table__cell text-right\">^2.2.20</td></tr>\n        </tbody>\n    </table>\n    </div>\n    <div class=\"col-7\">\n        &nbsp;\n    </div>\n</div>\n\n[//]: # \"END_AUTOGENERATED\"\n"
 }

package/vite.config.js

@@ -7,7 +7,7 @@ import pkg from './package.json';
 export default defineConfig({
   build: {
     lib: {
-      entry: path.resolve(__dirname, 'dist/out-tsc/index.js'),
+      entry: path.resolve(__dirname, 'src/index.ts'),
       formats: ['es', 'cjs'],
       fileName: (format) => `index.${format}.js`,
     },

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

@@ -1,15 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,44 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,43 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,58 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,29 +0,0 @@
-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

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

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

@@ -1,37 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}