@spscommerce/ds-react 5.20.2 → 5.20.3-ie

package/dist/out-tsc/search-results-bar/SpsSearchResultsBar.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 * as React from "react";
+import { code } from "@spscommerce/utils";
+export var SpsSearchResultsBarExamples = {
+    basic: {
+        label: "Basic",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement(React.Fragment, null,
+                React.createElement("p", null, "SpsSearchResultsBarV2 should be used with List Toolbar and Advanced Search."),
+                React.createElement("p", null,
+                    "For more examples go to the Advanced Search section on the",
+                    " ",
+                    React.createElement(NavigateTo, { to: "list-toolbar" }, "List Toolbar"),
+                    " page.")));
+        },
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function Component() {\n                      \n                      const [advSearch, setAdvSearch] = React.useState({\n                        isOpen: false\n                      });\n                    \n                      const [showSearchBar, setShowSearchBar] = React.useState(true);\n\n                      const [results, setResults] = React.useState(10);\n\n                      const initialSelections = {\n                        sender: [\"Aktie Sports\",\"Modells Sporting Goods\", \"Perry Sport\"],\n                        receiver: [\"FGL Sports\", \"Foot Asylum\", \"Hervis\", \"Lovell Rugby\"],\n                      };\n\n                      const [selections, setSelections] = React.useState(initialSelections);\n                      \n                      const initValue = {\n                        searchText: \"\",\n                      };\n\n                      const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                      function handleToggleAdvancedSearch(isOpen) {\n                        setAdvSearch({ isOpen });\n                      }\n\n                      function handleAdvancedSearchSubmit() {\n                        console.log(\"submit\");\n                        setResults(10);\n                        setSelections(initialSelections);\n                      }\n\n                      function handleClear() {\n                          setResults(0);\n                          setSelections({});\n                      }\n                  \n                      return (\n                        <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                </SpsListToolbarSearch>\n                                <SpsSearchResultsBarV2\n                                  results={results}\n                                  onClear={handleClear}\n                                  selections={selections}\n                                />\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch} onSubmit={handleAdvancedSearchSubmit}>\n                                <i>insert form here</i>\n                            </SpsAdvancedSearch>\n                        </>\n                      )\n                  }\n                "], ["\n                    function Component() {\n                      \n                      const [advSearch, setAdvSearch] = React.useState({\n                        isOpen: false\n                      });\n                    \n                      const [showSearchBar, setShowSearchBar] = React.useState(true);\n\n                      const [results, setResults] = React.useState(10);\n\n                      const initialSelections = {\n                        sender: [\"Aktie Sports\",\"Modells Sporting Goods\", \"Perry Sport\"],\n                        receiver: [\"FGL Sports\", \"Foot Asylum\", \"Hervis\", \"Lovell Rugby\"],\n                      };\n\n                      const [selections, setSelections] = React.useState(initialSelections);\n                      \n                      const initValue = {\n                        searchText: \"\",\n                      };\n\n                      const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                      function handleToggleAdvancedSearch(isOpen) {\n                        setAdvSearch({ isOpen });\n                      }\n\n                      function handleAdvancedSearchSubmit() {\n                        console.log(\"submit\");\n                        setResults(10);\n                        setSelections(initialSelections);\n                      }\n\n                      function handleClear() {\n                          setResults(0);\n                          setSelections({});\n                      }\n                  \n                      return (\n                        <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                </SpsListToolbarSearch>\n                                <SpsSearchResultsBarV2\n                                  results={results}\n                                  onClear={handleClear}\n                                  selections={selections}\n                                />\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch} onSubmit={handleAdvancedSearchSubmit}>\n                                <i>insert form here</i>\n                            </SpsAdvancedSearch>\n                        </>\n                      )\n                  }\n                "]))),
+            },
+        },
+    },
+    customText: {
+        label: "Custom Text",
+        description: function () { return (React.createElement("p", null, "You can pass in custom text to be displayed when there are no selections.")); },
+        examples: {
+            customText: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function Component() {\n                      const [advSearch, setAdvSearch] = React.useState({\n                        isOpen: false\n                      });\n                    \n                      const [showSearchBar, setShowSearchBar] = React.useState(true);\n\n                      const [results, setResults] = React.useState(0);\n\n                      const initialSelections = {\n                        sender: [\"Aktie Sports\",\"Modells Sporting Goods\", \"Perry Sport\"],\n                        receiver: [\"FGL Sports\", \"Foot Asylum\", \"Hervis\", \"Lovell Rugby\"],\n                      };\n\n                      const [selections, setSelections] = React.useState({});\n                      \n                      const initValue = {\n                        searchText: \"\",\n                      };\n\n                      const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                      function handleToggleAdvancedSearch(isOpen) {\n                        setAdvSearch({ isOpen });\n                      }\n\n                      function handleAdvancedSearchSubmit() {\n                        console.log(\"submit\");\n                        setResults(10);\n                        setSelections(initialSelections);\n                      }\n\n                      function handleClear() {\n                          setResults(0);\n                          setSelections({});\n                      }\n                  \n                      return (\n                        <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                </SpsListToolbarSearch>\n                                <SpsSearchResultsBarV2\n                                  results={results}\n                                  onClear={handleClear}\n                                  selections={selections}\n                                  zeroStateText=\"There are no selections here\"\n                                />\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch} onSubmit={handleAdvancedSearchSubmit}>\n                                <i>insert form here</i>\n                            </SpsAdvancedSearch>\n                        </>\n                      )\n                  }\n                "], ["\n                    function Component() {\n                      const [advSearch, setAdvSearch] = React.useState({\n                        isOpen: false\n                      });\n                    \n                      const [showSearchBar, setShowSearchBar] = React.useState(true);\n\n                      const [results, setResults] = React.useState(0);\n\n                      const initialSelections = {\n                        sender: [\"Aktie Sports\",\"Modells Sporting Goods\", \"Perry Sport\"],\n                        receiver: [\"FGL Sports\", \"Foot Asylum\", \"Hervis\", \"Lovell Rugby\"],\n                      };\n\n                      const [selections, setSelections] = React.useState({});\n                      \n                      const initValue = {\n                        searchText: \"\",\n                      };\n\n                      const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                      function handleToggleAdvancedSearch(isOpen) {\n                        setAdvSearch({ isOpen });\n                      }\n\n                      function handleAdvancedSearchSubmit() {\n                        console.log(\"submit\");\n                        setResults(10);\n                        setSelections(initialSelections);\n                      }\n\n                      function handleClear() {\n                          setResults(0);\n                          setSelections({});\n                      }\n                  \n                      return (\n                        <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                </SpsListToolbarSearch>\n                                <SpsSearchResultsBarV2\n                                  results={results}\n                                  onClear={handleClear}\n                                  selections={selections}\n                                  zeroStateText=\"There are no selections here\"\n                                />\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch} onSubmit={handleAdvancedSearchSubmit}>\n                                <i>insert form here</i>\n                            </SpsAdvancedSearch>\n                        </>\n                      )\n                  }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=SpsSearchResultsBar.examples.js.map

package/dist/out-tsc/search-results-bar/SpsSearchResultsBar.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSearchResultsBar.examples.js","sourceRoot":"","sources":["../../../src/search-results-bar/SpsSearchResultsBar.examples.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,2BAA2B,GAAoB;IAC1D,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,UAAC,EAAc;gBAAZ,UAAU,gBAAA;YAAO,OAAA,CAC/B;gBACE,6GAAkF;gBAClF;;oBAC6D,GAAG;oBAC9D,oBAAC,UAAU,IAAC,EAAE,EAAC,cAAc,mBAA0B;6BACrD,CACH,CACJ;QARgC,CAQhC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,i8FAAA,83FAgEF,IAAA;aACV;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,cAAM,OAAA,CACjB,2GAAgF,CACjF,EAFkB,CAElB;QACD,QAAQ,EAAE;YACR,UAAU,EAAE;gBACV,KAAK,EAAE,IAAI,2+FAAA,w6FAgEF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/search-results-bar/SpsSearchResultsBar.js

@@ -0,0 +1,74 @@
+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 clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { I18nContext } from "../i18n";
+var propsDoc = {
+    resultsCount: "number",
+    totalResults: "number",
+    onClear: "() => void",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { resultsCount: PropTypes.number, totalResults: PropTypes.number, onClear: PropTypes.fun() });
+export function SpsSearchResultsBar(props) {
+    var children = props.children, className = props.className, resultsCount = props.resultsCount, totalResults = props.totalResults, onClear = props.onClear, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "resultsCount", "totalResults", "onClear", "data-testid", "unsafelyReplaceClassName"]);
+    var t = React.useContext(I18nContext).t;
+    var classes = clsx(unsafelyReplaceClassName || "sps-search-results-bar", className);
+    var _a = __read(t("design-system:searchResultsBar.count", { count: resultsCount, total: totalResults })
+        .split(" "), 3), count = _a[0], ofText = _a[1], total = _a[2];
+    return (React.createElement("div", __assign({ className: classes, "data-testid": "" + testId }, rest),
+        React.createElement("span", { className: "sps-search-results-bar__label", "data-testid": testId + "__label" }, t("design-system:searchResultsBar.matchingResults")),
+        count && !Number.isNaN(Number(count))
+            && (React.createElement("span", { className: "sps-search-results-bar__count", "data-testid": testId + "__count" },
+                React.createElement("i", { className: "sps-icon sps-icon-double-angle-right" }),
+                React.createElement("span", null, count))),
+        total && !Number.isNaN(Number(total))
+            && (React.createElement("span", { className: "sps-search-results-bar__total", "data-testid": testId + "__total" },
+                ofText,
+                " ",
+                total)),
+        React.createElement("div", { className: "sps-search-results-bar__buttons", "data-testid": testId + "__button" },
+            React.createElement("button", { type: "button", onClick: onClear }, t("design-system:searchResultsBar.clear")))));
+}
+Object.assign(SpsSearchResultsBar, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsSearchResultsBar",
+});
+//# sourceMappingURL=SpsSearchResultsBar.js.map

package/dist/out-tsc/search-results-bar/SpsSearchResultsBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSearchResultsBar.js","sourceRoot":"","sources":["../../../src/search-results-bar/SpsSearchResultsBar.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,YAAY,EAAE,QAAQ;IACtB,YAAY,EAAE,QAAQ;IACtB,OAAO,EAAE,YAAY;CACtB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,YAAY,EAAE,SAAS,CAAC,MAAM,EAC9B,YAAY,EAAE,SAAS,CAAC,MAAM,EAC9B,OAAO,EAAE,SAAS,CAAC,GAAG,EAAc,GACrC,CAAC;AAIF,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IAE/D,IAAA,QAAQ,GAQN,KAAK,SARC,EACR,SAAS,GAOP,KAAK,UAPE,EACT,YAAY,GAMV,KAAK,aANK,EACZ,YAAY,GAKV,KAAK,aALK,EACZ,OAAO,GAIL,KAAK,QAJA,EACQ,MAAM,GAGnB,KAAK,eAHc,EACrB,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EATH,+GASL,CADQ,CACC;IAEF,IAAA,CAAC,GAAK,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAlC,CAAmC;IAE5C,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,wBAAwB,EACpD,SAAS,CACV,CAAC;IAEI,IAAA,KAAA,OAEK,CAAC,CAAC,sCAAsC,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;SAC/F,KAAK,CAAC,GAAG,CAAC,IAAA,EAHN,KAAK,QAAA,EACV,MAAM,QAAA,EACN,KAAK,QACM,CAAC;IAEd,OAAO,CACL,sCAAK,SAAS,EAAE,OAAO,iBAAe,KAAG,MAAQ,IAAM,IAAI;QACzD,8BAAM,SAAS,EAAC,+BAA+B,iBAAiB,MAAM,YAAS,IAAG,CAAC,CAAC,gDAAgD,CAAC,CAAQ;QAE3I,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;eAC1B,CACD,8BAAM,SAAS,EAAC,+BAA+B,iBAAiB,MAAM,YAAS;gBAC7E,2BAAG,SAAS,EAAC,sCAAsC,GAAG;gBACtD,kCAAO,KAAK,CAAQ,CACf,CACR;QAGT,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;eAC1B,CACD,8BAAM,SAAS,EAAC,+BAA+B,iBAAiB,MAAM,YAAS;gBAC5E,MAAM;gBACN,GAAG;gBACH,KAAK,CACD,CACR;QAEX,6BAAK,SAAS,EAAC,iCAAiC,iBAAiB,MAAM,aAAU;YAC/E,gCAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,IAAG,CAAC,CAAC,sCAAsC,CAAC,CAAU,CACxF,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,mBAAmB,EAAE;IACjC,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,qBAAqB;CACnC,CAAC,CAAC"}

package/dist/out-tsc/search-results-bar/SpsSearchResultsBarV2.d.ts

@@ -0,0 +1,14 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    results: PropTypes.Requireable<number>;
+    selections: PropTypes.Requireable<Record<string, string[]>>;
+    zeroStateText: PropTypes.Requireable<string>;
+    onClear: PropTypes.Requireable<() => void>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsSearchResultsBarV2Props = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsSearchResultsBarV2(props: SpsSearchResultsBarV2Props): JSX.Element;
+export {};

package/dist/out-tsc/search-results-bar/SpsSearchResultsBarV2.js

@@ -0,0 +1,68 @@
+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 { ButtonKind, TagKind } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+import { I18nContext } from "../i18n";
+import { SpsTag } from "../tag";
+import { SpsButton } from "../button";
+var propsDoc = {
+    results: "number",
+    selections: "{ [key: string]: string[] }",
+    zeroStateText: "string",
+    onClear: "() => void",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { results: PropTypes.number, selections: PropTypes.impl(), zeroStateText: PropTypes.string, onClear: PropTypes.fun() });
+export function SpsSearchResultsBarV2(props) {
+    var className = props.className, _a = props.results, results = _a === void 0 ? 0 : _a, selections = props.selections, zeroStateText = props.zeroStateText, onClear = props.onClear, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["className", "results", "selections", "zeroStateText", "onClear", "data-testid", "unsafelyReplaceClassName"]);
+    var t = React.useContext(I18nContext).t;
+    var classes = clsx(unsafelyReplaceClassName || "sps-search-results-bar-v2", className);
+    var filteredSelections = selections
+        ? Object.keys(selections).reduce(function (acc, value) {
+            if (selections[value].length > 0) {
+                acc[value] = selections[value];
+            }
+            return acc;
+        }, {})
+        : {};
+    return (React.createElement("div", __assign({ className: classes, "data-testid": "" + testId }, rest),
+        React.createElement("div", { className: "sps-search-results-bar-v2__results" },
+            React.createElement("span", { "data-testid": testId + "__label" }, t("design-system:searchResultsBar.results")),
+            React.createElement(SpsTag, { kind: TagKind.INFO },
+                React.createElement("span", null, results))),
+        React.createElement("div", { className: "sps-search-results-bar-v2__selections" }, Object.keys(filteredSelections).length > 0 ? (Object.keys(filteredSelections).map(function (selection, i) { return (React.createElement(React.Fragment, null,
+            React.createElement("span", { key: i, className: "sps-search-results-bar-v2__selection" },
+                selection,
+                ":"),
+            filteredSelections[selection].map(function (label, j) { return (React.createElement(SpsTag, { key: j, kind: TagKind.KEY },
+                React.createElement("span", null, label))); }))); })) : (React.createElement("span", { className: "font-italic" }, zeroStateText || t("design-system:searchResultsBar.noAdvancedSearchSelections")))),
+        React.createElement("div", { className: "sps-search-results-bar-v2__buttons", "data-testid": testId + "__button" },
+            React.createElement(SpsButton, { kind: ButtonKind.LINK, onClick: onClear }, t("design-system:searchResultsBar.clearResults")))));
+}
+Object.assign(SpsSearchResultsBarV2, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsSearchResultsBarV2",
+});
+//# sourceMappingURL=SpsSearchResultsBarV2.js.map

package/dist/out-tsc/search-results-bar/SpsSearchResultsBarV2.js.map

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

package/dist/out-tsc/search-results-bar/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SpsSearchResultsBar";
+export * from "./SpsSearchResultsBarV2";
+export * from "./SpsSearchResultsBar.examples";

package/dist/out-tsc/search-results-bar/index.js

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

package/dist/out-tsc/search-results-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/search-results-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC"}

package/dist/out-tsc/select/SpsSelect.d.ts

@@ -0,0 +1,39 @@
+import type { SpsActionMethod } from "@spscommerce/ds-shared";
+import type { Eventually } from "@spscommerce/utils";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import type { SpsFormControl } from "../form/hooks/formControl";
+import type { SpsFormFieldMeta } from "../form/hooks/useSpsForm";
+declare const propTypes: {
+    action: PropTypes.Requireable<SpsActionMethod>;
+    captionKey: PropTypes.Requireable<string>;
+    comparisonKey: PropTypes.Requireable<string>;
+    disabled: PropTypes.Requireable<boolean>;
+    formControl: PropTypes.Requireable<SpsFormControl<any>>;
+    formMeta: PropTypes.Requireable<SpsFormFieldMeta<any>>;
+    notClearable: PropTypes.Requireable<boolean>;
+    options: PropTypes.Validator<any[] | Promise<any[]> | ((filter?: string) => Eventually<any[]>)>;
+    onChange: PropTypes.Requireable<React.ChangeEventHandler<Element>>;
+    placeholder: PropTypes.Requireable<string>;
+    searchDebounce: PropTypes.Requireable<number>;
+    searchPlaceholder: PropTypes.Requireable<string>;
+    tallOptionList: PropTypes.Requireable<boolean>;
+    textKey: PropTypes.Requireable<string>;
+    valueKey: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<any>;
+    zeroState: PropTypes.Requireable<string>;
+    autoFixWidth: PropTypes.Requireable<boolean>;
+    loading: PropTypes.Requireable<boolean>;
+    filterByTextAndCaptionKey: 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 SpsSelectProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare const SpsSelect: React.ForwardRefExoticComponent<Pick<SpsSelectProps, "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "data-testid" | "unsafelyReplaceClassName" | "formMeta" | "formControl" | "loading" | "filterByTextAndCaptionKey" | "searchDebounce" | "searchPlaceholder" | "captionKey" | "comparisonKey" | "options" | "textKey" | "valueKey" | "zeroState" | "tallOptionList" | "maxHeightOptionListPx" | "maxHeightOptionListRem" | "notClearable" | "autoFixWidth"> & React.RefAttributes<{
+    focus: () => void;
+}>>;
+export {};

package/dist/out-tsc/select/SpsSelect.examples.d.ts

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

package/dist/out-tsc/select/SpsSelect.examples.js

@@ -0,0 +1,77 @@
+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 SpsSelectExamples = {
+    basic: {
+        label: "Basic",
+        description: "info about basic selects",
+        examples: {
+            a_simple: {
+                description: "Simple value options",
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect id=\"basic\" options={colors}/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect id=\"basic\" options={colors}/>\n                        )\n                    }\n                "]))),
+            },
+            b_formHooks: {
+                description: "Form hooks",
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            color: colors[0]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n                            <SpsSelect options={colors} formMeta={formMeta.fields.color}\n                                value={formValue.color}\n                            />\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            color: colors[0]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n                            <SpsSelect options={colors} formMeta={formMeta.fields.color}\n                                value={formValue.color}\n                            />\n                        </>\n                    }\n                "]))),
+            },
+            c_placeholder: {
+                description: "Custom placeholder text",
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect id=\"placeholder\" options={colors} placeholder=\"Choose a color\u2026\"/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect id=\"placeholder\" options={colors} placeholder=\"Choose a color\u2026\"/>\n                        )\n                    }\n                "]))),
+            },
+            d_notClearable: {
+                description: "Not clearable",
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect options={colors} value=\"red\" notClearable />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect options={colors} value=\"red\" notClearable />\n                        )\n                    }\n                "]))),
+            },
+            e_zeroState: {
+                description: "Zero state",
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        return (\n                            <SpsSelect options={[]} zeroState=\"We're sorry, there are no options to choose from at this time, because reasons.\" />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        return (\n                            <SpsSelect options={[]} zeroState=\"We're sorry, there are no options to choose from at this time, because reasons.\" />\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    b_objectOpts: {
+        label: "Object Options",
+        description: "info about object options",
+        examples: {
+            a_basic: {
+                description: "Basic use of object options",
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const sizes = [\n                            { size: \"S\", price: \"10.99\" },\n                            { size: \"M\", price: \"12.99\" },\n                            { size: \"L\", price: \"14.99\" }\n                        ];\n\n                        return (\n                            <SpsSelect options={sizes} textKey=\"size\" />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const sizes = [\n                            { size: \"S\", price: \"10.99\" },\n                            { size: \"M\", price: \"12.99\" },\n                            { size: \"L\", price: \"14.99\" }\n                        ];\n\n                        return (\n                            <SpsSelect options={sizes} textKey=\"size\" />\n                        )\n                    }\n                "]))),
+            },
+            b_captions: {
+                description: "Captions",
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const lorem = [\n                            {\n                                title: \"Lorem\",\n                                description: \"Ut enim ad minim veniam\"\n                            },\n                            {\n                                title: \"Ipsum\",\n                                description: \"Excepteur sint occaecat cupidatat non proident\"\n                            }\n                        ];\n\n                        return (\n                            <SpsSelect options={lorem} textKey=\"title\" captionKey=\"description\" />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const lorem = [\n                            {\n                                title: \"Lorem\",\n                                description: \"Ut enim ad minim veniam\"\n                            },\n                            {\n                                title: \"Ipsum\",\n                                description: \"Excepteur sint occaecat cupidatat non proident\"\n                            }\n                        ];\n\n                        return (\n                            <SpsSelect options={lorem} textKey=\"title\" captionKey=\"description\" />\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    c_searchable: {
+        label: "Search/Filter",
+        description: "info about search/filter",
+        examples: {
+            a_simple: {
+                description: "Simple search function",
+                react: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        function colorSearch(search) {\n                            return [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"]\n                                .filter(s => (new RegExp(search, \"i\")).test(s));\n                        }\n\n                        return (\n                            <SpsSelect  id=\"search-function\" options={colorSearch} zeroState=\"While I'm sure that's a lovely color, it's not an option we support.\"/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        function colorSearch(search) {\n                            return [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"]\n                                .filter(s => (new RegExp(search, \"i\")).test(s));\n                        }\n\n                        return (\n                            <SpsSelect  id=\"search-function\" options={colorSearch} zeroState=\"While I'm sure that's a lovely color, it's not an option we support.\"/>\n                        )\n                    }\n                "]))),
+            },
+            b_promise: {
+                description: "Search function returning a Promise",
+                react: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        function colorSearch(search) {\n                            return new Promise((resolve, reject) => {\n                                const result = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"]\n                                    .filter(s => new RegExp(search, \"i\").test(s));\n                                resolve(result);\n                            });\n                        }\n\n                        return (\n                            <SpsSelect options={colorSearch}/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        function colorSearch(search) {\n                            return new Promise((resolve, reject) => {\n                                const result = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"]\n                                    .filter(s => new RegExp(search, \"i\").test(s));\n                                resolve(result);\n                            });\n                        }\n\n                        return (\n                            <SpsSelect options={colorSearch}/>\n                        )\n                    }\n                "]))),
+            },
+            c_debounce: {
+                description: "Search with Debounce",
+                react: code(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        function colorSearch(search) {\n                            return [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"]\n                                .filter(s => (new RegExp(search, \"i\")).test(s));\n                        }\n\n                        return (\n                            <SpsSelect id=\"debounce-select\" options={colorSearch} searchDebounce={2000}/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        function colorSearch(search) {\n                            return [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"]\n                                .filter(s => (new RegExp(search, \"i\")).test(s));\n                        }\n\n                        return (\n                            <SpsSelect id=\"debounce-select\" options={colorSearch} searchDebounce={2000}/>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    d_specialAction: {
+        label: "Simple Action",
+        description: "info about simple action selects",
+        examples: {
+            a_action: {
+                description: "Action",
+                react: code(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"orange\", \"yellow\", \"blue\", \"indigo\", \"violet\"];\n                        const [action, updateAction] = useSpsAction(\n                            {\n                                label: \"Test Action\",\n                                icon: \"drill\"\n                            },\n                            () => console.log(\"Action\")\n                        );\n                        function handleChange(event) {\n                            updateAction({\n                                label: \"Test Action\"\n                            });\n                        }\n\n                        return (\n                            <SpsSelect  id=\"special-action\" options={colors} action={action} onChange={handleChange}/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"orange\", \"yellow\", \"blue\", \"indigo\", \"violet\"];\n                        const [action, updateAction] = useSpsAction(\n                            {\n                                label: \"Test Action\",\n                                icon: \"drill\"\n                            },\n                            () => console.log(\"Action\")\n                        );\n                        function handleChange(event) {\n                            updateAction({\n                                label: \"Test Action\"\n                            });\n                        }\n\n                        return (\n                            <SpsSelect  id=\"special-action\" options={colors} action={action} onChange={handleChange}/>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+//# sourceMappingURL=SpsSelect.examples.js.map

package/dist/out-tsc/select/SpsSelect.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSelect.examples.js","sourceRoot":"","sources":["../../../src/select/SpsSelect.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,iBAAiB,GAAoB;IAChD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,0BAA0B;QACvC,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,WAAW,EAAE,sBAAsB;gBACnC,KAAK,EAAE,IAAI,6WAAA,0SAQF,IAAA;aACV;YACD,WAAW,EAAE;gBACX,WAAW,EAAE,YAAY;gBACzB,KAAK,EAAE,IAAI,4sBAAA,yoBAcF,IAAA;aACV;YACD,aAAa,EAAE;gBACb,WAAW,EAAE,yBAAyB;gBACtC,KAAK,EAAE,IAAI,wZAAA,qVAQF,IAAA;aACV;YACD,cAAc,EAAE;gBACd,WAAW,EAAE,eAAe;gBAC5B,KAAK,EAAE,IAAI,4XAAA,yTAQF,IAAA;aACV;YACD,WAAW,EAAE;gBACX,WAAW,EAAE,YAAY;gBACzB,KAAK,EAAE,IAAI,iXAAA,8SAMF,IAAA;aACV;SACF;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,gBAAgB;QACvB,WAAW,EAAE,2BAA2B;QACxC,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,WAAW,EAAE,6BAA6B;gBAC1C,KAAK,EAAE,IAAI,6iBAAA,0eAYF,IAAA;aACV;YACD,UAAU,EAAE;gBACV,WAAW,EAAE,UAAU;gBACvB,KAAK,EAAE,IAAI,wxBAAA,qtBAiBF,IAAA;aACV;SACF;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,0BAA0B;QACvC,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,WAAW,EAAE,wBAAwB;gBACrC,KAAK,EAAE,IAAI,kqBAAA,+lBAWF,IAAA;aACV;YACD,SAAS,EAAE;gBACT,WAAW,EAAE,qCAAqC;gBAClD,KAAK,EAAE,IAAI,+tBAAA,4pBAcF,IAAA;aACV;YACD,UAAU,EAAE;gBACV,WAAW,EAAE,sBAAsB;gBACnC,KAAK,EAAE,IAAI,smBAAA,iiBAWF,IAAA;aACV;SACF;KACF;IACD,eAAe,EAAE;QACf,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,kCAAkC;QAC/C,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,WAAW,EAAE,QAAQ;gBACrB,KAAK,EAAE,IAAI,o+BAAA,+5BAoBF,IAAA;aACV;SACF;KACF;CACF,CAAC"}