@spscommerce/ds-react 5.20.2 → 5.20.3-ie

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;

package/dist/out-tsc/table/SpsTable.examples.js

@@ -0,0 +1,138 @@
+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 { ButtonKind } from "@spscommerce/ds-shared";
+import { SpsButton } from "../button";
+export var SpsTableExamples = {
+    generalUsage: {
+        label: "General Usage",
+        customSection: function () { return (React.createElement("section", { id: "table-general-usage" },
+            React.createElement("div", { className: "flex-color-header" },
+                React.createElement("h4", null, "General Usage"),
+                React.createElement(SpsButton, { onClick: function () {
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                    }, kind: ButtonKind.LINK }, "Back to Top")),
+            React.createElement("h5", null, "Use Tables:"),
+            React.createElement("ul", { className: "sps-body-14" },
+                React.createElement("li", null, "Each record has more than 6 points of data"),
+                React.createElement("li", null, "When more records need to be shown in the vertical space"),
+                React.createElement("li", null, "When sorting options need to be precise (needs better explanation)."),
+                React.createElement("li", null, "When tabular views are the expected/conventional view of thet data being displayed (one example: if the data is to be exported into a spreadsheet view).")),
+            React.createElement("h5", null, "Avoid Tables:"),
+            React.createElement("ul", { className: "sps-body-14" },
+                React.createElement("li", null, "When large images need to be included amongst the data.")),
+            React.createElement("div", null, "For additional help deciding which option best suits the data being displayed, refer to the List Usage Matrix."))); },
+    },
+    basic: {
+        label: "Standard Tables",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "sps-body-14" }, "Tables display tabular data in columns and rows with a header row used to identify the type of content in each column. The most common style of content displayed in tables is text (Small Body Copy), but additional elements such as tags and icons can be used when necessary."),
+                React.createElement("br", null),
+                React.createElement("div", { className: "sps-body-14" },
+                    "Tables can be used in conjunction with the",
+                    " ",
+                    React.createElement(NavigateTo, { to: "List Toolbar" }, "List Toolbar"),
+                    " and",
+                    " ",
+                    React.createElement(NavigateTo, { to: "Pagination" }, "Pagination"),
+                    " components for extended capabilities.")));
+        },
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const items = [\n                            {\n                                spine: 2,\n                                title: \"Seven Samurai\",\n                                year: 1954,\n                                director: \"Akira Kurosawa\",\n                                countries: [\"Japan\"],\n                                price: \"$39.96\"\n                            },\n                            {\n                                spine: 29,\n                                title: \"Picnic at Hanging Rock\",\n                                year: 1975,\n                                director: \"Peter Weir\",\n                                countries: [\"Australia\"],\n                                price: \"$39.95\"\n                            },\n                            {\n                                spine: 62,\n                                title: \"The Passion of Joan of Arc\",\n                                year: 1928,\n                                director: \"Carl Theodor Dreyer\",\n                                countries: [\"France\"],\n                                price: \"$31.96\"\n                            },\n                            {\n                                spine: 484,\n                                title: \"Jeanne Dielman, 23, quai du Commerce, 1080 Bruxelles\",\n                                year: 1975,\n                                director: \"Chantal Akerman\",\n                                countries: [\"France\", \"Belgium\"],\n                                price: \"$31.96\"\n                            },\n                            {\n                                spine: 701,\n                                title: \"Persona\",\n                                year: 1966,\n                                director: \"Ingmar Bergman\",\n                                countries: [\"Sweden\"],\n                                price: \"$31.96\"\n                            },\n                            {\n                                spine: 740,\n                                title: \"The Bitter Tears of Petra von Kant\",\n                                year: 1972,\n                                director: \"Rainer Werner Fassbinder\",\n                                countries: [\"West Germany\"],\n                                price: \"$31.96\"\n                            },\n                            {\n                                spine: 782,\n                                title: \"The Apu Trilogy\",\n                                year: 1959,\n                                director: \"Satyajit Ray\",\n                                countries: [\"India\"],\n                                price: \"$79.96\"\n                            },\n                            {\n                                spine: 888,\n                                title: \"Stalker\",\n                                year: 1979,\n                                director: \"Andrei Tarkovsky\",\n                                countries: [\"Soviet Union\"],\n                                price: \"$31.96\"\n                            }\n                        ];\n\n                        return (\n                            <>\n                            <h5>Building Standard Tables</h5>\n                            <SpsTable>\n                                <SpsTableHead>\n                                    <SpsTableRow>\n                                        <SpsTableHeader>Spine#</SpsTableHeader>\n                                        <SpsTableHeader>Title</SpsTableHeader>\n                                        <SpsTableHeader>Year</SpsTableHeader>\n                                        <SpsTableHeader>Director</SpsTableHeader>\n                                        <SpsTableHeader>Countries</SpsTableHeader>\n                                        <SpsTableHeader className=\"text-right\">Price</SpsTableHeader>\n                                    </SpsTableRow>\n                                </SpsTableHead>\n                                <SpsTableBody>\n                                    {items.map((row, index) => {\n                                        return (\n                                            <SpsTableRow key={index}>\n                                                <SpsTableCell>{row[\"spine\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"countries\"]}</SpsTableCell>\n                                                <SpsTableCell className=\"text-right\">{row[\"price\"]}</SpsTableCell>\n                                            </SpsTableRow>\n                                        );\n                                    })}\n                                </SpsTableBody>\n                            </SpsTable>\n                            </>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const items = [\n                            {\n                                spine: 2,\n                                title: \"Seven Samurai\",\n                                year: 1954,\n                                director: \"Akira Kurosawa\",\n                                countries: [\"Japan\"],\n                                price: \"$39.96\"\n                            },\n                            {\n                                spine: 29,\n                                title: \"Picnic at Hanging Rock\",\n                                year: 1975,\n                                director: \"Peter Weir\",\n                                countries: [\"Australia\"],\n                                price: \"$39.95\"\n                            },\n                            {\n                                spine: 62,\n                                title: \"The Passion of Joan of Arc\",\n                                year: 1928,\n                                director: \"Carl Theodor Dreyer\",\n                                countries: [\"France\"],\n                                price: \"$31.96\"\n                            },\n                            {\n                                spine: 484,\n                                title: \"Jeanne Dielman, 23, quai du Commerce, 1080 Bruxelles\",\n                                year: 1975,\n                                director: \"Chantal Akerman\",\n                                countries: [\"France\", \"Belgium\"],\n                                price: \"$31.96\"\n                            },\n                            {\n                                spine: 701,\n                                title: \"Persona\",\n                                year: 1966,\n                                director: \"Ingmar Bergman\",\n                                countries: [\"Sweden\"],\n                                price: \"$31.96\"\n                            },\n                            {\n                                spine: 740,\n                                title: \"The Bitter Tears of Petra von Kant\",\n                                year: 1972,\n                                director: \"Rainer Werner Fassbinder\",\n                                countries: [\"West Germany\"],\n                                price: \"$31.96\"\n                            },\n                            {\n                                spine: 782,\n                                title: \"The Apu Trilogy\",\n                                year: 1959,\n                                director: \"Satyajit Ray\",\n                                countries: [\"India\"],\n                                price: \"$79.96\"\n                            },\n                            {\n                                spine: 888,\n                                title: \"Stalker\",\n                                year: 1979,\n                                director: \"Andrei Tarkovsky\",\n                                countries: [\"Soviet Union\"],\n                                price: \"$31.96\"\n                            }\n                        ];\n\n                        return (\n                            <>\n                            <h5>Building Standard Tables</h5>\n                            <SpsTable>\n                                <SpsTableHead>\n                                    <SpsTableRow>\n                                        <SpsTableHeader>Spine#</SpsTableHeader>\n                                        <SpsTableHeader>Title</SpsTableHeader>\n                                        <SpsTableHeader>Year</SpsTableHeader>\n                                        <SpsTableHeader>Director</SpsTableHeader>\n                                        <SpsTableHeader>Countries</SpsTableHeader>\n                                        <SpsTableHeader className=\"text-right\">Price</SpsTableHeader>\n                                    </SpsTableRow>\n                                </SpsTableHead>\n                                <SpsTableBody>\n                                    {items.map((row, index) => {\n                                        return (\n                                            <SpsTableRow key={index}>\n                                                <SpsTableCell>{row[\"spine\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"countries\"]}</SpsTableCell>\n                                                <SpsTableCell className=\"text-right\">{row[\"price\"]}</SpsTableCell>\n                                            </SpsTableRow>\n                                        );\n                                    })}\n                                </SpsTableBody>\n                            </SpsTable>\n                            </>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    sorting: {
+        label: "Sorting",
+        description: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "sps-body-14" },
+                "The ability to sort the records in a table by a specific column is a common feature. Sorting options are alphabetical (A-Z or Z-A) for columns containing standard text and numerically (highest-to-lowest or lowest-to-highest) for columns containing numerical values.",
+                " "),
+            React.createElement("br", null),
+            React.createElement("div", { className: "sps-body-14" }, "Sorting is applied on a column-by-column basis and should only be applied to columns that present a practical value when sorted alphabetically or numercally (i.e., not every column in a table requires sorting)."))); },
+        examples: {
+            sorting: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                  function DemoComponent() {\n                    const items = [\n                      {\n                        spine: 2,\n                        title: \"Seven Samurai\",\n                        year: 1954,\n                        director: \"Akira Kurosawa\",\n                        runtime: 207,\n                        aspect_ratio: \"1.33:1\",\n                        countries: \"Japan\",\n                        languages: \"Japanese\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 29,\n                        title: \"Picnic at Hanging Rock\",\n                        year: 1975,\n                        director: \"Peter Weir\",\n                        runtime: 107,\n                        aspect_ratio: \"1.78:1\",\n                        countries: \"Australia\",\n                        languages: \"English\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 62,\n                        title: \"The Passion of Joan of Arc\",\n                        year: 1928,\n                        director: \"Carl Theodor Dreyer\",\n                        runtime: 81,\n                        aspect_ratio: \"1.33:1\",\n                        countries: \"France\",\n                        languages: \"French\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 484,\n                        title: \"Jeanne Dielman, 23, quai du Commerce, 1080 Bruxelles\",\n                        year: 1975,\n                        director: \"Chantal Akerman\",\n                        runtime: 201,\n                        aspect_ratio: \"1.66:1\",\n                        countries: \"France, Belgium\",\n                        languages: \"French\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 701,\n                        title: \"Persona\",\n                        year: 1966,\n                        director: \"Ingmar Bergman\",\n                        runtime: 83,\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"Sweden\",\n                        languages: \"Swedish\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 740,\n                        title: \"The Bitter Tears of Petra von Kant\",\n                        year: 1972,\n                        director: \"Rainer Werner Fassbinder\",\n                        runtime: 125,\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"West Germany\",\n                        languages: \"German\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 782,\n                        title: \"The Apu Trilogy\",\n                        year: 1959,\n                        director: \"Satyajit Ray\",\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"India\",\n                        languages: \"Bengali\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 888,\n                        title: \"Stalker\",\n                        year: 1979,\n                        director: \"Andrei Tarkovsky\",\n                        runtime: 161,\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"Soviet Union\",\n                        languages: \"Russian\",\n                        price: \"$31.96\"\n                      }\n                    ]\n\n                    const initialSort = [{ key: \"title\", direction: SortDirection.ASCENDING }]\n\n                    const [itemsSorted, setItemsSorted] = React.useState(items)\n\n                    function ignoreArticles(value) {\n                      return typeof value === \"string\"\n                        ? value.replace(/^(The|A) /, \"\")\n                        : value\n                    }\n\n                    function sortItems([newSort]) {\n                      const { key, direction } = newSort;\n                      itemsSorted.sort((a, b) =>\n                        (direction === SortDirection.ASCENDING ? 1 : -1)\n                        * (ignoreArticles(a[key]) >= ignoreArticles(b[key]) ? 1 : -1)\n                      )\n                      setItemsSorted([...itemsSorted])\n                    }\n\n                    React.useEffect(() => {\n                      sortItems(initialSort)\n                    }, [])\n\n                    return (\n                      <SpsTable\n                        sort={initialSort}\n                        onSortChange={sortItems}\n                      >\n                        <SpsTableHead>\n                          <SpsTableRow>\n                            <SpsTableHeader sortKey=\"spine\">Spine #</SpsTableHeader>\n                            <SpsTableHeader sortKey=\"title\">Title</SpsTableHeader>\n                            <SpsTableHeader sortKey=\"year\">Year</SpsTableHeader>\n                            <SpsTableHeader sortKey=\"director\">Director</SpsTableHeader>\n                            <SpsTableHeader>Countries</SpsTableHeader>\n                            <SpsTableHeader sortKey=\"price\" className=\"text-right\">\n                              Price\n                            </SpsTableHeader>\n                          </SpsTableRow>\n                        </SpsTableHead>\n                        <SpsTableBody>\n                          {itemsSorted.map((row, i) => {\n                            return (\n                              <SpsTableRow key={i}>\n                                <SpsTableCell>{row[\"spine\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"countries\"]}</SpsTableCell>\n                                <SpsTableCell className=\"text-right\">\n                                  {row[\"price\"]}\n                                </SpsTableCell>\n                              </SpsTableRow>\n                            )\n                          })}\n                        </SpsTableBody>\n                      </SpsTable>\n                    )\n                  }\n                "], ["\n                  function DemoComponent() {\n                    const items = [\n                      {\n                        spine: 2,\n                        title: \"Seven Samurai\",\n                        year: 1954,\n                        director: \"Akira Kurosawa\",\n                        runtime: 207,\n                        aspect_ratio: \"1.33:1\",\n                        countries: \"Japan\",\n                        languages: \"Japanese\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 29,\n                        title: \"Picnic at Hanging Rock\",\n                        year: 1975,\n                        director: \"Peter Weir\",\n                        runtime: 107,\n                        aspect_ratio: \"1.78:1\",\n                        countries: \"Australia\",\n                        languages: \"English\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 62,\n                        title: \"The Passion of Joan of Arc\",\n                        year: 1928,\n                        director: \"Carl Theodor Dreyer\",\n                        runtime: 81,\n                        aspect_ratio: \"1.33:1\",\n                        countries: \"France\",\n                        languages: \"French\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 484,\n                        title: \"Jeanne Dielman, 23, quai du Commerce, 1080 Bruxelles\",\n                        year: 1975,\n                        director: \"Chantal Akerman\",\n                        runtime: 201,\n                        aspect_ratio: \"1.66:1\",\n                        countries: \"France, Belgium\",\n                        languages: \"French\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 701,\n                        title: \"Persona\",\n                        year: 1966,\n                        director: \"Ingmar Bergman\",\n                        runtime: 83,\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"Sweden\",\n                        languages: \"Swedish\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 740,\n                        title: \"The Bitter Tears of Petra von Kant\",\n                        year: 1972,\n                        director: \"Rainer Werner Fassbinder\",\n                        runtime: 125,\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"West Germany\",\n                        languages: \"German\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 782,\n                        title: \"The Apu Trilogy\",\n                        year: 1959,\n                        director: \"Satyajit Ray\",\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"India\",\n                        languages: \"Bengali\",\n                        price: \"$31.96\"\n                      },\n                      {\n                        spine: 888,\n                        title: \"Stalker\",\n                        year: 1979,\n                        director: \"Andrei Tarkovsky\",\n                        runtime: 161,\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"Soviet Union\",\n                        languages: \"Russian\",\n                        price: \"$31.96\"\n                      }\n                    ]\n\n                    const initialSort = [{ key: \"title\", direction: SortDirection.ASCENDING }]\n\n                    const [itemsSorted, setItemsSorted] = React.useState(items)\n\n                    function ignoreArticles(value) {\n                      return typeof value === \"string\"\n                        ? value.replace(/^(The|A) /, \"\")\n                        : value\n                    }\n\n                    function sortItems([newSort]) {\n                      const { key, direction } = newSort;\n                      itemsSorted.sort((a, b) =>\n                        (direction === SortDirection.ASCENDING ? 1 : -1)\n                        * (ignoreArticles(a[key]) >= ignoreArticles(b[key]) ? 1 : -1)\n                      )\n                      setItemsSorted([...itemsSorted])\n                    }\n\n                    React.useEffect(() => {\n                      sortItems(initialSort)\n                    }, [])\n\n                    return (\n                      <SpsTable\n                        sort={initialSort}\n                        onSortChange={sortItems}\n                      >\n                        <SpsTableHead>\n                          <SpsTableRow>\n                            <SpsTableHeader sortKey=\"spine\">Spine #</SpsTableHeader>\n                            <SpsTableHeader sortKey=\"title\">Title</SpsTableHeader>\n                            <SpsTableHeader sortKey=\"year\">Year</SpsTableHeader>\n                            <SpsTableHeader sortKey=\"director\">Director</SpsTableHeader>\n                            <SpsTableHeader>Countries</SpsTableHeader>\n                            <SpsTableHeader sortKey=\"price\" className=\"text-right\">\n                              Price\n                            </SpsTableHeader>\n                          </SpsTableRow>\n                        </SpsTableHead>\n                        <SpsTableBody>\n                          {itemsSorted.map((row, i) => {\n                            return (\n                              <SpsTableRow key={i}>\n                                <SpsTableCell>{row[\"spine\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"countries\"]}</SpsTableCell>\n                                <SpsTableCell className=\"text-right\">\n                                  {row[\"price\"]}\n                                </SpsTableCell>\n                              </SpsTableRow>\n                            )\n                          })}\n                        </SpsTableBody>\n                      </SpsTable>\n                    )\n                  }\n                "]))),
+            },
+        },
+    },
+    wrap: {
+        label: "Wrapping Content",
+        description: function () { return (React.createElement("div", { className: "sps-body-14" }, "Cells in a column can be set to a fixed width to allow text wrapping when it benefits the readability of the content in that cell. This should be limited to content that is generally longer than a short phrase such as longer sentences or short paragraphs. Including long-form text such as paragraphs, however, should be avoided if possible.")); },
+        examples: {
+            wrapping: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const items = [\n                            {\n                              title: \"Seven Samurai\",\n                              year: 1954,\n                              director: \"Akira Kurosawa\",\n                              summary:\n                                \"One of the most thrilling movie epics of all time, Seven Samurai (Shichinin no samurai) tells the story of a sixteenth-century village whose desperate inhabitants hire the eponymous warriors to protect them from invading bandits. This three-hour ride from Akira Kurosawa\u2014featuring legendary actors Toshiro Mifune and Takashi Shimura\u2014seamlessly weaves philosophy and entertainment, delicate human emotions and relentless action, into a rich, evocative, and unforgettable tale of courage and hope.\"\n                            },\n                            {\n                              title: \"Picnic at Hanging Rock\",\n                              year: 1975,\n                              director: \"Peter Weir\",\n                              summary:\n                                \"This sensual and striking chronicle of a disappearance and its aftermath put director Peter Weir on the map and helped usher in a new era of Australian cinema. Based on an acclaimed 1967 novel by Joan Lindsay, Picnic at Hanging Rock is set at the turn of the twentieth century and concerns a small group of students from an all- female college who vanish, along with a chaperone, while on a St. Valentine\u2019s Day outing. Less a mystery than a journey into the mystic, as well as an inquiry into issues of class and sexual repression in Australian society, Weir\u2019s gorgeous, disquieting film is a work of poetic horror whose secrets haunt viewers to this day.\"\n                            },\n                            {\n                              title: \"The Passion of Joan of Arc\",\n                              year: 1928,\n                              director: \"Carl Theodor Dreyer\",\n                              summary:\n                                \"Spiritual rapture and institutional hypocrisy come to stark, vivid life in one of the most transcendent masterpieces of the silent era. Chronicling the trial of Joan of Arc in the hours leading up to her execution, Danish master Carl Theodor Dreyer depicts her torment with startling immediacy, employing an array of techniques\u2014expressionistic lighting, interconnected sets, painfully intimate close-ups\u2014to immerse viewers in her subjective experience. Anchoring Dreyer\u2019s audacious formal experimentation is a legendary performance by Ren\u00E9e Falconetti, whose haunted face channels both the agony and the ecstasy of martyrdom.\"\n                            },\n                            {\n                              title: \"Persona\",\n                              year: 1966,\n                              director: \"Ingmar Bergman\",\n                              summary:\n                                \"By the midsixties, Ingmar Bergman had already conjured many of the cinema\u2019s most unforgettable images. But with the radical Persona, he attained new levels of visual poetry. In the first of a series of legendary performances for Bergman, Liv Ullmann plays a stage actor who has inexplicably gone mute; an equally mesmerizing Bibi Andersson is the garrulous young nurse caring for her in a remote island cottage. While isolated together there, the women undergo a mysterious spiritual and emotional transference. Performed with astonishing nuance and shot in stark contrast and soft light by Sven Nykvist, the influential Persona is a penetrating, dreamlike work of profound psychological depth.\"\n                            },\n                            {\n                              title: \"The Bitter Tears of Petra von Kant\",\n                              year: 1972,\n                              director: \"Rainer Werner Fassbinder\",\n                              summary:\n                                \"In the early 1970s, Rainer Werner Fassbinder discovered the American melodramas of Douglas Sirk and was inspired by them to begin working in a new, more intensely emotional register. One of the first and best-loved films of this period in his career is The Bitter Tears of Petra von Kant, which balances a realistic depiction of tormented romance with staging that remains true to the director\u2019s roots in experimental theater. This unforgettable, unforgiving dissection of the imbalanced relationship between a haughty fashion designer (Margit Carstensen) and a beautiful but icy ingenue (Hanna Schygulla)\u2014based, in a sly gender reversal, on the writer-director\u2019s own desperate obsession with a young actor\u2014is a true Fassbinder affair, featuring exquisitely claustrophobic cinematography by Michael Ballhaus and full-throttle performances by an all-female cast.\"\n                            },\n                            {\n                              title: \"The Apu Trilogy\",\n                              year: 1959,\n                              director: \"Satyajit Ray\",\n                              summary:\n                                \"Two decades after its original negatives were burned in a fire, Satyajit Ray\u2019s breathtaking milestone of world cinema rises from the ashes in a meticulously reconstructed new restoration. The Apu Trilogy brought India into the golden age of international art-house film, following one indelible character, a free-spirited child in rural Bengal who matures into an adolescent urban student and finally a sensitive man of the world. These delicate masterworks\u2014Pather Panchali (Song of the Little Road), Aparajito (The Unvanquished), and Apur Sansar (The World of Apu)\u2014based on two books by Bibhutibhusan Banerjee, were shot over the course of five years, and each stands on its own as a tender, visually radiant journey. They are among the most achingly beautiful, richly humane movies ever made\u2014essential works for any film lover.\",\n                            },\n                            {\n                              title: \"Stalker\",\n                              year: 1979,\n                              director: \"Andrei Tarkovsky\",\n                              summary:\n                                \"Andrei Tarkovsky\u2019s final Soviet feature is a metaphys\u00ADical journey through an enigmatic postapocalyptic landscape, and a rarefied cinematic experience like no other. A hired guide\u2014the Stalker\u2014leads a writer and a professor into the heart of the Zone, the restricted site of a long-ago disaster, where the three men eventually zero in on the Room, a place rumored to fulfill one\u2019s most deeply held desires. Adapting a science-fiction novel by Arkady and Boris Strugatsky, Tarkovsky created an immersive world with a wealth of material detail and a sense of organic atmosphere. A religious allegory, a reflection of contemporaneous political anxieties, a meditation on film itself\u2014Stalker envelops the viewer by opening up a multitude of possible meanings.\"\n                            }\n                          ];\n\n                        return (\n                            <SpsTable>\n                                <SpsTableHead>\n                                    <SpsTableRow>\n                                        <SpsTableHeader>Title</SpsTableHeader>\n                                        <SpsTableHeader>Year</SpsTableHeader>\n                                        <SpsTableHeader>Director</SpsTableHeader>\n                                        <SpsTableHeader>Summary</SpsTableHeader>\n                                    </SpsTableRow>\n                                </SpsTableHead>\n                                <SpsTableBody>\n                                    {items.map((row, index) => {\n                                        return (\n                                            <SpsTableRow key={index}>\n                                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                                <SpsTableCell wrap={400}>{row[\"summary\"]}</SpsTableCell>\n                                            </SpsTableRow>\n                                        );\n                                    })}\n                                </SpsTableBody>\n                            </SpsTable>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const items = [\n                            {\n                              title: \"Seven Samurai\",\n                              year: 1954,\n                              director: \"Akira Kurosawa\",\n                              summary:\n                                \"One of the most thrilling movie epics of all time, Seven Samurai (Shichinin no samurai) tells the story of a sixteenth-century village whose desperate inhabitants hire the eponymous warriors to protect them from invading bandits. This three-hour ride from Akira Kurosawa\u2014featuring legendary actors Toshiro Mifune and Takashi Shimura\u2014seamlessly weaves philosophy and entertainment, delicate human emotions and relentless action, into a rich, evocative, and unforgettable tale of courage and hope.\"\n                            },\n                            {\n                              title: \"Picnic at Hanging Rock\",\n                              year: 1975,\n                              director: \"Peter Weir\",\n                              summary:\n                                \"This sensual and striking chronicle of a disappearance and its aftermath put director Peter Weir on the map and helped usher in a new era of Australian cinema. Based on an acclaimed 1967 novel by Joan Lindsay, Picnic at Hanging Rock is set at the turn of the twentieth century and concerns a small group of students from an all- female college who vanish, along with a chaperone, while on a St. Valentine\u2019s Day outing. Less a mystery than a journey into the mystic, as well as an inquiry into issues of class and sexual repression in Australian society, Weir\u2019s gorgeous, disquieting film is a work of poetic horror whose secrets haunt viewers to this day.\"\n                            },\n                            {\n                              title: \"The Passion of Joan of Arc\",\n                              year: 1928,\n                              director: \"Carl Theodor Dreyer\",\n                              summary:\n                                \"Spiritual rapture and institutional hypocrisy come to stark, vivid life in one of the most transcendent masterpieces of the silent era. Chronicling the trial of Joan of Arc in the hours leading up to her execution, Danish master Carl Theodor Dreyer depicts her torment with startling immediacy, employing an array of techniques\u2014expressionistic lighting, interconnected sets, painfully intimate close-ups\u2014to immerse viewers in her subjective experience. Anchoring Dreyer\u2019s audacious formal experimentation is a legendary performance by Ren\u00E9e Falconetti, whose haunted face channels both the agony and the ecstasy of martyrdom.\"\n                            },\n                            {\n                              title: \"Persona\",\n                              year: 1966,\n                              director: \"Ingmar Bergman\",\n                              summary:\n                                \"By the midsixties, Ingmar Bergman had already conjured many of the cinema\u2019s most unforgettable images. But with the radical Persona, he attained new levels of visual poetry. In the first of a series of legendary performances for Bergman, Liv Ullmann plays a stage actor who has inexplicably gone mute; an equally mesmerizing Bibi Andersson is the garrulous young nurse caring for her in a remote island cottage. While isolated together there, the women undergo a mysterious spiritual and emotional transference. Performed with astonishing nuance and shot in stark contrast and soft light by Sven Nykvist, the influential Persona is a penetrating, dreamlike work of profound psychological depth.\"\n                            },\n                            {\n                              title: \"The Bitter Tears of Petra von Kant\",\n                              year: 1972,\n                              director: \"Rainer Werner Fassbinder\",\n                              summary:\n                                \"In the early 1970s, Rainer Werner Fassbinder discovered the American melodramas of Douglas Sirk and was inspired by them to begin working in a new, more intensely emotional register. One of the first and best-loved films of this period in his career is The Bitter Tears of Petra von Kant, which balances a realistic depiction of tormented romance with staging that remains true to the director\u2019s roots in experimental theater. This unforgettable, unforgiving dissection of the imbalanced relationship between a haughty fashion designer (Margit Carstensen) and a beautiful but icy ingenue (Hanna Schygulla)\u2014based, in a sly gender reversal, on the writer-director\u2019s own desperate obsession with a young actor\u2014is a true Fassbinder affair, featuring exquisitely claustrophobic cinematography by Michael Ballhaus and full-throttle performances by an all-female cast.\"\n                            },\n                            {\n                              title: \"The Apu Trilogy\",\n                              year: 1959,\n                              director: \"Satyajit Ray\",\n                              summary:\n                                \"Two decades after its original negatives were burned in a fire, Satyajit Ray\u2019s breathtaking milestone of world cinema rises from the ashes in a meticulously reconstructed new restoration. The Apu Trilogy brought India into the golden age of international art-house film, following one indelible character, a free-spirited child in rural Bengal who matures into an adolescent urban student and finally a sensitive man of the world. These delicate masterworks\u2014Pather Panchali (Song of the Little Road), Aparajito (The Unvanquished), and Apur Sansar (The World of Apu)\u2014based on two books by Bibhutibhusan Banerjee, were shot over the course of five years, and each stands on its own as a tender, visually radiant journey. They are among the most achingly beautiful, richly humane movies ever made\u2014essential works for any film lover.\",\n                            },\n                            {\n                              title: \"Stalker\",\n                              year: 1979,\n                              director: \"Andrei Tarkovsky\",\n                              summary:\n                                \"Andrei Tarkovsky\u2019s final Soviet feature is a metaphys\u00ADical journey through an enigmatic postapocalyptic landscape, and a rarefied cinematic experience like no other. A hired guide\u2014the Stalker\u2014leads a writer and a professor into the heart of the Zone, the restricted site of a long-ago disaster, where the three men eventually zero in on the Room, a place rumored to fulfill one\u2019s most deeply held desires. Adapting a science-fiction novel by Arkady and Boris Strugatsky, Tarkovsky created an immersive world with a wealth of material detail and a sense of organic atmosphere. A religious allegory, a reflection of contemporaneous political anxieties, a meditation on film itself\u2014Stalker envelops the viewer by opening up a multitude of possible meanings.\"\n                            }\n                          ];\n\n                        return (\n                            <SpsTable>\n                                <SpsTableHead>\n                                    <SpsTableRow>\n                                        <SpsTableHeader>Title</SpsTableHeader>\n                                        <SpsTableHeader>Year</SpsTableHeader>\n                                        <SpsTableHeader>Director</SpsTableHeader>\n                                        <SpsTableHeader>Summary</SpsTableHeader>\n                                    </SpsTableRow>\n                                </SpsTableHead>\n                                <SpsTableBody>\n                                    {items.map((row, index) => {\n                                        return (\n                                            <SpsTableRow key={index}>\n                                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                                <SpsTableCell wrap={400}>{row[\"summary\"]}</SpsTableCell>\n                                            </SpsTableRow>\n                                        );\n                                    })}\n                                </SpsTableBody>\n                            </SpsTable>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    horizontalScroll: {
+        label: "Horizontal Scrolling",
+        description: function () { return (React.createElement("div", { className: "sps-body-14" }, "Some table may require more content than will fit on the page horizontally. Horizontal scrolling allows users to scroll left and right inside the table to view all existing content.")); },
+        examples: {
+            scroll: {
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const items = [\n                            {\n                              spine: 2,\n                              title: \"Seven Samurai\",\n                              year: 1954,\n                              director: \"Akira Kurosawa\",\n                              runtime: 207,\n                              aspect_ratio: \"1.33:1\",\n                              countries: \"Japan\",\n                              languages: \"Japanese\",\n                              summary:\n                                \"One of the most thrilling movie epics of all time, Seven Samurai (Shichinin no samurai) tells the story of a sixteenth-century village whose desperate inhabitants hire the eponymous warriors to protect them from invading bandits. This three-hour ride from Akira Kurosawa\u2014featuring legendary actors Toshiro Mifune and Takashi Shimura\u2014seamlessly weaves philosophy and entertainment, delicate human emotions and relentless action, into a rich, evocative, and unforgettable tale of courage and hope.\",\n                              price: \"$39.96\"\n                            },\n                            {\n                              spine: 29,\n                              title: \"Picnic at Hanging Rock\",\n                              year: 1975,\n                              director: \"Peter Weir\",\n                              runtime: 107,\n                              aspect_ratio: \"1.78:1\",\n                              countries: \"Australia\",\n                              languages: \"English\",\n                              summary:\n                                \"This sensual and striking chronicle of a disappearance and its aftermath put director Peter Weir on the map and helped usher in a new era of Australian cinema. Based on an acclaimed 1967 novel by Joan Lindsay, Picnic at Hanging Rock is set at the turn of the twentieth century and concerns a small group of students from an all- female college who vanish, along with a chaperone, while on a St. Valentine\u2019s Day outing. Less a mystery than a journey into the mystic, as well as an inquiry into issues of class and sexual repression in Australian society, Weir\u2019s gorgeous, disquieting film is a work of poetic horror whose secrets haunt viewers to this day.\",\n                              price: \"$39.95\"\n                            },\n                            {\n                              spine: 62,\n                              title: \"The Passion of Joan of Arc\",\n                              year: 1928,\n                              director: \"Carl Theodor Dreyer\",\n                              runtime: 81,\n                              aspect_ratio: \"1.33:1\",\n                              countries: \"France\",\n                              languages: \"French\",\n                              summary:\n                                \"Spiritual rapture and institutional hypocrisy come to stark, vivid life in one of the most transcendent masterpieces of the silent era. Chronicling the trial of Joan of Arc in the hours leading up to her execution, Danish master Carl Theodor Dreyer depicts her torment with startling immediacy, employing an array of techniques\u2014expressionistic lighting, interconnected sets, painfully intimate close-ups\u2014to immerse viewers in her subjective experience. Anchoring Dreyer\u2019s audacious formal experimentation is a legendary performance by Ren\u00E9e Falconetti, whose haunted face channels both the agony and the ecstasy of martyrdom.\",\n                              price: \"$31.96\"\n                            },\n                            {\n                              spine: 484,\n                              title: \"Jeanne Dielman, 23, quai du Commerce, 1080 Bruxelles\",\n                              year: 1975,\n                              director: \"Chantal Akerman\",\n                              runtime: 201,\n                              aspect_ratio: \"1.66:1\",\n                              countries: \"France, Belgium\",\n                              languages: \"French\",\n                              summary:\n                                \"A singular work in film history, Chantal Akerman\u2019s Jeanne Dielman, 23, quai du Commerce, 1080 Bruxelles meticulously details, with a sense of impending doom, the daily routine of a middle-aged widow, whose chores include making the beds, cooking dinner for her son, and turning the occasional trick. In its enormous spareness, Akerman\u2019s film seems simple, but it encompasses an entire world. Whether seen as an exacting character study or as one of cinema\u2019s most hypnotic and complete depictions of space and time, Jeanne Dielman is an astonishing, compelling movie experiment, one that has been analyzed and argued over for decades.\",\n                              price: \"$31.96\"\n                            },\n                            {\n                              spine: 701,\n                              title: \"Persona\",\n                              year: 1966,\n                              director: \"Ingmar Bergman\",\n                              runtime: 83,\n                              aspect_ratio: \"1.37:1\",\n                              countries: \"Sweden\",\n                              languages: \"Swedish\",\n                              summary:\n                                \"By the midsixties, Ingmar Bergman had already conjured many of the cinema\u2019s most unforgettable images. But with the radical Persona, he attained new levels of visual poetry. In the first of a series of legendary performances for Bergman, Liv Ullmann plays a stage actor who has inexplicably gone mute; an equally mesmerizing Bibi Andersson is the garrulous young nurse caring for her in a remote island cottage. While isolated together there, the women undergo a mysterious spiritual and emotional transference. Performed with astonishing nuance and shot in stark contrast and soft light by Sven Nykvist, the influential Persona is a penetrating, dreamlike work of profound psychological depth.\",\n                              price: \"$31.96\"\n                            },\n                            {\n                              spine: 740,\n                              title: \"The Bitter Tears of Petra von Kant\",\n                              year: 1972,\n                              director: \"Rainer Werner Fassbinder\",\n                              runtime: 125,\n                              aspect_ratio: \"1.37:1\",\n                              countries: \"West Germany\",\n                              languages: \"German\",\n                              summary:\n                                \"In the early 1970s, Rainer Werner Fassbinder discovered the American melodramas of Douglas Sirk and was inspired by them to begin working in a new, more intensely emotional register. One of the first and best-loved films of this period in his career is The Bitter Tears of Petra von Kant, which balances a realistic depiction of tormented romance with staging that remains true to the director\u2019s roots in experimental theater. This unforgettable, unforgiving dissection of the imbalanced relationship between a haughty fashion designer (Margit Carstensen) and a beautiful but icy ingenue (Hanna Schygulla)\u2014based, in a sly gender reversal, on the writer-director\u2019s own desperate obsession with a young actor\u2014is a true Fassbinder affair, featuring exquisitely claustrophobic cinematography by Michael Ballhaus and full-throttle performances by an all-female cast.\",\n                              price: \"$31.96\"\n                            },\n                            {\n                              spine: 782,\n                              title: \"The Apu Trilogy\",\n                              year: 1959,\n                              director: \"Satyajit Ray\",\n                              aspect_ratio: \"1.37:1\",\n                              countries: \"India\",\n                              languages: \"Bengali\",\n                              summary:\n                                \"Two decades after its original negatives were burned in a fire, Satyajit Ray\u2019s breathtaking milestone of world cinema rises from the ashes in a meticulously reconstructed new restoration. The Apu Trilogy brought India into the golden age of international art-house film, following one indelible character, a free-spirited child in rural Bengal who matures into an adolescent urban student and finally a sensitive man of the world. These delicate masterworks\u2014Pather Panchali (Song of the Little Road), Aparajito (The Unvanquished), and Apur Sansar (The World of Apu)\u2014based on two books by Bibhutibhusan Banerjee, were shot over the course of five years, and each stands on its own as a tender, visually radiant journey. They are among the most achingly beautiful, richly humane movies ever made\u2014essential works for any film lover.\",\n                              price: \"$79.96\"\n                            },\n                            {\n                              spine: 888,\n                              title: \"Stalker\",\n                              year: 1979,\n                              director: \"Andrei Tarkovsky\",\n                              runtime: 161,\n                              aspect_ratio: \"1.37:1\",\n                              countries: \"Soviet Union\",\n                              languages: \"Russian\",\n                              summary:\n                                \"Andrei Tarkovsky\u2019s final Soviet feature is a metaphys\u00ADical journey through an enigmatic postapocalyptic landscape, and a rarefied cinematic experience like no other. A hired guide\u2014the Stalker\u2014leads a writer and a professor into the heart of the Zone, the restricted site of a long-ago disaster, where the three men eventually zero in on the Room, a place rumored to fulfill one\u2019s most deeply held desires. Adapting a science-fiction novel by Arkady and Boris Strugatsky, Tarkovsky created an immersive world with a wealth of material detail and a sense of organic atmosphere. A religious allegory, a reflection of contemporaneous political anxieties, a meditation on film itself\u2014Stalker envelops the viewer by opening up a multitude of possible meanings.\",\n                              price: \"$31.96\"\n                            }\n                          ];\n\n                        return (\n                            <SpsTable>\n                                <SpsTableHead>\n                                    <SpsTableRow>\n                                        <SpsTableHeader>Spine#</SpsTableHeader>\n                                        <SpsTableHeader>Title</SpsTableHeader>\n                                        <SpsTableHeader>Year</SpsTableHeader>\n                                        <SpsTableHeader>Director</SpsTableHeader>\n                                        <SpsTableHeader>Runtime</SpsTableHeader>\n                                        <SpsTableHeader>Aspect Ratio</SpsTableHeader>\n                                        <SpsTableHeader>Countries</SpsTableHeader>\n                                        <SpsTableHeader>Languages</SpsTableHeader>\n                                        <SpsTableHeader className=\"text-right\">Price</SpsTableHeader>\n                                    </SpsTableRow>\n                                </SpsTableHead>\n                                <SpsTableBody>\n                                    {items.map((row, index) => {\n                                        return (\n                                            <SpsTableRow key={index}>\n                                                <SpsTableCell>{row[\"spine\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"runtime\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"aspect_ratio\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"countries\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"languages\"]}</SpsTableCell>\n                                                <SpsTableCell className=\"text-right\">{row[\"price\"]}</SpsTableCell>\n                                            </SpsTableRow>\n                                        );\n                                    })}\n                                </SpsTableBody>\n                            </SpsTable>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const items = [\n                            {\n                              spine: 2,\n                              title: \"Seven Samurai\",\n                              year: 1954,\n                              director: \"Akira Kurosawa\",\n                              runtime: 207,\n                              aspect_ratio: \"1.33:1\",\n                              countries: \"Japan\",\n                              languages: \"Japanese\",\n                              summary:\n                                \"One of the most thrilling movie epics of all time, Seven Samurai (Shichinin no samurai) tells the story of a sixteenth-century village whose desperate inhabitants hire the eponymous warriors to protect them from invading bandits. This three-hour ride from Akira Kurosawa\u2014featuring legendary actors Toshiro Mifune and Takashi Shimura\u2014seamlessly weaves philosophy and entertainment, delicate human emotions and relentless action, into a rich, evocative, and unforgettable tale of courage and hope.\",\n                              price: \"$39.96\"\n                            },\n                            {\n                              spine: 29,\n                              title: \"Picnic at Hanging Rock\",\n                              year: 1975,\n                              director: \"Peter Weir\",\n                              runtime: 107,\n                              aspect_ratio: \"1.78:1\",\n                              countries: \"Australia\",\n                              languages: \"English\",\n                              summary:\n                                \"This sensual and striking chronicle of a disappearance and its aftermath put director Peter Weir on the map and helped usher in a new era of Australian cinema. Based on an acclaimed 1967 novel by Joan Lindsay, Picnic at Hanging Rock is set at the turn of the twentieth century and concerns a small group of students from an all- female college who vanish, along with a chaperone, while on a St. Valentine\u2019s Day outing. Less a mystery than a journey into the mystic, as well as an inquiry into issues of class and sexual repression in Australian society, Weir\u2019s gorgeous, disquieting film is a work of poetic horror whose secrets haunt viewers to this day.\",\n                              price: \"$39.95\"\n                            },\n                            {\n                              spine: 62,\n                              title: \"The Passion of Joan of Arc\",\n                              year: 1928,\n                              director: \"Carl Theodor Dreyer\",\n                              runtime: 81,\n                              aspect_ratio: \"1.33:1\",\n                              countries: \"France\",\n                              languages: \"French\",\n                              summary:\n                                \"Spiritual rapture and institutional hypocrisy come to stark, vivid life in one of the most transcendent masterpieces of the silent era. Chronicling the trial of Joan of Arc in the hours leading up to her execution, Danish master Carl Theodor Dreyer depicts her torment with startling immediacy, employing an array of techniques\u2014expressionistic lighting, interconnected sets, painfully intimate close-ups\u2014to immerse viewers in her subjective experience. Anchoring Dreyer\u2019s audacious formal experimentation is a legendary performance by Ren\u00E9e Falconetti, whose haunted face channels both the agony and the ecstasy of martyrdom.\",\n                              price: \"$31.96\"\n                            },\n                            {\n                              spine: 484,\n                              title: \"Jeanne Dielman, 23, quai du Commerce, 1080 Bruxelles\",\n                              year: 1975,\n                              director: \"Chantal Akerman\",\n                              runtime: 201,\n                              aspect_ratio: \"1.66:1\",\n                              countries: \"France, Belgium\",\n                              languages: \"French\",\n                              summary:\n                                \"A singular work in film history, Chantal Akerman\u2019s Jeanne Dielman, 23, quai du Commerce, 1080 Bruxelles meticulously details, with a sense of impending doom, the daily routine of a middle-aged widow, whose chores include making the beds, cooking dinner for her son, and turning the occasional trick. In its enormous spareness, Akerman\u2019s film seems simple, but it encompasses an entire world. Whether seen as an exacting character study or as one of cinema\u2019s most hypnotic and complete depictions of space and time, Jeanne Dielman is an astonishing, compelling movie experiment, one that has been analyzed and argued over for decades.\",\n                              price: \"$31.96\"\n                            },\n                            {\n                              spine: 701,\n                              title: \"Persona\",\n                              year: 1966,\n                              director: \"Ingmar Bergman\",\n                              runtime: 83,\n                              aspect_ratio: \"1.37:1\",\n                              countries: \"Sweden\",\n                              languages: \"Swedish\",\n                              summary:\n                                \"By the midsixties, Ingmar Bergman had already conjured many of the cinema\u2019s most unforgettable images. But with the radical Persona, he attained new levels of visual poetry. In the first of a series of legendary performances for Bergman, Liv Ullmann plays a stage actor who has inexplicably gone mute; an equally mesmerizing Bibi Andersson is the garrulous young nurse caring for her in a remote island cottage. While isolated together there, the women undergo a mysterious spiritual and emotional transference. Performed with astonishing nuance and shot in stark contrast and soft light by Sven Nykvist, the influential Persona is a penetrating, dreamlike work of profound psychological depth.\",\n                              price: \"$31.96\"\n                            },\n                            {\n                              spine: 740,\n                              title: \"The Bitter Tears of Petra von Kant\",\n                              year: 1972,\n                              director: \"Rainer Werner Fassbinder\",\n                              runtime: 125,\n                              aspect_ratio: \"1.37:1\",\n                              countries: \"West Germany\",\n                              languages: \"German\",\n                              summary:\n                                \"In the early 1970s, Rainer Werner Fassbinder discovered the American melodramas of Douglas Sirk and was inspired by them to begin working in a new, more intensely emotional register. One of the first and best-loved films of this period in his career is The Bitter Tears of Petra von Kant, which balances a realistic depiction of tormented romance with staging that remains true to the director\u2019s roots in experimental theater. This unforgettable, unforgiving dissection of the imbalanced relationship between a haughty fashion designer (Margit Carstensen) and a beautiful but icy ingenue (Hanna Schygulla)\u2014based, in a sly gender reversal, on the writer-director\u2019s own desperate obsession with a young actor\u2014is a true Fassbinder affair, featuring exquisitely claustrophobic cinematography by Michael Ballhaus and full-throttle performances by an all-female cast.\",\n                              price: \"$31.96\"\n                            },\n                            {\n                              spine: 782,\n                              title: \"The Apu Trilogy\",\n                              year: 1959,\n                              director: \"Satyajit Ray\",\n                              aspect_ratio: \"1.37:1\",\n                              countries: \"India\",\n                              languages: \"Bengali\",\n                              summary:\n                                \"Two decades after its original negatives were burned in a fire, Satyajit Ray\u2019s breathtaking milestone of world cinema rises from the ashes in a meticulously reconstructed new restoration. The Apu Trilogy brought India into the golden age of international art-house film, following one indelible character, a free-spirited child in rural Bengal who matures into an adolescent urban student and finally a sensitive man of the world. These delicate masterworks\u2014Pather Panchali (Song of the Little Road), Aparajito (The Unvanquished), and Apur Sansar (The World of Apu)\u2014based on two books by Bibhutibhusan Banerjee, were shot over the course of five years, and each stands on its own as a tender, visually radiant journey. They are among the most achingly beautiful, richly humane movies ever made\u2014essential works for any film lover.\",\n                              price: \"$79.96\"\n                            },\n                            {\n                              spine: 888,\n                              title: \"Stalker\",\n                              year: 1979,\n                              director: \"Andrei Tarkovsky\",\n                              runtime: 161,\n                              aspect_ratio: \"1.37:1\",\n                              countries: \"Soviet Union\",\n                              languages: \"Russian\",\n                              summary:\n                                \"Andrei Tarkovsky\u2019s final Soviet feature is a metaphys\u00ADical journey through an enigmatic postapocalyptic landscape, and a rarefied cinematic experience like no other. A hired guide\u2014the Stalker\u2014leads a writer and a professor into the heart of the Zone, the restricted site of a long-ago disaster, where the three men eventually zero in on the Room, a place rumored to fulfill one\u2019s most deeply held desires. Adapting a science-fiction novel by Arkady and Boris Strugatsky, Tarkovsky created an immersive world with a wealth of material detail and a sense of organic atmosphere. A religious allegory, a reflection of contemporaneous political anxieties, a meditation on film itself\u2014Stalker envelops the viewer by opening up a multitude of possible meanings.\",\n                              price: \"$31.96\"\n                            }\n                          ];\n\n                        return (\n                            <SpsTable>\n                                <SpsTableHead>\n                                    <SpsTableRow>\n                                        <SpsTableHeader>Spine#</SpsTableHeader>\n                                        <SpsTableHeader>Title</SpsTableHeader>\n                                        <SpsTableHeader>Year</SpsTableHeader>\n                                        <SpsTableHeader>Director</SpsTableHeader>\n                                        <SpsTableHeader>Runtime</SpsTableHeader>\n                                        <SpsTableHeader>Aspect Ratio</SpsTableHeader>\n                                        <SpsTableHeader>Countries</SpsTableHeader>\n                                        <SpsTableHeader>Languages</SpsTableHeader>\n                                        <SpsTableHeader className=\"text-right\">Price</SpsTableHeader>\n                                    </SpsTableRow>\n                                </SpsTableHead>\n                                <SpsTableBody>\n                                    {items.map((row, index) => {\n                                        return (\n                                            <SpsTableRow key={index}>\n                                                <SpsTableCell>{row[\"spine\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"runtime\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"aspect_ratio\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"countries\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"languages\"]}</SpsTableCell>\n                                                <SpsTableCell className=\"text-right\">{row[\"price\"]}</SpsTableCell>\n                                            </SpsTableRow>\n                                        );\n                                    })}\n                                </SpsTableBody>\n                            </SpsTable>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    selectableRows: {
+        label: "Selectable Rows",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("div", { className: "sps-body-14" },
+                "Selectable rows include a checkbox column that allows the user to select individual or multiple rows on which to perform actions such as edit, delete, or a variety of other options. Selectable rows are to be used in conjunction with Action Buttons (See Controls and Buttons below) and the",
+                " ",
+                React.createElement(NavigateTo, { to: "list-action-bar" }, "List Action Bar"),
+                "."));
+        },
+        examples: {
+            controls: {
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                  function DemoComponent() {\n                    const items = [\n                      {\n                        title: \"Seven Samurai\",\n                        year: 1954,\n                        director: \"Akira Kurosawa\",\n                        countries: \"Japan\",\n                      },\n                      {\n                        title: \"Picnic at Hanging Rock\",\n                        year: 1975,\n                        director: \"Peter Weir\",\n                        countries: \"Australia\",\n                      },\n                      {\n                        title: \"The Passion of Joan of Arc\",\n                        year: 1928,\n                        director: \"Carl Theodor Dreyer\",\n                        countries: \"France\",\n                      },\n                      {\n                        title: \"Persona\",\n                        year: 1966,\n                        director: \"Ingmar Bergman\",\n                        countries: \"Sweden\",\n                      },\n                      {\n                        title: \"The Bitter Tears of Petra von Kant\",\n                        year: 1972,\n                        director: \"Rainer Werner Fassbinder\",\n                        countries: \"West Germany\",\n                      },\n                      {\n                        title: \"The Apu Trilogy\",\n                        year: 1959,\n                        director: \"Satyajit Ray\",\n                        countries: \"India\",\n                      },\n                      {\n                        title: \"Stalker\",\n                        year: 1979,\n                        director: \"Andrei Tarkovsky\",\n                        countries: \"Soviet Union\",\n                      },\n                    ];\n\n                    return (\n                      <SpsTable>\n                        <SpsTableHead>\n                          <SpsTableRow>\n                            <SpsTableHeader ></SpsTableHeader>\n                            <SpsTableHeader >Title</SpsTableHeader>\n                            <SpsTableHeader>Year</SpsTableHeader>\n                            <SpsTableHeader >Director</SpsTableHeader>\n                            <SpsTableHeader>Countries</SpsTableHeader>\n                          </SpsTableRow>\n                        </SpsTableHead>\n                        <SpsTableBody>\n                          {items.map((row, index) => {\n                            return (\n                              <SpsTableRow key={index}>\n                                <SpsTableCell><SpsCheckbox/></SpsTableCell>\n                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"countries\"]}</SpsTableCell>\n                              </SpsTableRow>\n                            );\n                          })}\n                        </SpsTableBody>\n                      </SpsTable>\n                    );\n                  }\n                "], ["\n                  function DemoComponent() {\n                    const items = [\n                      {\n                        title: \"Seven Samurai\",\n                        year: 1954,\n                        director: \"Akira Kurosawa\",\n                        countries: \"Japan\",\n                      },\n                      {\n                        title: \"Picnic at Hanging Rock\",\n                        year: 1975,\n                        director: \"Peter Weir\",\n                        countries: \"Australia\",\n                      },\n                      {\n                        title: \"The Passion of Joan of Arc\",\n                        year: 1928,\n                        director: \"Carl Theodor Dreyer\",\n                        countries: \"France\",\n                      },\n                      {\n                        title: \"Persona\",\n                        year: 1966,\n                        director: \"Ingmar Bergman\",\n                        countries: \"Sweden\",\n                      },\n                      {\n                        title: \"The Bitter Tears of Petra von Kant\",\n                        year: 1972,\n                        director: \"Rainer Werner Fassbinder\",\n                        countries: \"West Germany\",\n                      },\n                      {\n                        title: \"The Apu Trilogy\",\n                        year: 1959,\n                        director: \"Satyajit Ray\",\n                        countries: \"India\",\n                      },\n                      {\n                        title: \"Stalker\",\n                        year: 1979,\n                        director: \"Andrei Tarkovsky\",\n                        countries: \"Soviet Union\",\n                      },\n                    ];\n\n                    return (\n                      <SpsTable>\n                        <SpsTableHead>\n                          <SpsTableRow>\n                            <SpsTableHeader ></SpsTableHeader>\n                            <SpsTableHeader >Title</SpsTableHeader>\n                            <SpsTableHeader>Year</SpsTableHeader>\n                            <SpsTableHeader >Director</SpsTableHeader>\n                            <SpsTableHeader>Countries</SpsTableHeader>\n                          </SpsTableRow>\n                        </SpsTableHead>\n                        <SpsTableBody>\n                          {items.map((row, index) => {\n                            return (\n                              <SpsTableRow key={index}>\n                                <SpsTableCell><SpsCheckbox/></SpsTableCell>\n                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"countries\"]}</SpsTableCell>\n                              </SpsTableRow>\n                            );\n                          })}\n                        </SpsTableBody>\n                      </SpsTable>\n                    );\n                  }\n                "]))),
+            },
+        },
+    },
+    controlsAndButtons: {
+        label: "Controls (Toggles & Buttons)",
+        description: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "sps-body-14" }, "Controls are used to take action on listed records. Controls are represented in tables or by Toggles or Buttons."),
+            React.createElement("br", null),
+            React.createElement("h5", null, "Toggles"),
+            React.createElement("div", { className: "sps-body-14" },
+                "Toggles are used to apply an immediate change of state to a record in a table. Toggles can appear as either traditional toggles (the switch) or as an icon such as a star or heart to distinguish that record apart from others (e.g. as a favorite). For more information on this pattern visit the Toggles page. Toggles always occupy the left-most columns of a table (unless checkboxes are required).",
+                " "),
+            React.createElement("br", null),
+            React.createElement("h5", null, "Buttons"),
+            React.createElement("div", { className: "sps-body-14" }, "Buttons can be used to perform specific actions on a record in a table. Buttons in tables are represented by the Icon Button style. Multiple buttons can be included in each row, however when more than two different actions are required consider using the ellipses button with a dropdown menu to conserve space. Buttons always occupy the right-most column in the table."),
+            React.createElement("br", null),
+            React.createElement("i", { className: "sps-body-14" }, "Note: Standard Buttons and Text Buttons can be used in table rows if necessary, but when possible opt to use the Icon Button style."))); },
+        examples: {
+            controls: {
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const items = [\n                            {\n                              title: \"Seven Samurai\",\n                              year: 1954,\n                              director: \"Akira Kurosawa\"\n                            },\n                            {\n                              title: \"Picnic at Hanging Rock\",\n                              year: 1975,\n                              director: \"Peter Weir\"\n                            },\n                            {\n                              title: \"The Passion of Joan of Arc\",\n                              year: 1928,\n                              director: \"Carl Theodor Dreyer\"\n                            },\n                            {\n                              title: \"Persona\",\n                              year: 1966,\n                              director: \"Ingmar Bergman\"\n                            },\n                            {\n                              title: \"The Bitter Tears of Petra von Kant\",\n                              year: 1972,\n                              director: \"Rainer Werner Fassbinder\"\n                            },\n                            {\n                              title: \"The Apu Trilogy\",\n                              year: 1959,\n                              director: \"Satyajit Ray\"\n                            },\n                            {\n                              title: \"Stalker\",\n                              year: 1979,\n                              director: \"Andrei Tarkovsky\"\n                            }\n                          ];\n\n                        return (\n                            <SpsTable>\n                                <SpsTableHead>\n                                    <SpsTableRow>\n                                        <SpsTableHeader></SpsTableHeader>\n                                        <SpsTableHeader>Title</SpsTableHeader>\n                                        <SpsTableHeader>Year</SpsTableHeader>\n                                        <SpsTableHeader>Director</SpsTableHeader>\n                                        <SpsTableHeader className=\"text-right\">Actions</SpsTableHeader>\n                                    </SpsTableRow>\n                                </SpsTableHead>\n                                <SpsTableBody>\n                                    {items.map((row, index) => {\n                                        return (\n                                            <SpsTableRow key={index}>\n                                                <SpsTableCell><SpsToggle /></SpsTableCell>\n                                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                                <SpsTableCell className=\"text-right\" buttonCell>\n                                                    <SpsButton kind=\"icon\" icon=\"ellipses\" />\n                                                </SpsTableCell>\n                                            </SpsTableRow>\n                                        );\n                                    })}\n                                </SpsTableBody>\n                            </SpsTable>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const items = [\n                            {\n                              title: \"Seven Samurai\",\n                              year: 1954,\n                              director: \"Akira Kurosawa\"\n                            },\n                            {\n                              title: \"Picnic at Hanging Rock\",\n                              year: 1975,\n                              director: \"Peter Weir\"\n                            },\n                            {\n                              title: \"The Passion of Joan of Arc\",\n                              year: 1928,\n                              director: \"Carl Theodor Dreyer\"\n                            },\n                            {\n                              title: \"Persona\",\n                              year: 1966,\n                              director: \"Ingmar Bergman\"\n                            },\n                            {\n                              title: \"The Bitter Tears of Petra von Kant\",\n                              year: 1972,\n                              director: \"Rainer Werner Fassbinder\"\n                            },\n                            {\n                              title: \"The Apu Trilogy\",\n                              year: 1959,\n                              director: \"Satyajit Ray\"\n                            },\n                            {\n                              title: \"Stalker\",\n                              year: 1979,\n                              director: \"Andrei Tarkovsky\"\n                            }\n                          ];\n\n                        return (\n                            <SpsTable>\n                                <SpsTableHead>\n                                    <SpsTableRow>\n                                        <SpsTableHeader></SpsTableHeader>\n                                        <SpsTableHeader>Title</SpsTableHeader>\n                                        <SpsTableHeader>Year</SpsTableHeader>\n                                        <SpsTableHeader>Director</SpsTableHeader>\n                                        <SpsTableHeader className=\"text-right\">Actions</SpsTableHeader>\n                                    </SpsTableRow>\n                                </SpsTableHead>\n                                <SpsTableBody>\n                                    {items.map((row, index) => {\n                                        return (\n                                            <SpsTableRow key={index}>\n                                                <SpsTableCell><SpsToggle /></SpsTableCell>\n                                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                                <SpsTableCell className=\"text-right\" buttonCell>\n                                                    <SpsButton kind=\"icon\" icon=\"ellipses\" />\n                                                </SpsTableCell>\n                                            </SpsTableRow>\n                                        );\n                                    })}\n                                </SpsTableBody>\n                            </SpsTable>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    pinnedColumns: {
+        label: "Pinned Columns",
+        description: "When certain columns existing in a Horizontal Scrolling table, certain columns on the left or right of the table may need to be pinned in place to maintain visibility while the user scrolls.",
+        examples: {
+            controls: {
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                  function DemoComponent() {\n                    const [allRowsChecked, setAllRowsChecked] = React.useState(false);\n\n                    const items = [\n                      {\n                        spine: 2,\n                        title: \"Seven Samurai\",\n                        year: 1954,\n                        director: \"Akira Kurosawa\",\n                        runtime: 207,\n                        aspect_ratio: \"1.33:1\",\n                        countries: \"Japan\",\n                        languages: \"Japanese\",\n                        price: 39.96,\n                      },\n                      {\n                        spine: 29,\n                        title: \"Picnic at Hanging Rock\",\n                        year: 1975,\n                        director: \"Peter Weir\",\n                        runtime: 107,\n                        aspect_ratio: \"1.78:1\",\n                        countries: \"Australia\",\n                        languages: \"English\",\n                        price: 39.95,\n                      },\n                      {\n                        spine: 62,\n                        title: \"The Passion of Joan of Arc\",\n                        year: 1928,\n                        director: \"Carl Theodor Dreyer\",\n                        runtime: 81,\n                        aspect_ratio: \"1.33:1\",\n                        countries: \"France\",\n                        languages: \"French\",\n                        price: 31.96,\n                      },\n                      {\n                        spine: 484,\n                        title: \"Jeanne Dielman, 23, quai du Commerce, 1080 Bruxelles\",\n                        year: 1975,\n                        director: \"Chantal Akerman\",\n                        runtime: 201,\n                        aspect_ratio: \"1.66:1\",\n                        countries: \"France, Belgium\",\n                        languages: \"French\",\n                        price: 31.96,\n                      },\n                      {\n                        spine: 701,\n                        title: \"Persona\",\n                        year: 1966,\n                        director: \"Ingmar Bergman\",\n                        runtime: 83,\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"Sweden\",\n                        languages: \"Swedish\",\n                        price: 31.96,\n                      },\n                      {\n                        spine: 740,\n                        title: \"The Bitter Tears of Petra von Kant\",\n                        year: 1972,\n                        director: \"Rainer Werner Fassbinder\",\n                        runtime: 125,\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"West Germany\",\n                        languages: \"German\",\n                        price: 31.96,\n                      },\n                      {\n                        spine: 782,\n                        title: \"The Apu Trilogy\",\n                        year: 1959,\n                        director: \"Satyajit Ray\",\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"India\",\n                        languages: \"Bengali\",\n                        price: 79.96,\n                      },\n                      {\n                        spine: 888,\n                        title: \"Stalker\",\n                        year: 1979,\n                        director: \"Andrei Tarkovsky\",\n                        runtime: 161,\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"Soviet Union\",\n                        languages: \"Russian\",\n                        price: 31.96,\n                      },                  \n                    ]\n                    return (\n                      <SpsTable selectable={true}>\n                        <SpsTableHead>\n                          <SpsTableRow>\n                            <SpsTableHeader pinned controlCell>\n                              <SpsCheckbox checked={allRowsChecked} onChange={() => setAllRowsChecked((prev) => !prev) } />\n                            </SpsTableHeader>\n                            <SpsTableHeader pinned controlCell>\n                              <SpsToggle />\n                            </SpsTableHeader>\n                            <SpsTableHeader>Spine #</SpsTableHeader>\n                            <SpsTableHeader>Title</SpsTableHeader>\n                            <SpsTableHeader>Director</SpsTableHeader>\n                            <SpsTableHeader>Year</SpsTableHeader>\n                            <SpsTableHeader>Countries</SpsTableHeader>\n                            <SpsTableHeader>Languages</SpsTableHeader>\n                            <SpsTableHeader>Run time</SpsTableHeader>\n                            <SpsTableHeader>Aspect Ratio</SpsTableHeader>\n                            <SpsTableHeader>Price</SpsTableHeader>\n                            <SpsTableHeader className=\"text-right\" pinned>\n                              Actions\n                            </SpsTableHeader>\n                          </SpsTableRow>\n                        </SpsTableHead>\n                        <SpsTableBody>\n                          {items.map((row, index) => {\n                            return (\n                              <SpsTableRow key={index}>\n                                <SpsTableCell controlCell pinned>\n                                  <SpsCheckbox checked={allRowsChecked} />\n                                </SpsTableCell>\n                                <SpsTableCell controlCell pinned>\n                                  <SpsToggle />\n                                </SpsTableCell>\n                                <SpsTableCell>{row[\"spine\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"countries\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"languages\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"runtime\"] ? row[\"runtime\"] + \" minutes\" : \"\"}</SpsTableCell>\n                                <SpsTableCell>{row[\"aspect_ratio\"]}</SpsTableCell>\n                                <SpsTableCell>${row[\"price\"]}</SpsTableCell>\n                                <SpsTableCell className=\"text-right\" buttonCell pinned>\n                                  <SpsButton kind=\"icon\" icon=\"ellipses\" />\n                                </SpsTableCell>\n                              </SpsTableRow>\n                              )\n                          })}\n                        </SpsTableBody>\n                      </SpsTable>\n                    )\n                  }\n                "], ["\n                  function DemoComponent() {\n                    const [allRowsChecked, setAllRowsChecked] = React.useState(false);\n\n                    const items = [\n                      {\n                        spine: 2,\n                        title: \"Seven Samurai\",\n                        year: 1954,\n                        director: \"Akira Kurosawa\",\n                        runtime: 207,\n                        aspect_ratio: \"1.33:1\",\n                        countries: \"Japan\",\n                        languages: \"Japanese\",\n                        price: 39.96,\n                      },\n                      {\n                        spine: 29,\n                        title: \"Picnic at Hanging Rock\",\n                        year: 1975,\n                        director: \"Peter Weir\",\n                        runtime: 107,\n                        aspect_ratio: \"1.78:1\",\n                        countries: \"Australia\",\n                        languages: \"English\",\n                        price: 39.95,\n                      },\n                      {\n                        spine: 62,\n                        title: \"The Passion of Joan of Arc\",\n                        year: 1928,\n                        director: \"Carl Theodor Dreyer\",\n                        runtime: 81,\n                        aspect_ratio: \"1.33:1\",\n                        countries: \"France\",\n                        languages: \"French\",\n                        price: 31.96,\n                      },\n                      {\n                        spine: 484,\n                        title: \"Jeanne Dielman, 23, quai du Commerce, 1080 Bruxelles\",\n                        year: 1975,\n                        director: \"Chantal Akerman\",\n                        runtime: 201,\n                        aspect_ratio: \"1.66:1\",\n                        countries: \"France, Belgium\",\n                        languages: \"French\",\n                        price: 31.96,\n                      },\n                      {\n                        spine: 701,\n                        title: \"Persona\",\n                        year: 1966,\n                        director: \"Ingmar Bergman\",\n                        runtime: 83,\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"Sweden\",\n                        languages: \"Swedish\",\n                        price: 31.96,\n                      },\n                      {\n                        spine: 740,\n                        title: \"The Bitter Tears of Petra von Kant\",\n                        year: 1972,\n                        director: \"Rainer Werner Fassbinder\",\n                        runtime: 125,\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"West Germany\",\n                        languages: \"German\",\n                        price: 31.96,\n                      },\n                      {\n                        spine: 782,\n                        title: \"The Apu Trilogy\",\n                        year: 1959,\n                        director: \"Satyajit Ray\",\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"India\",\n                        languages: \"Bengali\",\n                        price: 79.96,\n                      },\n                      {\n                        spine: 888,\n                        title: \"Stalker\",\n                        year: 1979,\n                        director: \"Andrei Tarkovsky\",\n                        runtime: 161,\n                        aspect_ratio: \"1.37:1\",\n                        countries: \"Soviet Union\",\n                        languages: \"Russian\",\n                        price: 31.96,\n                      },                  \n                    ]\n                    return (\n                      <SpsTable selectable={true}>\n                        <SpsTableHead>\n                          <SpsTableRow>\n                            <SpsTableHeader pinned controlCell>\n                              <SpsCheckbox checked={allRowsChecked} onChange={() => setAllRowsChecked((prev) => !prev) } />\n                            </SpsTableHeader>\n                            <SpsTableHeader pinned controlCell>\n                              <SpsToggle />\n                            </SpsTableHeader>\n                            <SpsTableHeader>Spine #</SpsTableHeader>\n                            <SpsTableHeader>Title</SpsTableHeader>\n                            <SpsTableHeader>Director</SpsTableHeader>\n                            <SpsTableHeader>Year</SpsTableHeader>\n                            <SpsTableHeader>Countries</SpsTableHeader>\n                            <SpsTableHeader>Languages</SpsTableHeader>\n                            <SpsTableHeader>Run time</SpsTableHeader>\n                            <SpsTableHeader>Aspect Ratio</SpsTableHeader>\n                            <SpsTableHeader>Price</SpsTableHeader>\n                            <SpsTableHeader className=\"text-right\" pinned>\n                              Actions\n                            </SpsTableHeader>\n                          </SpsTableRow>\n                        </SpsTableHead>\n                        <SpsTableBody>\n                          {items.map((row, index) => {\n                            return (\n                              <SpsTableRow key={index}>\n                                <SpsTableCell controlCell pinned>\n                                  <SpsCheckbox checked={allRowsChecked} />\n                                </SpsTableCell>\n                                <SpsTableCell controlCell pinned>\n                                  <SpsToggle />\n                                </SpsTableCell>\n                                <SpsTableCell>{row[\"spine\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"countries\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"languages\"]}</SpsTableCell>\n                                <SpsTableCell>{row[\"runtime\"] ? row[\"runtime\"] + \" minutes\" : \"\"}</SpsTableCell>\n                                <SpsTableCell>{row[\"aspect_ratio\"]}</SpsTableCell>\n                                <SpsTableCell>\\${row[\"price\"]}</SpsTableCell>\n                                <SpsTableCell className=\"text-right\" buttonCell pinned>\n                                  <SpsButton kind=\"icon\" icon=\"ellipses\" />\n                                </SpsTableCell>\n                              </SpsTableRow>\n                              )\n                          })}\n                        </SpsTableBody>\n                      </SpsTable>\n                    )\n                  }\n                "]))),
+            },
+        },
+    },
+    stickyHeaders: {
+        label: "Sticky Headers",
+        examples: {
+            basic: {
+                react: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                    function DemoComponent() {\n                      const items = [\n                          {\n                            spine: 2,\n                            title: \"Seven Samurai\",\n                            year: 1954,\n                            director: \"Akira Kurosawa\",\n                            runtime: 207,\n                            aspect_ratio: \"1.33:1\",\n                            countries: \"Japan\",\n                            languages: \"Japanese\",\n                            price: \"$39.96\"\n                          },\n                          {\n                            spine: 29,\n                            title: \"Picnic at Hanging Rock\",\n                            year: 1975,\n                            director: \"Peter Weir\",\n                            runtime: 107,\n                            aspect_ratio: \"1.78:1\",\n                            countries: \"Australia\",\n                            languages: \"English\",\n                            price: \"$39.95\"\n                          },\n                          {\n                            spine: 62,\n                            title: \"The Passion of Joan of Arc\",\n                            year: 1928,\n                            director: \"Carl Theodor Dreyer\",\n                            runtime: 81,\n                            aspect_ratio: \"1.33:1\",\n                            countries: \"France\",\n                            languages: \"French\",\n                            price: \"$31.96\"\n                          },\n                          {\n                            spine: 484,\n                            title: \"Jeanne Dielman, 23, quai du Commerce, 1080 Bruxelles\",\n                            year: 1975,\n                            director: \"Chantal Akerman\",\n                            runtime: 201,\n                            aspect_ratio: \"1.66:1\",\n                            countries: \"France, Belgium\",\n                            languages: \"French\",\n                            price: \"$31.96\"\n                          },\n                          {\n                            spine: 701,\n                            title: \"Persona\",\n                            year: 1966,\n                            director: \"Ingmar Bergman\",\n                            runtime: 83,\n                            aspect_ratio: \"1.37:1\",\n                            countries: \"Sweden\",\n                            languages: \"Swedish\",\n                            price: \"$31.96\"\n                          },\n                          {\n                            spine: 740,\n                            title: \"The Bitter Tears of Petra von Kant\",\n                            year: 1972,\n                            director: \"Rainer Werner Fassbinder\",\n                            runtime: 125,\n                            aspect_ratio: \"1.37:1\",\n                            countries: \"West Germany\",\n                            languages: \"German\",\n                            price: \"$31.96\"\n                          },\n                          {\n                            spine: 782,\n                            title: \"The Apu Trilogy\",\n                            year: 1959,\n                            director: \"Satyajit Ray\",\n                            aspect_ratio: \"1.37:1\",\n                            countries: \"India\",\n                            languages: \"Bengali\",\n                            price: \"$79.96\"\n                          },\n                          {\n                            spine: 888,\n                            title: \"Stalker\",\n                            year: 1979,\n                            director: \"Andrei Tarkovsky\",\n                            runtime: 161,\n                            aspect_ratio: \"1.37:1\",\n                            countries: \"Soviet Union\",\n                            languages: \"Russian\",\n                            price: \"$31.96\"\n                          }\n                        ];\n\n                      const [sort, setSort] = React.useState([{ key: \"title\", direction: SortDirection.ASCENDING }]);\n\n                      function ignoreArticles(value) {\n                        return typeof value === \"string\"\n                          ? value.replace(/^(The|A) /, \"\")\n                          : value\n                      }\n        \n                      const sortedItems = React.useMemo(() => {\n                        const [{key, direction}] = sort;\n                        return [...items].sort((a, b) =>\n                          (direction === SortDirection.ASCENDING ? 1 : -1)\n                          * (ignoreArticles(a[key]) >= ignoreArticles(b[key]) ? 1 : -1)\n                        );\n                      }, [sort]);\n\n                      return (\n                        <SpsTable sort={sort} onSortChange={setSort}>\n                            <SpsTableHead pinned>\n                                <SpsTableRow>\n                                    <SpsTableHeader sortKey=\"spine\">Spine#</SpsTableHeader>\n                                    <SpsTableHeader sortKey=\"title\">Title</SpsTableHeader>\n                                    <SpsTableHeader sortKey=\"year\">Year</SpsTableHeader>\n                                    <SpsTableHeader sortKey=\"director\">Director</SpsTableHeader>\n                                    <SpsTableHeader>Runtime</SpsTableHeader>\n                                    <SpsTableHeader>Aspect Ratio</SpsTableHeader>\n                                    <SpsTableHeader>Countries</SpsTableHeader>\n                                    <SpsTableHeader>Languages</SpsTableHeader>\n                                    <SpsTableHeader className=\"text-right\">Price</SpsTableHeader>\n                                </SpsTableRow>\n                            </SpsTableHead>\n                            <SpsTableBody>\n                                {sortedItems.map((row, index) => {\n                                    return (\n                                        <SpsTableRow key={index}>\n                                            <SpsTableCell>{row[\"spine\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"runtime\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"aspect_ratio\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"countries\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"languages\"]}</SpsTableCell>\n                                            <SpsTableCell className=\"text-right\">{row[\"price\"]}</SpsTableCell>\n                                        </SpsTableRow>\n                                    );\n                                })}\n                            </SpsTableBody>\n                        </SpsTable>\n                      );\n                  }\n                "], ["\n                    function DemoComponent() {\n                      const items = [\n                          {\n                            spine: 2,\n                            title: \"Seven Samurai\",\n                            year: 1954,\n                            director: \"Akira Kurosawa\",\n                            runtime: 207,\n                            aspect_ratio: \"1.33:1\",\n                            countries: \"Japan\",\n                            languages: \"Japanese\",\n                            price: \"$39.96\"\n                          },\n                          {\n                            spine: 29,\n                            title: \"Picnic at Hanging Rock\",\n                            year: 1975,\n                            director: \"Peter Weir\",\n                            runtime: 107,\n                            aspect_ratio: \"1.78:1\",\n                            countries: \"Australia\",\n                            languages: \"English\",\n                            price: \"$39.95\"\n                          },\n                          {\n                            spine: 62,\n                            title: \"The Passion of Joan of Arc\",\n                            year: 1928,\n                            director: \"Carl Theodor Dreyer\",\n                            runtime: 81,\n                            aspect_ratio: \"1.33:1\",\n                            countries: \"France\",\n                            languages: \"French\",\n                            price: \"$31.96\"\n                          },\n                          {\n                            spine: 484,\n                            title: \"Jeanne Dielman, 23, quai du Commerce, 1080 Bruxelles\",\n                            year: 1975,\n                            director: \"Chantal Akerman\",\n                            runtime: 201,\n                            aspect_ratio: \"1.66:1\",\n                            countries: \"France, Belgium\",\n                            languages: \"French\",\n                            price: \"$31.96\"\n                          },\n                          {\n                            spine: 701,\n                            title: \"Persona\",\n                            year: 1966,\n                            director: \"Ingmar Bergman\",\n                            runtime: 83,\n                            aspect_ratio: \"1.37:1\",\n                            countries: \"Sweden\",\n                            languages: \"Swedish\",\n                            price: \"$31.96\"\n                          },\n                          {\n                            spine: 740,\n                            title: \"The Bitter Tears of Petra von Kant\",\n                            year: 1972,\n                            director: \"Rainer Werner Fassbinder\",\n                            runtime: 125,\n                            aspect_ratio: \"1.37:1\",\n                            countries: \"West Germany\",\n                            languages: \"German\",\n                            price: \"$31.96\"\n                          },\n                          {\n                            spine: 782,\n                            title: \"The Apu Trilogy\",\n                            year: 1959,\n                            director: \"Satyajit Ray\",\n                            aspect_ratio: \"1.37:1\",\n                            countries: \"India\",\n                            languages: \"Bengali\",\n                            price: \"$79.96\"\n                          },\n                          {\n                            spine: 888,\n                            title: \"Stalker\",\n                            year: 1979,\n                            director: \"Andrei Tarkovsky\",\n                            runtime: 161,\n                            aspect_ratio: \"1.37:1\",\n                            countries: \"Soviet Union\",\n                            languages: \"Russian\",\n                            price: \"$31.96\"\n                          }\n                        ];\n\n                      const [sort, setSort] = React.useState([{ key: \"title\", direction: SortDirection.ASCENDING }]);\n\n                      function ignoreArticles(value) {\n                        return typeof value === \"string\"\n                          ? value.replace(/^(The|A) /, \"\")\n                          : value\n                      }\n        \n                      const sortedItems = React.useMemo(() => {\n                        const [{key, direction}] = sort;\n                        return [...items].sort((a, b) =>\n                          (direction === SortDirection.ASCENDING ? 1 : -1)\n                          * (ignoreArticles(a[key]) >= ignoreArticles(b[key]) ? 1 : -1)\n                        );\n                      }, [sort]);\n\n                      return (\n                        <SpsTable sort={sort} onSortChange={setSort}>\n                            <SpsTableHead pinned>\n                                <SpsTableRow>\n                                    <SpsTableHeader sortKey=\"spine\">Spine#</SpsTableHeader>\n                                    <SpsTableHeader sortKey=\"title\">Title</SpsTableHeader>\n                                    <SpsTableHeader sortKey=\"year\">Year</SpsTableHeader>\n                                    <SpsTableHeader sortKey=\"director\">Director</SpsTableHeader>\n                                    <SpsTableHeader>Runtime</SpsTableHeader>\n                                    <SpsTableHeader>Aspect Ratio</SpsTableHeader>\n                                    <SpsTableHeader>Countries</SpsTableHeader>\n                                    <SpsTableHeader>Languages</SpsTableHeader>\n                                    <SpsTableHeader className=\"text-right\">Price</SpsTableHeader>\n                                </SpsTableRow>\n                            </SpsTableHead>\n                            <SpsTableBody>\n                                {sortedItems.map((row, index) => {\n                                    return (\n                                        <SpsTableRow key={index}>\n                                            <SpsTableCell>{row[\"spine\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"director\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"runtime\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"aspect_ratio\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"countries\"]}</SpsTableCell>\n                                            <SpsTableCell>{row[\"languages\"]}</SpsTableCell>\n                                            <SpsTableCell className=\"text-right\">{row[\"price\"]}</SpsTableCell>\n                                        </SpsTableRow>\n                                    );\n                                })}\n                            </SpsTableBody>\n                        </SpsTable>\n                      );\n                  }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=SpsTable.examples.js.map

package/dist/out-tsc/table/SpsTable.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsTable.examples.js","sourceRoot":"","sources":["../../../src/table/SpsTable.examples.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,CAAC,IAAM,gBAAgB,GAAoB;IAC/C,YAAY,EAAE;QACZ,KAAK,EAAE,eAAe;QACtB,aAAa,EAAE,cAAM,OAAA,CACnB,iCAAS,EAAE,EAAC,qBAAqB;YAC/B,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,gDAAsB;gBACtB,oBAAC,SAAS,IACR,OAAO,EAAE;wBACP,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;oBAClD,CAAC,EACD,IAAI,EAAE,UAAU,CAAC,IAAI,kBAGX,CACR;YACN,8CAAoB;YACpB,4BAAI,SAAS,EAAC,aAAa;gBACzB,6EAAmD;gBACnD,2FAAiE;gBACjE,sGAA4E;gBAC5E,2LAIK,CACF;YACL,gDAAsB;YACtB,4BAAI,SAAS,EAAC,aAAa;gBACzB,0FAAgE,CAC7D;YACL,kJAGM,CACE,CACX,EAjCoB,CAiCpB;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,UAAC,EAAc;gBAAZ,UAAU,gBAAA;YAAO,OAAA,CAC/B;gBACE,6BAAK,SAAS,EAAC,aAAa,wRAKtB;gBACN,+BAAM;gBACN,6BAAK,SAAS,EAAC,aAAa;;oBAC2B,GAAG;oBACxD,oBAAC,UAAU,IAAC,EAAE,EAAC,cAAc,mBAA0B;;oBAAK,GAAG;oBAC/D,oBAAC,UAAU,IAAC,EAAE,EAAC,YAAY,iBAAwB;6DAE/C,CACL,CACJ;QAhBgC,CAgBhC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,2yKAAA,wuKAqGF,IAAA;aACV;SACF;KACF;IACD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,cAAM,OAAA,CACjB;YACE,6BAAK,SAAS,EAAC,aAAa;;gBAIqB,GAAG,CAC9C;YACN,+BAAM;YACN,6BAAK,SAAS,EAAC,aAAa,yNAItB,CACL,CACJ,EAfkB,CAelB;QACD,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,KAAK,EAAE,IAAI,qrNAAA,knNAuJF,IAAA;aACV;SACF;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,cAAM,OAAA,CACjB,6BAAK,SAAS,EAAC,aAAa,2VAMtB,CACP,EARkB,CAQlB;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,4sRAAA,yoRA+EF,IAAA;aACV;SACF;KACF;IACD,gBAAgB,EAAE;QAChB,KAAK,EAAE,sBAAsB;QAC7B,WAAW,EAAE,cAAM,OAAA,CACjB,6BAAK,SAAS,EAAC,aAAa,4LAItB,CACP,EANkB,CAMlB;QACD,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,27ZAAA,w3ZA+IF,IAAA;aACV;SACF;KACF;IACD,cAAc,EAAE;QACd,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,UAAC,EAAc;gBAAZ,UAAU,gBAAA;YAAO,OAAA,CAC/B,6BAAK,SAAS,EAAC,aAAa;;gBAIuB,GAAG;gBACpD,oBAAC,UAAU,IAAC,EAAE,EAAC,iBAAiB,sBAA6B;oBACzD,CACP;QARgC,CAQhC;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,2wGAAA,wsGA0EF,IAAA;aACV;SACF;KACF;IACD,kBAAkB,EAAE;QAClB,KAAK,EAAE,8BAA8B;QACrC,WAAW,EAAE,cAAM,OAAA,CACjB;YACE,6BAAK,SAAS,EAAC,aAAa,uHAGtB;YACN,+BAAM;YACN,0CAAgB;YAChB,6BAAK,SAAS,EAAC,aAAa;;gBAKiE,GAAG,CAC1F;YACN,+BAAM;YACN,0CAAgB;YAChB,6BAAK,SAAS,EAAC,aAAa,uXAMtB;YACN,+BAAM;YACN,2BAAG,SAAS,EAAC,aAAa,0IAGtB,CACH,CACJ,EA9BkB,CA8BlB;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,0lHAAA,uhHAqEF,IAAA;aACV;SACF;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,gBAAgB;QACvB,WAAW,EACH,gMAAgM;QACxM,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,yjOAAA,w/NAkJF,IAAA;aACV;SACF;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,gBAAgB;QACvB,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,u2OAAA,oyOA+IF,IAAA;aACV;SACF;KACF;CACF,CAAC"}