@spscommerce/ds-react 5.20.0 → 5.20.3-ie

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,22 @@
+import type { 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>;
+    color: PropTypes.Requireable<SteppedProgressBarColor>;
+    data: PropTypes.Requireable<SteppedProgressBarData[]>;
+};
+export interface SteppedProgressBarData {
+    index: number;
+    icon: SpsIcon;
+    title: string;
+    description: string;
+    skipped: boolean;
+}
+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,28 @@
+export declare const SpsSteppedProgressBarExamples: {
+    standard: {
+        label: string;
+        description: () => JSX.Element;
+        examples: {
+            standard: {
+                description: () => JSX.Element;
+                react: string;
+            };
+            color: {
+                description: () => JSX.Element;
+                react: string;
+            };
+            skippedSteps: {
+                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,82 @@
+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 data = [\n                            {index: 0, title: 'Title 1', description: 'Description'},\n                            {index: 4, title: 'Title 5', description: 'Description', icon: SpsIcon.CALENDAR},\n                            {index: 8, title: 'Title 9', description: 'Description', icon: SpsIcon.CALENDAR},\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                                    data={data}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const data = [\n                            {index: 0, title: 'Title 1', description: 'Description'},\n                            {index: 4, title: 'Title 5', description: 'Description', icon: SpsIcon.CALENDAR},\n                            {index: 8, title: 'Title 9', description: 'Description', icon: SpsIcon.CALENDAR},\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                                    data={data}\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 data = [\n                            {index: 4, title: 'Title 5', description: 'Description', icon: SpsIcon.CALENDAR},\n                            {index: 8, title: 'Title 9', description: 'Description', icon: SpsIcon.CALENDAR},\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                                    color={SteppedProgressBarColor.GRAY}\n                                    data={data}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const data = [\n                            {index: 4, title: 'Title 5', description: 'Description', icon: SpsIcon.CALENDAR},\n                            {index: 8, title: 'Title 9', description: 'Description', icon: SpsIcon.CALENDAR},\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                                    color={SteppedProgressBarColor.GRAY}\n                                    data={data}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "]))),
+            },
+            skippedSteps: {
+                description: function () { return React.createElement("h4", null, "Skip steps"); },
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                function Component() {\n                    const data = [{index: 0, skipped: true}];\n\n                    return (\n                        <SpsCard>\n                            <SpsSteppedProgressBar\n                                title=\"Process Name\"\n                                showStepsCounter={true}\n                                stepsCount={12}\n                                completedStepsCount={7}\n                                data={data}\n                            />\n                        </SpsCard>\n                    )\n                }\n            "], ["\n                function Component() {\n                    const data = [{index: 0, skipped: true}];\n\n                    return (\n                        <SpsCard>\n                            <SpsSteppedProgressBar\n                                title=\"Process Name\"\n                                showStepsCounter={true}\n                                stepsCount={12}\n                                completedStepsCount={7}\n                                data={data}\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_4 || (templateObject_4 = __makeTemplateObject(["\n                    function Component() {\n                        const data = [\n                            {index: 4, title: 'Title 5', description: 'Description', icon: SpsIcon.CALENDAR},\n                            {index: 8, title: 'Title 9', description: 'Description', icon: SpsIcon.CALENDAR},\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={10}\n                                    completedStepsCount={10}\n                                    data={data}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const data = [\n                            {index: 4, title: 'Title 5', description: 'Description', icon: SpsIcon.CALENDAR},\n                            {index: 8, title: 'Title 9', description: 'Description', icon: SpsIcon.CALENDAR},\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={10}\n                                    completedStepsCount={10}\n                                    data={data}\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_5 || (templateObject_5 = __makeTemplateObject(["\n                    function Component() {\n                        return (\n                            <SpsCard>\n                                <SpsSteppedProgressBar\n                                    title=\"Process Name\"\n                                    stepsCount={10}\n                                    completedStepsCount={7}\n                                    disabled\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        return (\n                            <SpsCard>\n                                <SpsSteppedProgressBar\n                                    title=\"Process Name\"\n                                    stepsCount={10}\n                                    completedStepsCount={7}\n                                    disabled\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# 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":"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"}

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

@@ -0,0 +1,58 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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",
+    color: "SteppedProgressBarColor",
+    data: "SteppedProgressBarData[]",
+};
+var propTypes = {
+    title: PropTypes.string,
+    stepsCount: PropTypes.number,
+    completedStepsCount: PropTypes.number,
+    disabled: PropTypes.bool,
+    showStepsCounter: PropTypes.bool,
+    color: PropTypes.enumValue(SteppedProgressBarColor),
+    data: PropTypes.arrayOf(PropTypes.impl()),
+};
+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, className = props.className, data = props.data, _b = props.color, color = _b === void 0 ? SteppedProgressBarColor.PURPLE : _b;
+    var dataSet = Array.from(Array(stepsCount))
+        .map(function (_, index) { return (__assign({ id: useElementId(null).current }, data === null || data === void 0 ? void 0 : data.find(function (item) { return item.index === index; }))); });
+    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" }, dataSet.map(function (item, index) { return (React.createElement("li", { id: item.id, key: item.id, className: clsx("sps-stepped-progress-bar__step", completedStepsCount > index && !item.skipped && "sps-stepped-progress-bar__step-complete") },
+                item.icon
+                    && React.createElement(SpsI, { icon: item.icon, size: SpsIconSize.SMALL, className: clsx("d-block", item.index > completedStepsCount - 1 ? "gray400" : "white") }),
+                item.title
+                    && (React.createElement(SpsTooltip, { for: item.id, title: item.title }, item.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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"}

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

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

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

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

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

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

package/dist/out-tsc/summary-list/SpsSummaryList.examples.d.ts

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

package/dist/out-tsc/summary-list/SpsSummaryList.examples.js

@@ -0,0 +1,44 @@
+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 SpsSummaryListExamples = {
+    basic: {
+        label: "Basic Usage",
+        examples: {
+            basic: {
+                jsx: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    <>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey={\"Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey={\"Long Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey={\"Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Long Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                    </>"], ["\n                    <>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey={\"Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey={\"Long Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey={\"Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Long Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                    </>"]))),
+            },
+        },
+    },
+    expandable: {
+        label: "Expandable",
+        description: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            <p>If you put a <code>&lt;SpsSummaryListExpansion&gt;&lt;/SpsSummaryListExpansion&gt;</code>\n            inside a Summary List Row, then it will be expandable to show the content in the expansion\n            element. It can be toggled by clicking on it or by tabbing focus to it and hitting ENTER\n            or SPACEBAR.</p>\n        "], ["\n            <p>If you put a <code>&lt;SpsSummaryListExpansion&gt;&lt;/SpsSummaryListExpansion&gt;</code>\n            inside a Summary List Row, then it will be expandable to show the content in the expansion\n            element. It can be toggled by clicking on it or by tabbing focus to it and hitting ENTER\n            or SPACEBAR.</p>\n        "]))),
+        examples: {
+            expandable: {
+                jsx: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    <>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Long Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListExpansion>\n                                <SpsCard\n                                    headerContent={() => <span>Custom Header</span>}>\n                                    <div>Content</div>\n                                </SpsCard>\n                                <div className=\"text-center mt-3\">\n                                    <SpsButton kind={ButtonKind.LINK}>Show More</SpsButton>\n                                </div>\n                            </SpsSummaryListExpansion>\n                        </SpsSummaryListRow>\n                    </> "], ["\n                    <>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Long Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListExpansion>\n                                <SpsCard\n                                    headerContent={() => <span>Custom Header</span>}>\n                                    <div>Content</div>\n                                </SpsCard>\n                                <div className=\"text-center mt-3\">\n                                    <SpsButton kind={ButtonKind.LINK}>Show More</SpsButton>\n                                </div>\n                            </SpsSummaryListExpansion>\n                        </SpsSummaryListRow>\n                    </> "]))),
+            },
+        },
+    },
+    borderless: {
+        label: "Removing Borders",
+        description: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            <p>Placing the <code>borderless</code> prop on a column will remove its left border.</p>\n        "], ["\n            <p>Placing the <code>borderless</code> prop on a column will remove its left border.</p>\n        "]))),
+        examples: {
+            borderless: {
+                jsx: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    <>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\" borderless>\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Long Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\" borderless>\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                    </>"], ["\n                    <>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\" borderless>\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Long Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\" borderless>\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                    </>"]))),
+            },
+        },
+    },
+    selectable: {
+        label: "Selectable",
+        description: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n            <p>By placing a column with a checkbox and wiring that checkbox to control the\n            <code>selected</code> prop on the row, you can make rows selectable.</p>\n        "], ["\n            <p>By placing a column with a checkbox and wiring that checkbox to control the\n            <code>selected</code> prop on the row, you can make rows selectable.</p>\n        "]))),
+        examples: {
+            selectable: {
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    function Component() {\n                        const [rowIsSelected, setRowIsSelected] = React.useState(true);\n\n                        function handleSelectionChange(event) {\n                            setRowIsSelected(event.target.checked);\n                        }\n\n                        return (\n                            <SpsSummaryListRow selected={rowIsSelected}>\n                                <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                    <SpsCheckbox aria-label=\"Row Selected\" checked={rowIsSelected} onChange={handleSelectionChange}/>\n                                </SpsSummaryListColumn>\n                                <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                    <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                    <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                                </SpsSummaryListColumn>\n                                <SpsSummaryListColumn>\n                                    <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                    <div className=\"d-inline-block align-middle\">\n                                        <div className=\"fs-18\">\n                                            <a href=\"#\">Heading</a>\n                                        </div>\n                                        <div className=\"fs-14\">Sub Heading</div>\n                                    </div>\n                                </SpsSummaryListColumn>\n                                <SpsSummaryListColumn width=\"13.5rem\">\n                                    <SpsKeyValueList inline>\n                                        <SpsKeyValueListItem itemKey=\"Title\">\n                                            Sub copy goes here\n                                        </SpsKeyValueListItem>\n                                        <SpsKeyValueListItem itemKey=\"Long Title\">\n                                            Sub copy goes here\n                                        </SpsKeyValueListItem>\n                                        <SpsKeyValueListItem itemKey=\"Title\">\n                                            Sub copy goes here\n                                        </SpsKeyValueListItem>\n                                    </SpsKeyValueList>\n                                </SpsSummaryListColumn>\n                                <SpsSummaryListColumn width=\"9rem\">\n                                    <SpsKeyValueList>\n                                        <SpsKeyValueListItem itemKey=\"Buying From\">\n                                            75 Companies\n                                            <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                        </SpsKeyValueListItem>\n                                    </SpsKeyValueList>\n                                </SpsSummaryListColumn>\n                                <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                    <SpsDropdown\n                                        label=\"\"\n                                        icon=\"ellipses\"\n                                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                    />\n                                </SpsSummaryListColumn>\n                            </SpsSummaryListRow>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const [rowIsSelected, setRowIsSelected] = React.useState(true);\n\n                        function handleSelectionChange(event) {\n                            setRowIsSelected(event.target.checked);\n                        }\n\n                        return (\n                            <SpsSummaryListRow selected={rowIsSelected}>\n                                <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                    <SpsCheckbox aria-label=\"Row Selected\" checked={rowIsSelected} onChange={handleSelectionChange}/>\n                                </SpsSummaryListColumn>\n                                <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                    <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                    <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                                </SpsSummaryListColumn>\n                                <SpsSummaryListColumn>\n                                    <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                    <div className=\"d-inline-block align-middle\">\n                                        <div className=\"fs-18\">\n                                            <a href=\"#\">Heading</a>\n                                        </div>\n                                        <div className=\"fs-14\">Sub Heading</div>\n                                    </div>\n                                </SpsSummaryListColumn>\n                                <SpsSummaryListColumn width=\"13.5rem\">\n                                    <SpsKeyValueList inline>\n                                        <SpsKeyValueListItem itemKey=\"Title\">\n                                            Sub copy goes here\n                                        </SpsKeyValueListItem>\n                                        <SpsKeyValueListItem itemKey=\"Long Title\">\n                                            Sub copy goes here\n                                        </SpsKeyValueListItem>\n                                        <SpsKeyValueListItem itemKey=\"Title\">\n                                            Sub copy goes here\n                                        </SpsKeyValueListItem>\n                                    </SpsKeyValueList>\n                                </SpsSummaryListColumn>\n                                <SpsSummaryListColumn width=\"9rem\">\n                                    <SpsKeyValueList>\n                                        <SpsKeyValueListItem itemKey=\"Buying From\">\n                                            75 Companies\n                                            <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                        </SpsKeyValueListItem>\n                                    </SpsKeyValueList>\n                                </SpsSummaryListColumn>\n                                <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                    <SpsDropdown\n                                        label=\"\"\n                                        icon=\"ellipses\"\n                                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                    />\n                                </SpsSummaryListColumn>\n                            </SpsSummaryListRow>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//# sourceMappingURL=SpsSummaryList.examples.js.map

package/dist/out-tsc/summary-list/SpsSummaryList.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSummaryList.examples.js","sourceRoot":"","sources":["../../../src/summary-list/SpsSummaryList.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,sBAAsB,GAAoB;IACrD,KAAK,EAAE;QACL,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI,0zLAAA,uvLAwFO,IAAA;aACjB;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,YAAY;QACnB,WAAW,EAAE,IAAI,qaAAA,kWAKZ,IAAA;QACL,QAAQ,EAAE;YACR,UAAU,EAAE;gBACV,GAAG,EAAE,IAAI,q/GAAA,k7GAsDQ,IAAA;aAClB;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,IAAI,qLAAA,kHAEZ,IAAA;QACL,QAAQ,EAAE;YACR,UAAU,EAAE;gBACV,GAAG,EAAE,IAAI,unFAAA,ojFAyCO,IAAA;aACjB;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,YAAY;QACnB,WAAW,EAAE,IAAI,iQAAA,8LAGZ,IAAA;QACL,QAAQ,EAAE;YACR,UAAU,EAAE;gBACV,KAAK,EAAE,IAAI,0wHAAA,usHAyDF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/summary-list/SpsSummaryListColumn.d.ts

@@ -0,0 +1,14 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    borderless: PropTypes.Requireable<boolean>;
+    lean: PropTypes.Requireable<boolean>;
+    leaner: PropTypes.Requireable<boolean>;
+    width: PropTypes.Requireable<string>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsSummaryListColumnProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsSummaryListColumn(props: SpsSummaryListColumnProps): JSX.Element;
+export {};

package/dist/out-tsc/summary-list/SpsSummaryListColumn.js

@@ -0,0 +1,43 @@
+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 * as React from "react";
+import clsx from "clsx";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    borderless: "boolean",
+    lean: "boolean",
+    leaner: "boolean",
+    width: "string",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { borderless: PropTypes.bool, lean: PropTypes.bool, leaner: PropTypes.bool, width: PropTypes.string });
+export function SpsSummaryListColumn(props) {
+    var className = props.className, children = props.children, borderless = props.borderless, lean = props.lean, leaner = props.leaner, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, width = props.width, rest = __rest(props, ["className", "children", "borderless", "lean", "leaner", "data-testid", "unsafelyReplaceClassName", "width"]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-content-row__col", lean && "sps-content-row__col--lean", leaner && "sps-content-row__col--leaner", borderless && "sps-content-row__col--borderless", className);
+    return (React.createElement("div", __assign({ className: classes, style: { width: width } }, rest, { "data-testid": testId + "__col" }), children));
+}
+Object.assign(SpsSummaryListColumn, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsSummaryListColumn",
+});
+//# sourceMappingURL=SpsSummaryListColumn.js.map

package/dist/out-tsc/summary-list/SpsSummaryListColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSummaryListColumn.js","sourceRoot":"","sources":["../../../src/summary-list/SpsSummaryListColumn.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,QAAQ,GAAG;IACf,UAAU,EAAE,SAAS;IACrB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,UAAU,EAAE,SAAS,CAAC,IAAI,EAC1B,IAAI,EAAE,SAAS,CAAC,IAAI,EACpB,MAAM,EAAE,SAAS,CAAC,IAAI,EACtB,KAAK,EAAE,SAAS,CAAC,MAAM,GACxB,CAAC;AAIF,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IAEjE,IAAA,SAAS,GASP,KAAK,UATE,EACT,QAAQ,GAQN,KAAK,SARC,EACR,UAAU,GAOR,KAAK,WAPG,EACV,IAAI,GAMF,KAAK,KANH,EACJ,MAAM,GAKJ,KAAK,OALD,EACS,MAAM,GAInB,KAAK,eAJc,EACrB,wBAAwB,GAGtB,KAAK,yBAHiB,EACxB,KAAK,GAEH,KAAK,MAFF,EACF,IAAI,UACL,KAAK,EAVH,6GAUL,CADQ,CACC;IAEV,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,sBAAsB,EAClD,IAAI,IAAI,4BAA4B,EACpC,MAAM,IAAI,8BAA8B,EACxC,UAAU,IAAI,kCAAkC,EAChD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,sCACE,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,EAAE,KAAK,OAAA,EAAE,IACZ,IAAI,mBACQ,MAAM,UAAO,KAE5B,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,oBAAoB,EAAE;IAClC,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,sBAAsB;CACpC,CAAC,CAAC"}

package/dist/out-tsc/summary-list/SpsSummaryListExpansion.d.ts

@@ -0,0 +1,10 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsSummaryListExpansionProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsSummaryListExpansion(props: SpsSummaryListExpansionProps): JSX.Element;
+export {};

package/dist/out-tsc/summary-list/SpsSummaryListExpansion.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+var propsDoc = {};
+var propTypes = __assign({}, PropTypes.spsGlobalPropTypes);
+export function SpsSummaryListExpansion(props) {
+    var children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "data-testid", "unsafelyReplaceClassName"]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-content-row__expansion", className);
+    return (React.createElement("div", __assign({ className: classes }, rest, { "data-testid": testId + "__expansion" }), children));
+}
+Object.assign(SpsSummaryListExpansion, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsSummaryListExpansion",
+});
+//# sourceMappingURL=SpsSummaryListExpansion.js.map

package/dist/out-tsc/summary-list/SpsSummaryListExpansion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSummaryListExpansion.js","sourceRoot":"","sources":["../../../src/summary-list/SpsSummaryListExpansion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,QAAQ,GAAG,EAAE,CAAC;AAEpB,IAAM,SAAS,gBACV,SAAS,CAAC,kBAAkB,CAChC,CAAC;AAIF,MAAM,UAAU,uBAAuB,CAAC,KAAmC;IAEvE,IAAA,QAAQ,GAKN,KAAK,SALC,EACR,SAAS,GAIP,KAAK,UAJE,EACM,MAAM,GAGnB,KAAK,eAHc,EACrB,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EANH,oEAML,CADQ,CACC;IAEV,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,4BAA4B,EACxD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,sCACE,SAAS,EAAE,OAAO,IACd,IAAI,mBACQ,MAAM,gBAAa,KAElC,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE;IACrC,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,yBAAyB;CACvC,CAAC,CAAC"}