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

package/dist/out-tsc/sorting-header/SpsSortingHeaderCell.js

@@ -0,0 +1,71 @@
+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 { SortDirection } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    sortKey: "string",
+    sortDisabled: "boolean",
+    sort: "SortedColumn[]",
+    onSortChange: "SortChangeHandler",
+    widthPx: "number",
+    widthRem: "number",
+};
+var propTypes = __assign({ sortKey: PropTypes.string, sortDisabled: PropTypes.bool, sort: PropTypes.arrayOf(PropTypes.impl()), onSortChange: PropTypes.fun(), widthPx: PropTypes.number, widthRem: PropTypes.number }, PropTypes.spsGlobalPropTypes);
+export function SpsSortingHeaderCell(_a) {
+    var className = _a.className, testId = _a["data-testid"], unsafelyReplaceClassName = _a.unsafelyReplaceClassName, sortKey = _a.sortKey, sort = _a.sort, sortDisabled = _a.sortDisabled, onSortChange = _a.onSortChange, onClick = _a.onClick, children = _a.children, widthPx = _a.widthPx, widthRem = _a.widthRem, style = _a.style, rest = __rest(_a, ["className", "data-testid", "unsafelyReplaceClassName", "sortKey", "sort", "sortDisabled", "onSortChange", "onClick", "children", "widthPx", "widthRem", "style"]);
+    var sortDirection = React.useMemo(function () {
+        var sortDefinition = !!sortKey
+            && !sortDisabled
+            && Array.isArray(sort)
+            && sort.find(function (s) { return s.key === sortKey; });
+        return sortDefinition ? sortDefinition.direction : undefined;
+    }, [sort,
+        sortKey,
+        sortDisabled]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-sorting-header__cell", sortDirection === SortDirection.ASCENDING && "sps-sorting-header__cell--sorted-asc", sortDirection === SortDirection.DESCENDING && "sps-sorting-header__cell--sorted-desc", sortDisabled && "sps-sorting-header__cell--sort-disabled", className);
+    var width = widthPx ? widthPx / 16 : widthRem;
+    var inlineStyles = width ? __assign(__assign({}, style), { width: width + "rem" }) : style;
+    return (React.createElement("div", __assign({ className: classes, onClick: function (e) {
+            if (sortKey && !sortDisabled) {
+                onSortChange([
+                    {
+                        key: sortKey,
+                        direction: sortDirection === SortDirection.ASCENDING
+                            ? SortDirection.DESCENDING
+                            : SortDirection.ASCENDING,
+                    },
+                ]);
+            }
+            if (onClick) {
+                onClick(e);
+            }
+        }, "data-testid": testId, style: inlineStyles }, rest), children));
+}
+Object.assign(SpsSortingHeaderCell, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsSortingHeaderCell",
+});
+//# sourceMappingURL=SpsSortingHeaderCell.js.map

package/dist/out-tsc/sorting-header/SpsSortingHeaderCell.js.map

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

package/dist/out-tsc/sorting-header/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SpsSortingHeader";
+export * from "./SpsSortingHeaderCell";
+export * from "./SpsSortingHeader.examples";

package/dist/out-tsc/sorting-header/index.js

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

package/dist/out-tsc/sorting-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/sorting-header/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC"}

package/dist/out-tsc/spinner/SpsSpinner.d.ts

@@ -0,0 +1,14 @@
+import { SpinnerSize } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    alt: PropTypes.Requireable<string>;
+    size: PropTypes.Requireable<SpinnerSize>;
+    title: PropTypes.Requireable<string>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsSpinnerProps = PropTypes.InferTS<typeof propTypes, HTMLElement>;
+export declare function SpsSpinner(props: SpsSpinnerProps): JSX.Element;
+export {};

package/dist/out-tsc/spinner/SpsSpinner.examples.d.ts

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

package/dist/out-tsc/spinner/SpsSpinner.examples.js

@@ -0,0 +1,22 @@
+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 SpsSpinnerExamples = {
+    basic: {
+        examples: {
+            small: {
+                jsx: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    <React.Fragment>\n                        <SpsSpinner size=\"small\"/>\n                        <SpsSpinner size={SpinnerSize.SMALL}/>\n                    </React.Fragment>\n                "], ["\n                    <React.Fragment>\n                        <SpsSpinner size=\"small\"/>\n                        <SpsSpinner size={SpinnerSize.SMALL}/>\n                    </React.Fragment>\n                "]))),
+            },
+            medium: {
+                jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    <React.Fragment>\n                        <SpsSpinner />\n                        <SpsSpinner size=\"medium\" title=\"Please wait\u2026\"/>\n                        <SpsSpinner size={SpinnerSize.MEDIUM}/>\n                    </React.Fragment>\n                "], ["\n                    <React.Fragment>\n                        <SpsSpinner />\n                        <SpsSpinner size=\"medium\" title=\"Please wait\u2026\"/>\n                        <SpsSpinner size={SpinnerSize.MEDIUM}/>\n                    </React.Fragment>\n                "]))),
+            },
+            large: {
+                jsx: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    <React.Fragment>\n                        <SpsSpinner size=\"large\"/>\n                        <SpsSpinner size={SpinnerSize.LARGE} alt=\"Loading content\u2026\"/>\n                    </React.Fragment>\n                "], ["\n                    <React.Fragment>\n                        <SpsSpinner size=\"large\"/>\n                        <SpsSpinner size={SpinnerSize.LARGE} alt=\"Loading content\u2026\"/>\n                    </React.Fragment>\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=SpsSpinner.examples.js.map

package/dist/out-tsc/spinner/SpsSpinner.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSpinner.examples.js","sourceRoot":"","sources":["../../../src/spinner/SpsSpinner.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,kBAAkB,GAAoB;IACjD,KAAK,EAAE;QACL,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI,0RAAA,uNAKA,IAAA;aACV;YACD,MAAM,EAAE;gBACN,GAAG,EAAE,IAAI,gWAAA,6RAMA,IAAA;aACV;YACD,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI,wTAAA,qPAKA,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/spinner/SpsSpinner.js

@@ -0,0 +1,46 @@
+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 { SpinnerSize } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { I18nContext } from "../i18n";
+var propsDoc = {
+    alt: "string",
+    size: "SpinnerSize",
+    title: "string",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { alt: PropTypes.string, size: PropTypes.enumValue(SpinnerSize), title: PropTypes.string });
+export function SpsSpinner(props) {
+    var alt = props.alt, className = props.className, _a = props.size, size = _a === void 0 ? SpinnerSize.MEDIUM : _a, testId = props["data-testid"], title = props.title, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["alt", "className", "size", "data-testid", "title", "unsafelyReplaceClassName"]);
+    var t = React.useContext(I18nContext).t;
+    var altText = alt || title || t("design-system:spinner.defaultAltText");
+    var spinnerClasses = clsx(unsafelyReplaceClassName || "sps-spinner", "sps-spinner--" + size, className);
+    return (React.createElement("i", __assign({ className: spinnerClasses, "data-testid": testId, title: altText }, rest)));
+}
+Object.assign(SpsSpinner, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsSpinner",
+});
+//# sourceMappingURL=SpsSpinner.js.map

package/dist/out-tsc/spinner/SpsSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSpinner.js","sourceRoot":"","sources":["../../../src/spinner/SpsSpinner.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,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,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,GAAG,EAAE,SAAS,CAAC,MAAM,EACrB,IAAI,EAAE,SAAS,CAAC,SAAS,CAAc,WAAW,CAAC,EACnD,KAAK,EAAE,SAAS,CAAC,MAAM,GACxB,CAAC;AAIF,MAAM,UAAU,UAAU,CAAC,KAAsB;IAE7C,IAAA,GAAG,GAOD,KAAK,IAPJ,EACH,SAAS,GAMP,KAAK,UANE,EACT,KAKE,KAAK,KALkB,EAAzB,IAAI,mBAAG,WAAW,CAAC,MAAM,KAAA,EACV,MAAM,GAInB,KAAK,eAJc,EACrB,KAAK,GAGH,KAAK,MAHF,EACL,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EARH,gFAQL,CADQ,CACC;IAEF,IAAA,CAAC,GAAK,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAlC,CAAmC;IAE5C,IAAM,OAAO,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,sCAAsC,CAAC,CAAC;IAE1E,IAAM,cAAc,GAAG,IAAI,CACzB,wBAAwB,IAAI,aAAa,EACzC,kBAAgB,IAAM,EACtB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oCAAG,SAAS,EAAE,cAAc,iBAAe,MAAM,EAAE,KAAK,EAAE,OAAO,IAAM,IAAI,EAAI,CAChF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;IACxB,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,YAAY;CAC1B,CAAC,CAAC"}

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

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

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

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

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

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

package/dist/out-tsc/split-button/SpsSplitButton.d.ts

@@ -0,0 +1,18 @@
+import type { SpsActionDescriptor, SpsActionMethod } from "@spscommerce/ds-shared";
+import { StdButtonKind, SpsIcon } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    disabled: PropTypes.Requireable<boolean>;
+    href: PropTypes.Requireable<string>;
+    label: PropTypes.Requireable<string>;
+    icon: PropTypes.Requireable<SpsIcon>;
+    kind: PropTypes.Requireable<StdButtonKind>;
+    options: PropTypes.Requireable<(SpsActionMethod | [SpsActionDescriptor, () => void])[]>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsSplitButtonProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsSplitButton(props: SpsSplitButtonProps): JSX.Element;
+export {};

package/dist/out-tsc/split-button/SpsSplitButton.examples.d.ts

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

package/dist/out-tsc/split-button/SpsSplitButton.examples.js

@@ -0,0 +1,39 @@
+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 SpsSplitButtonExamples = {
+    kinds: {
+        label: "Regular Split Buttons",
+        description: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["<p>info about split buttons</p>"], ["<p>info about split buttons</p>"]))),
+        examples: {
+            basic: {
+                description: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["<p>Basic</p>"], ["<p>Basic</p>"]))),
+                jsx: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    <React.Fragment>\n                        <SpsSplitButton id=\"withIcon\" label=\"Default Button\"\n                            options={[\n                                [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                            ]} className=\"mr-1\">\n                        </SpsSplitButton>\n                        <SpsSplitButton kind=\"confirm\" label=\"Confirm Button\"\n                            options={[\n                                [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                            ]} className=\"mr-1\">\n                        </SpsSplitButton>\n                        <SpsSplitButton kind=\"key\" label=\"Key Button\"\n                            options={[\n                                [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                            ]} className=\"mr-1\">\n                        </SpsSplitButton>\n                        <SpsSplitButton kind=\"delete\" label=\"Delete Button\"\n                            options={[\n                                [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                            ]} className=\"mr-1\">\n                        </SpsSplitButton>\n                    </React.Fragment>\n                "], ["\n                    <React.Fragment>\n                        <SpsSplitButton id=\"withIcon\" label=\"Default Button\"\n                            options={[\n                                [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                            ]} className=\"mr-1\">\n                        </SpsSplitButton>\n                        <SpsSplitButton kind=\"confirm\" label=\"Confirm Button\"\n                            options={[\n                                [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                            ]} className=\"mr-1\">\n                        </SpsSplitButton>\n                        <SpsSplitButton kind=\"key\" label=\"Key Button\"\n                            options={[\n                                [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                            ]} className=\"mr-1\">\n                        </SpsSplitButton>\n                        <SpsSplitButton kind=\"delete\" label=\"Delete Button\"\n                            options={[\n                                [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                            ]} className=\"mr-1\">\n                        </SpsSplitButton>\n                    </React.Fragment>\n                "]))),
+            },
+        },
+    },
+    withIcons: {
+        label: "Split Buttons with Icons",
+        description: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["<p>info about icon split buttons</p>"], ["<p>info about icon split buttons</p>"]))),
+        examples: {
+            withIcons: {
+                description: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["<p>With Icons</p>"], ["<p>With Icons</p>"]))),
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    function SpsSplitButtonWithIcon(props) {\n                        function alert1() {\n                            window.alert(\"Button clicked\");\n                        }\n                        return (\n                            <React.Fragment>\n                                <SpsSplitButton id=\"withIcon\" icon=\"drill\" label=\"Default Button\"\n                                    options={[\n                                        [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                                    ]} className=\"mr-1\">\n                                </SpsSplitButton>\n                                <SpsSplitButton icon=\"rocket\" kind=\"confirm\" label=\"Confirm Button\"\n                                    options={[\n                                        [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                                    ]} className=\"mr-1\">\n                                </SpsSplitButton>\n                                <SpsSplitButton icon=\"key\" kind=\"key\" label=\"Key Button\"\n                                    options={[\n                                        [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                                    ]} className=\"mr-1\">\n                                </SpsSplitButton>\n                                <SpsSplitButton icon=\"trash\" kind=\"delete\" onClick={alert1} label=\"Delete Button\"\n                                    options={[\n                                        [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                                    ]} className=\"mr-1\">\n                                </SpsSplitButton>\n                            </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function SpsSplitButtonWithIcon(props) {\n                        function alert1() {\n                            window.alert(\"Button clicked\");\n                        }\n                        return (\n                            <React.Fragment>\n                                <SpsSplitButton id=\"withIcon\" icon=\"drill\" label=\"Default Button\"\n                                    options={[\n                                        [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                                    ]} className=\"mr-1\">\n                                </SpsSplitButton>\n                                <SpsSplitButton icon=\"rocket\" kind=\"confirm\" label=\"Confirm Button\"\n                                    options={[\n                                        [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                                    ]} className=\"mr-1\">\n                                </SpsSplitButton>\n                                <SpsSplitButton icon=\"key\" kind=\"key\" label=\"Key Button\"\n                                    options={[\n                                        [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                                    ]} className=\"mr-1\">\n                                </SpsSplitButton>\n                                <SpsSplitButton icon=\"trash\" kind=\"delete\" onClick={alert1} label=\"Delete Button\"\n                                    options={[\n                                        [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                                    ]} className=\"mr-1\">\n                                </SpsSplitButton>\n                            </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    disabled: {
+        label: "Disabled Split Buttons",
+        description: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["<p>info about disabled split buttons</p>"], ["<p>info about disabled split buttons</p>"]))),
+        examples: {
+            disabled: {
+                description: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["<p>Disabled</p>"], ["<p>Disabled</p>"]))),
+                jsx: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                    <React.Fragment>\n                        <SpsSplitButton disabled id=\"disabled\" kind=\"key\" label=\"Disabled Button\"\n                            options={[\n                                [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                            ]} className=\"mr-1\">\n                        </SpsSplitButton>\n                        <SpsSplitButton disabled kind=\"key\" icon=\"drill\" label=\"Disabled Button\"\n                            options={[\n                                [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                            ]} className=\"mr-1\">\n                        </SpsSplitButton>\n                    </React.Fragment>\n                "], ["\n                    <React.Fragment>\n                        <SpsSplitButton disabled id=\"disabled\" kind=\"key\" label=\"Disabled Button\"\n                            options={[\n                                [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                            ]} className=\"mr-1\">\n                        </SpsSplitButton>\n                        <SpsSplitButton disabled kind=\"key\" icon=\"drill\" label=\"Disabled Button\"\n                            options={[\n                                [{ label: \"Option A\" }, () => console.log(\"Option A\")]\n                            ]} className=\"mr-1\">\n                        </SpsSplitButton>\n                    </React.Fragment>\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+//# sourceMappingURL=SpsSplitButton.examples.js.map

package/dist/out-tsc/split-button/SpsSplitButton.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSplitButton.examples.js","sourceRoot":"","sources":["../../../src/split-button/SpsSplitButton.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,sBAAsB,GAAoB;IACrD,KAAK,EAAE;QACL,KAAK,EAAE,uBAAuB;QAC9B,WAAW,EAAE,IAAI,oGAAA,iCAAiC,IAAA;QAClD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI,iFAAA,cAAc,IAAA;gBAC/B,GAAG,EAAE,IAAI,i3CAAA,8yCAuBA,IAAA;aACV;SACF;KACF;IACD,SAAS,EAAE;QACT,KAAK,EAAE,0BAA0B;QACjC,WAAW,EAAE,IAAI,yGAAA,sCAAsC,IAAA;QACvD,QAAQ,EAAE;YACR,SAAS,EAAE;gBACT,WAAW,EAAE,IAAI,sFAAA,mBAAmB,IAAA;gBACpC,KAAK,EAAE,IAAI,u4DAAA,o0DA8BF,IAAA;aACV;SACF;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,wBAAwB;QAC/B,WAAW,EAAE,IAAI,6GAAA,0CAA0C,IAAA;QAC3D,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,WAAW,EAAE,IAAI,oFAAA,iBAAiB,IAAA;gBAClC,GAAG,EAAE,IAAI,2zBAAA,wvBAaA,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/split-button/SpsSplitButton.js

@@ -0,0 +1,76 @@
+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 { StdButtonKind, SpsIcon, } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { SpsButton } from "../button/SpsButton";
+import { SpsDropdown } from "../dropdown/SpsDropdown";
+var propsDoc = {
+    disabled: "boolean",
+    href: "string",
+    label: "string",
+    icon: "SpsIcon",
+    kind: "StdButtonKind",
+    options: "Array<SpsActionMethod | [SpsActionDescriptor, () => void]>",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { disabled: PropTypes.bool, href: PropTypes.string, label: PropTypes.string, icon: PropTypes.enumValue(SpsIcon), kind: PropTypes.enumValue(StdButtonKind), 
+    // eslint thinks there is a space between the name and open paren below for some reason
+    // eslint-disable-next-line no-spaced-func
+    options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.any])) });
+export function SpsSplitButton(props) {
+    var children = props.children, className = props.className, testId = props["data-testid"], disabled = props.disabled, href = props.href, label = props.label, options = props.options, icon = props.icon, _a = props.kind, kind = _a === void 0 ? StdButtonKind.DEFAULT : _a, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "data-testid", "disabled", "href", "label", "options", "icon", "kind", "unsafelyReplaceClassName"]);
+    var _b = __read(React.useState(false), 2), isOpen = _b[0], setIsOpen = _b[1];
+    var setOpen = function () {
+        setIsOpen(true);
+    };
+    var setClose = function () {
+        setIsOpen(false);
+    };
+    var splitButtonClasses = clsx(unsafelyReplaceClassName || "sps-split-button", "sps-split-button--" + kind, isOpen && "sps-split-button--open", className);
+    return (React.createElement("div", __assign({ className: splitButtonClasses, "data-testid": testId }, rest),
+        React.createElement(SpsButton, { kind: kind, icon: icon, href: href, disabled: disabled }, label),
+        React.createElement(SpsDropdown, { kind: kind, options: options, disabled: disabled, onOpen: setOpen, onClose: setClose })));
+}
+Object.assign(SpsSplitButton, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsSplitButton",
+});
+//# sourceMappingURL=SpsSplitButton.js.map

package/dist/out-tsc/split-button/SpsSplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSplitButton.js","sourceRoot":"","sources":["../../../src/split-button/SpsSplitButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EACL,aAAa,EAAE,OAAO,GACvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,IAAM,QAAQ,GAAG;IACf,QAAQ,EAAE,SAAS;IACnB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,4DAA4D;CACtE,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,QAAQ,EAAE,SAAS,CAAC,IAAI,EACxB,IAAI,EAAE,SAAS,CAAC,MAAM,EACtB,KAAK,EAAE,SAAS,CAAC,MAAM,EACvB,IAAI,EAAE,SAAS,CAAC,SAAS,CAAU,OAAO,CAAC,EAC3C,IAAI,EAAE,SAAS,CAAC,SAAS,CAAgB,aAAa,CAAC;IACvD,uFAAuF;IACvF,0CAA0C;IAC1C,OAAO,EAAE,SAAS,CAAC,OAAO,CACxB,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,GACxD,CAAC;AAIF,MAAM,UAAU,cAAc,CAAC,KAA0B;IAErD,IAAA,QAAQ,GAWN,KAAK,SAXC,EACR,SAAS,GAUP,KAAK,UAVE,EACM,MAAM,GASnB,KAAK,eATc,EACrB,QAAQ,GAQN,KAAK,SARC,EACR,IAAI,GAOF,KAAK,KAPH,EACJ,KAAK,GAMH,KAAK,MANF,EACL,OAAO,GAKL,KAAK,QALA,EACP,IAAI,GAIF,KAAK,KAJH,EACJ,KAGE,KAAK,KAHqB,EAA5B,IAAI,mBAAG,aAAa,CAAC,OAAO,KAAA,EAC5B,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EAZH,4HAYL,CADQ,CACC;IAEJ,IAAA,KAAA,OAAsB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA1C,MAAM,QAAA,EAAE,SAAS,QAAyB,CAAC;IAElD,IAAM,OAAO,GAAG;QACd,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,IAAM,QAAQ,GAAG;QACf,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,IAAM,kBAAkB,GAAG,IAAI,CAC7B,wBAAwB,IAAI,kBAAkB,EAC9C,uBAAqB,IAAM,EAC3B,MAAM,IAAI,wBAAwB,EAClC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,sCAAK,SAAS,EAAE,kBAAkB,iBAAe,MAAM,IAAM,IAAI;QAC/D,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,IAAG,KAAK,CAAa;QACtF,oBAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,QAAQ,GACjB,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IAC5B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,gBAAgB;CAC9B,CAAC,CAAC"}

package/dist/out-tsc/split-button/index.d.ts

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

package/dist/out-tsc/split-button/index.js

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

package/dist/out-tsc/split-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/split-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC"}

package/dist/out-tsc/stepped-progress-bar/SpsSteppedProgressBar.d.ts

@@ -0,0 +1,25 @@
+import { SpsIcon } from "@spscommerce/ds-shared";
+import { SteppedProgressBarColor } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    title: PropTypes.Requireable<string>;
+    stepsCount: PropTypes.Requireable<number>;
+    completedStepsCount: PropTypes.Requireable<number>;
+    disabled: PropTypes.Requireable<boolean>;
+    showStepsCounter: PropTypes.Requireable<boolean>;
+    icons: PropTypes.Requireable<IconsProps[]>;
+    tooltipsData: PropTypes.Requireable<TooltipsProps[]>;
+    color: PropTypes.Requireable<SteppedProgressBarColor>;
+};
+export interface IconsProps {
+    index: number;
+    icon: SpsIcon;
+}
+export interface TooltipsProps {
+    index: number;
+    title: string;
+    description: string;
+}
+export declare type SpsSteppedProgressBarProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsSteppedProgressBar(props: SpsSteppedProgressBarProps): JSX.Element;
+export {};

package/dist/out-tsc/stepped-progress-bar/SpsSteppedProgressBar.examples.d.ts

@@ -0,0 +1,24 @@
+export declare const SpsSteppedProgressBarExamples: {
+    standard: {
+        label: string;
+        description: () => JSX.Element;
+        examples: {
+            standard: {
+                description: () => JSX.Element;
+                react: string;
+            };
+            color: {
+                description: () => JSX.Element;
+                react: string;
+            };
+            completed: {
+                description: () => JSX.Element;
+                react: string;
+            };
+            disabled: {
+                description: () => JSX.Element;
+                react: string;
+            };
+        };
+    };
+};

package/dist/out-tsc/stepped-progress-bar/SpsSteppedProgressBar.examples.js

@@ -0,0 +1,78 @@
+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';
+import { SpsTable, SpsTableBody, SpsTableCell, SpsTableHead, SpsTableHeader, SpsTableRow, } from '../table';
+export var SpsSteppedProgressBarExamples = {
+    standard: {
+        label: 'Stepped Progress Bar',
+        description: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("p", null, "Stepped Progress Bars are comprised of the following Required and Optional elements."),
+            React.createElement("img", { src: "assets/images/stepped-progress-bar-example.svg", alt: "A Progress Bar with labels on each section", className: "w-100 mb-3" }),
+            React.createElement(SpsTable, null,
+                React.createElement(SpsTableHead, null,
+                    React.createElement(SpsTableHeader, null, "Section"),
+                    React.createElement(SpsTableHeader, null, "Content Type"),
+                    React.createElement(SpsTableHeader, null, "Required"),
+                    React.createElement(SpsTableHeader, null, "Description/Guidelines")),
+                React.createElement(SpsTableBody, null,
+                    React.createElement(SpsTableRow, null,
+                        React.createElement(SpsTableCell, null,
+                            React.createElement("span", { className: "sps-tag sps-tag--info" }, "1")),
+                        React.createElement(SpsTableCell, null, "Title"),
+                        React.createElement(SpsTableCell, null, "No"),
+                        React.createElement(SpsTableCell, { wrap: 400 }, "Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),
+                    React.createElement(SpsTableRow, null,
+                        React.createElement(SpsTableCell, null,
+                            React.createElement("span", { className: "sps-tag sps-tag--info" }, "2")),
+                        React.createElement(SpsTableCell, null, "Progress Meter"),
+                        React.createElement(SpsTableCell, null, "Yes"),
+                        React.createElement(SpsTableCell, null)),
+                    React.createElement(SpsTableRow, null,
+                        React.createElement(SpsTableCell, null,
+                            React.createElement("span", { className: "sps-tag sps-tag--info" }, "3")),
+                        React.createElement(SpsTableCell, null, "Progress Counter"),
+                        React.createElement(SpsTableCell, null, "No"),
+                        React.createElement(SpsTableCell, { wrap: 400 }, "The Progress Counter should not be used without the existence of a Title.")),
+                    React.createElement(SpsTableRow, null,
+                        React.createElement(SpsTableCell, null,
+                            React.createElement("span", { className: "sps-tag sps-tag--info" }, "4")),
+                        React.createElement(SpsTableCell, null, "Step icons"),
+                        React.createElement(SpsTableCell, null, "No"),
+                        React.createElement(SpsTableCell, { wrap: 400 }, "Icons can be set inside of steps for visual emphasis.")),
+                    React.createElement(SpsTableRow, null,
+                        React.createElement(SpsTableCell, null,
+                            React.createElement("span", { className: "sps-tag sps-tag--info" }, "5")),
+                        React.createElement(SpsTableCell, null, "Step Tooltips"),
+                        React.createElement(SpsTableCell, null, "No"),
+                        React.createElement(SpsTableCell, { wrap: 400 }, "Tooltips can be utilized to provide more details about each specific step. Tooltips can be exposed on click or hover.")))))); },
+        examples: {
+            standard: {
+                description: function () { return (React.createElement(React.Fragment, null,
+                    React.createElement("h4", null, "Building Stepped Progress Bars"),
+                    React.createElement("p", null, "The Stepped Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements."))); },
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function Component() {\n                        const iconsData = [\n                            {index: 4, icon: SpsIcon.CALENDAR},\n                            {index: 8, icon: SpsIcon.CALENDAR},\n                        ];\n                        const tooltipsData = [\n                            {index: 0, title: 'Title 1', description: 'Description'},\n                            {index: 4, title: 'Title 5', description: 'Description'},\n                            {index: 8, title: 'Title 9', description: 'Description'},\n                            {index: 11, title: 'Title 12', description: 'Description'},\n                        ]\n\n                        return (\n                            <SpsCard>\n                                <SpsSteppedProgressBar\n                                    title=\"Process Name\"\n                                    showStepsCounter={true}\n                                    stepsCount={12}\n                                    completedStepsCount={4}\n                                    icons={iconsData}\n                                    tooltipsData={tooltipsData}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const iconsData = [\n                            {index: 4, icon: SpsIcon.CALENDAR},\n                            {index: 8, icon: SpsIcon.CALENDAR},\n                        ];\n                        const tooltipsData = [\n                            {index: 0, title: 'Title 1', description: 'Description'},\n                            {index: 4, title: 'Title 5', description: 'Description'},\n                            {index: 8, title: 'Title 9', description: 'Description'},\n                            {index: 11, title: 'Title 12', description: 'Description'},\n                        ]\n\n                        return (\n                            <SpsCard>\n                                <SpsSteppedProgressBar\n                                    title=\"Process Name\"\n                                    showStepsCounter={true}\n                                    stepsCount={12}\n                                    completedStepsCount={4}\n                                    icons={iconsData}\n                                    tooltipsData={tooltipsData}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "]))),
+            },
+            color: {
+                description: function () { return React.createElement("h4", null, "Alternate Color"); },
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function Component() {\n                        const iconsData = [\n                            {index: 4, icon: SpsIcon.CALENDAR},\n                            {index: 8, icon: SpsIcon.CALENDAR},\n                        ];\n                        const tooltipsData = [\n                            {index: 0, title: 'Title 1', description: 'Description'},\n                            {index: 4, title: 'Title 5', description: 'Description'},\n                            {index: 8, title: 'Title 9', description: 'Description'},\n                            {index: 11, title: 'Title 12', description: 'Description'},\n                        ]\n\n                        return (\n                            <SpsCard>\n                                <SpsSteppedProgressBar\n                                    title=\"Process Name\"\n                                    showStepsCounter={true}\n                                    stepsCount={12}\n                                    completedStepsCount={4}\n                                    icons={iconsData}\n                                    tooltipsData={tooltipsData}\n                                    color={SteppedProgressBarColor.GRAY}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const iconsData = [\n                            {index: 4, icon: SpsIcon.CALENDAR},\n                            {index: 8, icon: SpsIcon.CALENDAR},\n                        ];\n                        const tooltipsData = [\n                            {index: 0, title: 'Title 1', description: 'Description'},\n                            {index: 4, title: 'Title 5', description: 'Description'},\n                            {index: 8, title: 'Title 9', description: 'Description'},\n                            {index: 11, title: 'Title 12', description: 'Description'},\n                        ]\n\n                        return (\n                            <SpsCard>\n                                <SpsSteppedProgressBar\n                                    title=\"Process Name\"\n                                    showStepsCounter={true}\n                                    stepsCount={12}\n                                    completedStepsCount={4}\n                                    icons={iconsData}\n                                    tooltipsData={tooltipsData}\n                                    color={SteppedProgressBarColor.GRAY}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "]))),
+            },
+            completed: {
+                description: function () { return (React.createElement(React.Fragment, null,
+                    React.createElement("h4", null, "Completed State"),
+                    React.createElement("p", null, "Once complete, the progress bar appears in green."))); },
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function Component() {\n                        const iconsData = [\n                            {index: 4, icon: SpsIcon.CALENDAR},\n                            {index: 8, icon: SpsIcon.CALENDAR},\n                        ];\n\n                        return (\n                            <SpsCard>\n                                <SpsSteppedProgressBar\n                                    title=\"Process Name\"\n                                    showStepsCounter={true}\n                                    stepsCount={10}\n                                    completedStepsCount={10}\n                                    icons={iconsData}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const iconsData = [\n                            {index: 4, icon: SpsIcon.CALENDAR},\n                            {index: 8, icon: SpsIcon.CALENDAR},\n                        ];\n\n                        return (\n                            <SpsCard>\n                                <SpsSteppedProgressBar\n                                    title=\"Process Name\"\n                                    showStepsCounter={true}\n                                    stepsCount={10}\n                                    completedStepsCount={10}\n                                    icons={iconsData}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "]))),
+            },
+            disabled: {
+                description: function () { return (React.createElement(React.Fragment, null,
+                    React.createElement("h4", null, "Disabled State"),
+                    React.createElement("p", null, "A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted."))); },
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function Component() {\n                        const iconsData = [\n                            {index: 4, icon: SpsIcon.CALENDAR},\n                            {index: 8, icon: SpsIcon.CALENDAR},\n                        ];\n\n                        return (\n                            <SpsCard>\n                                <SpsSteppedProgressBar\n                                    title=\"Process Name\"\n                                    stepsCount={10}\n                                    completedStepsCount={7}\n                                    icons={iconsData}\n                                    disabled\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const iconsData = [\n                            {index: 4, icon: SpsIcon.CALENDAR},\n                            {index: 8, icon: SpsIcon.CALENDAR},\n                        ];\n\n                        return (\n                            <SpsCard>\n                                <SpsSteppedProgressBar\n                                    title=\"Process Name\"\n                                    stepsCount={10}\n                                    completedStepsCount={7}\n                                    icons={iconsData}\n                                    disabled\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=SpsSteppedProgressBar.examples.js.map

package/dist/out-tsc/stepped-progress-bar/SpsSteppedProgressBar.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSteppedProgressBar.examples.js","sourceRoot":"","sources":["../../../src/stepped-progress-bar/SpsSteppedProgressBar.examples.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EACH,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,WAAW,GACd,MAAM,UAAU,CAAC;AAElB,MAAM,CAAC,IAAM,6BAA6B,GAAG;IACzC,QAAQ,EAAE;QACN,KAAK,EAAE,sBAAsB;QAC7B,WAAW,EAAE,cAAM,OAAA,CACf;YACI,sHAGI;YACJ,6BACI,GAAG,EAAC,gDAAgD,EACpD,GAAG,EAAC,4CAA4C,EAChD,SAAS,EAAC,YAAY,GACxB;YACF,oBAAC,QAAQ;gBACL,oBAAC,YAAY;oBACT,oBAAC,cAAc,kBAAyB;oBACxC,oBAAC,cAAc,uBAA8B;oBAC7C,oBAAC,cAAc,mBAA0B;oBACzC,oBAAC,cAAc,iCAAwC,CAC5C;gBACf,oBAAC,YAAY;oBACT,oBAAC,WAAW;wBACR,oBAAC,YAAY;4BACT,8BAAM,SAAS,EAAC,uBAAuB,QAAS,CACrC;wBACf,oBAAC,YAAY,gBAAqB;wBAClC,oBAAC,YAAY,aAAkB;wBAC/B,oBAAC,YAAY,IAAC,IAAI,EAAE,GAAG,mHAGR,CACL;oBACd,oBAAC,WAAW;wBACR,oBAAC,YAAY;4BACT,8BAAM,SAAS,EAAC,uBAAuB,QAAS,CACrC;wBACf,oBAAC,YAAY,yBAA8B;wBAC3C,oBAAC,YAAY,cAAmB;wBAChC,oBAAC,YAAY,OAAG,CACN;oBACd,oBAAC,WAAW;wBACR,oBAAC,YAAY;4BACT,8BAAM,SAAS,EAAC,uBAAuB,QAAS,CACrC;wBACf,oBAAC,YAAY,2BAAgC;wBAC7C,oBAAC,YAAY,aAAkB;wBAC/B,oBAAC,YAAY,IAAC,IAAI,EAAE,GAAG,gFAGR,CACL;oBACd,oBAAC,WAAW;wBACR,oBAAC,YAAY;4BACT,8BAAM,SAAS,EAAC,uBAAuB,QAAS,CACrC;wBACf,oBAAC,YAAY,qBAA0B;wBACvC,oBAAC,YAAY,aAAkB;wBAC/B,oBAAC,YAAY,IAAC,IAAI,EAAE,GAAG,4DAER,CACL;oBACd,oBAAC,WAAW;wBACR,oBAAC,YAAY;4BACT,8BAAM,SAAS,EAAC,uBAAuB,QAAS,CACrC;wBACf,oBAAC,YAAY,wBAA6B;wBAC1C,oBAAC,YAAY,aAAkB;wBAC/B,oBAAC,YAAY,IAAC,IAAI,EAAE,GAAG,4HAGR,CACL,CACH,CACR,CACZ,CACN,EAzEkB,CAyElB;QACD,QAAQ,EAAE;YACN,QAAQ,EAAE;gBACN,WAAW,EAAE,cAAM,OAAA,CACf;oBACI,iEAAuC;oBACvC,8MAII,CACL,CACN,EATkB,CASlB;gBACD,KAAK,EAAE,IAAI,21CAAA,wxCA0BV,IAAA;aACJ;YACD,KAAK,EAAE;gBACH,WAAW,EAAE,cAAM,OAAA,kDAAwB,EAAxB,CAAwB;gBAC3C,KAAK,EAAE,IAAI,q6CAAA,k2CA2BV,IAAA;aACJ;YACD,SAAS,EAAE;gBACP,WAAW,EAAE,cAAM,OAAA,CACf;oBACI,kDAAwB;oBACxB,mFAAwD,CACzD,CACN,EALkB,CAKlB;gBACD,KAAK,EAAE,IAAI,k3BAAA,+yBAmBV,IAAA;aACJ;YACD,QAAQ,EAAE;gBACN,WAAW,EAAE,cAAM,OAAA,CACf;oBACI,iDAAuB;oBACvB,2JAGI,CACL,CACN,EARkB,CAQlB;gBACD,KAAK,EAAE,IAAI,k2BAAA,+xBAmBV,IAAA;aACJ;SACJ;KACJ;CACJ,CAAC"}

package/dist/out-tsc/stepped-progress-bar/SpsSteppedProgressBar.js

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { SpsIconSize, SteppedProgressBarColor } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import { SpsTooltip } from "../tooltip";
+import * as PropTypes from "../prop-types";
+import { SpsI } from "../icon";
+import { useElementId } from "../utils";
+var propsDoc = {
+    title: "string",
+    stepsCount: "number",
+    completedStepsCount: "number",
+    disabled: "boolean",
+    showStepsCounter: "boolean",
+    icons: "IconsProps[]",
+    tooltipsData: "TooltipsProps[]",
+    color: "SteppedProgressBarColor",
+};
+var propTypes = {
+    title: PropTypes.string,
+    stepsCount: PropTypes.number,
+    completedStepsCount: PropTypes.number,
+    disabled: PropTypes.bool,
+    showStepsCounter: PropTypes.bool,
+    icons: PropTypes.arrayOf(PropTypes.impl()),
+    tooltipsData: PropTypes.arrayOf(PropTypes.impl()),
+    color: PropTypes.enumValue(SteppedProgressBarColor)
+};
+export function SpsSteppedProgressBar(props) {
+    var title = props.title, stepsCount = props.stepsCount, _a = props.completedStepsCount, completedStepsCount = _a === void 0 ? 0 : _a, disabled = props.disabled, showStepsCounter = props.showStepsCounter, icons = props.icons, tooltipsData = props.tooltipsData, className = props.className, _b = props.color, color = _b === void 0 ? SteppedProgressBarColor.PURPLE : _b;
+    function findIcon(idx) {
+        return icons && icons.find(function (i) { return i.index === idx; });
+    }
+    function findTooltipData(idx) {
+        return tooltipsData && tooltipsData.find(function (i) { return i.index === idx; });
+    }
+    var data = Array.from(Array(stepsCount)).map(function () { return useElementId(null).current; });
+    var classes = clsx("sps-stepped-progress-bar", "sps-stepped-progress-bar--" + color, completedStepsCount === stepsCount && "sps-stepped-progress-bar--complete", disabled && "sps-stepped-progress-bar--disabled", className);
+    return (React.createElement("div", { className: classes },
+        React.createElement("div", { className: "sps-stepped-progress-bar__content" },
+            (title || showStepsCounter) && (React.createElement("div", { className: "sps-progress-bar__heading" },
+                title && (React.createElement("div", { className: "sps-progress-bar__title" }, title)),
+                showStepsCounter && (React.createElement("div", { className: "sps-stepped-progress-bar__percentage" }, completedStepsCount + " of " + stepsCount + " Complete")))),
+            React.createElement("ul", { className: "sps-stepped-progress-bar__bar-background d-flex align-items-center list-unstyled mb-0" }, data.map(function (id, index) { return (React.createElement("li", { id: id, key: id, className: clsx("sps-stepped-progress-bar__step", completedStepsCount > index && "sps-stepped-progress-bar__step-complete") },
+                findIcon(index)
+                    && React.createElement(SpsI, { icon: findIcon(index).icon, size: SpsIconSize.SMALL, className: clsx("d-block", findIcon(index).index > completedStepsCount - 1 ? "gray400" : "white") }),
+                findTooltipData(index)
+                    && (React.createElement(SpsTooltip, { for: id, title: findTooltipData(index).title }, findTooltipData(index).description)))); })))));
+}
+Object.assign(SpsSteppedProgressBar, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsSteppedProgressBar",
+});
+//# sourceMappingURL=SpsSteppedProgressBar.js.map

package/dist/out-tsc/stepped-progress-bar/SpsSteppedProgressBar.js.map

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