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

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"}

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

@@ -0,0 +1,13 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    expanded: PropTypes.Requireable<boolean>;
+    selected: PropTypes.Requireable<boolean>;
+    onToggle: PropTypes.Requireable<(isExpanded: boolean) => void>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsSummaryListRowProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsSummaryListRow(props: SpsSummaryListRowProps): JSX.Element;
+export {};

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

@@ -0,0 +1,98 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { selectChildren } from "../utils/selectChildren";
+import { usePatchReducer } from "../utils/usePatchReducer";
+import { SpsSummaryListExpansion } from "./SpsSummaryListExpansion";
+var propsDoc = {
+    expanded: "boolean",
+    selected: "boolean",
+    onToggle: "(isExpanded: boolean) => void",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { expanded: PropTypes.bool, selected: PropTypes.bool, onToggle: PropTypes.fun() });
+export function SpsSummaryListRow(props) {
+    var children = props.children, className = props.className, expanded = props.expanded, onToggle = props.onToggle, selected = props.selected, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "expanded", "onToggle", "selected", "data-testid", "unsafelyReplaceClassName"]);
+    var _a = __read(usePatchReducer({
+        isExpanded: expanded,
+        expandable: false,
+    }), 2), state = _a[0], patchState = _a[1];
+    React.useEffect(function () {
+        var expandable = React.Children.toArray(children)
+            .some(function (child) { return React.isValidElement(child) && child.type === SpsSummaryListExpansion; });
+        patchState({ expandable: expandable });
+    }, []);
+    function toggle() {
+        var isExpanded = !state.isExpanded;
+        patchState({ isExpanded: isExpanded });
+        if (onToggle) {
+            onToggle(isExpanded);
+        }
+    }
+    function handleRowClick(event) {
+        event.stopPropagation();
+        toggle();
+    }
+    function handleKeyDown(event) {
+        if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+            event.preventDefault();
+            event.stopPropagation();
+            toggle();
+        }
+    }
+    var classes = clsx(unsafelyReplaceClassName || "sps-summary-list-row", "sps-content-row", state.expandable && "sps-summary-list-row--expandable", state.isExpanded && "sps-content-row--expanded", selected && "sps-summary-list-row--selected", className);
+    var _b = __read(selectChildren(children, [
+        { type: SpsSummaryListExpansion },
+    ]), 2), expansion = _b[0], otherChildren = _b[1];
+    console.warn([
+        "The SpsSummaryListRow component will be replaced by the SpsContentRow component.",
+        "All references to it should be replaced before SpsSummaryListRow is removed.",
+        "Reach out to the design system help Slack channel if you have any questions!",
+    ].join(" "));
+    return (React.createElement("div", __assign({ className: classes, "data-testid": testId }, rest),
+        React.createElement("div", { className: "sps-content-row__col-group", "data-testid": testId + "__col-group", onClick: handleRowClick, onKeyDown: handleKeyDown, tabIndex: 0 }, otherChildren),
+        expansion));
+}
+Object.assign(SpsSummaryListRow, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsSummaryListRow",
+});
+//# sourceMappingURL=SpsSummaryListRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSummaryListRow.js","sourceRoot":"","sources":["../../../src/summary-list/SpsSummaryListRow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,IAAM,QAAQ,GAAG;IACf,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,+BAA+B;CAC1C,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,QAAQ,EAAE,SAAS,CAAC,IAAI,EACxB,QAAQ,EAAE,SAAS,CAAC,IAAI,EACxB,QAAQ,EAAE,SAAS,CAAC,GAAG,EAAiC,GACzD,CAAC;AAIF,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAE3D,IAAA,QAAQ,GAQN,KAAK,SARC,EACR,SAAS,GAOP,KAAK,UAPE,EACT,QAAQ,GAMN,KAAK,SANC,EACR,QAAQ,GAKN,KAAK,SALC,EACR,QAAQ,GAIN,KAAK,SAJC,EACO,MAAM,GAGnB,KAAK,eAHc,EACrB,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EATH,wGASL,CADQ,CACC;IAEJ,IAAA,KAAA,OAAsB,eAAe,CAAC;QAC1C,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,KAAK;KAClB,CAAC,IAAA,EAHK,KAAK,QAAA,EAAE,UAAU,QAGtB,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC;QACd,IAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC;aAChD,IAAI,CAAC,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,uBAAuB,EAArE,CAAqE,CAAC,CAAC;QAC1F,UAAU,CAAC,EAAE,UAAU,YAAA,EAAE,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,MAAM;QACb,IAAM,UAAU,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC;QACrC,UAAU,CAAC,EAAE,UAAU,YAAA,EAAE,CAAC,CAAC;QAC3B,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,UAAU,CAAC,CAAC;SACtB;IACH,CAAC;IAED,SAAS,cAAc,CAAC,KAAuB;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,EAAE,CAAC;IACX,CAAC;IAED,SAAS,aAAa,CAAC,KAA0B;QAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,EAAE;YAC1E,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,MAAM,EAAE,CAAC;SACV;IACH,CAAC;IAED,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,sBAAsB,EAClD,iBAAiB,EACjB,KAAK,CAAC,UAAU,IAAI,kCAAkC,EACtD,KAAK,CAAC,UAAU,IAAI,2BAA2B,EAC/C,QAAQ,IAAI,gCAAgC,EAC5C,SAAS,CACV,CAAC;IAEI,IAAA,KAAA,OAEF,cAAc,CAAC,QAAQ,EAAE;QAC3B,EAAE,IAAI,EAAE,uBAAuB,EAAE;KAClC,CAAC,IAAA,EAHA,SAAS,QAAA,EAAE,aAAa,QAGxB,CAAC;IAEH,OAAO,CAAC,IAAI,CACV;QACE,kFAAkF;QAClF,8EAA8E;QAC9E,8EAA8E;KAC/E,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;IAEF,OAAO,CACL,sCACE,SAAS,EAAE,OAAO,iBACL,MAAM,IACf,IAAI;QAER,6BACE,SAAS,EAAC,4BAA4B,iBACtB,MAAM,gBAAa,EACnC,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,CAAC,IAEV,aAAa,CACV;QACL,SAAS,CACN,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,iBAAiB,EAAE;IAC/B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,mBAAmB;CACjC,CAAC,CAAC"}

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

@@ -0,0 +1,4 @@
+export * from "./SpsSummaryListRow";
+export * from "./SpsSummaryListColumn";
+export * from "./SpsSummaryListExpansion";
+export * from "./SpsSummaryList.examples";

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

@@ -0,0 +1,5 @@
+export * from "./SpsSummaryListRow";
+export * from "./SpsSummaryListColumn";
+export * from "./SpsSummaryListExpansion";
+export * from "./SpsSummaryList.examples";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/summary-list/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC"}

package/dist/out-tsc/table/SpsTable.d.ts

@@ -0,0 +1,14 @@
+import type { SortChangeHandler, SortedColumn } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    onSortChange: PropTypes.Requireable<SortChangeHandler>;
+    sort: PropTypes.Requireable<SortedColumn[]>;
+    selectable: PropTypes.Requireable<boolean>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsTableProps = PropTypes.InferTS<typeof propTypes, HTMLTableElement>;
+export declare function SpsTable(props: SpsTableProps): JSX.Element;
+export {};

package/dist/out-tsc/table/SpsTable.examples.d.ts

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