@spscommerce/ds-react 4.0.0 → 4.4.0

package/lib/index.esm.js

@@ -178,7 +178,7 @@ var spsGlobalPropTypes = {
 
 var I18nContext = React.createContext(noI18nI18n);
 
-var propsDoc$1r = {
+var propsDoc$1u = {
     disabled: 'boolean',
     href: 'string',
     icon: 'SpsIcon',
@@ -187,7 +187,7 @@ var propsDoc$1r = {
     spinningTitle: 'string',
     type: 'ButtonType',
 };
-var propTypes$1w = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, href: string, icon: enumValue(SpsIcon$1), kind: enumValue(ButtonKind), spinning: bool, spinningTitle: string, type: enumValue(ButtonType) });
+var propTypes$1z = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, href: string, icon: enumValue(SpsIcon$1), kind: enumValue(ButtonKind), spinning: bool, spinningTitle: string, type: enumValue(ButtonType) });
 function SpsButton(props) {
     var children = props.children, className = props.className, href = props.href, icon = props.icon, _a = props.kind, kind = _a === void 0 ? ButtonKind.DEFAULT : _a, spinning = props.spinning, spinningTitle = props.spinningTitle, _b = props.type, type = _b === void 0 ? ButtonType.BUTTON : _b, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "href", "icon", "kind", "spinning", "spinningTitle", "type", "unsafelyReplaceClassName"]);
     var disabled = props.disabled;
@@ -211,8 +211,8 @@ function SpsButton(props) {
         spinner))));
 }
 Object.assign(SpsButton, {
-    props: propsDoc$1r,
-    propTypes: propTypes$1w,
+    props: propsDoc$1u,
+    propTypes: propTypes$1z,
     displayName: 'SpsButton',
 });
 
@@ -249,8 +249,8 @@ function contentOf(nodeOrRenderFn) {
         : nodeOrRenderFn;
 }
 
-var propsDoc$1q = __assign(__assign({}, spsFormProps), { controlsDisabled: 'boolean', footerLinks: 'ReactNodeOrRenderFn', formMeta: 'SpsFormArrayMeta<any> | SpsFormGroupMeta<any>', isOpen: 'boolean', onClear: '() => void', onSubmit: 'React.FormEventHandler', pinned: { type: 'boolean', deprecated: true } });
-var propTypes$1v = __assign(__assign(__assign({}, spsGlobalPropTypes), spsFormPropTypes), { controlsDisabled: bool, footerLinks: nodeOrRenderFn, formArray: impl(), formGroup: impl(), formMeta: oneOfType([
+var propsDoc$1t = __assign(__assign({}, spsFormProps), { controlsDisabled: 'boolean', footerLinks: 'ReactNodeOrRenderFn', formMeta: 'SpsFormArrayMeta<any> | SpsFormGroupMeta<any>', isOpen: 'boolean', onClear: '() => void', onSubmit: 'React.FormEventHandler', pinned: { type: 'boolean', deprecated: true } });
+var propTypes$1y = __assign(__assign(__assign({}, spsGlobalPropTypes), spsFormPropTypes), { controlsDisabled: bool, footerLinks: nodeOrRenderFn, formArray: impl(), formGroup: impl(), formMeta: oneOfType([
         impl(),
         impl(),
     ]), isOpen: bool, onClear: fun(), onSubmit: fun(), pinned: bool });
@@ -276,8 +276,8 @@ function SpsAdvancedSearch(props) {
                     React.createElement(SpsButton, { kind: ButtonKind.KEY, type: ButtonType.SUBMIT, disabled: controlsDisabled }, t('design-system:advancedSearch.search')))))));
 }
 Object.assign(SpsAdvancedSearch, {
-    props: propsDoc$1q,
-    propTypes: propTypes$1v,
+    props: propsDoc$1t,
+    propTypes: propTypes$1y,
     displayName: 'SpsAdvancedSearch',
 });
 
@@ -286,7 +286,7 @@ var SpsAdvancedSearchExamples = {
         label: 'Basic Usage',
         examples: {
             basic: {
-                react: code(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n                    function Component(props) {\n                        const [toolbarSearchText, setToolbarSearchText] = React.useState(\"\");\n                        const [advSearch, patchAdvSearch] = usePatchReducer({\n                            isOpen: true,\n                            enteredFields: 0,\n                        });\n\n                        const initValue = {\n                            sender: \"\",\n                            receiver: \"\",\n                            doctype: \"\",\n                            status: \"\",\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                        React.useEffect(() => {\n                            // Simulate that someone has entered a search term\n                            updateForm({\n                                ...formValue,\n                                receiver: \"Walmart\"\n                            });\n                            patchAdvSearch({ enteredFields: 1 });\n                        }, []);\n\n                        function handleToolbarSearchChange(event) {\n                            setToolbarSearchText(event.target.value);\n                        }\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            patchAdvSearch({ isOpen });\n                        }\n\n                        function handleAdvancedSearchSubmit() {\n                            patchAdvSearch({ enteredFields: diff(initValue, formValue).length });\n                        }\n\n                        function handleAdvancedSearchClear() {\n                            updateForm(initValue);\n                            patchAdvSearch({ enteredFields: 0 });\n                        }\n\n                        return <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput value={toolbarSearchText}\n                                        onChange={handleToolbarSearchChange}\n                                        disabled={advSearch.isOpen}\n                                        title=\"Search\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON}\n                                        icon={SpsIcon.SEARCH}\n                                        disabled={advSearch.isOpen}\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch}\n                                formMeta={formMeta}\n                                onSubmit={handleAdvancedSearchSubmit}\n                                onClear={handleAdvancedSearchClear}\n                            >\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.sender}\n                                            value={formValue.sender}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.receiver}\n                                            value={formValue.receiver}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.doctype}\n                                            value={formValue.doctype}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.status}\n                                            value={formValue.status}\n                                        />\n                                    </div>\n                                </div>\n                            </SpsAdvancedSearch>\n                        </>;\n                    }\n                "], ["\n                    function Component(props) {\n                        const [toolbarSearchText, setToolbarSearchText] = React.useState(\"\");\n                        const [advSearch, patchAdvSearch] = usePatchReducer({\n                            isOpen: true,\n                            enteredFields: 0,\n                        });\n\n                        const initValue = {\n                            sender: \"\",\n                            receiver: \"\",\n                            doctype: \"\",\n                            status: \"\",\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                        React.useEffect(() => {\n                            // Simulate that someone has entered a search term\n                            updateForm({\n                                ...formValue,\n                                receiver: \"Walmart\"\n                            });\n                            patchAdvSearch({ enteredFields: 1 });\n                        }, []);\n\n                        function handleToolbarSearchChange(event) {\n                            setToolbarSearchText(event.target.value);\n                        }\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            patchAdvSearch({ isOpen });\n                        }\n\n                        function handleAdvancedSearchSubmit() {\n                            patchAdvSearch({ enteredFields: diff(initValue, formValue).length });\n                        }\n\n                        function handleAdvancedSearchClear() {\n                            updateForm(initValue);\n                            patchAdvSearch({ enteredFields: 0 });\n                        }\n\n                        return <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput value={toolbarSearchText}\n                                        onChange={handleToolbarSearchChange}\n                                        disabled={advSearch.isOpen}\n                                        title=\"Search\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON}\n                                        icon={SpsIcon.SEARCH}\n                                        disabled={advSearch.isOpen}\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch}\n                                formMeta={formMeta}\n                                onSubmit={handleAdvancedSearchSubmit}\n                                onClear={handleAdvancedSearchClear}\n                            >\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.sender}\n                                            value={formValue.sender}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.receiver}\n                                            value={formValue.receiver}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.doctype}\n                                            value={formValue.doctype}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.status}\n                                            value={formValue.status}\n                                        />\n                                    </div>\n                                </div>\n                            </SpsAdvancedSearch>\n                        </>;\n                    }\n                "]))),
+                react: code(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n                    function Component(props) {\n                        const [toolbarSearchText, setToolbarSearchText] = React.useState(\"\");\n                        const [advSearch, patchAdvSearch] = usePatchReducer({\n                            isOpen: true,\n                            enteredFields: 0,\n                        });\n\n                        const initValue = {\n                            sender: \"\",\n                            receiver: \"\",\n                            doctype: \"\",\n                            status: \"\",\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                        React.useEffect(() => {\n                            // Simulate that someone has entered a search term\n                            updateForm({\n                                ...formValue,\n                                receiver: \"Walmart\"\n                            });\n                            patchAdvSearch({ enteredFields: 1 });\n                        }, []);\n\n                        function handleToolbarSearchChange(event) {\n                            setToolbarSearchText(event.target.value);\n                        }\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            patchAdvSearch({ isOpen });\n                        }\n\n                        function handleAdvancedSearchSubmit() {\n                            patchAdvSearch({ enteredFields: diff(initValue, formValue).length });\n                        }\n\n                        function handleAdvancedSearchClear() {\n                            updateForm(initValue);\n                            patchAdvSearch({ enteredFields: 0 });\n                        }\n\n                        return <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput value={toolbarSearchText}\n                                        onChange={handleToolbarSearchChange}\n                                        disabled={advSearch.isOpen}\n                                        title=\"Search\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON}\n                                        icon={SpsIcon.SEARCH}\n                                        disabled={advSearch.isOpen}\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch}\n                                formMeta={formMeta}\n                                onSubmit={handleAdvancedSearchSubmit}\n                                onClear={handleAdvancedSearchClear}\n                            >\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.sender}\n                                            value={formValue.sender}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.receiver}\n                                            value={formValue.receiver}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.doctype}\n                                            value={formValue.doctype}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.status}\n                                            value={formValue.status}\n                                        />\n                                    </div>\n                                </div>\n                            </SpsAdvancedSearch>\n                        </>;\n                    }\n                "], ["\n                    function Component(props) {\n                        const [toolbarSearchText, setToolbarSearchText] = React.useState(\"\");\n                        const [advSearch, patchAdvSearch] = usePatchReducer({\n                            isOpen: true,\n                            enteredFields: 0,\n                        });\n\n                        const initValue = {\n                            sender: \"\",\n                            receiver: \"\",\n                            doctype: \"\",\n                            status: \"\",\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                        React.useEffect(() => {\n                            // Simulate that someone has entered a search term\n                            updateForm({\n                                ...formValue,\n                                receiver: \"Walmart\"\n                            });\n                            patchAdvSearch({ enteredFields: 1 });\n                        }, []);\n\n                        function handleToolbarSearchChange(event) {\n                            setToolbarSearchText(event.target.value);\n                        }\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            patchAdvSearch({ isOpen });\n                        }\n\n                        function handleAdvancedSearchSubmit() {\n                            patchAdvSearch({ enteredFields: diff(initValue, formValue).length });\n                        }\n\n                        function handleAdvancedSearchClear() {\n                            updateForm(initValue);\n                            patchAdvSearch({ enteredFields: 0 });\n                        }\n\n                        return <>\n                            <SpsListToolbar advancedSearch={advSearch}\n                                onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput value={toolbarSearchText}\n                                        onChange={handleToolbarSearchChange}\n                                        disabled={advSearch.isOpen}\n                                        title=\"Search\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON}\n                                        icon={SpsIcon.SEARCH}\n                                        disabled={advSearch.isOpen}\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                            <SpsAdvancedSearch {...advSearch}\n                                formMeta={formMeta}\n                                onSubmit={handleAdvancedSearchSubmit}\n                                onClear={handleAdvancedSearchClear}\n                            >\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.sender}\n                                            value={formValue.sender}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.receiver}\n                                            value={formValue.receiver}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.doctype}\n                                            value={formValue.doctype}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.status}\n                                            value={formValue.status}\n                                        />\n                                    </div>\n                                </div>\n                            </SpsAdvancedSearch>\n                        </>;\n                    }\n                "]))),
             },
         },
     },
@@ -317,7 +317,7 @@ var SpsAdvancedSearchExamples = {
         },
     },
 };
-var templateObject_1$R, templateObject_2$M, templateObject_3$E, templateObject_4$w, templateObject_5$o, templateObject_6$j;
+var templateObject_1$S, templateObject_2$M, templateObject_3$E, templateObject_4$w, templateObject_5$o, templateObject_6$j;
 
 function useElementId(id) {
     return useRef(id || nanoid());
@@ -600,7 +600,7 @@ var searchableOptionListProps = {
     searchDebounce: number,
     searchPlaceholder: string,
 };
-var propTypes$1u = __assign(__assign(__assign(__assign({}, spsGlobalPropTypes), spsOptionListPassthroughProps.propTypes), searchableOptionListProps), { attachTo: ref().isRequired, conformWidth: bool, id: string.isRequired, isOpen: bool, keepOpen: bool, keyDown: impl(), nullOption: string, offsets: arrayOf(number), onOptionListChanged: fun(), onOptionSelected: fun(), onPositionFlip: fun(), onSelfToggle: fun(), optionRole: string, positionOverride: arrayOf(enumValue(Position)), selectedOption: any, specialAction: fun(), ignoreWidthStyles: bool });
+var propTypes$1x = __assign(__assign(__assign(__assign({}, spsGlobalPropTypes), spsOptionListPassthroughProps.propTypes), searchableOptionListProps), { attachTo: ref().isRequired, conformWidth: bool, id: string.isRequired, isOpen: bool, keepOpen: bool, keyDown: impl(), nullOption: string, offsets: arrayOf(number), onOptionListChanged: fun(), onOptionSelected: fun(), onPositionFlip: fun(), onSelfToggle: fun(), optionRole: string, positionOverride: arrayOf(enumValue(Position)), selectedOption: any, specialAction: fun(), ignoreWidthStyles: bool });
 
 function updateOptions(props, searchState, searchStatePatch, setOptionList, setAnyOptionHasIcon) {
     return __awaiter(this, void 0, void 0, function () {
@@ -1072,7 +1072,7 @@ var SpsOptionList = React.forwardRef(function (props, ref) {
                 React.createElement("span", null, specialAction.label)))));
 });
 Object.assign(SpsOptionList, {
-    propTypes: propTypes$1u,
+    propTypes: propTypes$1x,
     displayName: 'SpsOptionList',
 });
 
@@ -1211,7 +1211,7 @@ function useInputPopup(rootRef, popupRef, formMeta) {
     };
 }
 
-var propsDoc$1p = {
+var propsDoc$1s = {
     debounce: 'number',
     disabled: 'boolean',
     formMeta: 'SpsFormFieldMeta<string>',
@@ -1226,7 +1226,7 @@ var propsDoc$1p = {
     value: 'string',
     zeroState: 'string',
 };
-var propTypes$1t = __assign(__assign({}, spsGlobalPropTypes), { debounce: number, disabled: bool, formControl: impl(), formMeta: impl(), icon: enumValue(SpsIcon$1), onChange: fun(), placeholder: string, suggestions: oneOfType([
+var propTypes$1w = __assign(__assign({}, spsGlobalPropTypes), { debounce: number, disabled: bool, formControl: impl(), formMeta: impl(), icon: enumValue(SpsIcon$1), onChange: fun(), placeholder: string, suggestions: oneOfType([
         arrayOf(string),
         instanceOf(Promise),
         fun(),
@@ -1294,8 +1294,8 @@ function SpsAutocomplete(_a) {
         React.createElement(SpsOptionList, { id: wrapperId + "_options", ref: optionListRef, attachTo: rootRef, isOpen: showPopup, options: suggestions, hideInlineSearch: true, keyDown: state.keyDown, onOptionSelected: setAndPropagateValue, onPositionFlip: handlePositionFlip, onSelfToggle: handleSelfToggle, offsets: [1, 0], search: value, searchDebounce: debounce, tall: tallOptionList, zeroState: zeroState })));
 }
 Object.assign(SpsAutocomplete, {
-    props: propsDoc$1p,
-    propTypes: propTypes$1t,
+    props: propsDoc$1s,
+    propTypes: propTypes$1w,
     displayName: 'SpsAutocomplete',
 });
 
@@ -1304,7 +1304,7 @@ var SpsAutocompleteExamples = {
         label: 'Basic',
         examples: {
             basic: {
-                react: code(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const [color, setColor] = React.useState();\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        function handleChange(event) {\n                            setColor(event.target.value);\n                        }\n\n                        return (\n                            <SpsAutocomplete suggestions={colors}\n                                value={color}\n                                onChange={handleChange}\n                                placeholder=\"Enter a color\"\n                            />\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const [color, setColor] = React.useState();\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        function handleChange(event) {\n                            setColor(event.target.value);\n                        }\n\n                        return (\n                            <SpsAutocomplete suggestions={colors}\n                                value={color}\n                                onChange={handleChange}\n                                placeholder=\"Enter a color\"\n                            />\n                        );\n                    }\n                "]))),
+                react: code(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const [color, setColor] = React.useState();\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        function handleChange(event) {\n                            setColor(event.target.value);\n                        }\n\n                        return (\n                            <SpsAutocomplete suggestions={colors}\n                                value={color}\n                                onChange={handleChange}\n                                placeholder=\"Enter a color\"\n                            />\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const [color, setColor] = React.useState();\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        function handleChange(event) {\n                            setColor(event.target.value);\n                        }\n\n                        return (\n                            <SpsAutocomplete suggestions={colors}\n                                value={color}\n                                onChange={handleChange}\n                                placeholder=\"Enter a color\"\n                            />\n                        );\n                    }\n                "]))),
             },
             disabled: {
                 jsx: code(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n                    <SpsAutocomplete suggestions={[\"red\", \"blue\", \"green\"]} value=\"yellow\" disabled id=\"disabledAutocomplete\"/>\n                "], ["\n                    <SpsAutocomplete suggestions={[\"red\", \"blue\", \"green\"]} value=\"yellow\" disabled id=\"disabledAutocomplete\"/>\n                "]))),
@@ -1329,9 +1329,9 @@ var SpsAutocompleteExamples = {
         },
     },
 };
-var templateObject_1$Q, templateObject_2$L, templateObject_3$D, templateObject_4$v, templateObject_5$n, templateObject_6$i;
+var templateObject_1$R, templateObject_2$L, templateObject_3$D, templateObject_4$v, templateObject_5$n, templateObject_6$i;
 
-var propsDoc$1o = {
+var propsDoc$1r = {
     alignLeft: 'boolean',
     disabled: 'boolean',
     icon: 'SpsIcon',
@@ -1344,7 +1344,7 @@ var propsDoc$1o = {
     onOpen: '() => void',
     onClose: '() => void',
 };
-var propTypes$1s = __assign(__assign({}, spsGlobalPropTypes), { alignLeft: bool, disabled: bool, icon: enumValue(SpsIcon$1), kind: enumValue(DropdownKind), label: string, 
+var propTypes$1v = __assign(__assign({}, spsGlobalPropTypes), { alignLeft: bool, disabled: bool, icon: enumValue(SpsIcon$1), kind: enumValue(DropdownKind), label: string, 
     // eslint thinks there is a space between the name and open paren below for some reason
     // eslint-disable-next-line no-spaced-func
     options: arrayOf(oneOfType([func, any])).isRequired, spinning: bool, spinningTitle: string, tallOptionList: bool, onOpen: fun(), onClose: fun() });
@@ -1439,13 +1439,13 @@ function SpsDropdown(props) {
                 spinning && (React.createElement("div", { className: "sps-spinner", key: 1 }, spinningTitle || t('design-system:button.spinningTitle')))))));
 }
 Object.assign(SpsDropdown, {
-    props: propsDoc$1o,
-    propTypes: propTypes$1s,
+    props: propsDoc$1r,
+    propTypes: propTypes$1v,
     displayName: 'SpsDropdown',
 });
 
-var propsDoc$1n = {};
-var propTypes$1r = __assign({}, spsGlobalPropTypes);
+var propsDoc$1q = {};
+var propTypes$1u = __assign({}, spsGlobalPropTypes);
 function SpsButtonGroup(props) {
     var children = props.children, className = props.className, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "unsafelyReplaceClassName"]);
     var _a = __read(selectChildren(children, [
@@ -1463,8 +1463,8 @@ function SpsButtonGroup(props) {
         others.length > 0 && others));
 }
 Object.assign(SpsButtonGroup, {
-    props: propsDoc$1n,
-    propTypes: propTypes$1r,
+    props: propsDoc$1q,
+    propTypes: propTypes$1u,
     displayName: 'SpsButtonGroup',
 });
 
@@ -1481,7 +1481,7 @@ var SpsButtonExamples = {
         examples: {
             basic: {
                 description: 'Without Icons',
-                jsx: code(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n                    <>\n                        <SpsButton className=\"mr-1 mb-1\">Default</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.KEY}>Key</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.CONFIRM}>Confirm</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.DELETE}>Delete</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" disabled>Disabled</SpsButton>\n                    </>\n                "], ["\n                    <>\n                        <SpsButton className=\"mr-1 mb-1\">Default</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.KEY}>Key</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.CONFIRM}>Confirm</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.DELETE}>Delete</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" disabled>Disabled</SpsButton>\n                    </>\n                "]))),
+                jsx: code(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n                    <>\n                        <SpsButton className=\"mr-1 mb-1\">Default</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.KEY}>Key</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.CONFIRM}>Confirm</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.DELETE}>Delete</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" disabled>Disabled</SpsButton>\n                    </>\n                "], ["\n                    <>\n                        <SpsButton className=\"mr-1 mb-1\">Default</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.KEY}>Key</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.CONFIRM}>Confirm</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.DELETE}>Delete</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" disabled>Disabled</SpsButton>\n                    </>\n                "]))),
             },
             buttonsWithIcons: {
                 description: 'With Icons',
@@ -1521,7 +1521,7 @@ var SpsButtonExamples = {
             },
             withIcon: {
                 description: 'With Icons',
-                jsx: code(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n                    <>\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            label=\"Default\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.KEY}\n                            label=\"Key\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.CONFIRM}\n                            label=\"Confirm\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.DELETE}\n                            label=\"Delete\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            disabled\n                            label=\"Disabled\"\n                        />\n                    </>\n                "], ["\n                    <>\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            label=\"Default\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.KEY}\n                            label=\"Key\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.CONFIRM}\n                            label=\"Confirm\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.DELETE}\n                            label=\"Delete\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            disabled\n                            label=\"Disabled\"\n                        />\n                    </>\n                "]))),
+                jsx: code(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n                    <>\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            label=\"Default\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.KEY}\n                            label=\"Key\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.CONFIRM}\n                            label=\"Confirm\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.DELETE}\n                            label=\"Delete\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            disabled\n                            label=\"Disabled\"\n                        />\n                    </>\n                "], ["\n                    <>\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            label=\"Default\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.KEY}\n                            label=\"Key\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.CONFIRM}\n                            label=\"Confirm\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.DELETE}\n                            label=\"Delete\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            disabled\n                            label=\"Disabled\"\n                        />\n                    </>\n                "]))),
             },
         },
     },
@@ -1556,7 +1556,7 @@ var SpsButtonExamples = {
                             React.createElement(NavigateTo, { to: "Content Row" }, "Content Row"),
                             ".")));
                 },
-                jsx: code(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n                    <SpsDropdown\n                        className=\"mr-1 mb-1\"\n                        kind={ButtonKind.ICON}\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                    />\n                "], ["\n                    <SpsDropdown\n                        className=\"mr-1 mb-1\"\n                        kind={ButtonKind.ICON}\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                    />\n                "]))),
+                jsx: code(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n                    <SpsDropdown\n                        className=\"mr-1 mb-1\"\n                        kind={ButtonKind.ICON}\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                    />\n                "], ["\n                    <SpsDropdown\n                        className=\"mr-1 mb-1\"\n                        kind={ButtonKind.ICON}\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                    />\n                "]))),
             },
             spin: {
                 description: 'Spinner',
@@ -1659,14 +1659,14 @@ var SpsButtonExamples = {
         },
     },
 };
-var templateObject_1$P, templateObject_2$K, templateObject_3$C, templateObject_4$u, templateObject_5$m, templateObject_6$h, templateObject_7$e, templateObject_8$c, templateObject_9$a, templateObject_10$7, templateObject_11$6, templateObject_12$4, templateObject_13$4, templateObject_14$4, templateObject_15$3, templateObject_16$2, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1;
+var templateObject_1$Q, templateObject_2$K, templateObject_3$C, templateObject_4$u, templateObject_5$m, templateObject_6$h, templateObject_7$e, templateObject_8$d, templateObject_9$a, templateObject_10$8, templateObject_11$6, templateObject_12$4, templateObject_13$4, templateObject_14$4, templateObject_15$3, templateObject_16$2, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1;
 
-var propsDoc$1m = {
+var propsDoc$1p = {
     content: 'ReactNodeLike',
     icon: 'SpsIcon',
     title: 'string',
 };
-var propTypes$1q = __assign(__assign({}, spsGlobalPropTypes), { content: node, icon: enumValue(SpsIcon$1), title: string });
+var propTypes$1t = __assign(__assign({}, spsGlobalPropTypes), { content: node, icon: enumValue(SpsIcon$1), title: string });
 function SpsCardHeader(props) {
     var content = props.content, className = props.className, icon = props.icon, title = props.title; props["data-testid"]; var unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["content", "className", "icon", "title", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-card__header', className);
@@ -1679,16 +1679,16 @@ function SpsCardHeader(props) {
         React.createElement("div", { className: "sps-card__header-content" }, content)));
 }
 Object.assign(SpsCardHeader, {
-    props: propsDoc$1m,
-    propTypes: propTypes$1q,
+    props: propsDoc$1p,
+    propTypes: propTypes$1t,
     displayName: 'SpsCardHeader',
 });
 
-var propsDoc$1l = {
+var propsDoc$1o = {
     icon: 'SpsIcon',
     kind: 'TagKind',
 };
-var propTypes$1p = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(SpsIcon$1), kind: enumValue(TagKind) });
+var propTypes$1s = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(SpsIcon$1), kind: enumValue(TagKind) });
 function SpsTag(props) {
     var children = props.children, className = props.className, icon = props.icon, _a = props.kind, kind = _a === void 0 ? TagKind.DEFAULT : _a, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "icon", "kind", 'data-testid', "unsafelyReplaceClassName"]);
     var title = React.Children.toArray(children)
@@ -1700,12 +1700,12 @@ function SpsTag(props) {
         children));
 }
 Object.assign(SpsTag, {
-    props: propsDoc$1l,
-    propTypes: propTypes$1p,
+    props: propsDoc$1o,
+    propTypes: propTypes$1s,
     displayName: 'SpsTag',
 });
 
-var propsDoc$1k = {
+var propsDoc$1n = {
     activateTab: 'Function',
     active: 'boolean',
     icon: 'SpsIcon',
@@ -1715,7 +1715,7 @@ var propsDoc$1k = {
     tagKind: 'TagKind',
     tagIcon: 'SpsIcon',
 };
-var propTypes$1o = __assign(__assign({}, spsGlobalPropTypes), { activateTab: func, active: bool, icon: enumValue(SpsIcon$1), label: string, index: number, tag: string, tagKind: enumValue(TagKind), tagIcon: enumValue(SpsIcon$1) });
+var propTypes$1r = __assign(__assign({}, spsGlobalPropTypes), { activateTab: func, active: bool, icon: enumValue(SpsIcon$1), label: string, index: number, tag: string, tagKind: enumValue(TagKind), tagIcon: enumValue(SpsIcon$1) });
 function SpsCardTabbedPane(props) {
     var _this = this;
     var activateTab = props.activateTab, active = props.active, children = props.children, className = props.className, label = props.label, icon = props.icon, id = props.id, index = props.index, tag = props.tag, tagKind = props.tagKind, tagIcon = props.tagIcon; props["data-testid"]; var unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["activateTab", "active", "children", "className", "label", "icon", "id", "index", "tag", "tagKind", "tagIcon", 'data-testid', "unsafelyReplaceClassName"]);
@@ -1736,8 +1736,8 @@ function SpsCardTabbedPane(props) {
         tag && React.createElement(SpsTag, { kind: tagKind || TagKind.KEY, icon: tagIcon }, tag)));
 }
 Object.assign(SpsCardTabbedPane, {
-    props: propsDoc$1k,
-    propTypes: propTypes$1o,
+    props: propsDoc$1n,
+    propTypes: propTypes$1r,
     displayName: 'SpsCardTabbedPane',
 });
 
@@ -1812,14 +1812,14 @@ function useTab$1(children, activeTab, isTabbedCard) {
     return [currentlyActiveTab, activateTab];
 }
 
-var propsDoc$1j = {
+var propsDoc$1m = {
     activeTab: 'string',
     footer: 'ReactNodeOrRenderFn',
     headerContent: 'ReactNodeOrRenderFn',
     headerIcon: 'SpsIcon',
     headerTitle: 'string',
 };
-var propTypes$1n = __assign(__assign({}, spsGlobalPropTypes), { activeTab: string, footer: nodeOrRenderFn, headerContent: nodeOrRenderFn, headerIcon: enumValue(SpsIcon$1), headerTitle: string });
+var propTypes$1q = __assign(__assign({}, spsGlobalPropTypes), { activeTab: string, footer: nodeOrRenderFn, headerContent: nodeOrRenderFn, headerIcon: enumValue(SpsIcon$1), headerTitle: string });
 function SpsCard(props) {
     React.useEffect(function () {
         console.log([
@@ -1850,8 +1850,8 @@ function SpsCard(props) {
         footer && (React.createElement("div", { className: "sps-card__footer", "data-testid": testId + "__footer" }, contentOf(footer)))));
 }
 Object.assign(SpsCard, {
-    props: propsDoc$1j,
-    propTypes: propTypes$1n,
+    props: propsDoc$1m,
+    propTypes: propTypes$1q,
     displayName: 'SpsCard',
 });
 
@@ -1861,7 +1861,7 @@ var SpsCardExamples = {
         description: '<p>Basic Cards can include any type of content, such as tables, forms, description lists, or general copy</p>',
         examples: {
             basic: {
-                jsx: code(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n                    <SpsCardV2>\n                      <p>Plain card.</p>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                      <p>Plain card.</p>\n                    </SpsCardV2>\n                "]))),
+                jsx: code(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n                    <SpsCardV2>\n                      <p>Plain card.</p>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                      <p>Plain card.</p>\n                    </SpsCardV2>\n                "]))),
             },
             sections: {
                 jsx: code(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <section>\n                            <h3>Description</h3>\n                            <p>\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n                                laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in\n                                voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n                                non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n                            </p>\n                        </section>\n                        <section>\n                            <h3>Usage Guidelines</h3>\n                            <p>\n                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque\n                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi\n                                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit\n                                aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione\n                                voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,\n                                consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et\n                                dolore magnam aliquam quaerat voluptatem.\n                            </p>\n                        </section>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <section>\n                            <h3>Description</h3>\n                            <p>\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n                                laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in\n                                voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n                                non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n                            </p>\n                        </section>\n                        <section>\n                            <h3>Usage Guidelines</h3>\n                            <p>\n                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque\n                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi\n                                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit\n                                aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione\n                                voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,\n                                consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et\n                                dolore magnam aliquam quaerat voluptatem.\n                            </p>\n                        </section>\n                    </SpsCardV2>\n                "]))),
@@ -1894,7 +1894,7 @@ var SpsCardExamples = {
                 jsx: code(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <p>Card with footer.</p>\n                        <SpsCardV2Footer>Footer</SpsCardV2Footer>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <p>Card with footer.</p>\n                        <SpsCardV2Footer>Footer</SpsCardV2Footer>\n                    </SpsCardV2>\n                "]))),
             },
             gridFooter: {
-                jsx: code(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <p>Card content</p>\n                        <SpsCardV2Footer className=\"sfg-row\">\n                            <div className=\"sfg-col-6\">\n                                Footer Content\n                            </div>\n                            <div className=\"sfg-col-6 text-right\">\n                                More Footer Content\n                            </div>\n                        </SpsCardV2Footer>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <p>Card content</p>\n                        <SpsCardV2Footer className=\"sfg-row\">\n                            <div className=\"sfg-col-6\">\n                                Footer Content\n                            </div>\n                            <div className=\"sfg-col-6 text-right\">\n                                More Footer Content\n                            </div>\n                        </SpsCardV2Footer>\n                    </SpsCardV2>\n                "]))),
+                jsx: code(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <p>Card content</p>\n                        <SpsCardV2Footer className=\"sfg-row\">\n                            <div className=\"sfg-col-6\">\n                                Footer Content\n                            </div>\n                            <div className=\"sfg-col-6 text-right\">\n                                More Footer Content\n                            </div>\n                        </SpsCardV2Footer>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <p>Card content</p>\n                        <SpsCardV2Footer className=\"sfg-row\">\n                            <div className=\"sfg-col-6\">\n                                Footer Content\n                            </div>\n                            <div className=\"sfg-col-6 text-right\">\n                                More Footer Content\n                            </div>\n                        </SpsCardV2Footer>\n                    </SpsCardV2>\n                "]))),
             },
             footerAndHeader: {
                 jsx: code(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <SpsCardV2Header>\n                            <SpsCardV2Title>Card Title</SpsCardV2Title>\n                        </SpsCardV2Header>\n                        <p>Card with header and footer.</p>\n                        <SpsCardV2Footer>Footer</SpsCardV2Footer>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <SpsCardV2Header>\n                            <SpsCardV2Title>Card Title</SpsCardV2Title>\n                        </SpsCardV2Header>\n                        <p>Card with header and footer.</p>\n                        <SpsCardV2Footer>Footer</SpsCardV2Footer>\n                    </SpsCardV2>\n                "]))),
@@ -1903,7 +1903,7 @@ var SpsCardExamples = {
     },
     tabbed: {
         label: 'Card + Tabs',
-        description: code(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n            <p>Multiple cards can be combined into a single view with the use of tabs.</p>\n            <ul>\n                <li>\n                    The content displayed in the Card below should be different for each tab\n                </li>\n                <li>\n                    The content in each tab should have a relationship or association to one\n                    another\n                </li>\n            </ul>\n            <p>\n                <code>&lt;Item&gt;</code> comes from the <code>@react-stately/collections</code>\n                package, which is a peer dependency of our React components.\n            </p>\n        "], ["\n            <p>Multiple cards can be combined into a single view with the use of tabs.</p>\n            <ul>\n                <li>\n                    The content displayed in the Card below should be different for each tab\n                </li>\n                <li>\n                    The content in each tab should have a relationship or association to one\n                    another\n                </li>\n            </ul>\n            <p>\n                <code>&lt;Item&gt;</code> comes from the <code>@react-stately/collections</code>\n                package, which is a peer dependency of our React components.\n            </p>\n        "]))),
+        description: code(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n            <p>Multiple cards can be combined into a single view with the use of tabs.</p>\n            <ul>\n                <li>\n                    The content displayed in the Card below should be different for each tab\n                </li>\n                <li>\n                    The content in each tab should have a relationship or association to one\n                    another\n                </li>\n            </ul>\n            <p>\n                <code>&lt;Item&gt;</code> comes from the <code>@react-stately/collections</code>\n                package, which is a peer dependency of our React components.\n            </p>\n        "], ["\n            <p>Multiple cards can be combined into a single view with the use of tabs.</p>\n            <ul>\n                <li>\n                    The content displayed in the Card below should be different for each tab\n                </li>\n                <li>\n                    The content in each tab should have a relationship or association to one\n                    another\n                </li>\n            </ul>\n            <p>\n                <code>&lt;Item&gt;</code> comes from the <code>@react-stately/collections</code>\n                package, which is a peer dependency of our React components.\n            </p>\n        "]))),
         examples: {
             tabsOnly: {
                 jsx: code(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <SpsTabsV2>\n                            <Item\n                                key=\"tab1\"\n                                title={<>\n                                    <SpsI icon={SpsIcon.CHART_PIE}/>\n                                    <span>Tab 1</span>\n                                </>}\n                            >\n                                <p>Card with tabs, pane 1.</p>\n                            </Item>\n                            <Item key=\"tab2\" title=\"Tab 2\">\n                                <p>Card with tabs, pane 2.</p>\n                            </Item>\n                            <Item key=\"tab3\" title=\"Tab 3\">\n                                <p>Card with tabs, pane 3.</p>\n                            </Item>\n                        </SpsTabsV2>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <SpsTabsV2>\n                            <Item\n                                key=\"tab1\"\n                                title={<>\n                                    <SpsI icon={SpsIcon.CHART_PIE}/>\n                                    <span>Tab 1</span>\n                                </>}\n                            >\n                                <p>Card with tabs, pane 1.</p>\n                            </Item>\n                            <Item key=\"tab2\" title=\"Tab 2\">\n                                <p>Card with tabs, pane 2.</p>\n                            </Item>\n                            <Item key=\"tab3\" title=\"Tab 3\">\n                                <p>Card with tabs, pane 3.</p>\n                            </Item>\n                        </SpsTabsV2>\n                    </SpsCardV2>\n                "]))),
@@ -1923,9 +1923,9 @@ var SpsCardExamples = {
         },
     },
 };
-var templateObject_1$O, templateObject_2$J, templateObject_3$B, templateObject_4$t, templateObject_5$l, templateObject_6$g, templateObject_7$d, templateObject_8$b, templateObject_9$9, templateObject_10$6, templateObject_11$5, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$2;
+var templateObject_1$P, templateObject_2$J, templateObject_3$B, templateObject_4$t, templateObject_5$l, templateObject_6$g, templateObject_7$d, templateObject_8$c, templateObject_9$9, templateObject_10$7, templateObject_11$5, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$2;
 
-var propsDoc$1i = {
+var propsDoc$1l = {
     checked: 'boolean',
     disabled: 'boolean',
     formMeta: 'SpsFormFieldMeta<boolean>',
@@ -1934,7 +1934,7 @@ var propsDoc$1i = {
     label: 'string',
     onChange: 'ChangeEventHandler',
 };
-var propTypes$1m = __assign(__assign({}, spsGlobalPropTypes), { checked: bool, disabled: bool, formControl: impl(), formMeta: impl(), indeterminate: bool, inline: bool, label: string, onChange: fun() });
+var propTypes$1p = __assign(__assign({}, spsGlobalPropTypes), { checked: bool, disabled: bool, formControl: impl(), formMeta: impl(), indeterminate: bool, inline: bool, label: string, onChange: fun() });
 function SpsCheckbox(_a) {
     var checkedProp = _a.checked, className = _a.className, disabled = _a.disabled, formControl = _a.formControl, formMeta = _a.formMeta, id = _a.id, indeterminateProp = _a.indeterminate, inline = _a.inline, label = _a.label, onChange = _a.onChange, testId = _a["data-testid"], unsafelyReplaceClassName = _a.unsafelyReplaceClassName, rest = __rest(_a, ["checked", "className", "disabled", "formControl", "formMeta", "id", "indeterminate", "inline", "label", "onChange", 'data-testid', "unsafelyReplaceClassName"]);
     var meta = formMeta || formControl;
@@ -1965,15 +1965,15 @@ function SpsCheckbox(_a) {
         React.createElement("label", { className: "sps-checkable__label", htmlFor: controlId }, label || '')));
 }
 Object.assign(SpsCheckbox, {
-    props: propsDoc$1i,
-    propTypes: propTypes$1m,
+    props: propsDoc$1l,
+    propTypes: propTypes$1p,
     displayName: 'SpsCheckbox',
 });
 
 var SpsCheckboxExamples = {
     labels: {
         label: 'Labels',
-        description: code(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n            <p>An individual checkbox should be labeled with its own <code>label</code> prop,\n            not the <code>&lt;SpsLabel&gt;</code> component.</p>\n        "], ["\n            <p>An individual checkbox should be labeled with its own <code>label</code> prop,\n            not the <code>&lt;SpsLabel&gt;</code> component.</p>\n        "]))),
+        description: code(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n            <p>An individual checkbox should be labeled with its own <code>label</code> prop,\n            not the <code>&lt;SpsLabel&gt;</code> component.</p>\n        "], ["\n            <p>An individual checkbox should be labeled with its own <code>label</code> prop,\n            not the <code>&lt;SpsLabel&gt;</code> component.</p>\n        "]))),
         examples: {
             label: {
                 react: code(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n                function DemoComponent() {\n                    const { formValue, formMeta, updateForm } = useSpsForm({\n                        red: true,\n                        blue: false,\n                        green: false,\n                    })\n\n                    return <>\n                        <SpsCheckbox\n                            name=\"red\"\n                            label=\"Red\"\n                            checked={formValue.red}\n                            formMeta={formMeta.fields.red}\n                        />\n                        <SpsCheckbox\n                            name=\"blue\"\n                            label=\"Blue\"\n                            checked={formValue.blue}\n                            formMeta={formMeta.fields.blue}\n                        />\n                        <SpsCheckbox\n                            name=\"green\"\n                            label=\"Green\"\n                            checked={formValue.green}\n                            formMeta={formMeta.fields.green}\n                            indeterminate\n                        />\n                    </>\n                  }\n                "], ["\n                function DemoComponent() {\n                    const { formValue, formMeta, updateForm } = useSpsForm({\n                        red: true,\n                        blue: false,\n                        green: false,\n                    })\n\n                    return <>\n                        <SpsCheckbox\n                            name=\"red\"\n                            label=\"Red\"\n                            checked={formValue.red}\n                            formMeta={formMeta.fields.red}\n                        />\n                        <SpsCheckbox\n                            name=\"blue\"\n                            label=\"Blue\"\n                            checked={formValue.blue}\n                            formMeta={formMeta.fields.blue}\n                        />\n                        <SpsCheckbox\n                            name=\"green\"\n                            label=\"Green\"\n                            checked={formValue.green}\n                            formMeta={formMeta.fields.green}\n                            indeterminate\n                        />\n                    </>\n                  }\n                "]))),
@@ -1998,16 +1998,16 @@ var SpsCheckboxExamples = {
         },
     },
 };
-var templateObject_1$N, templateObject_2$I, templateObject_3$A, templateObject_4$s, templateObject_5$k;
+var templateObject_1$O, templateObject_2$I, templateObject_3$A, templateObject_4$s, templateObject_5$k;
 
-var propsDoc$1h = {
+var propsDoc$1k = {
     disabled: 'boolean',
     href: 'string',
     kind: 'ClickableTagKind',
     onAdd: '() => void',
     onRemove: '() => void',
 };
-var propTypes$1l = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, href: string, kind: enumValue(ClickableTagKind), onAdd: fun(), onRemove: fun() });
+var propTypes$1o = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, href: string, kind: enumValue(ClickableTagKind), onAdd: fun(), onRemove: fun() });
 function SpsClickableTag(props) {
     var children = props.children, className = props.className, disabled = props.disabled, href = props.href, _a = props.kind, kind = _a === void 0 ? ClickableTagKind.BLUE : _a, onAdd = props.onAdd, onRemove = props.onRemove, onClick = props.onClick, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "disabled", "href", "kind", "onAdd", "onRemove", "onClick", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-clickable-tag', "sps-clickable-tag--" + kind, className, disabled && 'sps-clickable-tag--disabled', (onAdd || onRemove) && 'sps-clickable-tag--icon');
@@ -2062,8 +2062,8 @@ function SpsMultiSelectTag(props) {
     return React.createElement(SpsClickableTag, __assign({}, clickableTagProps), children);
 }
 Object.assign(SpsClickableTag, {
-    props: propsDoc$1h,
-    propTypes: propTypes$1l,
+    props: propsDoc$1k,
+    propTypes: propTypes$1o,
     displayName: 'SpsClickableTag',
 });
 
@@ -2072,7 +2072,7 @@ var SpsClickableTagExamples = {
         label: 'Basic',
         examples: {
             basic: {
-                react: code(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    import { ClickableTagKind } from \"@spscommerce/ds-shared\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsClickableTag className=\"mt-1 ml-1\">Blue</SpsClickableTag>\n                          <SpsClickableTag className=\"mt-1 ml-1\" kind={ClickableTagKind.GRAY}>\n                            Gray\n                          </SpsClickableTag>\n                        </>\n                      );\n                    }\n                "], ["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    import { ClickableTagKind } from \"@spscommerce/ds-shared\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsClickableTag className=\"mt-1 ml-1\">Blue</SpsClickableTag>\n                          <SpsClickableTag className=\"mt-1 ml-1\" kind={ClickableTagKind.GRAY}>\n                            Gray\n                          </SpsClickableTag>\n                        </>\n                      );\n                    }\n                "]))),
+                react: code(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    import { ClickableTagKind } from \"@spscommerce/ds-shared\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsClickableTag className=\"mt-1 ml-1\">Blue</SpsClickableTag>\n                          <SpsClickableTag className=\"mt-1 ml-1\" kind={ClickableTagKind.GRAY}>\n                            Gray\n                          </SpsClickableTag>\n                        </>\n                      );\n                    }\n                "], ["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    import { ClickableTagKind } from \"@spscommerce/ds-shared\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsClickableTag className=\"mt-1 ml-1\">Blue</SpsClickableTag>\n                          <SpsClickableTag className=\"mt-1 ml-1\" kind={ClickableTagKind.GRAY}>\n                            Gray\n                          </SpsClickableTag>\n                        </>\n                      );\n                    }\n                "]))),
             },
             disabled: {
                 react: code(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    function Component() {\n                      return (\n                        <SpsClickableTag className=\"mt-1 ml-1\" disabled>\n                          Disabled\n                        </SpsClickableTag>\n                      );\n                    }\n                "], ["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    function Component() {\n                      return (\n                        <SpsClickableTag className=\"mt-1 ml-1\" disabled>\n                          Disabled\n                        </SpsClickableTag>\n                      );\n                    }\n                "]))),
@@ -2102,9 +2102,9 @@ var SpsClickableTagExamples = {
         },
     },
 };
-var templateObject_1$M, templateObject_2$H, templateObject_3$z, templateObject_4$r, templateObject_5$j, templateObject_6$f;
+var templateObject_1$N, templateObject_2$H, templateObject_3$z, templateObject_4$r, templateObject_5$j, templateObject_6$f;
 
-var propsDoc$1g = {
+var propsDoc$1j = {
     index: 'number',
     key: 'string',
     columnId: 'string',
@@ -2113,7 +2113,7 @@ var propsDoc$1g = {
     onDelete: '(columnValue: string) => void',
     mandatory: 'boolean',
 };
-var propTypes$1k = __assign(__assign({}, spsGlobalPropTypes), { index: number, key: string, columnId: string, name: string, value: string, onDelete: fun(), mandatory: bool });
+var propTypes$1n = __assign(__assign({}, spsGlobalPropTypes), { index: number, key: string, columnId: string, name: string, value: string, onDelete: fun(), mandatory: bool });
 function SpsColumnChooserColumn(props) {
     var index = props.index; props.key; var columnId = props.columnId, name = props.name, value = props.value, onDelete = props.onDelete, mandatory = props.mandatory, rest = __rest(props, ["index", "key", "columnId", "name", "value", "onDelete", "mandatory"]);
     var t = React.useContext(I18nContext).t;
@@ -2132,19 +2132,19 @@ function SpsColumnChooserColumn(props) {
                 } })))))); }));
 }
 Object.assign(SpsColumnChooserColumn, {
-    props: propsDoc$1g,
-    propTypes: propTypes$1k,
+    props: propsDoc$1j,
+    propTypes: propTypes$1n,
     displayName: 'SpsColumnChooserColumn',
 });
 
 // TODO: Put English strings into i18n system
-var propsDoc$1f = {
+var propsDoc$1i = {
     maxSelectedColumns: 'number',
     unselectedColumns: 'ColumnProps[]',
     selectedColumns: 'ColumnProps[]',
     onApplyChanges: '(selectedColumns: ColumnProps[]) => void',
 };
-var propTypes$1j = __assign(__assign({}, spsGlobalPropTypes), { maxSelectedColumns: number, unselectedColumns: array, selectedColumns: array, onApplyChanges: fun() });
+var propTypes$1m = __assign(__assign({}, spsGlobalPropTypes), { maxSelectedColumns: number, unselectedColumns: array, selectedColumns: array, onApplyChanges: fun() });
 function SpsColumnChooser(props) {
     var unselectedColumns = props.unselectedColumns, selectedColumns = props.selectedColumns, maxSelectedColumns = props.maxSelectedColumns, onApplyChanges = props.onApplyChanges, className = props.className; props.unsafelyReplaceClassName; var rest = __rest(props, ["unselectedColumns", "selectedColumns", "maxSelectedColumns", "onApplyChanges", "className", "unsafelyReplaceClassName"]);
     var _a = __read(usePatchReducer({
@@ -2232,8 +2232,8 @@ function SpsColumnChooser(props) {
                     provided.placeholder)); }))))));
 }
 Object.assign(SpsColumnChooser, {
-    props: propsDoc$1f,
-    propTypes: propTypes$1j,
+    props: propsDoc$1i,
+    propTypes: propTypes$1m,
     displayName: 'SpsColumnChooser',
 });
 
@@ -2243,45 +2243,45 @@ var SpsColumnChooserExamples = {
         description: 'Column chooser component',
         examples: {
             basic: {
-                react: code(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const unselectedCols = [\n                            { name: \"Red Fish\", value: \"Red\" },\n                            { name: \"Blue Fish\", value: \"Blue\" }\n                        ];\n                        const selectedCols = [\n                            { name: \"One Fish\", value: \"One\" },\n                            { name: \"Two Fish\", value: \"Two\" }\n                        ]\n                        return (\n                            <SpsColumnChooser\n                                unselectedColumns={unselectedCols}\n                                selectedColumns={selectedCols}\n                                onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n                            />\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const unselectedCols = [\n                            { name: \"Red Fish\", value: \"Red\" },\n                            { name: \"Blue Fish\", value: \"Blue\" }\n                        ];\n                        const selectedCols = [\n                            { name: \"One Fish\", value: \"One\" },\n                            { name: \"Two Fish\", value: \"Two\" }\n                        ]\n                        return (\n                            <SpsColumnChooser\n                                unselectedColumns={unselectedCols}\n                                selectedColumns={selectedCols}\n                                onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n                            />\n                        );\n                    }\n                "]))),
+                react: code(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const unselectedCols = [\n                            { name: \"Red Fish\", value: \"Red\" },\n                            { name: \"Blue Fish\", value: \"Blue\" }\n                        ];\n                        const selectedCols = [\n                            { name: \"One Fish\", value: \"One\" },\n                            { name: \"Two Fish\", value: \"Two\" }\n                        ]\n                        return (\n                            <SpsColumnChooser\n                                unselectedColumns={unselectedCols}\n                                selectedColumns={selectedCols}\n                                onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n                            />\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const unselectedCols = [\n                            { name: \"Red Fish\", value: \"Red\" },\n                            { name: \"Blue Fish\", value: \"Blue\" }\n                        ];\n                        const selectedCols = [\n                            { name: \"One Fish\", value: \"One\" },\n                            { name: \"Two Fish\", value: \"Two\" }\n                        ]\n                        return (\n                            <SpsColumnChooser\n                                unselectedColumns={unselectedCols}\n                                selectedColumns={selectedCols}\n                                onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n                            />\n                        );\n                    }\n                "]))),
             },
         },
     },
 };
-var templateObject_1$L;
+var templateObject_1$M;
 
-var propsDoc$1e = {
+var propsDoc$1h = {
     icon: { type: 'SpsIcon', required: true },
     size: 'SpsIconSize',
 };
-var propTypes$1i = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(SpsIcon$1).isRequired, size: enumValue(SpsIconSize) });
+var propTypes$1l = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(SpsIcon$1).isRequired, size: enumValue(SpsIconSize) });
 function SpsIcon(props) {
     var className = props.className, testId = props["data-testid"], icon = props.icon, _a = props.size, size = _a === void 0 ? SpsIconSize.MEDIUM : _a, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["className", 'data-testid', "icon", "size", "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-icon', "sps-icon-" + icon, "sps-icon--" + size, className);
     return React.createElement("i", __assign({ className: classes, "aria-hidden": "true", "data-testid": testId }, rest));
 }
 Object.assign(SpsIcon, {
-    props: propsDoc$1e,
-    propTypes: propTypes$1i,
+    props: propsDoc$1h,
+    propTypes: propTypes$1l,
     displayName: 'SpsI',
 });
 function SpsI(props) {
     return React.createElement(SpsIcon, __assign({}, props));
 }
 Object.assign(SpsI, {
-    props: propsDoc$1e,
-    propTypes: propTypes$1i,
+    props: propsDoc$1h,
+    propTypes: propTypes$1l,
     displayName: 'SpsI',
 });
 
-var propsDoc$1d = {
+var propsDoc$1g = {
     borderless: 'boolean',
     lean: 'boolean',
     leaner: { type: 'boolean', deprecated: true },
     widthPx: 'number',
     widthRem: 'number',
 };
-var propTypes$1h = __assign(__assign({}, spsGlobalPropTypes), { borderless: bool, lean: bool, leaner: bool, widthPx: number, widthRem: number });
+var propTypes$1k = __assign(__assign({}, spsGlobalPropTypes), { borderless: bool, lean: bool, leaner: bool, widthPx: number, widthRem: number });
 function SpsContentRowCol(props) {
     var borderless = props.borderless, children = props.children; props.className; var lean = props.lean, leaner = props.leaner, style = props.style, unsafelyReplaceClassName = props.unsafelyReplaceClassName, widthPx = props.widthPx, widthRem = props.widthRem, rest = __rest(props, ["borderless", "children", "className", "lean", "leaner", "style", "unsafelyReplaceClassName", "widthPx", "widthRem"]);
     React.useEffect(function () {
@@ -2301,25 +2301,25 @@ function SpsContentRowCol(props) {
     return (React.createElement("div", __assign({}, rest, { className: classes, style: inlineStyles }), children));
 }
 Object.assign(SpsContentRowCol, {
-    props: propsDoc$1d,
-    propTypes: propTypes$1h,
+    props: propsDoc$1g,
+    propTypes: propTypes$1k,
     displayName: 'SpsContentRowCol',
 });
 
-var propsDoc$1c = {};
-var propTypes$1g = __assign({}, spsGlobalPropTypes);
+var propsDoc$1f = {};
+var propTypes$1j = __assign({}, spsGlobalPropTypes);
 function SpsContentRowExpansion(props) {
     var children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-content-row__expansion', className);
     return (React.createElement("div", __assign({ className: classes }, rest, { "data-testid": testId + "__expansion" }), children));
 }
 Object.assign(SpsContentRowExpansion, {
-    props: propsDoc$1c,
-    propTypes: propTypes$1g,
+    props: propsDoc$1f,
+    propTypes: propTypes$1j,
     displayName: 'SpsContentRowExpansion',
 });
 
-var propsDoc$1b = {
+var propsDoc$1e = {
     alternateLayout: 'boolean',
     initiallyExpanded: 'boolean',
     cardSpacing: 'boolean',
@@ -2331,7 +2331,7 @@ var propsDoc$1b = {
     selectable: 'boolean',
     selected: 'boolean',
 };
-var propTypes$1f = __assign(__assign({}, spsGlobalPropTypes), { alternateLayout: bool, cardSpacing: bool, initiallyExpanded: bool, onBeforeCollapsed: fun(), onBeforeExpanded: fun(), onSelectionChange: fun(), onCollapsed: fun(), onExpanded: fun(), selectable: bool, selected: bool });
+var propTypes$1i = __assign(__assign({}, spsGlobalPropTypes), { alternateLayout: bool, cardSpacing: bool, initiallyExpanded: bool, onBeforeCollapsed: fun(), onBeforeExpanded: fun(), onSelectionChange: fun(), onCollapsed: fun(), onExpanded: fun(), selectable: bool, selected: bool });
 function SpsContentRow(props) {
     var _a = props.alternateLayout, alternateLayout = _a === void 0 ? false : _a, children = props.children, className = props.className, onBeforeCollapsed = props.onBeforeCollapsed, onBeforeExpanded = props.onBeforeExpanded, onSelectionChange = props.onSelectionChange, onCollapsed = props.onCollapsed, onExpanded = props.onExpanded, _b = props.initiallyExpanded, initiallyExpanded = _b === void 0 ? false : _b, _c = props.cardSpacing, cardSpacing = _c === void 0 ? false : _c, _d = props.selectable, selectable = _d === void 0 ? false : _d, selected = props.selected, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["alternateLayout", "children", "className", "onBeforeCollapsed", "onBeforeExpanded", "onSelectionChange", "onCollapsed", "onExpanded", "initiallyExpanded", "cardSpacing", "selectable", "selected", "unsafelyReplaceClassName"]);
     var t = React.useContext(I18nContext).t;
@@ -2374,8 +2374,8 @@ function SpsContentRow(props) {
         expansion));
 }
 Object.assign(SpsContentRow, {
-    props: propsDoc$1b,
-    propTypes: propTypes$1f,
+    props: propsDoc$1e,
+    propTypes: propTypes$1i,
     displayName: 'SpsContentRow',
 });
 
@@ -2384,7 +2384,7 @@ var SpsContentRowExamples = {
         label: 'Content rows',
         examples: {
             basic: {
-                react: code(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n                    function DemoComponent() {\n                        return (\n                            <SpsContentRow>\n                                <SpsContentRowCol>\n                                    <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n                                    <a href=\"#\" className=\"fs-14\">3532379</a>\n                                </SpsContentRowCol>\n                                <SpsContentRowCol widthPx={150}>\n                                    May 23, 2018 @ 4:38 PM\n                                </SpsContentRowCol>\n                            </SpsContentRow>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        return (\n                            <SpsContentRow>\n                                <SpsContentRowCol>\n                                    <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n                                    <a href=\"#\" className=\"fs-14\">3532379</a>\n                                </SpsContentRowCol>\n                                <SpsContentRowCol widthPx={150}>\n                                    May 23, 2018 @ 4:38 PM\n                                </SpsContentRowCol>\n                            </SpsContentRow>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n                    function DemoComponent() {\n                        return (\n                            <SpsContentRow>\n                                <SpsContentRowCol>\n                                    <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n                                    <a href=\"#\" className=\"fs-14\">3532379</a>\n                                </SpsContentRowCol>\n                                <SpsContentRowCol widthPx={150}>\n                                    May 23, 2018 @ 4:38 PM\n                                </SpsContentRowCol>\n                            </SpsContentRow>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        return (\n                            <SpsContentRow>\n                                <SpsContentRowCol>\n                                    <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n                                    <a href=\"#\" className=\"fs-14\">3532379</a>\n                                </SpsContentRowCol>\n                                <SpsContentRowCol widthPx={150}>\n                                    May 23, 2018 @ 4:38 PM\n                                </SpsContentRowCol>\n                            </SpsContentRow>\n                        )\n                    }\n                "]))),
             },
             withCheckbox: {
                 react: code(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n                    function DemoComponent() {\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            selected: false\n                        });\n\n                        function selectRow() {\n                            updateForm({ selected: !formValue.selected })\n                        }\n\n                        return (\n                            <>\n                                <SpsContentRow\n                                    selectable\n                                    selected={formValue.selected}\n                                    onSelect={selectRow}\n                                >\n                                    <SpsContentRowCol>\n                                        <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n                                        <a href=\"#\" className=\"fs-14\">3532379</a>\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol widthPx={150}>\n                                        May 23, 2018 @ 4:38 PM\n                                    </SpsContentRowCol>\n                                </SpsContentRow>\n                            </>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            selected: false\n                        });\n\n                        function selectRow() {\n                            updateForm({ selected: !formValue.selected })\n                        }\n\n                        return (\n                            <>\n                                <SpsContentRow\n                                    selectable\n                                    selected={formValue.selected}\n                                    onSelect={selectRow}\n                                >\n                                    <SpsContentRowCol>\n                                        <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n                                        <a href=\"#\" className=\"fs-14\">3532379</a>\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol widthPx={150}>\n                                        May 23, 2018 @ 4:38 PM\n                                    </SpsContentRowCol>\n                                </SpsContentRow>\n                            </>\n                        )\n                    }\n                "]))),
@@ -2410,7 +2410,7 @@ var SpsContentRowExamples = {
                 react: code(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n                    function DemoComponent() {\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n                        function selectRow() {\n                            updateForm({ selected: !formValue.selected })\n                        }\n\n                        return (\n                            <>\n                                <SpsContentRow\n                                    selectable\n                                    selected={formValue.selected}\n                                    onSelect={selectRow}\n                                >\n                                    <SpsContentRowCol style={{ width: \"2.9rem\" }}>\n                                        <SpsI\n                                            className=\"blue200\"\n                                            icon={SpsIcon.STAR}\n                                        />\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol>\n                                        <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n                                        <a href=\"#\" className=\"fs-14\">3532379</a>\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol widthPx={150}>\n                                        May 23, 2018 @ 4:38 PM\n                                    </SpsContentRowCol>\n                                    <SpsContentRowExpansion>\n                                        <SpsCard>\n                                        <br />\n                                        <br />\n                                        <br />\n                                        <br />\n                                        Additional content\n                                        <br />\n                                        <br />\n                                        <br />\n                                        <br />\n                                        </SpsCard>\n                                    </SpsContentRowExpansion>\n                                </SpsContentRow>\n                            </>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n                        function selectRow() {\n                            updateForm({ selected: !formValue.selected })\n                        }\n\n                        return (\n                            <>\n                                <SpsContentRow\n                                    selectable\n                                    selected={formValue.selected}\n                                    onSelect={selectRow}\n                                >\n                                    <SpsContentRowCol style={{ width: \"2.9rem\" }}>\n                                        <SpsI\n                                            className=\"blue200\"\n                                            icon={SpsIcon.STAR}\n                                        />\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol>\n                                        <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n                                        <a href=\"#\" className=\"fs-14\">3532379</a>\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol widthPx={150}>\n                                        May 23, 2018 @ 4:38 PM\n                                    </SpsContentRowCol>\n                                    <SpsContentRowExpansion>\n                                        <SpsCard>\n                                        <br />\n                                        <br />\n                                        <br />\n                                        <br />\n                                        Additional content\n                                        <br />\n                                        <br />\n                                        <br />\n                                        <br />\n                                        </SpsCard>\n                                    </SpsContentRowExpansion>\n                                </SpsContentRow>\n                            </>\n                        )\n                    }\n                "]))),
             },
             expandableWithCheckboxAndFavoriteAlternate: {
-                react: code(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n                    function DemoComponent() {\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n                        function selectRow() {\n                            updateForm({ selected: !formValue.selected })\n                        }\n\n                        return (\n                            <>\n                                <SpsContentRow\n                                    selectable\n                                    selected={formValue.selected}\n                                    onSelect={selectRow}\n                                    alternateLayout\n                                >\n                                    <SpsContentRowCol style={{ width: \"2.9rem\" }}>\n                                        <SpsI\n                                            className=\"gray300\"\n                                            icon={SpsIcon.STAR}\n                                        />\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol>\n                                        <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n                                        <a href=\"#\" className=\"fs-14\">3532379</a>\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol widthPx={150}>\n                                        May 23, 2018 @ 4:38 PM\n                                    </SpsContentRowCol>\n                                    <SpsContentRowExpansion>\n                                        <SpsCard>\n                                        <br />\n                                        <br />\n                                        <br />\n                                        <br />\n                                        Additional content\n                                        <br />\n                                        <br />\n                                        <br />\n                                        <br />\n                                        </SpsCard>\n                                    </SpsContentRowExpansion>\n                                </SpsContentRow>\n                            </>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n                        function selectRow() {\n                            updateForm({ selected: !formValue.selected })\n                        }\n\n                        return (\n                            <>\n                                <SpsContentRow\n                                    selectable\n                                    selected={formValue.selected}\n                                    onSelect={selectRow}\n                                    alternateLayout\n                                >\n                                    <SpsContentRowCol style={{ width: \"2.9rem\" }}>\n                                        <SpsI\n                                            className=\"gray300\"\n                                            icon={SpsIcon.STAR}\n                                        />\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol>\n                                        <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n                                        <a href=\"#\" className=\"fs-14\">3532379</a>\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol widthPx={150}>\n                                        May 23, 2018 @ 4:38 PM\n                                    </SpsContentRowCol>\n                                    <SpsContentRowExpansion>\n                                        <SpsCard>\n                                        <br />\n                                        <br />\n                                        <br />\n                                        <br />\n                                        Additional content\n                                        <br />\n                                        <br />\n                                        <br />\n                                        <br />\n                                        </SpsCard>\n                                    </SpsContentRowExpansion>\n                                </SpsContentRow>\n                            </>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n                    function DemoComponent() {\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n                        function selectRow() {\n                            updateForm({ selected: !formValue.selected })\n                        }\n\n                        return (\n                            <>\n                                <SpsContentRow\n                                    selectable\n                                    selected={formValue.selected}\n                                    onSelect={selectRow}\n                                    alternateLayout\n                                >\n                                    <SpsContentRowCol style={{ width: \"2.9rem\" }}>\n                                        <SpsI\n                                            className=\"gray300\"\n                                            icon={SpsIcon.STAR}\n                                        />\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol>\n                                        <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n                                        <a href=\"#\" className=\"fs-14\">3532379</a>\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol widthPx={150}>\n                                        May 23, 2018 @ 4:38 PM\n                                    </SpsContentRowCol>\n                                    <SpsContentRowExpansion>\n                                        <SpsCard>\n                                        <br />\n                                        <br />\n                                        <br />\n                                        <br />\n                                        Additional content\n                                        <br />\n                                        <br />\n                                        <br />\n                                        <br />\n                                        </SpsCard>\n                                    </SpsContentRowExpansion>\n                                </SpsContentRow>\n                            </>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n                        function selectRow() {\n                            updateForm({ selected: !formValue.selected })\n                        }\n\n                        return (\n                            <>\n                                <SpsContentRow\n                                    selectable\n                                    selected={formValue.selected}\n                                    onSelect={selectRow}\n                                    alternateLayout\n                                >\n                                    <SpsContentRowCol style={{ width: \"2.9rem\" }}>\n                                        <SpsI\n                                            className=\"gray300\"\n                                            icon={SpsIcon.STAR}\n                                        />\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol>\n                                        <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n                                        <a href=\"#\" className=\"fs-14\">3532379</a>\n                                    </SpsContentRowCol>\n                                    <SpsContentRowCol widthPx={150}>\n                                        May 23, 2018 @ 4:38 PM\n                                    </SpsContentRowCol>\n                                    <SpsContentRowExpansion>\n                                        <SpsCard>\n                                        <br />\n                                        <br />\n                                        <br />\n                                        <br />\n                                        Additional content\n                                        <br />\n                                        <br />\n                                        <br />\n                                        <br />\n                                        </SpsCard>\n                                    </SpsContentRowExpansion>\n                                </SpsContentRow>\n                            </>\n                        )\n                    }\n                "]))),
             },
         },
     },
@@ -2423,7 +2423,7 @@ var SpsContentRowExamples = {
         },
     },
 };
-var templateObject_1$K, templateObject_2$G, templateObject_3$y, templateObject_4$q, templateObject_5$i, templateObject_6$e, templateObject_7$c, templateObject_8$a, templateObject_9$8;
+var templateObject_1$L, templateObject_2$G, templateObject_3$y, templateObject_4$q, templateObject_5$i, templateObject_6$e, templateObject_7$c, templateObject_8$b, templateObject_9$8;
 
 var moment$5 = moment$6.default || moment$6;
 function newWeekArray$1() {
@@ -2455,7 +2455,7 @@ function parse(value) {
 function weekOfMonth$1(date) {
     return Math.floor((date.clone().date(1).day() + date.date() - 1) / 7);
 }
-var propsDoc$1a = {
+var propsDoc$1d = {
     disabled: 'boolean',
     format: 'string',
     maxDate: 'string',
@@ -2465,7 +2465,7 @@ var propsDoc$1a = {
     placeholder: 'string',
     value: 'string',
 };
-var propTypes$1e = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, format: string, maxDate: string, minDate: string, onChange: fun(), onClickOutside: fun(), placeholder: string, value: string });
+var propTypes$1h = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, format: string, maxDate: string, minDate: string, onChange: fun(), onClickOutside: fun(), placeholder: string, value: string });
 function SpsDatepicker(props) {
     var className = props.className, disabled = props.disabled, _a = props.format, format = _a === void 0 ? moment$5.localeData().longDateFormat('MM/DD/YYYY') || 'MM/DD/YYYY' : _a, maxDate = props.maxDate, minDate = props.minDate, onChange = props.onChange, onClickOutside = props.onClickOutside, _b = props.placeholder, placeholder = _b === void 0 ? 'MM/DD/YYYY' : _b, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, value = props.value, id = props.id, rest = __rest(props, ["className", "disabled", "format", "maxDate", "minDate", "onChange", "onClickOutside", "placeholder", 'data-testid', "unsafelyReplaceClassName", "value", "id"]);
     var calendarRef = React.useRef();
@@ -2800,8 +2800,8 @@ function SpsDatepicker(props) {
                 !disabled && (inputRef && inputRef.current && inputRef.current.value) && (React.createElement("i", { className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn", onClick: handleClearClick }))))));
 }
 Object.assign(SpsDatepicker, {
-    props: propsDoc$1a,
-    propTypes: propTypes$1e,
+    props: propsDoc$1d,
+    propTypes: propTypes$1h,
     displayName: 'SpsDatepicker',
 });
 
@@ -2810,7 +2810,7 @@ var SpsDatepickerExamples = {
         label: 'Basic',
         examples: {
             basic: {
-                react: code(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            date: { year: 2018, month: 10, date: 31 },\n                        }, {\n                            \"date\": [SpsValidators.date]\n                        });\n\n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\">\n                                    <SpsLabel for={formMeta.fields.date}>Date</SpsLabel>\n                                    <SpsDatepickerV2\n                                        value={formValue.date}\n                                        formMeta={formMeta.fields.date}\n                                    />\n                                </div>\n                            </div>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            date: { year: 2018, month: 10, date: 31 },\n                        }, {\n                            \"date\": [SpsValidators.date]\n                        });\n\n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\">\n                                    <SpsLabel for={formMeta.fields.date}>Date</SpsLabel>\n                                    <SpsDatepickerV2\n                                        value={formValue.date}\n                                        formMeta={formMeta.fields.date}\n                                    />\n                                </div>\n                            </div>\n                        );\n                    }\n                "]))),
+                react: code(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            date: { year: 2018, month: 10, date: 31 },\n                        }, {\n                            \"date\": [SpsValidators.date]\n                        });\n\n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\">\n                                    <SpsLabel for={formMeta.fields.date}>Date</SpsLabel>\n                                    <SpsDatepickerV2\n                                        value={formValue.date}\n                                        formMeta={formMeta.fields.date}\n                                    />\n                                </div>\n                            </div>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            date: { year: 2018, month: 10, date: 31 },\n                        }, {\n                            \"date\": [SpsValidators.date]\n                        });\n\n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\">\n                                    <SpsLabel for={formMeta.fields.date}>Date</SpsLabel>\n                                    <SpsDatepickerV2\n                                        value={formValue.date}\n                                        formMeta={formMeta.fields.date}\n                                    />\n                                </div>\n                            </div>\n                        );\n                    }\n                "]))),
             },
         },
     },
@@ -2831,9 +2831,9 @@ var SpsDatepickerExamples = {
         },
     },
 };
-var templateObject_1$J, templateObject_2$F, templateObject_3$x;
+var templateObject_1$K, templateObject_2$F, templateObject_3$x;
 
-var propsDoc$19 = {
+var propsDoc$1c = {
     placeholder: 'string',
     disabled: 'boolean',
     format: 'string',
@@ -2844,7 +2844,7 @@ var propsDoc$19 = {
     value: 'MomentRange',
     preset: 'Duration',
 };
-var propTypes$1d = __assign(__assign({}, spsGlobalPropTypes), { placeholder: string, disabled: bool, format: string, minDate: string, maxDate: string, availablePresets: array, onChange: fun(), value: impl(), preset: impl() });
+var propTypes$1g = __assign(__assign({}, spsGlobalPropTypes), { placeholder: string, disabled: bool, format: string, minDate: string, maxDate: string, availablePresets: array, onChange: fun(), value: impl(), preset: impl() });
 function weekOfMonth(mmt) {
     return Math.floor((mmt.clone().date(1).day() + mmt.date() - 1) / 7);
 }
@@ -3418,8 +3418,8 @@ function SpsDateRangePicker(props) {
                 (currentValue && currentValue.start && currentValue.end && !disabled) ? (React.createElement("i", { className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn", onClick: clear })) : ''))));
 }
 Object.assign(SpsDateRangePicker, {
-    props: propsDoc$19,
-    propTypes: propTypes$1d,
+    props: propsDoc$1c,
+    propTypes: propTypes$1g,
     displayName: 'SpsDateRangePicker',
 });
 
@@ -3428,7 +3428,7 @@ var SpsDateRangePickerExamples = {
         label: 'Basic',
         examples: {
             basic: {
-                react: code(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            dateRange: [\n                                { year: 2021, month: 4, date: 10 },\n                                { year: 2021, month: 4, date: 18 }\n                            ]\n                        }, {\n                            \"dateRange\": [SpsValidators.dateRange]\n                        });\n\n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\">\n                                    <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>\n                                    <SpsDateRangePickerV2\n                                        value={formValue.dateRange}\n                                        formMeta={formMeta.fields.dateRange}\n                                    />\n                                </div>\n                            </div>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            dateRange: [\n                                { year: 2021, month: 4, date: 10 },\n                                { year: 2021, month: 4, date: 18 }\n                            ]\n                        }, {\n                            \"dateRange\": [SpsValidators.dateRange]\n                        });\n\n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\">\n                                    <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>\n                                    <SpsDateRangePickerV2\n                                        value={formValue.dateRange}\n                                        formMeta={formMeta.fields.dateRange}\n                                    />\n                                </div>\n                            </div>\n                        );\n                    }\n                "]))),
+                react: code(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            dateRange: [\n                                { year: 2021, month: 4, date: 10 },\n                                { year: 2021, month: 4, date: 18 }\n                            ]\n                        }, {\n                            \"dateRange\": [SpsValidators.dateRange]\n                        });\n\n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\">\n                                    <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>\n                                    <SpsDateRangePickerV2\n                                        value={formValue.dateRange}\n                                        formMeta={formMeta.fields.dateRange}\n                                    />\n                                </div>\n                            </div>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            dateRange: [\n                                { year: 2021, month: 4, date: 10 },\n                                { year: 2021, month: 4, date: 18 }\n                            ]\n                        }, {\n                            \"dateRange\": [SpsValidators.dateRange]\n                        });\n\n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\">\n                                    <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>\n                                    <SpsDateRangePickerV2\n                                        value={formValue.dateRange}\n                                        formMeta={formMeta.fields.dateRange}\n                                    />\n                                </div>\n                            </div>\n                        );\n                    }\n                "]))),
             },
         },
     },
@@ -3458,7 +3458,7 @@ var SpsDateRangePickerExamples = {
         },
     },
 };
-var templateObject_1$I, templateObject_2$E, templateObject_3$w, templateObject_4$p;
+var templateObject_1$J, templateObject_2$E, templateObject_3$w, templateObject_4$p;
 
 var currentLocale = moment__default.locale();
 require('moment/locale/en-au');
@@ -3556,7 +3556,7 @@ var formatMaps = {
     LONG_FULLDATETIME: 'LLLL',
     LONG_FULLDATETIME_ZONE: 'LLLL z', // Monday February 29, 2016 3:03 PM CST
 };
-var propsDoc$18 = {
+var propsDoc$1b = {
     currentUser: 'any',
     dateToFormat: 'string | Date',
     format: 'string',
@@ -3565,7 +3565,7 @@ var propsDoc$18 = {
     relativeHrs: 'number',
     tz: 'string',
 };
-var propTypes$1c = __assign(__assign({}, spsGlobalPropTypes), { currentUser: any, dateToFormat: oneOfType([
+var propTypes$1f = __assign(__assign({}, spsGlobalPropTypes), { currentUser: any, dateToFormat: oneOfType([
         string,
         instanceOf(Date),
     ]), format: string, locale: string, relative: bool, relativeHrs: number, tz: string });
@@ -3622,8 +3622,8 @@ function SpsDateTime(props) {
     })));
 }
 Object.assign(SpsDateTime, {
-    props: propsDoc$18,
-    propTypes: propTypes$1c,
+    props: propsDoc$1b,
+    propTypes: propTypes$1f,
     displayName: 'SpsDateTime',
 });
 
@@ -3633,7 +3633,7 @@ var SpsDatetimeExamples = {
         description: '<p>Formats dates</p>',
         examples: {
             basicAttribute: {
-                jsx: code(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n                    <SpsDateTime dateToFormat=\"2018-09-11T16:32:52.822000Z\" />\n                "], ["\n                    <SpsDateTime dateToFormat=\"2018-09-11T16:32:52.822000Z\" />\n                "]))),
+                jsx: code(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n                    <SpsDateTime dateToFormat=\"2018-09-11T16:32:52.822000Z\" />\n                "], ["\n                    <SpsDateTime dateToFormat=\"2018-09-11T16:32:52.822000Z\" />\n                "]))),
             },
             basicChild: {
                 jsx: code(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n                    <SpsDateTime>2018-09-11T16:32:52.822000Z</SpsDateTime>\n                "], ["\n                    <SpsDateTime>2018-09-11T16:32:52.822000Z</SpsDateTime>\n                "]))),
@@ -3641,14 +3641,14 @@ var SpsDatetimeExamples = {
         },
     },
 };
-var templateObject_1$H, templateObject_2$D;
+var templateObject_1$I, templateObject_2$D;
 
-var propsDoc$17 = {
+var propsDoc$1a = {
     compact: 'boolean',
     wideTerms: 'boolean',
     widerTerms: 'boolean',
 };
-var propTypes$1b = __assign(__assign({}, spsGlobalPropTypes), { compact: bool, wideTerms: bool, widerTerms: bool });
+var propTypes$1e = __assign(__assign({}, spsGlobalPropTypes), { compact: bool, wideTerms: bool, widerTerms: bool });
 function SpsDescriptionList(props) {
     var children = props.children, className = props.className, _a = props.compact, compact = _a === void 0 ? false : _a, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, _b = props.wideTerms, wideTerms = _b === void 0 ? false : _b, _c = props.widerTerms, widerTerms = _c === void 0 ? false : _c, rest = __rest(props, ["children", "className", "compact", 'data-testid', "unsafelyReplaceClassName", "wideTerms", "widerTerms"]);
     /** holy shit this is awful. TODO: fix this garbage */
@@ -3670,37 +3670,37 @@ function SpsDescriptionList(props) {
     return (React.createElement("dl", __assign({ className: classes, "data-testid": "" + testId }, rest), childrenWithProps));
 }
 Object.assign(SpsDescriptionList, {
-    props: propsDoc$17,
-    propTypes: propTypes$1b,
+    props: propsDoc$1a,
+    propTypes: propTypes$1e,
     displayName: 'SpsDescriptionList / SpsDl',
 });
 function SpsDl(p) {
     return SpsDescriptionList(p);
 }
 Object.assign(SpsDl, {
-    props: propsDoc$17,
-    propTypes: propTypes$1b,
+    props: propsDoc$1a,
+    propTypes: propTypes$1e,
     displayName: 'SpsDescriptionList / SpsDl',
 });
 
-var propsDoc$16 = {};
-var propTypes$1a = __assign({}, spsGlobalPropTypes);
+var propsDoc$19 = {};
+var propTypes$1d = __assign({}, spsGlobalPropTypes);
 function SpsDescriptionListDefinition(props) {
     var children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-description-list__definition', className);
     return (React.createElement("dd", __assign({ className: classes, "data-testid": "" + testId }, rest), children));
 }
 Object.assign(SpsDescriptionListDefinition, {
-    props: propsDoc$16,
-    propTypes: propTypes$1a,
+    props: propsDoc$19,
+    propTypes: propTypes$1d,
     displayName: 'SpsDescriptionListDefinition / SpsDd',
 });
 function SpsDd(p) {
     return SpsDescriptionListDefinition(p);
 }
 Object.assign(SpsDd, {
-    props: propsDoc$16,
-    propTypes: propTypes$1a,
+    props: propsDoc$19,
+    propTypes: propTypes$1d,
     displayName: 'SpsDescriptionListDefinition / SpsDd',
 });
 
@@ -3718,7 +3718,7 @@ function toggleTooltipState(state) {
 }
 var CARET_SPACING_PX = 13;
 var openTips = new Map();
-var propsDoc$15 = {
+var propsDoc$18 = {
     for: { type: 'React.MutableRefObject<any> | string', required: true },
     hideDelay: 'number',
     isShown: 'TooltipVisibility',
@@ -3730,7 +3730,7 @@ var propsDoc$15 = {
     showOn: 'TooltipShowTrigger',
     title: 'string',
 };
-var propTypes$19 = __assign(__assign({}, spsGlobalPropTypes), { for: oneOfType([ref(), string]).isRequired, hideDelay: number, isShown: enumValue(TooltipVisibility), kind: enumValue(TooltipKind), offsets: arrayOf(number), onDeferred: fun(), position: enumValue(Position), altPosition: enumValue(Position), showOn: enumValue(TooltipShowTrigger), title: string });
+var propTypes$1c = __assign(__assign({}, spsGlobalPropTypes), { for: oneOfType([ref(), string]).isRequired, hideDelay: number, isShown: enumValue(TooltipVisibility), kind: enumValue(TooltipKind), offsets: arrayOf(number), onDeferred: fun(), position: enumValue(Position), altPosition: enumValue(Position), showOn: enumValue(TooltipShowTrigger), title: string });
 function SpsTooltip(_a) {
     var children = _a.children, className = _a.className, forProp = _a.for, testId = _a["data-testid"], _b = _a.hideDelay, hideDelay = _b === void 0 ? TOOLTIP_HIDE_DELAY_MS_DEFAULT : _b, isShown = _a.isShown, _c = _a.kind, kind = _c === void 0 ? TooltipKind.DEFAULT : _c, _d = _a.offsets, offsets = _d === void 0 ? [0, 0] : _d, onDeferred = _a.onDeferred, _e = _a.position, position = _e === void 0 ? Position.TOP_MIDDLE : _e, _f = _a.altPosition, altPosition = _f === void 0 ? flipPosition(position) : _f, _g = _a.showOn, showOn = _g === void 0 ? TooltipShowTrigger.MOUSEOVER : _g, style = _a.style, title = _a.title, unsafelyReplaceClassName = _a.unsafelyReplaceClassName;
     var iref = React.useRef({
@@ -3888,19 +3888,19 @@ function SpsTooltip(_a) {
         React.createElement("span", { className: "sps-tooltip__caret" })));
 }
 Object.assign(SpsTooltip, {
-    props: propsDoc$15,
-    propTypes: propTypes$19,
+    props: propsDoc$18,
+    propTypes: propTypes$1c,
     displayName: 'SpsTooltip',
 });
 
-var propsDoc$14 = {
+var propsDoc$17 = {
     error: 'boolean',
     errors: 'ReactNodeOrRenderFn',
     help: 'ReactNodeOrRenderFn',
     labelFor: 'SpsFormFieldMeta<any>',
     required: 'boolean',
 };
-var propTypes$18 = __assign(__assign({}, spsGlobalPropTypes), { error: bool, errors: nodeOrRenderFn, help: nodeOrRenderFn, labelFor: oneOfType([
+var propTypes$1b = __assign(__assign({}, spsGlobalPropTypes), { error: bool, errors: nodeOrRenderFn, help: nodeOrRenderFn, labelFor: oneOfType([
         impl(),
         impl(),
     ]), required: bool });
@@ -3929,16 +3929,16 @@ function SpsDescriptionListTerm(props) {
         React.createElement(SpsTooltip, { kind: tipKind, for: dtElement, showOn: TooltipShowTrigger.MANUAL, isShown: showTip }, contentOf(tipKind === TooltipKind.ERROR ? errors : help))));
 }
 Object.assign(SpsDescriptionListTerm, {
-    props: propsDoc$14,
-    propTypes: propTypes$18,
+    props: propsDoc$17,
+    propTypes: propTypes$1b,
     displayName: 'SpsDescriptionListTerm / SpsDt',
 });
 function SpsDt(p) {
     return SpsDescriptionListTerm(p);
 }
 Object.assign(SpsDt, {
-    props: propsDoc$14,
-    propTypes: propTypes$18,
+    props: propsDoc$17,
+    propTypes: propTypes$1b,
     displayName: 'SpsDescriptionListTerm / SpsDt',
 });
 
@@ -3947,7 +3947,7 @@ var SpsDescriptionListExamples = {
         label: 'Basic Description List',
         examples: {
             basic: {
-                jsx: code(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n                    <SpsDl>\n                        <SpsDt>Term 1</SpsDt>\n                        <SpsDd>Definition</SpsDd>\n                        <SpsDt>Term</SpsDt>\n                        <SpsDd>Definition</SpsDd>\n                        <SpsDt>\n                            Term that wraps to the next line cause it's got so dang much text in it.\n                        </SpsDt>\n                        <SpsDd>Definition</SpsDd>\n                        <SpsDt>Term</SpsDt>\n                        <SpsDd>\n                            Definition that has a LOOOOOOOOOOT of text in it.\n                            Definition that has a LOOOOOOOOOOT of text in it.\n                        </SpsDd>\n                    </SpsDl>\n                "], ["\n                    <SpsDl>\n                        <SpsDt>Term 1</SpsDt>\n                        <SpsDd>Definition</SpsDd>\n                        <SpsDt>Term</SpsDt>\n                        <SpsDd>Definition</SpsDd>\n                        <SpsDt>\n                            Term that wraps to the next line cause it's got so dang much text in it.\n                        </SpsDt>\n                        <SpsDd>Definition</SpsDd>\n                        <SpsDt>Term</SpsDt>\n                        <SpsDd>\n                            Definition that has a LOOOOOOOOOOT of text in it.\n                            Definition that has a LOOOOOOOOOOT of text in it.\n                        </SpsDd>\n                    </SpsDl>\n                "]))),
+                jsx: code(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n                    <SpsDl>\n                        <SpsDt>Term 1</SpsDt>\n                        <SpsDd>Definition</SpsDd>\n                        <SpsDt>Term</SpsDt>\n                        <SpsDd>Definition</SpsDd>\n                        <SpsDt>\n                            Term that wraps to the next line cause it's got so dang much text in it.\n                        </SpsDt>\n                        <SpsDd>Definition</SpsDd>\n                        <SpsDt>Term</SpsDt>\n                        <SpsDd>\n                            Definition that has a LOOOOOOOOOOT of text in it.\n                            Definition that has a LOOOOOOOOOOT of text in it.\n                        </SpsDd>\n                    </SpsDl>\n                "], ["\n                    <SpsDl>\n                        <SpsDt>Term 1</SpsDt>\n                        <SpsDd>Definition</SpsDd>\n                        <SpsDt>Term</SpsDt>\n                        <SpsDd>Definition</SpsDd>\n                        <SpsDt>\n                            Term that wraps to the next line cause it's got so dang much text in it.\n                        </SpsDt>\n                        <SpsDd>Definition</SpsDd>\n                        <SpsDt>Term</SpsDt>\n                        <SpsDd>\n                            Definition that has a LOOOOOOOOOOT of text in it.\n                            Definition that has a LOOOOOOOOOOT of text in it.\n                        </SpsDd>\n                    </SpsDl>\n                "]))),
             },
             dynamic: {
                 react: code(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const list = [\n                            { term: \"Term 1\", definition: \"Definition 1\" },\n                            { term: \"Term 2\", definition: \"Definition 2\" },\n                            { term: \"Term 3\", definition: \"Definition 3\" },\n                        ];\n\n                        return (\n                            <SpsDl>\n                                {list.map((item, i) => (\n                                    <React.Fragment>\n                                        <SpsDt>{item.term}</SpsDt>\n                                        <SpsDd>{item.definition}</SpsDd>\n                                    </React.Fragment>\n                                ))}\n                            </SpsDl>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const list = [\n                            { term: \"Term 1\", definition: \"Definition 1\" },\n                            { term: \"Term 2\", definition: \"Definition 2\" },\n                            { term: \"Term 3\", definition: \"Definition 3\" },\n                        ];\n\n                        return (\n                            <SpsDl>\n                                {list.map((item, i) => (\n                                    <React.Fragment>\n                                        <SpsDt>{item.term}</SpsDt>\n                                        <SpsDd>{item.definition}</SpsDd>\n                                    </React.Fragment>\n                                ))}\n                            </SpsDl>\n                        );\n                    }\n                "]))),
@@ -3982,7 +3982,7 @@ var SpsDescriptionListExamples = {
         },
     },
 };
-var templateObject_1$G, templateObject_2$C, templateObject_3$v, templateObject_4$o, templateObject_5$h, templateObject_6$d;
+var templateObject_1$H, templateObject_2$C, templateObject_3$v, templateObject_4$o, templateObject_5$h, templateObject_6$d;
 
 var SpsDropdownExamples = {
     labelled: {
@@ -3990,7 +3990,7 @@ var SpsDropdownExamples = {
         examples: {
             default: {
                 description: '<h3> Default Dropdown</h3>',
-                react: code(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n                function SpsDropdownBasicDefault(props) {\n                    const [action, updateAction] = useSpsAction({\n                        label: \"Option B\"\n                    }, () => console.log(\"Option B\"));\n                    return (\n                        <SpsDropdown id=\"regular\" label=\"Dropdown\" options={[\n                            [{ label: \"Option A\" }, () => console.log(\"Option A\")],\n                            action,\n                        ]}/>\n                    );\n                }\n            "], ["\n                function SpsDropdownBasicDefault(props) {\n                    const [action, updateAction] = useSpsAction({\n                        label: \"Option B\"\n                    }, () => console.log(\"Option B\"));\n                    return (\n                        <SpsDropdown id=\"regular\" label=\"Dropdown\" options={[\n                            [{ label: \"Option A\" }, () => console.log(\"Option A\")],\n                            action,\n                        ]}/>\n                    );\n                }\n            "]))),
+                react: code(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n                function SpsDropdownBasicDefault(props) {\n                    const [action, updateAction] = useSpsAction({\n                        label: \"Option B\"\n                    }, () => console.log(\"Option B\"));\n                    return (\n                        <SpsDropdown id=\"regular\" label=\"Dropdown\" options={[\n                            [{ label: \"Option A\" }, () => console.log(\"Option A\")],\n                            action,\n                        ]}/>\n                    );\n                }\n            "], ["\n                function SpsDropdownBasicDefault(props) {\n                    const [action, updateAction] = useSpsAction({\n                        label: \"Option B\"\n                    }, () => console.log(\"Option B\"));\n                    return (\n                        <SpsDropdown id=\"regular\" label=\"Dropdown\" options={[\n                            [{ label: \"Option A\" }, () => console.log(\"Option A\")],\n                            action,\n                        ]}/>\n                    );\n                }\n            "]))),
             },
             key: {
                 description: '<h3> Key Dropdown</h3>',
@@ -4023,7 +4023,7 @@ var SpsDropdownExamples = {
             },
             delete: {
                 description: '<h3> Delete Dropdown With Icon</h3>',
-                react: code(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n                function SpsDropdownWithIconDelete(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"delete\"\n                        icon=\"trash\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownWithIconDelete(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"delete\"\n                        icon=\"trash\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
+                react: code(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n                function SpsDropdownWithIconDelete(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"delete\"\n                        icon=\"trash\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownWithIconDelete(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"delete\"\n                        icon=\"trash\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
             },
         },
     },
@@ -4036,7 +4036,7 @@ var SpsDropdownExamples = {
             },
             custom: {
                 description: '<h3>Custom Icon</h3>',
-                react: code(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n                function SpsDropdownIconCustomIcon(props) {\n                    return (\n                      <SpsDropdown\n                        kind=\"icon\"\n                        icon=\"gear\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownIconCustomIcon(props) {\n                    return (\n                      <SpsDropdown\n                        kind=\"icon\"\n                        icon=\"gear\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
+                react: code(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n                function SpsDropdownIconCustomIcon(props) {\n                    return (\n                      <SpsDropdown\n                        kind=\"icon\"\n                        icon=\"gear\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownIconCustomIcon(props) {\n                    return (\n                      <SpsDropdown\n                        kind=\"icon\"\n                        icon=\"gear\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
             },
         },
     },
@@ -4072,16 +4072,16 @@ var SpsDropdownExamples = {
         },
     },
 };
-var templateObject_1$F, templateObject_2$B, templateObject_3$u, templateObject_4$n, templateObject_5$g, templateObject_6$c, templateObject_7$b, templateObject_8$9, templateObject_9$7, templateObject_10$5, templateObject_11$4, templateObject_12$2, templateObject_13$2, templateObject_14$2;
+var templateObject_1$G, templateObject_2$B, templateObject_3$u, templateObject_4$n, templateObject_5$g, templateObject_6$c, templateObject_7$b, templateObject_8$a, templateObject_9$7, templateObject_10$6, templateObject_11$4, templateObject_12$2, templateObject_13$2, templateObject_14$2;
 
-var propsDoc$13 = {
+var propsDoc$16 = {
     checked: 'boolean',
     onChange: 'ChangeEventHandler',
     indeterminate: 'boolean',
     disabled: 'boolean',
     options: 'Array<SpsActionMethod | [SpsActionDescriptor, () => void]>',
 };
-var propTypes$17 = __assign(__assign({}, spsGlobalPropTypes), { checked: bool, onChange: fun(), indeterminate: bool, 
+var propTypes$1a = __assign(__assign({}, spsGlobalPropTypes), { checked: bool, onChange: fun(), indeterminate: bool, 
     // the type arg to PropTypes.arrayOf<T>() here confuses eslint greatly
     /* eslint-disable */
     options: arrayOf(oneOfType([func, any])).isRequired, 
@@ -4095,15 +4095,15 @@ function SpsCheckboxDropdown(props) {
         React.createElement(SpsDropdown, { disabled: disabled, options: options, icon: SpsIcon$1.CHEVRON_DOWN })));
 }
 Object.assign(SpsCheckboxDropdown, {
-    props: propsDoc$13,
-    propTypes: propTypes$17,
+    props: propsDoc$16,
+    propTypes: propTypes$1a,
     displayName: 'SpsCheckboxDropdown',
 });
 
-var propsDoc$12 = {
+var propsDoc$15 = {
     kind: 'FeedbackBlockKind',
 };
-var propTypes$16 = __assign(__assign({}, spsGlobalPropTypes), { kind: enumValue(FeedbackBlockKind) });
+var propTypes$19 = __assign(__assign({}, spsGlobalPropTypes), { kind: enumValue(FeedbackBlockKind) });
 function SpsFeedbackBlock(props) {
     var children = props.children, className = props.className, _a = props.kind, kind = _a === void 0 ? FeedbackBlockKind.TIP : _a, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "kind", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-feedback-block', "sps-feedback-block--" + kind, className);
@@ -4112,8 +4112,8 @@ function SpsFeedbackBlock(props) {
         React.createElement("span", { className: "sps-feedback-block__content", "data-testid": testId + "__text" }, children)));
 }
 Object.assign(SpsFeedbackBlock, {
-    props: propsDoc$12,
-    propTypes: propTypes$16,
+    props: propsDoc$15,
+    propTypes: propTypes$19,
     displayName: 'SpsFeedbackBlock',
 });
 
@@ -4124,7 +4124,7 @@ var SpsFeedbackBlockExamples = {
         examples: {
             error: {
                 description: 'Error',
-                jsx: code(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.ERROR}>\n                        We are experiencing difficulties communicating to the server. Please try again later.\n                    </SpsFeedbackBlock>\n                "], ["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.ERROR}>\n                        We are experiencing difficulties communicating to the server. Please try again later.\n                    </SpsFeedbackBlock>\n                "]))),
+                jsx: code(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.ERROR}>\n                        We are experiencing difficulties communicating to the server. Please try again later.\n                    </SpsFeedbackBlock>\n                "], ["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.ERROR}>\n                        We are experiencing difficulties communicating to the server. Please try again later.\n                    </SpsFeedbackBlock>\n                "]))),
             },
             info: {
                 description: 'Information',
@@ -4158,7 +4158,7 @@ var SpsFeedbackBlockExamples = {
             },
             proTip: {
                 description: 'Pro Tip',
-                jsx: code(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.TIP}\n                        message=\"Tip: Click the Receive button to check for new transactions.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.TIP}\n                        message=\"Tip: Click the Receive button to check for new transactions.\"\n                    />\n                "]))),
+                jsx: code(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.TIP}\n                        message=\"Tip: Click the Receive button to check for new transactions.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.TIP}\n                        message=\"Tip: Click the Receive button to check for new transactions.\"\n                    />\n                "]))),
             },
             success: {
                 description: 'Success',
@@ -4166,14 +4166,14 @@ var SpsFeedbackBlockExamples = {
             },
             warning: {
                 description: 'Warning',
-                jsx: code(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.WARNING}\n                        message=\"This order is missing a shipment date.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.WARNING}\n                        message=\"This order is missing a shipment date.\"\n                    />\n                "]))),
+                jsx: code(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.WARNING}\n                        message=\"This order is missing a shipment date.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.WARNING}\n                        message=\"This order is missing a shipment date.\"\n                    />\n                "]))),
             },
         },
     },
 };
-var templateObject_1$E, templateObject_2$A, templateObject_3$t, templateObject_4$m, templateObject_5$f, templateObject_6$b, templateObject_7$a, templateObject_8$8, templateObject_9$6, templateObject_10$4;
+var templateObject_1$F, templateObject_2$A, templateObject_3$t, templateObject_4$m, templateObject_5$f, templateObject_6$b, templateObject_7$a, templateObject_8$9, templateObject_9$6, templateObject_10$5;
 
-var propsDoc$11 = {
+var propsDoc$14 = {
     errors: 'ReactNodeOrRenderFn',
     formMeta: 'SpsFormSetMeta<any>',
     legend: 'string',
@@ -4182,7 +4182,7 @@ var propsDoc$11 = {
     onToggled: '(isEnabled: boolean) => void',
     tooltip: 'string',
 };
-var propTypes$15 = __assign(__assign({}, spsGlobalPropTypes), { errors: nodeOrRenderFn, formArray: impl(), formGroup: impl(), formMeta: impl(), legend: string, optional: bool, enabled: bool, onToggled: fun(), tooltip: string });
+var propTypes$18 = __assign(__assign({}, spsGlobalPropTypes), { errors: nodeOrRenderFn, formArray: impl(), formGroup: impl(), formMeta: impl(), legend: string, optional: bool, enabled: bool, onToggled: fun(), tooltip: string });
 function SpsFieldset(_a) {
     var children = _a.children, className = _a.className, errors = _a.errors, formArray = _a.formArray, formGroup = _a.formGroup, formMeta = _a.formMeta, legend = _a.legend, unsafelyReplaceClassName = _a.unsafelyReplaceClassName, _b = _a.optional, optional = _b === void 0 ? false : _b, enabled = _a.enabled, onToggled = _a.onToggled, tooltip = _a.tooltip;
     var formControlSet = formGroup || formArray;
@@ -4232,8 +4232,8 @@ function SpsFieldset(_a) {
             children)));
 }
 Object.assign(SpsFieldset, {
-    props: propsDoc$11,
-    propTypes: propTypes$15,
+    props: propsDoc$14,
+    propTypes: propTypes$18,
     displayName: 'SpsFieldset',
 });
 
@@ -4243,7 +4243,7 @@ var SpsFieldsetExamples = {
         description: 'info about basic fieldsets',
         examples: {
             basic: {
-                react: code(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const RADIO_OPTIONS = [\n                            { value: \"a\", label: \"Option A\" },\n                            { value: \"b\", label: \"Option B\" }\n                        ];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            myFieldset: {\n                                foo: \"\",\n                                bar: \"\",\n                                baz: RADIO_OPTIONS[0].value\n                            }\n                        });\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\" tooltip=\"Add a Tooltip\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n                                            value={formValue.myFieldset.foo}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.bar}>Bar</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.bar}\n                                            value={formValue.myFieldset.bar}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.baz}>Baz</SpsLabel>\n                                        {RADIO_OPTIONS.map(option => (\n                                            <SpsRadioButton key={option.value} name=\"baz\"\n                                                label={option.label} value={option.value}\n                                                formMeta={formMeta.fields.myFieldset.fields.baz}\n                                                checked={formValue.myFieldset.baz === option.value}\n                                            />\n                                        ))}\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const RADIO_OPTIONS = [\n                            { value: \"a\", label: \"Option A\" },\n                            { value: \"b\", label: \"Option B\" }\n                        ];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            myFieldset: {\n                                foo: \"\",\n                                bar: \"\",\n                                baz: RADIO_OPTIONS[0].value\n                            }\n                        });\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\" tooltip=\"Add a Tooltip\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n                                            value={formValue.myFieldset.foo}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.bar}>Bar</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.bar}\n                                            value={formValue.myFieldset.bar}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.baz}>Baz</SpsLabel>\n                                        {RADIO_OPTIONS.map(option => (\n                                            <SpsRadioButton key={option.value} name=\"baz\"\n                                                label={option.label} value={option.value}\n                                                formMeta={formMeta.fields.myFieldset.fields.baz}\n                                                checked={formValue.myFieldset.baz === option.value}\n                                            />\n                                        ))}\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "]))),
+                react: code(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const RADIO_OPTIONS = [\n                            { value: \"a\", label: \"Option A\" },\n                            { value: \"b\", label: \"Option B\" }\n                        ];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            myFieldset: {\n                                foo: \"\",\n                                bar: \"\",\n                                baz: RADIO_OPTIONS[0].value\n                            }\n                        });\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\" tooltip=\"Add a Tooltip\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n                                            value={formValue.myFieldset.foo}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.bar}>Bar</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.bar}\n                                            value={formValue.myFieldset.bar}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.baz}>Baz</SpsLabel>\n                                        {RADIO_OPTIONS.map(option => (\n                                            <SpsRadioButton key={option.value} name=\"baz\"\n                                                label={option.label} value={option.value}\n                                                formMeta={formMeta.fields.myFieldset.fields.baz}\n                                                checked={formValue.myFieldset.baz === option.value}\n                                            />\n                                        ))}\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const RADIO_OPTIONS = [\n                            { value: \"a\", label: \"Option A\" },\n                            { value: \"b\", label: \"Option B\" }\n                        ];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            myFieldset: {\n                                foo: \"\",\n                                bar: \"\",\n                                baz: RADIO_OPTIONS[0].value\n                            }\n                        });\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\" tooltip=\"Add a Tooltip\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n                                            value={formValue.myFieldset.foo}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.bar}>Bar</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.bar}\n                                            value={formValue.myFieldset.bar}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.baz}>Baz</SpsLabel>\n                                        {RADIO_OPTIONS.map(option => (\n                                            <SpsRadioButton key={option.value} name=\"baz\"\n                                                label={option.label} value={option.value}\n                                                formMeta={formMeta.fields.myFieldset.fields.baz}\n                                                checked={formValue.myFieldset.baz === option.value}\n                                            />\n                                        ))}\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "]))),
             },
         },
     },
@@ -4284,10 +4284,10 @@ var SpsFieldsetExamples = {
         },
     },
 };
-var templateObject_1$D, templateObject_2$z, templateObject_3$s, templateObject_4$l, templateObject_5$e;
+var templateObject_1$E, templateObject_2$z, templateObject_3$s, templateObject_4$l, templateObject_5$e;
 
-var propsDoc$10 = {};
-var propTypes$14 = __assign({}, spsGlobalPropTypes);
+var propsDoc$13 = {};
+var propTypes$17 = __assign({}, spsGlobalPropTypes);
 function SpsFocusedTaskActions(props) {
     var children = props.children, className = props.className, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-list-action-bar-container', 'z-stratum-bar', className);
@@ -4296,17 +4296,17 @@ function SpsFocusedTaskActions(props) {
             React.createElement("div", { className: "sps-list-action-bar__actions" }, children))));
 }
 Object.assign(SpsFocusedTaskActions, {
-    props: propsDoc$10,
-    propTypes: propTypes$14,
+    props: propsDoc$13,
+    propTypes: propTypes$17,
     displayName: 'SpsFocusedTaskActions',
 });
 
-var propsDoc$$ = {
+var propsDoc$12 = {
     fullWidth: 'boolean',
     isOpen: 'boolean',
     onClose: '() => void',
 };
-var propTypes$13 = __assign(__assign({}, spsGlobalPropTypes), { fullWidth: bool, isOpen: bool, onClose: fun() });
+var propTypes$16 = __assign(__assign({}, spsGlobalPropTypes), { fullWidth: bool, isOpen: bool, onClose: fun() });
 function SpsFocusedTask(props) {
     var children = props.children, className = props.className, fullWidth = props.fullWidth, isOpen = props.isOpen, onClose = props.onClose; props.title; var testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "fullWidth", "isOpen", "onClose", "title", 'data-testid', "unsafelyReplaceClassName"]);
     var rootRef = React.useRef();
@@ -4329,8 +4329,8 @@ function SpsFocusedTask(props) {
         actions));
 }
 Object.assign(SpsFocusedTask, {
-    props: propsDoc$$,
-    propTypes: propTypes$13,
+    props: propsDoc$12,
+    propTypes: propTypes$16,
     displayName: 'SpsFocusedTask',
 });
 
@@ -4338,7 +4338,7 @@ var SpsFocusedTaskExamples = {
     basic: {
         examples: {
             basic: {
-                react: code(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n                    function SpsFocusedTaskBasic() {\n                        const [showFocusedTask, setShowFocusedTask] = React.useState(false);\n\n                        function onClose() {\n                            setShowFocusedTask(false);\n                            console.log(\"onClose called\");\n                        }\n\n                        function onFormSubmit() {\n                            setShowFocusedTask(false);\n                        }\n\n                        return (\n                          <>\n                            <SpsButton onClick={() => setShowFocusedTask(true)}>\n                              Open Focused Task\n                            </SpsButton>\n                            <SpsFocusedTask isOpen={showFocusedTask} onClose={onClose}>\n                              <h2>Focused Task</h2>\n                              <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\"></div>\n                                <div className=\"sfg-col-6\">\n                                  <SpsCard>\n                                    <i>pretend there's a form here</i>\n                                  </SpsCard>\n                                </div>\n                                <div className=\"sfg-col-3\"></div>\n                              </div>\n                              <SpsFocusedTaskActions>\n                                <SpsButton kind=\"confirm\" onClick={onFormSubmit}>\n                                  Submit\n                                </SpsButton>\n                              </SpsFocusedTaskActions>\n                            </SpsFocusedTask>\n                          </>\n                        );\n                    }\n                "], ["\n                    function SpsFocusedTaskBasic() {\n                        const [showFocusedTask, setShowFocusedTask] = React.useState(false);\n\n                        function onClose() {\n                            setShowFocusedTask(false);\n                            console.log(\"onClose called\");\n                        }\n\n                        function onFormSubmit() {\n                            setShowFocusedTask(false);\n                        }\n\n                        return (\n                          <>\n                            <SpsButton onClick={() => setShowFocusedTask(true)}>\n                              Open Focused Task\n                            </SpsButton>\n                            <SpsFocusedTask isOpen={showFocusedTask} onClose={onClose}>\n                              <h2>Focused Task</h2>\n                              <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\"></div>\n                                <div className=\"sfg-col-6\">\n                                  <SpsCard>\n                                    <i>pretend there's a form here</i>\n                                  </SpsCard>\n                                </div>\n                                <div className=\"sfg-col-3\"></div>\n                              </div>\n                              <SpsFocusedTaskActions>\n                                <SpsButton kind=\"confirm\" onClick={onFormSubmit}>\n                                  Submit\n                                </SpsButton>\n                              </SpsFocusedTaskActions>\n                            </SpsFocusedTask>\n                          </>\n                        );\n                    }\n                "]))),
+                react: code(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n                    function SpsFocusedTaskBasic() {\n                        const [showFocusedTask, setShowFocusedTask] = React.useState(false);\n\n                        function onClose() {\n                            setShowFocusedTask(false);\n                            console.log(\"onClose called\");\n                        }\n\n                        function onFormSubmit() {\n                            setShowFocusedTask(false);\n                        }\n\n                        return (\n                          <>\n                            <SpsButton onClick={() => setShowFocusedTask(true)}>\n                              Open Focused Task\n                            </SpsButton>\n                            <SpsFocusedTask isOpen={showFocusedTask} onClose={onClose}>\n                              <h2>Focused Task</h2>\n                              <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\"></div>\n                                <div className=\"sfg-col-6\">\n                                  <SpsCard>\n                                    <i>pretend there's a form here</i>\n                                  </SpsCard>\n                                </div>\n                                <div className=\"sfg-col-3\"></div>\n                              </div>\n                              <SpsFocusedTaskActions>\n                                <SpsButton kind=\"confirm\" onClick={onFormSubmit}>\n                                  Submit\n                                </SpsButton>\n                              </SpsFocusedTaskActions>\n                            </SpsFocusedTask>\n                          </>\n                        );\n                    }\n                "], ["\n                    function SpsFocusedTaskBasic() {\n                        const [showFocusedTask, setShowFocusedTask] = React.useState(false);\n\n                        function onClose() {\n                            setShowFocusedTask(false);\n                            console.log(\"onClose called\");\n                        }\n\n                        function onFormSubmit() {\n                            setShowFocusedTask(false);\n                        }\n\n                        return (\n                          <>\n                            <SpsButton onClick={() => setShowFocusedTask(true)}>\n                              Open Focused Task\n                            </SpsButton>\n                            <SpsFocusedTask isOpen={showFocusedTask} onClose={onClose}>\n                              <h2>Focused Task</h2>\n                              <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\"></div>\n                                <div className=\"sfg-col-6\">\n                                  <SpsCard>\n                                    <i>pretend there's a form here</i>\n                                  </SpsCard>\n                                </div>\n                                <div className=\"sfg-col-3\"></div>\n                              </div>\n                              <SpsFocusedTaskActions>\n                                <SpsButton kind=\"confirm\" onClick={onFormSubmit}>\n                                  Submit\n                                </SpsButton>\n                              </SpsFocusedTaskActions>\n                            </SpsFocusedTask>\n                          </>\n                        );\n                    }\n                "]))),
             },
             fullWidth: {
                 react: code(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n                    function SpsFocusedTaskFullWidth() {\n                        const [showFocusedTask, setShowFocusedTask] = React.useState(false);\n\n                        function onClose() {\n                            setShowFocusedTask(false);\n                            console.log(\"onClose called\");\n                        }\n\n                        function onFormSubmit() {\n                            setShowFocusedTask(false);\n                        }\n\n                        return (\n                        <>\n                            <SpsButton onClick={() => setShowFocusedTask(true)}>\n                            Open Focused Task\n                            </SpsButton>\n                            <SpsFocusedTask fullWidth isOpen={showFocusedTask} onClose={onClose}>\n                            <h2>Focused Task</h2>\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\"></div>\n                                <div className=\"sfg-col-6\">\n                                <SpsCard>\n                                    <i>pretend there's a form here</i>\n                                </SpsCard>\n                                </div>\n                                <div className=\"sfg-col-3\"></div>\n                            </div>\n                            <SpsFocusedTaskActions>\n                                <SpsButton kind=\"confirm\" onClick={onFormSubmit}>\n                                Submit\n                                </SpsButton>\n                            </SpsFocusedTaskActions>\n                            </SpsFocusedTask>\n                        </>\n                        );\n                    }\n                "], ["\n                    function SpsFocusedTaskFullWidth() {\n                        const [showFocusedTask, setShowFocusedTask] = React.useState(false);\n\n                        function onClose() {\n                            setShowFocusedTask(false);\n                            console.log(\"onClose called\");\n                        }\n\n                        function onFormSubmit() {\n                            setShowFocusedTask(false);\n                        }\n\n                        return (\n                        <>\n                            <SpsButton onClick={() => setShowFocusedTask(true)}>\n                            Open Focused Task\n                            </SpsButton>\n                            <SpsFocusedTask fullWidth isOpen={showFocusedTask} onClose={onClose}>\n                            <h2>Focused Task</h2>\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-3\"></div>\n                                <div className=\"sfg-col-6\">\n                                <SpsCard>\n                                    <i>pretend there's a form here</i>\n                                </SpsCard>\n                                </div>\n                                <div className=\"sfg-col-3\"></div>\n                            </div>\n                            <SpsFocusedTaskActions>\n                                <SpsButton kind=\"confirm\" onClick={onFormSubmit}>\n                                Submit\n                                </SpsButton>\n                            </SpsFocusedTaskActions>\n                            </SpsFocusedTask>\n                        </>\n                        );\n                    }\n                "]))),
@@ -4346,7 +4346,7 @@ var SpsFocusedTaskExamples = {
         },
     },
 };
-var templateObject_1$C, templateObject_2$y;
+var templateObject_1$D, templateObject_2$y;
 
 var OnBlurErrorKeys = new Set();
 
@@ -5654,7 +5654,7 @@ var SpsFormExamples = {
         description: '',
         examples: {
             basic: {
-                react: code(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const COLOR_OPTIONS = [\"red\", \"blue\", \"green\"];\n                        const initValue = {\n                            name: \"Foo\",\n                            color: COLOR_OPTIONS[0],\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n                            \"name\": value => value.color === COLOR_OPTIONS[0] ? [SpsValidators.required] : []\n                        });\n\n                        function handleSubmit() {\n                            console.log(\"submit\", formValue);\n                        }\n                        function reset() {\n                            updateForm(initValue);\n                        }\n\n                        return <>\n                            <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-8\">\n                                        <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>\n                                        <SpsTextInput\n                                            value={formValue.name}\n                                            formMeta={formMeta.fields.name}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n                                        {COLOR_OPTIONS.map(color =>\n                                            <SpsRadioButton key={color} name={color} value={color} label={color}\n                                                checked={color === formValue.color}\n                                                formMeta={formMeta.fields.color}\n                                            />\n                                        )}\n                                    </div>\n                                </div>\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-12\">\n                                        <SpsButton className=\"mr-1\" onClick={reset}>Reset</SpsButton>\n                                        <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>\n                                    </div>\n                                </div>\n                            </SpsForm>\n                            <br/>\n                            {JSON.stringify(formValue)}\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const COLOR_OPTIONS = [\"red\", \"blue\", \"green\"];\n                        const initValue = {\n                            name: \"Foo\",\n                            color: COLOR_OPTIONS[0],\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n                            \"name\": value => value.color === COLOR_OPTIONS[0] ? [SpsValidators.required] : []\n                        });\n\n                        function handleSubmit() {\n                            console.log(\"submit\", formValue);\n                        }\n                        function reset() {\n                            updateForm(initValue);\n                        }\n\n                        return <>\n                            <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-8\">\n                                        <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>\n                                        <SpsTextInput\n                                            value={formValue.name}\n                                            formMeta={formMeta.fields.name}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n                                        {COLOR_OPTIONS.map(color =>\n                                            <SpsRadioButton key={color} name={color} value={color} label={color}\n                                                checked={color === formValue.color}\n                                                formMeta={formMeta.fields.color}\n                                            />\n                                        )}\n                                    </div>\n                                </div>\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-12\">\n                                        <SpsButton className=\"mr-1\" onClick={reset}>Reset</SpsButton>\n                                        <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>\n                                    </div>\n                                </div>\n                            </SpsForm>\n                            <br/>\n                            {JSON.stringify(formValue)}\n                        </>;\n                    }\n                "]))),
+                react: code(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const COLOR_OPTIONS = [\"red\", \"blue\", \"green\"];\n                        const initValue = {\n                            name: \"Foo\",\n                            color: COLOR_OPTIONS[0],\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n                            \"name\": value => value.color === COLOR_OPTIONS[0] ? [SpsValidators.required] : []\n                        });\n\n                        function handleSubmit() {\n                            console.log(\"submit\", formValue);\n                        }\n                        function reset() {\n                            updateForm(initValue);\n                        }\n\n                        return <>\n                            <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-8\">\n                                        <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>\n                                        <SpsTextInput\n                                            value={formValue.name}\n                                            formMeta={formMeta.fields.name}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n                                        {COLOR_OPTIONS.map(color =>\n                                            <SpsRadioButton key={color} name={color} value={color} label={color}\n                                                checked={color === formValue.color}\n                                                formMeta={formMeta.fields.color}\n                                            />\n                                        )}\n                                    </div>\n                                </div>\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-12\">\n                                        <SpsButton className=\"mr-1\" onClick={reset}>Reset</SpsButton>\n                                        <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>\n                                    </div>\n                                </div>\n                            </SpsForm>\n                            <br/>\n                            {JSON.stringify(formValue)}\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const COLOR_OPTIONS = [\"red\", \"blue\", \"green\"];\n                        const initValue = {\n                            name: \"Foo\",\n                            color: COLOR_OPTIONS[0],\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n                            \"name\": value => value.color === COLOR_OPTIONS[0] ? [SpsValidators.required] : []\n                        });\n\n                        function handleSubmit() {\n                            console.log(\"submit\", formValue);\n                        }\n                        function reset() {\n                            updateForm(initValue);\n                        }\n\n                        return <>\n                            <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-8\">\n                                        <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>\n                                        <SpsTextInput\n                                            value={formValue.name}\n                                            formMeta={formMeta.fields.name}\n                                        />\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n                                        {COLOR_OPTIONS.map(color =>\n                                            <SpsRadioButton key={color} name={color} value={color} label={color}\n                                                checked={color === formValue.color}\n                                                formMeta={formMeta.fields.color}\n                                            />\n                                        )}\n                                    </div>\n                                </div>\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-12\">\n                                        <SpsButton className=\"mr-1\" onClick={reset}>Reset</SpsButton>\n                                        <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>\n                                    </div>\n                                </div>\n                            </SpsForm>\n                            <br/>\n                            {JSON.stringify(formValue)}\n                        </>;\n                    }\n                "]))),
             },
         },
     },
@@ -5677,14 +5677,14 @@ var SpsFormExamples = {
         },
     },
 };
-var templateObject_1$B, templateObject_2$x, templateObject_3$r;
+var templateObject_1$C, templateObject_2$x, templateObject_3$r;
 
 var SpsAddRemoveFormRowExamples = {
     ideal: {
         label: 'Ideal',
         examples: {
             ideal: {
-                react: code(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n                function DemoComponent() {\n                    const initValue = {\n                      names: [\"Foo\"],\n                    }\n                    const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n                      \"names.*\": [SpsValidators.required]\n                    });\n\n                    function addName() {\n                      updateForm({ names: [...formValue.names, \"\"] })\n                    }\n\n                    function removeName(index) {\n                      updateForm({\n                        names: formValue.names.filter((_, i) => i !== index),\n                      })\n                    }\n\n                    function reset() {\n                      updateForm(initValue)\n                    }\n\n                    return (\n                      <>\n                        <SpsForm formMeta={formMeta}>\n                          {formMeta.fields.names.fields.map((meta, i) => (\n                            <div className=\"sfg-row\" key={i}>\n                              <div className=\"sfg-col-6\">\n                                <SpsLabel for={meta}>Name</SpsLabel>\n                                <div className=\"d-flex align-items-center\">\n                                  <SpsTextInput\n                                    value={formValue.names[i]}\n                                    formMeta={meta}\n                                    className=\"flex-grow-1 mr-2\"\n                                  />\n                                  <SpsButton kind={ButtonKind.ICON}\n                                    icon={SpsIcon.X}\n                                    onClick={() => removeName(i)}\n                                  />\n                                </div>\n                              </div>\n                            </div>\n                          ))}\n                          <div className=\"sfg-row\">\n                            <div className=\"sfg-col-12\">\n                              <SpsButton\n                                kind={ButtonKind.LINK}\n                                icon={SpsIcon.PLUS_SIGN}\n                                onClick={addName}\n                              >\n                                Add Another\n                              </SpsButton>\n                            </div>\n                          </div>\n                          <div className=\"sfg-row\">\n                            <div className=\"sfg-col-12\">\n                              <SpsButton onClick={reset}>Reset</SpsButton>\n                            </div>\n                          </div>\n                        </SpsForm>\n                        <br />\n                        {JSON.stringify(formValue)}\n                      </>\n                    )\n                  }\n                "], ["\n                function DemoComponent() {\n                    const initValue = {\n                      names: [\"Foo\"],\n                    }\n                    const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n                      \"names.*\": [SpsValidators.required]\n                    });\n\n                    function addName() {\n                      updateForm({ names: [...formValue.names, \"\"] })\n                    }\n\n                    function removeName(index) {\n                      updateForm({\n                        names: formValue.names.filter((_, i) => i !== index),\n                      })\n                    }\n\n                    function reset() {\n                      updateForm(initValue)\n                    }\n\n                    return (\n                      <>\n                        <SpsForm formMeta={formMeta}>\n                          {formMeta.fields.names.fields.map((meta, i) => (\n                            <div className=\"sfg-row\" key={i}>\n                              <div className=\"sfg-col-6\">\n                                <SpsLabel for={meta}>Name</SpsLabel>\n                                <div className=\"d-flex align-items-center\">\n                                  <SpsTextInput\n                                    value={formValue.names[i]}\n                                    formMeta={meta}\n                                    className=\"flex-grow-1 mr-2\"\n                                  />\n                                  <SpsButton kind={ButtonKind.ICON}\n                                    icon={SpsIcon.X}\n                                    onClick={() => removeName(i)}\n                                  />\n                                </div>\n                              </div>\n                            </div>\n                          ))}\n                          <div className=\"sfg-row\">\n                            <div className=\"sfg-col-12\">\n                              <SpsButton\n                                kind={ButtonKind.LINK}\n                                icon={SpsIcon.PLUS_SIGN}\n                                onClick={addName}\n                              >\n                                Add Another\n                              </SpsButton>\n                            </div>\n                          </div>\n                          <div className=\"sfg-row\">\n                            <div className=\"sfg-col-12\">\n                              <SpsButton onClick={reset}>Reset</SpsButton>\n                            </div>\n                          </div>\n                        </SpsForm>\n                        <br />\n                        {JSON.stringify(formValue)}\n                      </>\n                    )\n                  }\n                "]))),
+                react: code(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n                function DemoComponent() {\n                    const initValue = {\n                      names: [\"Foo\"],\n                    }\n                    const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n                      \"names.*\": [SpsValidators.required]\n                    });\n\n                    function addName() {\n                      updateForm({ names: [...formValue.names, \"\"] })\n                    }\n\n                    function removeName(index) {\n                      updateForm({\n                        names: formValue.names.filter((_, i) => i !== index),\n                      })\n                    }\n\n                    function reset() {\n                      updateForm(initValue)\n                    }\n\n                    return (\n                      <>\n                        <SpsForm formMeta={formMeta}>\n                          {formMeta.fields.names.fields.map((meta, i) => (\n                            <div className=\"sfg-row\" key={i}>\n                              <div className=\"sfg-col-6\">\n                                <SpsLabel for={meta}>Name</SpsLabel>\n                                <div className=\"d-flex align-items-center\">\n                                  <SpsTextInput\n                                    value={formValue.names[i]}\n                                    formMeta={meta}\n                                    className=\"flex-grow-1 mr-2\"\n                                  />\n                                  <SpsButton kind={ButtonKind.ICON}\n                                    icon={SpsIcon.X}\n                                    onClick={() => removeName(i)}\n                                  />\n                                </div>\n                              </div>\n                            </div>\n                          ))}\n                          <div className=\"sfg-row\">\n                            <div className=\"sfg-col-12\">\n                              <SpsButton\n                                kind={ButtonKind.LINK}\n                                icon={SpsIcon.PLUS_SIGN}\n                                onClick={addName}\n                              >\n                                Add Another\n                              </SpsButton>\n                            </div>\n                          </div>\n                          <div className=\"sfg-row\">\n                            <div className=\"sfg-col-12\">\n                              <SpsButton onClick={reset}>Reset</SpsButton>\n                            </div>\n                          </div>\n                        </SpsForm>\n                        <br />\n                        {JSON.stringify(formValue)}\n                      </>\n                    )\n                  }\n                "], ["\n                function DemoComponent() {\n                    const initValue = {\n                      names: [\"Foo\"],\n                    }\n                    const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n                      \"names.*\": [SpsValidators.required]\n                    });\n\n                    function addName() {\n                      updateForm({ names: [...formValue.names, \"\"] })\n                    }\n\n                    function removeName(index) {\n                      updateForm({\n                        names: formValue.names.filter((_, i) => i !== index),\n                      })\n                    }\n\n                    function reset() {\n                      updateForm(initValue)\n                    }\n\n                    return (\n                      <>\n                        <SpsForm formMeta={formMeta}>\n                          {formMeta.fields.names.fields.map((meta, i) => (\n                            <div className=\"sfg-row\" key={i}>\n                              <div className=\"sfg-col-6\">\n                                <SpsLabel for={meta}>Name</SpsLabel>\n                                <div className=\"d-flex align-items-center\">\n                                  <SpsTextInput\n                                    value={formValue.names[i]}\n                                    formMeta={meta}\n                                    className=\"flex-grow-1 mr-2\"\n                                  />\n                                  <SpsButton kind={ButtonKind.ICON}\n                                    icon={SpsIcon.X}\n                                    onClick={() => removeName(i)}\n                                  />\n                                </div>\n                              </div>\n                            </div>\n                          ))}\n                          <div className=\"sfg-row\">\n                            <div className=\"sfg-col-12\">\n                              <SpsButton\n                                kind={ButtonKind.LINK}\n                                icon={SpsIcon.PLUS_SIGN}\n                                onClick={addName}\n                              >\n                                Add Another\n                              </SpsButton>\n                            </div>\n                          </div>\n                          <div className=\"sfg-row\">\n                            <div className=\"sfg-col-12\">\n                              <SpsButton onClick={reset}>Reset</SpsButton>\n                            </div>\n                          </div>\n                        </SpsForm>\n                        <br />\n                        {JSON.stringify(formValue)}\n                      </>\n                    )\n                  }\n                "]))),
             },
         },
     },
@@ -5697,16 +5697,16 @@ var SpsAddRemoveFormRowExamples = {
         },
     },
 };
-var templateObject_1$A, templateObject_2$w;
+var templateObject_1$B, templateObject_2$w;
 
-var propsDoc$_ = {
+var propsDoc$11 = {
     imgSrc: 'string',
     kind: 'GrowlerKind',
     onClose: '() => void',
     persist: 'boolean',
     title: 'string',
 };
-var propTypes$12 = __assign(__assign({}, spsGlobalPropTypes), { imgSrc: string, kind: enumValue(GrowlerKind), onClose: fun(), persist: bool, title: string });
+var propTypes$15 = __assign(__assign({}, spsGlobalPropTypes), { imgSrc: string, kind: enumValue(GrowlerKind), onClose: fun(), persist: bool, title: string });
 function SpsGrowler(props) {
     var children = props.children, className = props.className, imgSrc = props.imgSrc, _a = props.kind, kind = _a === void 0 ? GrowlerKind.INFO : _a, onClose = props.onClose, persist = props.persist, title = props.title, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "imgSrc", "kind", "onClose", "persist", "title", "unsafelyReplaceClassName"]);
     var closeCallback = React.useRef(onClose);
@@ -5786,8 +5786,8 @@ function SpsGrowler(props) {
                 React.createElement("i", { className: "sps-icon sps-icon-x", title: t('design-system:growler.dismiss') })))));
 }
 Object.assign(SpsGrowler, {
-    props: propsDoc$_,
-    propTypes: propTypes$12,
+    props: propsDoc$11,
+    propTypes: propTypes$15,
     displayName: 'SpsGrowler',
 });
 
@@ -5819,7 +5819,7 @@ var SpsGrowlerExamples = {
         examples: {
             primary: {
                 description: 'Primary Message Only',
-                react: code(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerError() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.ERROR}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Document ABC123 has not been sent.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerError() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.ERROR}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Document ABC123 has not been sent.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
+                react: code(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerError() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.ERROR}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Document ABC123 has not been sent.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerError() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.ERROR}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Document ABC123 has not been sent.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
             },
             primaryAndSecondary: {
                 description: 'Primary and Secondary Messages',
@@ -5867,7 +5867,7 @@ var SpsGrowlerExamples = {
                 react: code(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerSuccess() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.SUCCESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Message sent.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerSuccess() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.SUCCESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Message sent.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
             },
             primaryAndSecondary: {
-                react: code(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerSuccess() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.SUCCESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Message sent.\"\n                                    >\n                                        Our support team will respond to your message within 24 hours.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerSuccess() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.SUCCESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Message sent.\"\n                                    >\n                                        Our support team will respond to your message within 24 hours.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
+                react: code(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerSuccess() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.SUCCESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Message sent.\"\n                                    >\n                                        Our support team will respond to your message within 24 hours.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerSuccess() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.SUCCESS}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"Message sent.\"\n                                    >\n                                        Our support team will respond to your message within 24 hours.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
             },
         },
     },
@@ -5882,7 +5882,7 @@ var SpsGrowlerExamples = {
                 react: code(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerWarning() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.WARNING}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"No internet connection detected.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerWarning() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.WARNING}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"No internet connection detected.\"\n                                    />\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
             },
             primaryAndSecondary: {
-                react: code(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerWarning() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.WARNING}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"No internet connection detected\"\n                                    >\n                                        Check your connection and try again.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerWarning() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.WARNING}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"No internet connection detected\"\n                                    >\n                                        Check your connection and try again.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
+                react: code(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerWarning() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.WARNING}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"No internet connection detected\"\n                                    >\n                                        Check your connection and try again.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "], ["\n                    import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n                    import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n                    function SpsGrowlerWarning() {\n                        const [growl, setGrowl] = React.useState(false);\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n                                    Show Growler\n                                </SpsButton>\n                                {growl && (\n                                    <SpsGrowler\n                                        kind={GrowlerKind.WARNING}\n                                        onClose={() => {\n                                            console.log(\"Growler closed.\");\n                                            setGrowl(false);\n                                        }}\n                                        title=\"No internet connection detected\"\n                                    >\n                                        Check your connection and try again.\n                                    </SpsGrowler>\n                                )}\n                            </>\n                        );\n                    }\n                "]))),
             },
         },
     },
@@ -5903,16 +5903,16 @@ var SpsGrowlerExamples = {
         },
     },
 };
-var templateObject_1$z, templateObject_2$v, templateObject_3$q, templateObject_4$k, templateObject_5$d, templateObject_6$a, templateObject_7$9, templateObject_8$7, templateObject_9$5, templateObject_10$3, templateObject_11$3;
+var templateObject_1$A, templateObject_2$v, templateObject_3$q, templateObject_4$k, templateObject_5$d, templateObject_6$a, templateObject_7$9, templateObject_8$8, templateObject_9$5, templateObject_10$4, templateObject_11$3;
 
-var propsDoc$Z = {
+var propsDoc$10 = {
     disabled: 'boolean',
     min: 'number',
     max: 'number',
     step: 'number',
     onValueChange: '(newValue: number) => void',
 };
-var propTypes$11 = __assign({ disabled: bool, min: number, max: number, step: number, onValueChange: fun() }, spsGlobalPropTypes);
+var propTypes$14 = __assign({ disabled: bool, min: number, max: number, step: number, onValueChange: fun() }, spsGlobalPropTypes);
 function SpsIncrementor(props) {
     var disabled = props.disabled, min = props.min, max = props.max, _a = props.step, step = _a === void 0 ? 1 : _a, onValueChange = props.onValueChange, unsafelyReplaceClassName = props.unsafelyReplaceClassName, className = props.className, testId = props["data-testid"], rest = __rest(props, ["disabled", "min", "max", "step", "onValueChange", "unsafelyReplaceClassName", "className", 'data-testid']);
     var _b = __read(React.useState(min || 0), 2), value = _b[0], setValue = _b[1];
@@ -5972,8 +5972,8 @@ function SpsIncrementor(props) {
                 React.createElement("i", { className: "sps-icon sps-icon-plus-sign", "aria-hidden": "true" })))));
 }
 Object.assign(SpsIncrementor, {
-    props: propsDoc$Z,
-    propTypes: propTypes$11,
+    props: propsDoc$10,
+    propTypes: propTypes$14,
     displayName: 'SpsIncrementor',
 });
 
@@ -5983,32 +5983,32 @@ var SpsIncrementorExamples = {
         description: 'info about incrementor',
         examples: {
             stacked: {
-                react: code(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n                    function Component () {\n                        const [value, setValue] = React.useState(\"\");\n                        const handleChange = val => {\n                            setValue(val);\n                        };\n                        return (\n                            <React.Fragment>\n                                <SpsIncrementor\n                                    min={0}\n                                    max={10}\n                                    step={2}\n                                    id=\"basicIncrementor\"\n                                    onValueChange={handleChange}\n                                />\n                                    Value: {value}\n                            </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component () {\n                        const [value, setValue] = React.useState(\"\");\n                        const handleChange = val => {\n                            setValue(val);\n                        };\n                        return (\n                            <React.Fragment>\n                                <SpsIncrementor\n                                    min={0}\n                                    max={10}\n                                    step={2}\n                                    id=\"basicIncrementor\"\n                                    onValueChange={handleChange}\n                                />\n                                    Value: {value}\n                            </React.Fragment>\n                        );\n                    }\n                "]))),
+                react: code(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n                    function Component () {\n                        const [value, setValue] = React.useState(\"\");\n                        const handleChange = val => {\n                            setValue(val);\n                        };\n                        return (\n                            <React.Fragment>\n                                <SpsIncrementor\n                                    min={0}\n                                    max={10}\n                                    step={2}\n                                    id=\"basicIncrementor\"\n                                    onValueChange={handleChange}\n                                />\n                                    Value: {value}\n                            </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component () {\n                        const [value, setValue] = React.useState(\"\");\n                        const handleChange = val => {\n                            setValue(val);\n                        };\n                        return (\n                            <React.Fragment>\n                                <SpsIncrementor\n                                    min={0}\n                                    max={10}\n                                    step={2}\n                                    id=\"basicIncrementor\"\n                                    onValueChange={handleChange}\n                                />\n                                    Value: {value}\n                            </React.Fragment>\n                        );\n                    }\n                "]))),
             },
         },
     },
 };
-var templateObject_1$y;
+var templateObject_1$z;
 
-var propsDoc$Y = {
+var propsDoc$$ = {
     inline: 'boolean',
 };
-var propTypes$10 = __assign(__assign({}, spsGlobalPropTypes), { inline: bool });
+var propTypes$13 = __assign(__assign({}, spsGlobalPropTypes), { inline: bool });
 function SpsKeyValueList(props) {
     var children = props.children, className = props.className, inline = props.inline, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "inline", 'data-testid', "unsafelyReplaceClassName"]);
     var keyValueListClass = clsx(unsafelyReplaceClassName || 'sps-key-value-list', inline && 'sps-key-value-list--inline', className);
     return (React.createElement("div", __assign({ className: keyValueListClass, "data-testid": "" + testId }, rest), children));
 }
 Object.assign(SpsKeyValueList, {
-    props: propsDoc$Y,
-    propTypes: propTypes$10,
+    props: propsDoc$$,
+    propTypes: propTypes$13,
     displayName: 'SpsKeyValueList',
 });
 
-var propsDoc$X = {
+var propsDoc$_ = {
     itemKey: { type: 'string', required: true },
 };
-var propTypes$$ = __assign(__assign({}, spsGlobalPropTypes), { itemKey: string.isRequired });
+var propTypes$12 = __assign(__assign({}, spsGlobalPropTypes), { itemKey: string.isRequired });
 function SpsKeyValueListItem(props) {
     var children = props.children, className = props.className, itemKey = props.itemKey, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "itemKey", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-key-value-list__item', className);
@@ -6017,8 +6017,8 @@ function SpsKeyValueListItem(props) {
         React.createElement("span", { className: "sps-key-value-list__value", "data-testid": testId + "__value" }, children)));
 }
 Object.assign(SpsKeyValueListItem, {
-    props: propsDoc$X,
-    propTypes: propTypes$$,
+    props: propsDoc$_,
+    propTypes: propTypes$12,
     displayName: 'SpsKeyValueListItem',
 });
 
@@ -6027,7 +6027,7 @@ var SpsKeyValueListExamples = {
         label: 'Stacked',
         examples: {
             stacked: {
-                jsx: code(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n                    <SpsKeyValueList>\n                        <SpsKeyValueListItem itemKey=\"Buying From\">\n                            75 Companies\n                            <span className=\"font-weight-light d-block\">38 of 75 Operational</span>\n                        </SpsKeyValueListItem>\n                        <SpsKeyValueListItem itemKey=\"Some Other Key\">Its Value</SpsKeyValueListItem>\n                    </SpsKeyValueList>\n                "], ["\n                    <SpsKeyValueList>\n                        <SpsKeyValueListItem itemKey=\"Buying From\">\n                            75 Companies\n                            <span className=\"font-weight-light d-block\">38 of 75 Operational</span>\n                        </SpsKeyValueListItem>\n                        <SpsKeyValueListItem itemKey=\"Some Other Key\">Its Value</SpsKeyValueListItem>\n                    </SpsKeyValueList>\n                "]))),
+                jsx: code(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n                    <SpsKeyValueList>\n                        <SpsKeyValueListItem itemKey=\"Buying From\">\n                            75 Companies\n                            <span className=\"font-weight-light d-block\">38 of 75 Operational</span>\n                        </SpsKeyValueListItem>\n                        <SpsKeyValueListItem itemKey=\"Some Other Key\">Its Value</SpsKeyValueListItem>\n                    </SpsKeyValueList>\n                "], ["\n                    <SpsKeyValueList>\n                        <SpsKeyValueListItem itemKey=\"Buying From\">\n                            75 Companies\n                            <span className=\"font-weight-light d-block\">38 of 75 Operational</span>\n                        </SpsKeyValueListItem>\n                        <SpsKeyValueListItem itemKey=\"Some Other Key\">Its Value</SpsKeyValueListItem>\n                    </SpsKeyValueList>\n                "]))),
             },
         },
     },
@@ -6040,9 +6040,9 @@ var SpsKeyValueListExamples = {
         },
     },
 };
-var templateObject_1$x, templateObject_2$u;
+var templateObject_1$y, templateObject_2$u;
 
-var propsDoc$W = {
+var propsDoc$Z = {
     for: { type: 'SpsFormMetaBase<any>', required: true },
     description: 'string',
     stronglySuggested: 'boolean',
@@ -6051,7 +6051,7 @@ var propsDoc$W = {
     helpIconColor: 'string',
     errors: 'ReactNodeOrRenderFn',
 };
-var propTypes$_ = __assign(__assign({}, spsGlobalPropTypes), { description: string, for: oneOfType([
+var propTypes$11 = __assign(__assign({}, spsGlobalPropTypes), { description: string, for: oneOfType([
         impl(),
         impl(),
     ]).isRequired, stronglySuggested: bool, help: nodeOrRenderFn, helpIcon: enumValue(SpsIcon$1), helpIconColor: string, errors: nodeOrRenderFn });
@@ -6168,8 +6168,8 @@ function SpsLabel(_a) {
         description && React.createElement("div", { className: "sps-form-control__description" }, description)));
 }
 Object.assign(SpsLabel, {
-    props: propsDoc$W,
-    propTypes: propTypes$_,
+    props: propsDoc$Z,
+    propTypes: propTypes$11,
     displayName: 'SpsLabel',
 });
 
@@ -6178,7 +6178,7 @@ var SpsLabelExamples = {
         label: 'Basic',
         examples: {
             basic: {
-                react: code(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}>\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput value={formValue.companyName}\n                                formMeta={formMeta.fields.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}>\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput value={formValue.companyName}\n                                formMeta={formMeta.fields.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "]))),
+                react: code(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}>\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput value={formValue.companyName}\n                                formMeta={formMeta.fields.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}>\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput value={formValue.companyName}\n                                formMeta={formMeta.fields.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "]))),
             },
         },
     },
@@ -6226,18 +6226,18 @@ var SpsLabelExamples = {
                 react: code(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"Target\"\n                        }, {\n                            \"companyName\": [SpsValidators.minLength(7)]\n                        });\n\n                        React.useEffect(() => {\n                            // Make validation error visible for the purpose of this demo\n                            formMeta.markAsDirty();\n                        }, []);\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                stronglySuggested\n                                errors={() => formMeta.fields.companyName.hasError(\"minLength\")\n                                    && \"Company Name must be at least 7 characters.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"Target\"\n                        }, {\n                            \"companyName\": [SpsValidators.minLength(7)]\n                        });\n\n                        React.useEffect(() => {\n                            // Make validation error visible for the purpose of this demo\n                            formMeta.markAsDirty();\n                        }, []);\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                stronglySuggested\n                                errors={() => formMeta.fields.companyName.hasError(\"minLength\")\n                                    && \"Company Name must be at least 7 characters.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "]))),
             },
             b_combo2: {
-                react: code(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        }, {\n                            \"companyName\": [SpsValidators.required]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                help=\"Pretend there's something helpful written here.\"\n                                errors={() => formMeta.fields.companyName.hasError(\"required\")\n                                    && \"Please enter a company name.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        }, {\n                            \"companyName\": [SpsValidators.required]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                help=\"Pretend there's something helpful written here.\"\n                                errors={() => formMeta.fields.companyName.hasError(\"required\")\n                                    && \"Please enter a company name.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "]))),
+                react: code(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        }, {\n                            \"companyName\": [SpsValidators.required]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                help=\"Pretend there's something helpful written here.\"\n                                errors={() => formMeta.fields.companyName.hasError(\"required\")\n                                    && \"Please enter a company name.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        }, {\n                            \"companyName\": [SpsValidators.required]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                help=\"Pretend there's something helpful written here.\"\n                                errors={() => formMeta.fields.companyName.hasError(\"required\")\n                                    && \"Please enter a company name.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "]))),
             },
         },
     },
 };
-var templateObject_1$w, templateObject_2$t, templateObject_3$p, templateObject_4$j, templateObject_5$c, templateObject_6$9, templateObject_7$8, templateObject_8$6;
+var templateObject_1$x, templateObject_2$t, templateObject_3$p, templateObject_4$j, templateObject_5$c, templateObject_6$9, templateObject_7$8, templateObject_8$7;
 
-var propsDoc$V = {
+var propsDoc$Y = {
     clearSelected: { type: '() => void', required: true },
     itemsSelected: { type: 'string | number', required: true },
 };
-var propTypes$Z = __assign(__assign({}, spsGlobalPropTypes), { clearSelected: fun().isRequired, itemsSelected: oneOfType([string, number]) });
+var propTypes$10 = __assign(__assign({}, spsGlobalPropTypes), { clearSelected: fun().isRequired, itemsSelected: oneOfType([string, number]) });
 function SpsListActionBar(props) {
     var itemsSelected = props.itemsSelected, clearSelected = props.clearSelected, children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["itemsSelected", "clearSelected", "children", "className", 'data-testid', "unsafelyReplaceClassName"]);
     var t = React.useContext(I18nContext).t;
@@ -6258,11 +6258,39 @@ function SpsListActionBar(props) {
                 React.createElement(SpsButton, { kind: ButtonKind.LINK, icon: SpsIcon$1.X, onClick: handleClearClick, "data-testid": testId + "__clear-button" }, t('design-system:listActionBar.clearSelected'))))))));
 }
 Object.assign(SpsListActionBar, {
-    props: propsDoc$V,
-    propTypes: propTypes$Z,
+    props: propsDoc$Y,
+    propTypes: propTypes$10,
     displayName: 'SpsListActionBar',
 });
 
+var getScrollParent = function (node) {
+    var regex = /(auto|scroll)/;
+    var parents = function (_node, ps) {
+        if (_node.parentNode === null) {
+            return ps;
+        }
+        return parents(_node.parentNode, ps.concat([_node]));
+    };
+    var style = function (_node, prop) { return getComputedStyle(_node, null).getPropertyValue(prop); };
+    var overflow = function (_node) { return style(_node, 'overflow') + style(_node, 'overflow-y'); };
+    var scroll = function (_node) { return regex.test(overflow(_node)); };
+    /* eslint-disable consistent-return */
+    var scrollParent = function (_node) {
+        if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
+            return;
+        }
+        var ps = parents(_node.parentNode, []);
+        for (var i = 0; i < ps.length; i += 1) {
+            if (scroll(ps[i])) {
+                return ps[i];
+            }
+        }
+        return null;
+    };
+    return scrollParent(node);
+    /* eslint-enable consistent-return */
+};
+
 /* eslint-disable no-param-reassign */
 var usePinnedCellStyle = function (isPinned, elementRef) {
     React.useLayoutEffect(function () {
@@ -6334,15 +6362,126 @@ var usePinnedTableBackgroundStyle = function (containerRef) {
             }
         }
     });
+};
+var usePinnedTableHeadStyle = function (containerRef) {
+    React.useLayoutEffect(function () {
+        var container = containerRef.current;
+        var headElement = container === null || container === void 0 ? void 0 : container.querySelector('thead');
+        var table = container === null || container === void 0 ? void 0 : container.querySelector('table');
+        var tableBodyFirstRow = table === null || table === void 0 ? void 0 : table.querySelector('tbody>tr');
+        var tableBodyFirstRowCells = tableBodyFirstRow === null || tableBodyFirstRow === void 0 ? void 0 : tableBodyFirstRow.querySelectorAll('td');
+        var tableHeadCells = headElement === null || headElement === void 0 ? void 0 : headElement.querySelectorAll('th');
+        var navBarContainer = document.body.querySelector('.sps-navbar-container');
+        var placeholder = container === null || container === void 0 ? void 0 : container.querySelector('.placeholder-head');
+        var scrollableParent = null;
+        var resetAppliedStyles = function () {
+            if (headElement) {
+                headElement.style.position = null;
+                headElement.style.top = null;
+                headElement.style.overflow = null;
+                headElement.style.maxWidth = null;
+                headElement.style.width = null;
+                headElement.style.minWidth = null;
+            }
+            if (placeholder) {
+                placeholder.style.width = null;
+                placeholder.style.height = null;
+            }
+            if (tableBodyFirstRowCells) {
+                Array.from(tableBodyFirstRowCells).forEach(function (cell, idx) {
+                    tableHeadCells[idx].style.minWidth = null;
+                    tableHeadCells[idx].style.width = null;
+                    tableHeadCells[idx].style.maxWidth = null;
+                    cell.style.minWidth = null;
+                    cell.style.width = null;
+                    cell.style.maxWidth = null;
+                });
+            }
+        };
+        var adjustHorizontalScroll = function () {
+            headElement.scrollLeft = container.scrollLeft;
+        };
+        var adjustHeadPosition = function () {
+            var topPosition = null;
+            if (scrollableParent === window) {
+                topPosition = navBarContainer ? navBarContainer.getBoundingClientRect().height : 0;
+            }
+            else if (scrollableParent instanceof HTMLElement) {
+                topPosition = scrollableParent.getBoundingClientRect().top;
+            }
+            var containerHorizontalScroll = container.scrollLeft;
+            var headRect = headElement.getBoundingClientRect();
+            var containerRect = container.getBoundingClientRect();
+            if (headRect.top <= topPosition
+                && topPosition <= containerRect.bottom - headRect.height
+                && containerRect.top <= topPosition) {
+                headElement.style.position = 'fixed';
+                headElement.style.top = topPosition + "px";
+                headElement.style.overflow = 'hidden';
+                var headElementWidth = containerRect.width + "px";
+                headElement.style.maxWidth = headElementWidth;
+                headElement.style.width = headElementWidth;
+                headElement.style.minWidth = headElementWidth;
+                if (tableBodyFirstRowCells) {
+                    Array.from(tableBodyFirstRowCells).forEach(function (cell, idx) {
+                        var cellWidth = cell.getBoundingClientRect().width;
+                        var headerWidth = tableHeadCells[idx].getBoundingClientRect().width;
+                        var width = Math.max(cellWidth, headerWidth) + "px";
+                        tableHeadCells[idx].style.minWidth = width;
+                        tableHeadCells[idx].style.width = width;
+                        tableHeadCells[idx].style.maxWidth = width;
+                        cell.style.minWidth = width;
+                        cell.style.width = width;
+                        cell.style.maxWidth = width;
+                    });
+                }
+                if (!placeholder) {
+                    placeholder = document.createElement('div');
+                    placeholder.style.width = headRect.width + "px";
+                    placeholder.style.height = headRect.height + "px";
+                    placeholder.className = 'placeholder-head';
+                    container.insertBefore(placeholder, table);
+                }
+            }
+            else if (placeholder) {
+                container.removeChild(placeholder);
+                placeholder = null;
+                resetAppliedStyles();
+            }
+            container.scrollLeft = containerHorizontalScroll;
+            adjustHorizontalScroll();
+        };
+        var adjustElements = function () {
+            resetAppliedStyles();
+            adjustHeadPosition();
+            adjustHorizontalScroll();
+        };
+        if (headElement && headElement.classList.contains('sps-table__head--pinned')) {
+            scrollableParent = getScrollParent(container) || window;
+            scrollableParent.addEventListener('scroll', adjustHeadPosition);
+            window.addEventListener('resize', adjustElements);
+            container.addEventListener('scroll', adjustHorizontalScroll);
+            adjustElements();
+        }
+        return function () {
+            if (scrollableParent) {
+                scrollableParent.removeEventListener('scroll', adjustHeadPosition);
+                window.removeEventListener('resize', adjustElements);
+            }
+            if (container) {
+                container.removeEventListener('scroll', adjustHorizontalScroll);
+            }
+        };
+    });
 };
 
-var propsDoc$U = {
+var propsDoc$X = {
     controlCell: 'boolean',
     currentSort: 'Array<SortedColumn>',
     onSortChange: 'SortChangeHandler',
     sortKey: 'string',
 };
-var propTypes$Y = __assign(__assign({}, spsGlobalPropTypes), { controlCell: bool, currentSort: arrayOf(impl()), onSortChange: fun(), sortKey: string, pinned: bool });
+var propTypes$$ = __assign(__assign({}, spsGlobalPropTypes), { controlCell: bool, currentSort: arrayOf(impl()), onSortChange: fun(), sortKey: string, pinned: bool });
 function SpsTableHeader(props) {
     var children = props.children, className = props.className, controlCell = props.controlCell, currentSort = props.currentSort, onSortChange = props.onSortChange, sortKey = props.sortKey, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, pinned = props.pinned, rest = __rest(props, ["children", "className", "controlCell", "currentSort", "onSortChange", "sortKey", 'data-testid', "unsafelyReplaceClassName", "pinned"]);
     var _a = __read(React.useState(), 2), sort = _a[0], setSort = _a[1];
@@ -6371,24 +6510,24 @@ function SpsTableHeader(props) {
         React.createElement("span", { className: "sps-table__header-cell-body", "data-testid": testId + "__header-cell-body", onClick: flipSort, tabIndex: sortKey ? 0 : null, onKeyDown: handleKeyEvent }, children)));
 }
 Object.assign(SpsTableHeader, {
-    props: propsDoc$U,
-    propTypes: propTypes$Y,
+    props: propsDoc$X,
+    propTypes: propTypes$$,
     displayName: 'SpsTableHeader',
 });
 function SpsTh(props) {
     return SpsTableHeader(props);
 }
 Object.assign(SpsTh, {
-    props: propsDoc$U,
-    propTypes: propTypes$Y,
+    props: propsDoc$X,
+    propTypes: propTypes$$,
     displayName: 'SpsTh',
 });
 
-var propsDoc$T = {
+var propsDoc$W = {
     currentSort: 'Array<SortedColumn>',
     onSortChange: 'SortChangeHandler',
 };
-var propTypes$X = __assign(__assign({}, spsGlobalPropTypes), { currentSort: arrayOf(impl()), onSortChange: fun() });
+var propTypes$_ = __assign(__assign({}, spsGlobalPropTypes), { currentSort: arrayOf(impl()), onSortChange: fun() });
 function SpsTableRow(props) {
     var children = props.children, className = props.className, currentSort = props.currentSort, onSortChange = props.onSortChange, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "currentSort", "onSortChange", 'data-testid', "unsafelyReplaceClassName"]);
     var newProps = {
@@ -6404,31 +6543,31 @@ function SpsTableRow(props) {
     })));
 }
 Object.assign(SpsTableRow, {
-    props: propsDoc$T,
-    propTypes: propTypes$X,
+    props: propsDoc$W,
+    propTypes: propTypes$_,
     displayName: 'SpsTableRow',
 });
 function SpsTr(props) {
     return SpsTableRow(props);
 }
 Object.assign(SpsTr, {
-    props: propsDoc$T,
-    propTypes: propTypes$X,
+    props: propsDoc$W,
+    propTypes: propTypes$_,
     displayName: 'SpsTr',
 });
 
-var propsDoc$S = {
+var propsDoc$V = {
     currentSort: 'Array<SortedColumn>',
     onSortChange: 'SortChangeHandler',
 };
-var propTypes$W = __assign(__assign({}, spsGlobalPropTypes), { onSortChange: fun(), currentSort: arrayOf(impl()) });
+var propTypes$Z = __assign(__assign({}, spsGlobalPropTypes), { onSortChange: fun(), currentSort: arrayOf(impl()), pinned: bool });
 function SpsTableHead(props) {
-    var children = props.children, className = props.className, currentSort = props.currentSort, onSortChange = props.onSortChange, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "currentSort", "onSortChange", 'data-testid', "unsafelyReplaceClassName"]);
+    var children = props.children, className = props.className, currentSort = props.currentSort, onSortChange = props.onSortChange, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, pinned = props.pinned, rest = __rest(props, ["children", "className", "currentSort", "onSortChange", 'data-testid', "unsafelyReplaceClassName", "pinned"]);
     var newProps = {
         onSortChange: onSortChange,
         currentSort: currentSort,
     };
-    var classes = clsx(unsafelyReplaceClassName || 'sps-table__head', className);
+    var classes = clsx(unsafelyReplaceClassName || 'sps-table__head', pinned && 'sps-table__head--pinned', className);
     return (React.createElement("thead", __assign({ className: classes, "data-testid": testId + "__head" }, rest), React.Children.map(children, function (child) {
         if (child && (child.type === SpsTableRow || child.type === SpsTr)) {
             return React.cloneElement(child, newProps);
@@ -6437,25 +6576,25 @@ function SpsTableHead(props) {
     })));
 }
 Object.assign(SpsTableHead, {
-    props: propsDoc$S,
-    propTypes: propTypes$W,
+    props: propsDoc$V,
+    propTypes: propTypes$Z,
     displayName: 'SpsTableHead',
 });
 function SpsThead(props) {
     return SpsTableHead(props);
 }
 Object.assign(SpsThead, {
-    props: propsDoc$S,
-    propTypes: propTypes$W,
+    props: propsDoc$V,
+    propTypes: propTypes$Z,
     displayName: 'SpsThead',
 });
 
-var propsDoc$R = {
+var propsDoc$U = {
     sort: 'SortedColumn',
     onSortChange: 'SortChangeHandler',
     selectable: 'boolean',
 };
-var propTypes$V = __assign(__assign({}, spsGlobalPropTypes), { onSortChange: fun(), sort: arrayOf(impl()), selectable: bool });
+var propTypes$Y = __assign(__assign({}, spsGlobalPropTypes), { onSortChange: fun(), sort: arrayOf(impl()), selectable: bool });
 function SpsTable(props) {
     var children = props.children, className = props.className, onSortChange = props.onSortChange, sort = props.sort, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "onSortChange", "sort", 'data-testid', "unsafelyReplaceClassName"]);
     var _a = __read(React.useState(sort), 2), currentSort = _a[0], setSort = _a[1];
@@ -6480,6 +6619,7 @@ function SpsTable(props) {
     var classes = clsx(unsafelyReplaceClassName || 'sps-table-container', className);
     var containerRef = React.useRef(null);
     usePinnedTableBackgroundStyle(containerRef);
+    usePinnedTableHeadStyle(containerRef);
     return (React.createElement("div", { ref: containerRef, className: classes },
         React.createElement("table", __assign({ className: "sps-table", role: "table", "data-testid": "" + testId }, rest), React.Children.map(children, function (child) {
             if (child.type === SpsTableHead || child.type === SpsThead) {
@@ -6489,38 +6629,38 @@ function SpsTable(props) {
         }))));
 }
 Object.assign(SpsTable, {
-    props: propsDoc$R,
-    propTypes: propTypes$V,
+    props: propsDoc$U,
+    propTypes: propTypes$Y,
     displayName: 'SpsTable',
 });
 
-var propsDoc$Q = {};
-var propTypes$U = __assign({}, spsGlobalPropTypes);
+var propsDoc$T = {};
+var propTypes$X = __assign({}, spsGlobalPropTypes);
 function SpsTableBody(props) {
     var children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-table__body', className);
     return (React.createElement("tbody", __assign({ className: classes, "data-testid": testId + "__body" }, rest), children));
 }
 Object.assign(SpsTableBody, {
-    props: propsDoc$Q,
-    propTypes: propTypes$U,
+    props: propsDoc$T,
+    propTypes: propTypes$X,
     displayName: 'SpsTableBody',
 });
 function SpsTbody(props) {
     return SpsTableBody(props);
 }
 Object.assign(SpsTbody, {
-    props: propsDoc$Q,
-    propTypes: propTypes$U,
+    props: propsDoc$T,
+    propTypes: propTypes$X,
     displayName: 'SpsTbody',
 });
 
-var propsDoc$P = {
+var propsDoc$S = {
     buttonCell: 'boolean',
     controlCell: 'boolean',
     wrap: 'SpsTableCellWrapWidth',
 };
-var propTypes$T = __assign(__assign({}, spsGlobalPropTypes), { buttonCell: bool, controlCell: bool, wrap: oneOf([200, 300, 400, 500, 600]), pinned: bool });
+var propTypes$W = __assign(__assign({}, spsGlobalPropTypes), { buttonCell: bool, controlCell: bool, wrap: oneOf([200, 300, 400, 500, 600]), pinned: bool });
 function SpsTableCell(props) {
     var buttonCell = props.buttonCell, children = props.children, className = props.className, controlCell = props.controlCell, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, wrap = props.wrap, pinned = props.pinned, rest = __rest(props, ["buttonCell", "children", "className", "controlCell", 'data-testid', "unsafelyReplaceClassName", "wrap", "pinned"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-table__cell', buttonCell && 'sps-table__cell--button-cell', controlCell && 'sps-table__cell--control', wrap && "sps-table__cell--text-wrap-" + wrap, pinned && 'sps-table__cell--pinned', className);
@@ -6529,21 +6669,21 @@ function SpsTableCell(props) {
     return (React.createElement("td", __assign({ className: classes, ref: tableCellRef, role: "cell", "data-testid": testId + "__cell" }, rest), children));
 }
 Object.assign(SpsTableCell, {
-    props: propsDoc$P,
-    propTypes: propTypes$T,
+    props: propsDoc$S,
+    propTypes: propTypes$W,
     displayName: 'SpsTableCell',
 });
 function SpsTd(props) {
     return SpsTableCell(props);
 }
 Object.assign(SpsTd, {
-    props: propsDoc$P,
-    propTypes: propTypes$T,
+    props: propsDoc$S,
+    propTypes: propTypes$W,
     displayName: 'SpsTd',
 });
 
-var propsDoc$O = {};
-var propTypes$S = __assign({}, spsGlobalPropTypes);
+var propsDoc$R = {};
+var propTypes$V = __assign({}, spsGlobalPropTypes);
 var CSS_BLOCK$3 = 'sps-icon-button-panel';
 function SpsIconButtonPanel(_a) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
@@ -6554,8 +6694,8 @@ function SpsIconButtonPanel(_a) {
     return (React.createElement("div", __assign({ className: classes }, rest), iconButtons));
 }
 Object.assign(SpsIconButtonPanel, {
-    props: propsDoc$O,
-    propTypes: propTypes$S,
+    props: propsDoc$R,
+    propTypes: propTypes$V,
     displayName: 'SpsIconButtonPanel',
 });
 
@@ -6589,7 +6729,7 @@ var SpsTableExamples = {
                 React.createElement("div", { className: "sps-body-14" },
                     "Tables can be used in conjunction with the",
                     ' ',
-                    React.createElement(NavigateTo, { to: "List Search Bar" }, "List Search Bar"),
+                    React.createElement(NavigateTo, { to: "List Toolbar" }, "List Toolbar"),
                     " and",
                     ' ',
                     React.createElement(NavigateTo, { to: "Pagination" }, "Pagination"),
@@ -6597,7 +6737,7 @@ var SpsTableExamples = {
         },
         examples: {
             basic: {
-                react: code(templateObject_1$v || (templateObject_1$v = __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                "]))),
+                react: code(templateObject_1$w || (templateObject_1$w = __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                "]))),
             },
         },
     },
@@ -6611,7 +6751,7 @@ var SpsTableExamples = {
             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$s || (templateObject_2$s = __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                "]))),
+                react: code(templateObject_2$s || (templateObject_2$s = __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                "]))),
             },
         },
     },
@@ -6629,7 +6769,7 @@ var SpsTableExamples = {
         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$i || (templateObject_4$i = __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 style={{ width: \"200%\" }}>\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 wrap={400}>{row[\"title\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                                <SpsTableCell wrap={400}>{row[\"director\"]}</SpsTableCell>\n                                                <SpsTableCell wrap={400}>{row[\"countries\"]}</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 style={{ width: \"200%\" }}>\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 wrap={400}>{row[\"title\"]}</SpsTableCell>\n                                                <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                                                <SpsTableCell wrap={400}>{row[\"director\"]}</SpsTableCell>\n                                                <SpsTableCell wrap={400}>{row[\"countries\"]}</SpsTableCell>\n                                                <SpsTableCell className=\"text-right\">{row[\"price\"]}</SpsTableCell>\n                                            </SpsTableRow>\n                                        );\n                                    })}\n                                </SpsTableBody>\n                            </SpsTable>\n                        );\n                    }\n                "]))),
+                react: code(templateObject_4$i || (templateObject_4$i = __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                "]))),
             },
         },
     },
@@ -6645,7 +6785,7 @@ var SpsTableExamples = {
         },
         examples: {
             controls: {
-                react: code(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\nfunction 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                "], ["\nfunction 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                "]))),
+                react: code(templateObject_5$b || (templateObject_5$b = __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                "]))),
             },
         },
     },
@@ -6674,19 +6814,27 @@ var SpsTableExamples = {
         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$7 || (templateObject_7$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                              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 selectable={true} style={{ width: \"200%\" }}>\n      <SpsTableHead>\n        <SpsTableRow>\n          <SpsTableHeader pinned controlCell>\n            <SpsCheckbox checked={allRowsChecked} onChange={() => setAllRowsChecked((prev) => !prev) } />\n          </SpsTableHeader>\n          <SpsTableHeader>Spine #</SpsTableHeader>\n          <SpsTableHeader>Title</SpsTableHeader>\n          <SpsTableHeader>Director</SpsTableHeader>\n          <SpsTableHeader>Year</SpsTableHeader>\n          <SpsTableHeader>Countries</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>{row[\"spine\"]}</SpsTableCell>\n              <SpsTableCell wrap={400}>{row[\"title\"]}</SpsTableCell>\n              <SpsTableCell wrap={400}>{row[\"director\"]}</SpsTableCell>\n              <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n              <SpsTableCell wrap={400}>{row[\"countries\"]}</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                              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 selectable={true} style={{ width: \"200%\" }}>\n      <SpsTableHead>\n        <SpsTableRow>\n          <SpsTableHeader pinned controlCell>\n            <SpsCheckbox checked={allRowsChecked} onChange={() => setAllRowsChecked((prev) => !prev) } />\n          </SpsTableHeader>\n          <SpsTableHeader>Spine #</SpsTableHeader>\n          <SpsTableHeader>Title</SpsTableHeader>\n          <SpsTableHeader>Director</SpsTableHeader>\n          <SpsTableHeader>Year</SpsTableHeader>\n          <SpsTableHeader>Countries</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>{row[\"spine\"]}</SpsTableCell>\n              <SpsTableCell wrap={400}>{row[\"title\"]}</SpsTableCell>\n              <SpsTableCell wrap={400}>{row[\"director\"]}</SpsTableCell>\n              <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n              <SpsTableCell wrap={400}>{row[\"countries\"]}</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                "]))),
+                react: code(templateObject_7$7 || (templateObject_7$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$6 || (templateObject_8$6 = __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$v, templateObject_2$s, templateObject_3$o, templateObject_4$i, templateObject_5$b, templateObject_6$8, templateObject_7$7;
+var templateObject_1$w, templateObject_2$s, templateObject_3$o, templateObject_4$i, templateObject_5$b, templateObject_6$8, templateObject_7$7, templateObject_8$6;
 
 var SpsTagExamples = {
     basic: {
         label: 'Basic Tag',
         examples: {
             basic: {
-                react: code(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n                    import { SpsTag } from \"@spscommerce/ds-react\";\n                    import { TagKind } from \"@spscommerce/ds-shared\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsTag className=\"mr-1 mb-1\">Default</SpsTag>\n                          <SpsTag kind={TagKind.KEY} className=\"mr-1 mb-1\">\n                            Key\n                          </SpsTag>\n                          <SpsTag kind={TagKind.WARNING} className=\"mr-1 mb-1\">\n                            Warning\n                          </SpsTag>\n                          <SpsTag kind={TagKind.ERROR} className=\"mr-1 mb-1\">\n                            Error\n                          </SpsTag>\n                          <SpsTag kind={TagKind.PENDING} className=\"mr-1 mb-1\">\n                            Pending\n                          </SpsTag>\n                          <SpsTag kind={TagKind.SUCCESS} className=\"mr-1 mb-1\">\n                            Success\n                          </SpsTag>\n                          <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">\n                            Info\n                          </SpsTag>\n                        </>\n                      );\n                    }\n                "], ["\n                    import { SpsTag } from \"@spscommerce/ds-react\";\n                    import { TagKind } from \"@spscommerce/ds-shared\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsTag className=\"mr-1 mb-1\">Default</SpsTag>\n                          <SpsTag kind={TagKind.KEY} className=\"mr-1 mb-1\">\n                            Key\n                          </SpsTag>\n                          <SpsTag kind={TagKind.WARNING} className=\"mr-1 mb-1\">\n                            Warning\n                          </SpsTag>\n                          <SpsTag kind={TagKind.ERROR} className=\"mr-1 mb-1\">\n                            Error\n                          </SpsTag>\n                          <SpsTag kind={TagKind.PENDING} className=\"mr-1 mb-1\">\n                            Pending\n                          </SpsTag>\n                          <SpsTag kind={TagKind.SUCCESS} className=\"mr-1 mb-1\">\n                            Success\n                          </SpsTag>\n                          <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">\n                            Info\n                          </SpsTag>\n                        </>\n                      );\n                    }\n                "]))),
+                react: code(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n                    import { SpsTag } from \"@spscommerce/ds-react\";\n                    import { TagKind } from \"@spscommerce/ds-shared\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsTag className=\"mr-1 mb-1\">Default</SpsTag>\n                          <SpsTag kind={TagKind.KEY} className=\"mr-1 mb-1\">\n                            Key\n                          </SpsTag>\n                          <SpsTag kind={TagKind.WARNING} className=\"mr-1 mb-1\">\n                            Warning\n                          </SpsTag>\n                          <SpsTag kind={TagKind.ERROR} className=\"mr-1 mb-1\">\n                            Error\n                          </SpsTag>\n                          <SpsTag kind={TagKind.PENDING} className=\"mr-1 mb-1\">\n                            Pending\n                          </SpsTag>\n                          <SpsTag kind={TagKind.SUCCESS} className=\"mr-1 mb-1\">\n                            Success\n                          </SpsTag>\n                          <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">\n                            Info\n                          </SpsTag>\n                        </>\n                      );\n                    }\n                "], ["\n                    import { SpsTag } from \"@spscommerce/ds-react\";\n                    import { TagKind } from \"@spscommerce/ds-shared\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsTag className=\"mr-1 mb-1\">Default</SpsTag>\n                          <SpsTag kind={TagKind.KEY} className=\"mr-1 mb-1\">\n                            Key\n                          </SpsTag>\n                          <SpsTag kind={TagKind.WARNING} className=\"mr-1 mb-1\">\n                            Warning\n                          </SpsTag>\n                          <SpsTag kind={TagKind.ERROR} className=\"mr-1 mb-1\">\n                            Error\n                          </SpsTag>\n                          <SpsTag kind={TagKind.PENDING} className=\"mr-1 mb-1\">\n                            Pending\n                          </SpsTag>\n                          <SpsTag kind={TagKind.SUCCESS} className=\"mr-1 mb-1\">\n                            Success\n                          </SpsTag>\n                          <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">\n                            Info\n                          </SpsTag>\n                        </>\n                      );\n                    }\n                "]))),
             },
         },
     },
@@ -6699,7 +6847,7 @@ var SpsTagExamples = {
         },
     },
 };
-var templateObject_1$u, templateObject_2$r;
+var templateObject_1$v, templateObject_2$r;
 
 var SpsListActionBarExamples = {
     general: {
@@ -6745,14 +6893,14 @@ var SpsListActionBarExamples = {
         description: 'This example makes use of the Text Buttons + Icon Buttons + Basic Buttons Group.',
         examples: {
             basic: {
-                react: code(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n                    function SpsActionBarExample() {\n                        const [itemsSelected, setItemsSelected] = React.useState(0);\n\n                        function handleClear() {\n                            setItemsSelected(0);\n                        }\n\n                        function showExample() {\n                            setItemsSelected(3);\n                        }\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={showExample}>Show Action Bar</SpsButton>\n                                <SpsListActionBar itemsSelected={itemsSelected} clearSelected={handleClear}>\n                                    <SpsButton kind={ButtonKind.LINK}>Text Button</SpsButton>\n                                    <SpsVr style={{ marginLeft: \"15px\" }} />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.PRINTER} aria-label=\"Print\" />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} aria-label=\"Download\" />\n                                    <SpsVr style={{ marginRight: \"15px\" }} />\n                                    <SpsButton className=\"mr-1\">Button</SpsButton>\n                                    <SpsButton kind={ButtonKind.KEY} className=\"mr-1\">Button</SpsButton>\n                                    <SpsButton kind={ButtonKind.CONFIRM} className=\"mr-1\">Button</SpsButton>\n                                </SpsListActionBar>\n                            </>\n                        )\n                    }\n                "], ["\n                    function SpsActionBarExample() {\n                        const [itemsSelected, setItemsSelected] = React.useState(0);\n\n                        function handleClear() {\n                            setItemsSelected(0);\n                        }\n\n                        function showExample() {\n                            setItemsSelected(3);\n                        }\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={showExample}>Show Action Bar</SpsButton>\n                                <SpsListActionBar itemsSelected={itemsSelected} clearSelected={handleClear}>\n                                    <SpsButton kind={ButtonKind.LINK}>Text Button</SpsButton>\n                                    <SpsVr style={{ marginLeft: \"15px\" }} />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.PRINTER} aria-label=\"Print\" />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} aria-label=\"Download\" />\n                                    <SpsVr style={{ marginRight: \"15px\" }} />\n                                    <SpsButton className=\"mr-1\">Button</SpsButton>\n                                    <SpsButton kind={ButtonKind.KEY} className=\"mr-1\">Button</SpsButton>\n                                    <SpsButton kind={ButtonKind.CONFIRM} className=\"mr-1\">Button</SpsButton>\n                                </SpsListActionBar>\n                            </>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n                    function SpsActionBarExample() {\n                        const [itemsSelected, setItemsSelected] = React.useState(0);\n\n                        function handleClear() {\n                            setItemsSelected(0);\n                        }\n\n                        function showExample() {\n                            setItemsSelected(3);\n                        }\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={showExample}>Show Action Bar</SpsButton>\n                                <SpsListActionBar itemsSelected={itemsSelected} clearSelected={handleClear}>\n                                    <SpsButton kind={ButtonKind.LINK}>Text Button</SpsButton>\n                                    <SpsVr style={{ marginLeft: \"15px\" }} />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.PRINTER} aria-label=\"Print\" />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} aria-label=\"Download\" />\n                                    <SpsVr style={{ marginRight: \"15px\" }} />\n                                    <SpsButton className=\"mr-1\">Button</SpsButton>\n                                    <SpsButton kind={ButtonKind.KEY} className=\"mr-1\">Button</SpsButton>\n                                    <SpsButton kind={ButtonKind.CONFIRM} className=\"mr-1\">Button</SpsButton>\n                                </SpsListActionBar>\n                            </>\n                        )\n                    }\n                "], ["\n                    function SpsActionBarExample() {\n                        const [itemsSelected, setItemsSelected] = React.useState(0);\n\n                        function handleClear() {\n                            setItemsSelected(0);\n                        }\n\n                        function showExample() {\n                            setItemsSelected(3);\n                        }\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={showExample}>Show Action Bar</SpsButton>\n                                <SpsListActionBar itemsSelected={itemsSelected} clearSelected={handleClear}>\n                                    <SpsButton kind={ButtonKind.LINK}>Text Button</SpsButton>\n                                    <SpsVr style={{ marginLeft: \"15px\" }} />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.PRINTER} aria-label=\"Print\" />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} aria-label=\"Download\" />\n                                    <SpsVr style={{ marginRight: \"15px\" }} />\n                                    <SpsButton className=\"mr-1\">Button</SpsButton>\n                                    <SpsButton kind={ButtonKind.KEY} className=\"mr-1\">Button</SpsButton>\n                                    <SpsButton kind={ButtonKind.CONFIRM} className=\"mr-1\">Button</SpsButton>\n                                </SpsListActionBar>\n                            </>\n                        )\n                    }\n                "]))),
             },
         },
     },
 };
-var templateObject_1$t;
+var templateObject_1$u;
 
-var propTypes$R = __assign(__assign({}, spsGlobalPropTypes), { tabs: arrayOf(impl()).isRequired, activeTab: impl(), onTabChange: fun() });
+var propTypes$U = __assign(__assign({}, spsGlobalPropTypes), { tabs: arrayOf(impl()).isRequired, activeTab: impl(), onTabChange: fun() });
 function SpsTabs(props) {
     var tabs = props.tabs, activeTab = props.activeTab, onTabChange = props.onTabChange, className = props.className, unsafelyReplaceClassName = props.unsafelyReplaceClassName, testId = props["data-testid"], rest = __rest(props, ["tabs", "activeTab", "onTabChange", "className", "unsafelyReplaceClassName", 'data-testid']);
     var _a = __read(React.useState(null), 2), activeTabState = _a[0], setActiveTabState = _a[1];
@@ -6784,15 +6932,15 @@ function SpsTabs(props) {
             tab.tag && React.createElement("span", { className: "sps-tag sps-tag--key" }, tab.tag))); }))));
 }
 Object.assign(SpsTabs, {
-    propTypes: propTypes$R,
+    propTypes: propTypes$U,
     displayName: 'SpsTabs',
 });
 
-var propsDoc$N = {
+var propsDoc$Q = {
     formMeta: 'SpsFormSetMeta<any>',
     stacked: 'boolean',
 };
-var propTypes$Q = __assign(__assign({}, spsGlobalPropTypes), { formArray: impl(), formGroup: impl(), formMeta: impl(), stacked: bool });
+var propTypes$T = __assign(__assign({}, spsGlobalPropTypes), { formArray: impl(), formGroup: impl(), formMeta: impl(), stacked: bool });
 function SpsInputGroup(_a) {
     var children = _a.children, className = _a.className, formArray = _a.formArray, formGroup = _a.formGroup, formMeta = _a.formMeta, stacked = _a.stacked, testId = _a["data-testid"], unsafelyReplaceClassName = _a.unsafelyReplaceClassName, rest = __rest(_a, ["children", "className", "formArray", "formGroup", "formMeta", "stacked", 'data-testid', "unsafelyReplaceClassName"]);
     var formControlSet = formGroup || formArray;
@@ -6816,15 +6964,15 @@ function SpsInputGroup(_a) {
         React.createElement("div", { className: clsx('sps-input-group', stacked && 'sps-input-group--stacked') }, children)));
 }
 Object.assign(SpsInputGroup, {
-    props: propsDoc$N,
-    propTypes: propTypes$Q,
+    props: propsDoc$Q,
+    propTypes: propTypes$T,
     displayName: 'SpsInputGroup',
 });
 
-var propsDoc$M = {
+var propsDoc$P = {
     onSubmit: 'FormEventHandler',
 };
-var propTypes$P = __assign(__assign({}, spsGlobalPropTypes), { onSubmit: fun() });
+var propTypes$S = __assign(__assign({}, spsGlobalPropTypes), { onSubmit: fun() });
 function SpsListToolbarSearch(props) {
     var children = props.children, onSubmit = props.onSubmit;
     function handleSubmit(event) {
@@ -6837,12 +6985,12 @@ function SpsListToolbarSearch(props) {
         React.createElement(SpsInputGroup, { className: "sps-list-toolbar__search-field" }, children)));
 }
 Object.assign(SpsListToolbarSearch, {
-    props: propsDoc$M,
-    propTypes: propTypes$P,
+    props: propsDoc$P,
+    propTypes: propTypes$S,
     displayName: 'SpsListToolbarSearch',
 });
 
-var propsDoc$L = {
+var propsDoc$O = {
     activeTab: 'SpsTab',
     advancedSearch: '{ isOpen: boolean, enteredFields: number }',
     onToggleAdvancedSearch: '(boolean) => void',
@@ -6850,13 +6998,17 @@ var propsDoc$L = {
     title: 'string',
     tabs: 'Array<SpsTab>',
     onToolbarPinned: '(boolean) => void',
+    selectable: 'boolean',
+    isSelected: 'boolean',
+    isIndeterminate: 'boolean',
+    onSelectionChange: '(boolean) => void',
 };
-var propTypes$O = __assign(__assign({}, spsGlobalPropTypes), { activeTab: impl(), advancedSearch: shape({
+var propTypes$R = __assign(__assign({}, spsGlobalPropTypes), { activeTab: impl(), advancedSearch: shape({
         isOpen: bool,
         enteredFields: number,
-    }), onToggleAdvancedSearch: fun(), onTabChange: fun(), title: string, tabs: arrayOf(impl()), onToolbarPinned: fun() });
+    }), onToggleAdvancedSearch: fun(), onTabChange: fun(), title: string, tabs: arrayOf(impl()), onToolbarPinned: fun(), selectable: bool, isSelected: bool, isIndeterminate: bool, onSelectionChange: fun() });
 function SpsListToolbar(props) {
-    var activeTab = props.activeTab, advancedSearch = props.advancedSearch, children = props.children, className = props.className, onToggleAdvancedSearch = props.onToggleAdvancedSearch, onTabChange = props.onTabChange, tabs = props.tabs, title = props.title, unsafelyReplaceClassName = props.unsafelyReplaceClassName, onToolbarPinned = props.onToolbarPinned, testId = props["data-testid"], rest = __rest(props, ["activeTab", "advancedSearch", "children", "className", "onToggleAdvancedSearch", "onTabChange", "tabs", "title", "unsafelyReplaceClassName", "onToolbarPinned", 'data-testid']);
+    var activeTab = props.activeTab, advancedSearch = props.advancedSearch, children = props.children, className = props.className, onToggleAdvancedSearch = props.onToggleAdvancedSearch, onTabChange = props.onTabChange, tabs = props.tabs, title = props.title, unsafelyReplaceClassName = props.unsafelyReplaceClassName, onToolbarPinned = props.onToolbarPinned, selectable = props.selectable, isSelected = props.isSelected, isIndeterminate = props.isIndeterminate, onSelectionChange = props.onSelectionChange, testId = props["data-testid"], rest = __rest(props, ["activeTab", "advancedSearch", "children", "className", "onToggleAdvancedSearch", "onTabChange", "tabs", "title", "unsafelyReplaceClassName", "onToolbarPinned", "selectable", "isSelected", "isIndeterminate", "onSelectionChange", 'data-testid']);
     var t = React.useContext(I18nContext).t;
     var unpinScrollY = null;
     var _a = __read(React.useState(false), 2), isPinned = _a[0], setIsPinned = _a[1];
@@ -6910,7 +7062,11 @@ function SpsListToolbar(props) {
         { type: SpsListToolbarSearch },
     ]), 2), listToolbarSearch = _b[0], otherChildren = _b[1];
     return (React.createElement("div", __assign({ className: classes, "data-testid": testId, ref: rootElement }, rest),
-        tabs && React.createElement(SpsTabs, { tabs: tabs, onTabChange: handleTabChange, activeTab: activeTab, "data-testid": testId + "__tabs" }),
+        !!selectable && (React.createElement("div", { className: "sps-list-toolbar__selection-controls" },
+            React.createElement(SpsCheckbox, { checked: isSelected, indeterminate: isIndeterminate, onChange: function () {
+                    onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(!isSelected);
+                } }))),
+        tabs && (React.createElement(SpsTabs, { tabs: tabs, onTabChange: handleTabChange, activeTab: activeTab, "data-testid": testId + "__tabs" })),
         React.createElement("div", { className: "sps-list-toolbar__search-controls" },
             !title && listToolbarSearch,
             listToolbarSearch.length > 0 && advancedSearch && (React.createElement("div", { className: "sps-list-toolbar__advanced-search-toggle", "data-testid": testId + "__advanced-search" },
@@ -6918,14 +7074,13 @@ function SpsListToolbar(props) {
                     React.createElement(SpsButton, { kind: ButtonKind.LINK, onClick: toggleAdvancedSearch }, t('design-system:listToolbar.advancedSearchToggle'))),
                 advancedSearch.enteredFields > 0 && (React.createElement(SpsTag, { kind: TagKind.INFO },
                     React.createElement("span", null, advancedSearch.enteredFields))))),
-            title
-                && (React.createElement("div", { "data-testid": testId + "-title", className: "sps-list-toolbar__advanced-search-title" }, title))),
+            title && (React.createElement("div", { "data-testid": testId + "-title", className: "sps-list-toolbar__advanced-search-title" }, title))),
         isPinned ? (React.createElement("div", { className: "sps-list-toolbar__header-content" },
             React.createElement(PortalContext.Provider, { value: { fixed: true } }, otherChildren))) : (React.createElement("div", { className: "sps-list-toolbar__header-content" }, otherChildren))));
 }
 Object.assign(SpsListToolbar, {
-    props: propsDoc$L,
-    propTypes: propTypes$O,
+    props: propsDoc$O,
+    propTypes: propTypes$R,
     displayName: 'SpsListToolbar',
 });
 
@@ -7006,34 +7161,25 @@ var SpsListToolbarExamples = {
         label: 'Content Order',
         description: React.createElement(ContentOrderExample, null),
     },
-    // TODO: updates needed to the list toolbar component
-    // checkbox: {
-    //     label: 'Checkbox',
-    //     description: ({ NavigateTo }) => (
-    //         <p>
-    //             Use a Checkbox in the List Toolbar when items in a{' '}
-    //             <NavigateTo to="content-row">Content Row</NavigateTo> or{' '}
-    //             <NavigateTo to="tile-list">Content Tile</NavigateTo> are selectable. The Checkbox
-    //             selects all items in the list, and will cause the Action Bar to appear.
-    //             Do not use this with a Table, as Tables have a built-in checkbox in the
-    //             header row.
-    //         </p>
-    //     ),
-    //     examples: {
-    //         checkbox: {
-    //             react: code`
-    //                 function Component() {
-    //                     const { formValue, formMeta, updateForm } = useSpsForm({
-    //                         searchText: "",
-    //                     });
-    //                     return (
-    //                         <p>placeholder</p>
-    //                     )
-    //                 }
-    //             `,
-    //         },
-    //     },
-    // },
+    checkbox: {
+        label: 'Checkbox',
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("p", null,
+                "Use a Checkbox in the List Toolbar when items in a",
+                ' ',
+                React.createElement(NavigateTo, { to: "content-row" }, "Content Row"),
+                " or",
+                ' ',
+                React.createElement(NavigateTo, { to: "tile-list" }, "Content Tile"),
+                " are selectable. The Checkbox selects all items in the list, and will cause the Action Bar to appear. Do not use this with a Table, as Tables have a built-in checkbox in the header row."));
+        },
+        examples: {
+            checkbox: {
+                react: code(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        const [isSelected, setIsSelected] = React.useState(false);\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar \n                            selectable \n                            onSelectionChange={setIsSelected} \n                            isSelected={isSelected}\n                            >\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        const [isSelected, setIsSelected] = React.useState(false);\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar \n                            selectable \n                            onSelectionChange={setIsSelected} \n                            isSelected={isSelected}\n                            >\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
     searchAndFilter: {
         label: 'Search + Filter Inputs',
         description: function () { return (React.createElement("p", null, "Use Search and Filter inputs to make it easier to quickly find list items.")); },
@@ -7042,25 +7188,25 @@ var SpsListToolbarExamples = {
                 description: function () { return (React.createElement(React.Fragment, null,
                     React.createElement("h5", null, "Search"),
                     React.createElement("p", null, "Use Search to find list item(s) starting from an empty list."))); },
-                react: code(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
             },
             searchAndSelect: {
                 description: function () { return (React.createElement(React.Fragment, null,
                     React.createElement("h5", null, "Search + Select"),
                     React.createElement("p", null, "Use Select to search for list item(s) in a particular category."))); },
-                react: code(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n                    function Component() {\n                        const filterKeys = [\"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const filterKeys = [\"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n                    function Component() {\n                        const filterKeys = [\"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const filterKeys = [\"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
             },
             filter: {
                 description: function () { return (React.createElement(React.Fragment, null,
                     React.createElement("h5", null, "Filter"),
                     React.createElement("p", null, "Use Filter to find list item(s) starting from a populated list."))); },
-                react: code(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
             },
             filterAndSelect: {
                 description: function () { return (React.createElement(React.Fragment, null,
                     React.createElement("h5", null, "Filter + Select"),
                     React.createElement("p", null, "Use Select to filter list item(s) in a particular category."))); },
-                react: code(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n                    function Component() {\n                        const filterKeys = [\"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const filterKeys = [\"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n                    function Component() {\n                        const filterKeys = [\"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const filterKeys = [\"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
             },
         },
     },
@@ -7123,7 +7269,7 @@ var SpsListToolbarExamples = {
         },
         examples: {
             advancedSearch: {
-                react: code(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n                    function Component() {\n                        const [advSearch, setAdvSearch] = React.useState({\n                            isOpen: false,\n                            controlsDisabled: true,\n                        });\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            setAdvSearch({ isOpen });\n                        }\n                    \n                        return (\n                            <>\n                                <SpsListToolbar advancedSearch={advSearch}\n                                    onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                                >\n                                    <SpsListToolbarSearch>\n                                        <SpsTextInput\n                                            value={formValue.searchText}\n                                            formMeta={formMeta.fields.searchText}\n                                            placeholder=\"Search fields\"\n                                        />\n                                        <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                    </SpsListToolbarSearch>\n                                </SpsListToolbar>\n                                <SpsAdvancedSearch {...advSearch}>\n                                    <i>insert form here</i>\n                                </SpsAdvancedSearch>\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const [advSearch, setAdvSearch] = React.useState({\n                            isOpen: false,\n                            controlsDisabled: true,\n                        });\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            setAdvSearch({ isOpen });\n                        }\n                    \n                        return (\n                            <>\n                                <SpsListToolbar advancedSearch={advSearch}\n                                    onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                                >\n                                    <SpsListToolbarSearch>\n                                        <SpsTextInput\n                                            value={formValue.searchText}\n                                            formMeta={formMeta.fields.searchText}\n                                            placeholder=\"Search fields\"\n                                        />\n                                        <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                    </SpsListToolbarSearch>\n                                </SpsListToolbar>\n                                <SpsAdvancedSearch {...advSearch}>\n                                    <i>insert form here</i>\n                                </SpsAdvancedSearch>\n                            </>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n                    function Component() {\n                        const [advSearch, setAdvSearch] = React.useState({\n                            isOpen: false,\n                            controlsDisabled: true,\n                        });\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            setAdvSearch({ isOpen });\n                        }\n                    \n                        return (\n                            <>\n                                <SpsListToolbar advancedSearch={advSearch}\n                                    onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                                >\n                                    <SpsListToolbarSearch>\n                                        <SpsTextInput\n                                            value={formValue.searchText}\n                                            formMeta={formMeta.fields.searchText}\n                                            placeholder=\"Search fields\"\n                                        />\n                                        <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                    </SpsListToolbarSearch>\n                                </SpsListToolbar>\n                                <SpsAdvancedSearch {...advSearch}>\n                                    <i>insert form here</i>\n                                </SpsAdvancedSearch>\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const [advSearch, setAdvSearch] = React.useState({\n                            isOpen: false,\n                            controlsDisabled: true,\n                        });\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            setAdvSearch({ isOpen });\n                        }\n                    \n                        return (\n                            <>\n                                <SpsListToolbar advancedSearch={advSearch}\n                                    onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                                >\n                                    <SpsListToolbarSearch>\n                                        <SpsTextInput\n                                            value={formValue.searchText}\n                                            formMeta={formMeta.fields.searchText}\n                                            placeholder=\"Search fields\"\n                                        />\n                                        <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                    </SpsListToolbarSearch>\n                                </SpsListToolbar>\n                                <SpsAdvancedSearch {...advSearch}>\n                                    <i>insert form here</i>\n                                </SpsAdvancedSearch>\n                            </>\n                        )\n                    }\n                "]))),
             },
         },
     },
@@ -7142,7 +7288,7 @@ var SpsListToolbarExamples = {
         },
         examples: {
             columnEditor: {
-                react: code(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n                    function Component() {\n                        const unselectedCols = [\n                            { name: \"Title\" },\n                        ];\n                        const selectedCols = [\n                            { name: \"Documents\" },\n                            { name: \"Price\" },\n                        ]\n                        \n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                                <SpsColumnChooser\n                                    unselectedColumns={unselectedCols}\n                                    selectedColumns={selectedCols}\n                                    onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n                                />\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const unselectedCols = [\n                            { name: \"Title\" },\n                        ];\n                        const selectedCols = [\n                            { name: \"Documents\" },\n                            { name: \"Price\" },\n                        ]\n                        \n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                                <SpsColumnChooser\n                                    unselectedColumns={unselectedCols}\n                                    selectedColumns={selectedCols}\n                                    onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n                                />\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n                    function Component() {\n                        const unselectedCols = [\n                            { name: \"Title\" },\n                        ];\n                        const selectedCols = [\n                            { name: \"Documents\" },\n                            { name: \"Price\" },\n                        ]\n                        \n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                                <SpsColumnChooser\n                                    unselectedColumns={unselectedCols}\n                                    selectedColumns={selectedCols}\n                                    onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n                                />\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const unselectedCols = [\n                            { name: \"Title\" },\n                        ];\n                        const selectedCols = [\n                            { name: \"Documents\" },\n                            { name: \"Price\" },\n                        ]\n                        \n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                                <SpsColumnChooser\n                                    unselectedColumns={unselectedCols}\n                                    selectedColumns={selectedCols}\n                                    onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n                                />\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
             },
         },
     },
@@ -7254,7 +7400,7 @@ var SpsListToolbarExamples = {
         },
         examples: {
             buttons: {
-                react: code(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                                <SpsButton kind={ButtonKind.LINK}>Text Button</SpsButton>\n                                <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                                <SpsButton>Button</SpsButton>\n                                <SpsButton kind={ButtonKind.KEY}>Button</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                                <SpsButton kind={ButtonKind.LINK}>Text Button</SpsButton>\n                                <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                                <SpsButton>Button</SpsButton>\n                                <SpsButton kind={ButtonKind.KEY}>Button</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                                <SpsButton kind={ButtonKind.LINK}>Text Button</SpsButton>\n                                <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                                <SpsButton>Button</SpsButton>\n                                <SpsButton kind={ButtonKind.KEY}>Button</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                                <SpsButton kind={ButtonKind.LINK}>Text Button</SpsButton>\n                                <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                                <SpsButton>Button</SpsButton>\n                                <SpsButton kind={ButtonKind.KEY}>Button</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
             },
         },
     },
@@ -7269,7 +7415,7 @@ var SpsListToolbarExamples = {
         },
         examples: {
             tabs: {
-                react: code(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n                    function Component() {\n                        const tabs = [\n                            {\n                                label: \"Good Tab\",\n                            },\n                            {\n                                label: \"Great Tab\",\n                            },\n                            {\n                                label: \"Best Tab\",\n                            },\n                        ];\n                        const activeTab = { label: \"Good Tab\" };\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        })\n                        const handleChange = e => {\n                            setSearchText(e.target.value);\n                        };\n\n                        function handleTabChange(tab) {\n                            console.log(tab);\n                        }\n\n                        return (\n                            <SpsListToolbar\n                                tabs={tabs}\n                                activeTab={activeTab}\n                                onTabChange={handleTabChange}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind=\"icon\" icon=\"search\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const tabs = [\n                            {\n                                label: \"Good Tab\",\n                            },\n                            {\n                                label: \"Great Tab\",\n                            },\n                            {\n                                label: \"Best Tab\",\n                            },\n                        ];\n                        const activeTab = { label: \"Good Tab\" };\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        })\n                        const handleChange = e => {\n                            setSearchText(e.target.value);\n                        };\n\n                        function handleTabChange(tab) {\n                            console.log(tab);\n                        }\n\n                        return (\n                            <SpsListToolbar\n                                tabs={tabs}\n                                activeTab={activeTab}\n                                onTabChange={handleTabChange}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind=\"icon\" icon=\"search\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        );\n                    }\n                "]))),
+                react: code(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n                    function Component() {\n                        const tabs = [\n                            {\n                                label: \"Good Tab\",\n                            },\n                            {\n                                label: \"Great Tab\",\n                            },\n                            {\n                                label: \"Best Tab\",\n                            },\n                        ];\n                        const activeTab = { label: \"Good Tab\" };\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        })\n                        const handleChange = e => {\n                            setSearchText(e.target.value);\n                        };\n\n                        function handleTabChange(tab) {\n                            console.log(tab);\n                        }\n\n                        return (\n                            <SpsListToolbar\n                                tabs={tabs}\n                                activeTab={activeTab}\n                                onTabChange={handleTabChange}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind=\"icon\" icon=\"search\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const tabs = [\n                            {\n                                label: \"Good Tab\",\n                            },\n                            {\n                                label: \"Great Tab\",\n                            },\n                            {\n                                label: \"Best Tab\",\n                            },\n                        ];\n                        const activeTab = { label: \"Good Tab\" };\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        })\n                        const handleChange = e => {\n                            setSearchText(e.target.value);\n                        };\n\n                        function handleTabChange(tab) {\n                            console.log(tab);\n                        }\n\n                        return (\n                            <SpsListToolbar\n                                tabs={tabs}\n                                activeTab={activeTab}\n                                onTabChange={handleTabChange}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind=\"icon\" icon=\"search\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        );\n                    }\n                "]))),
             },
         },
     },
@@ -7285,18 +7431,18 @@ var SpsListToolbarExamples = {
         },
         examples: {
             title: {
-                react: code(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n                    function Component() {\n                        return (\n                            <SpsListToolbar title=\"Good List Title\">\n                                <SpsButton>Button</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        return (\n                            <SpsListToolbar title=\"Good List Title\">\n                                <SpsButton>Button</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n                    function Component() {\n                        return (\n                            <SpsListToolbar title=\"Good List Title\">\n                                <SpsButton>Button</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        return (\n                            <SpsListToolbar title=\"Good List Title\">\n                                <SpsButton>Button</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
             },
         },
     },
 };
-var templateObject_1$s, templateObject_2$q, templateObject_3$n, templateObject_4$h, templateObject_5$a, templateObject_6$7, templateObject_7$6, templateObject_8$5, templateObject_9$4;
+var templateObject_1$t, templateObject_2$q, templateObject_3$n, templateObject_4$h, templateObject_5$a, templateObject_6$7, templateObject_7$6, templateObject_8$5, templateObject_9$4, templateObject_10$3;
 
-var propsDoc$K = {
+var propsDoc$N = {
     kind: 'FeedbackBlockKind',
     message: { type: 'string', required: true },
 };
-var propTypes$N = __assign(__assign({}, spsGlobalPropTypes), { kind: enumValue(FeedbackBlockKind), message: node.isRequired });
+var propTypes$Q = __assign(__assign({}, spsGlobalPropTypes), { kind: enumValue(FeedbackBlockKind), message: node.isRequired });
 function SpsMicroBlock(props) {
     var className = props.className, _a = props.kind, kind = _a === void 0 ? FeedbackBlockKind.INFO : _a, message = props.message, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["className", "kind", "message", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-micro-block', "sps-micro-block--" + kind, className);
@@ -7305,8 +7451,8 @@ function SpsMicroBlock(props) {
         React.createElement("span", null, message)));
 }
 Object.assign(SpsMicroBlock, {
-    props: propsDoc$K,
-    propTypes: propTypes$N,
+    props: propsDoc$N,
+    propTypes: propTypes$Q,
     displayName: 'SpsMicroBlock',
 });
 
@@ -7315,7 +7461,7 @@ var SpsMicroBlockExamples = {
         label: 'Info Micro Block',
         examples: {
             infoBlock: {
-                jsx: code(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n                    <SpsMicroBlock kind={FeedbackBlockKind.INFO} message=\"Hey, here's something neat.\"/>\n                "], ["\n                    <SpsMicroBlock kind={FeedbackBlockKind.INFO} message=\"Hey, here's something neat.\"/>\n                "]))),
+                jsx: code(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n                    <SpsMicroBlock kind={FeedbackBlockKind.INFO} message=\"Hey, here's something neat.\"/>\n                "], ["\n                    <SpsMicroBlock kind={FeedbackBlockKind.INFO} message=\"Hey, here's something neat.\"/>\n                "]))),
             },
         },
     },
@@ -7352,16 +7498,16 @@ var SpsMicroBlockExamples = {
         },
     },
 };
-var templateObject_1$r, templateObject_2$p, templateObject_3$m, templateObject_4$g, templateObject_5$9;
+var templateObject_1$s, templateObject_2$p, templateObject_3$m, templateObject_4$g, templateObject_5$9;
 
-var propsDoc$J = {
+var propsDoc$M = {
     kind: 'ModalKind',
     size: 'ModalSize',
     title: 'string',
     onClose: '() => void',
     focusElementOnOpen: 'React.MutableRefObject<HTMLElement>',
 };
-var propTypes$M = __assign(__assign({}, spsGlobalPropTypes), { kind: enumValue(ModalKind), size: enumValue(ModalSize), title: string, onClose: fun(), focusElementOnOpen: ref() });
+var propTypes$P = __assign(__assign({}, spsGlobalPropTypes), { kind: enumValue(ModalKind), size: enumValue(ModalSize), title: string, onClose: fun(), focusElementOnOpen: ref() });
 function SpsModalV2Footer(_a) {
     var children = _a.children;
     return React.createElement("div", { className: "sps-modal__footer" }, children);
@@ -7431,8 +7577,8 @@ function SpsModalV2(_a) {
         : React.createElement(React.Fragment, null);
 }
 Object.assign(SpsModalV2, {
-    props: propsDoc$J,
-    propTypes: propTypes$M,
+    props: propsDoc$M,
+    propTypes: propTypes$P,
     displayName: 'SpsModalV2',
 });
 
@@ -7465,7 +7611,7 @@ var SpsModalExamples = {
                 description: function () { return (React.createElement(React.Fragment, null,
                     React.createElement("h5", null, "Close Button"),
                     React.createElement("p", null, "Remove the Close Button in the upper right of the Modal if the user must choose the course of action before proceeding."))); },
-                react: code(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        function secondaryAction() {\n                            console.log(\"Secondary action invoked\");\n                            setShowModal(false);\n                        }\n                    \n                        function primaryAction() {\n                            console.log(\"Primary action invoked\");\n                            setShowModal(false);\n                        }\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                    <SpsModalV2Footer>\n                                        <SpsButton onClick={secondaryAction}>Secondary Action</SpsButton>\n                                        <SpsButton kind={ButtonKind.KEY} onClick={primaryAction}>Primary Action</SpsButton>\n                                    </SpsModalV2Footer>\n                                    </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        function secondaryAction() {\n                            console.log(\"Secondary action invoked\");\n                            setShowModal(false);\n                        }\n                    \n                        function primaryAction() {\n                            console.log(\"Primary action invoked\");\n                            setShowModal(false);\n                        }\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                    <SpsModalV2Footer>\n                                        <SpsButton onClick={secondaryAction}>Secondary Action</SpsButton>\n                                        <SpsButton kind={ButtonKind.KEY} onClick={primaryAction}>Primary Action</SpsButton>\n                                    </SpsModalV2Footer>\n                                    </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
+                react: code(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        function secondaryAction() {\n                            console.log(\"Secondary action invoked\");\n                            setShowModal(false);\n                        }\n                    \n                        function primaryAction() {\n                            console.log(\"Primary action invoked\");\n                            setShowModal(false);\n                        }\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                    <SpsModalV2Footer>\n                                        <SpsButton onClick={secondaryAction}>Secondary Action</SpsButton>\n                                        <SpsButton kind={ButtonKind.KEY} onClick={primaryAction}>Primary Action</SpsButton>\n                                    </SpsModalV2Footer>\n                                    </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "], ["\n                    function Component() {\n                        const [showModal, setShowModal] = React.useState(false);\n\n                        function secondaryAction() {\n                            console.log(\"Secondary action invoked\");\n                            setShowModal(false);\n                        }\n                    \n                        function primaryAction() {\n                            console.log(\"Primary action invoked\");\n                            setShowModal(false);\n                        }\n\n                        return <>\n                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>\n                                Show Modal\n                            </SpsButton>\n                            {showModal && (\n                                <SpsModalV2\n                                    size={ModalSize.SMALL}\n                                >\n                                    <div className=\"sps-text-semibold mb-1\">Optional Headline</div>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                                    <SpsModalV2Footer>\n                                        <SpsButton onClick={secondaryAction}>Secondary Action</SpsButton>\n                                        <SpsButton kind={ButtonKind.KEY} onClick={primaryAction}>Primary Action</SpsButton>\n                                    </SpsModalV2Footer>\n                                    </SpsModalV2>\n                            )}\n                        </>;\n                    }\n                "]))),
             },
         },
     },
@@ -7564,9 +7710,9 @@ var SpsModalExamples = {
         },
     },
 };
-var templateObject_1$q, templateObject_2$o, templateObject_3$l, templateObject_4$f, templateObject_5$8, templateObject_6$6, templateObject_7$5, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1;
+var templateObject_1$r, templateObject_2$o, templateObject_3$l, templateObject_4$f, templateObject_5$8, templateObject_6$6, templateObject_7$5, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1;
 
-var propsDoc$I = {
+var propsDoc$L = {
     captionKey: 'string',
     debounce: 'number',
     disabled: 'boolean',
@@ -7582,7 +7728,7 @@ var propsDoc$I = {
     value: 'any',
     zeroState: 'string',
 };
-var propTypes$L = __assign(__assign({}, spsGlobalPropTypes), { action: fun(), captionKey: string, debounce: number, disabled: bool, disableSelected: bool, formControl: impl(), formMeta: impl(), hideSelected: bool, icon: enumValue(SpsIcon$1), onChange: fun(), options: oneOfType([
+var propTypes$O = __assign(__assign({}, spsGlobalPropTypes), { action: fun(), captionKey: string, debounce: number, disabled: bool, disableSelected: bool, formControl: impl(), formMeta: impl(), hideSelected: bool, icon: enumValue(SpsIcon$1), onChange: fun(), options: oneOfType([
         array,
         instanceOf(Promise),
         fun(),
@@ -7732,8 +7878,8 @@ function SpsMultiSelect(_a) {
         React.createElement(SpsOptionList, { id: wrapperId + "_options", ref: optionListRef, attachTo: inputVisual, captionKey: captionKey, disabledOptions: disableSelected ? value : null, isOpen: showPopup, keepOpen: true, keyDown: state.keyDown, options: options, specialAction: action, onOptionSelected: selectOption, onPositionFlip: handlePositionFlip, hideInlineSearch: true, optionRole: "option", onOptionListChanged: handleOptionListChanged, searchDebounce: debounce, search: state.searchText, tall: tallOptionList, textKey: textKey, zeroState: zeroState })));
 }
 Object.assign(SpsMultiSelect, {
-    props: propsDoc$I,
-    propTypes: propTypes$L,
+    props: propsDoc$L,
+    propTypes: propTypes$O,
     displayName: 'SpsMultiSelect',
 });
 
@@ -7743,7 +7889,7 @@ var SpsMultiSelectExamples = {
         description: '<p>Multi select component</p>',
         examples: {
             a_basic: {
-                react: code(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n                    function Component() {\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            things: [ opts[0] ]\n                        })\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.things}>Things</SpsLabel>\n                            <SpsMultiSelect\n                                options={opts}\n                                formMeta={formMeta.fields.things}\n                                value={formValue.things}\n                            />\n                            <br />\n                            {JSON.stringify(formValue)}\n                        </>\n                    }\n                "], ["\n                    function Component() {\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            things: [ opts[0] ]\n                        })\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.things}>Things</SpsLabel>\n                            <SpsMultiSelect\n                                options={opts}\n                                formMeta={formMeta.fields.things}\n                                value={formValue.things}\n                            />\n                            <br />\n                            {JSON.stringify(formValue)}\n                        </>\n                    }\n                "]))),
+                react: code(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n                    function Component() {\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            things: [ opts[0] ]\n                        })\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.things}>Things</SpsLabel>\n                            <SpsMultiSelect\n                                options={opts}\n                                formMeta={formMeta.fields.things}\n                                value={formValue.things}\n                            />\n                            <br />\n                            {JSON.stringify(formValue)}\n                        </>\n                    }\n                "], ["\n                    function Component() {\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            things: [ opts[0] ]\n                        })\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.things}>Things</SpsLabel>\n                            <SpsMultiSelect\n                                options={opts}\n                                formMeta={formMeta.fields.things}\n                                value={formValue.things}\n                            />\n                            <br />\n                            {JSON.stringify(formValue)}\n                        </>\n                    }\n                "]))),
             },
             b_disabled: {
                 react: code(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n                    function Component() {\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            things: [ opts[0] ]\n                        })\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.things}>Things</SpsLabel>\n                            <SpsMultiSelect disabled\n                                options={opts}\n                                formMeta={formMeta.fields.things}\n                                value={formValue.things}\n                            />\n                            <br />\n                            {JSON.stringify(formValue)}\n                        </>\n                    }\n                "], ["\n                    function Component() {\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            things: [ opts[0] ]\n                        })\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.things}>Things</SpsLabel>\n                            <SpsMultiSelect disabled\n                                options={opts}\n                                formMeta={formMeta.fields.things}\n                                value={formValue.things}\n                            />\n                            <br />\n                            {JSON.stringify(formValue)}\n                        </>\n                    }\n                "]))),
@@ -7763,10 +7909,10 @@ var SpsMultiSelectExamples = {
         },
     },
 };
-var templateObject_1$p, templateObject_2$n, templateObject_3$k, templateObject_4$e, templateObject_5$7, templateObject_6$5;
+var templateObject_1$q, templateObject_2$n, templateObject_3$k, templateObject_4$e, templateObject_5$7, templateObject_6$5;
 
-var propsDoc$H = {};
-var propTypes$K = __assign({}, spsGlobalPropTypes);
+var propsDoc$K = {};
+var propTypes$N = __assign({}, spsGlobalPropTypes);
 function SpsPageTitle(props) {
     var children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", 'data-testid', "unsafelyReplaceClassName"]);
     var icon;
@@ -7785,21 +7931,21 @@ function SpsPageTitle(props) {
         React.createElement("div", { className: "sps-page-title__text", "data-testid": testId + "__text" }, otherChildren)));
 }
 Object.assign(SpsPageTitle, {
-    props: propsDoc$H,
-    propTypes: propTypes$K,
+    props: propsDoc$K,
+    propTypes: propTypes$N,
     displayName: 'SpsPageTitle',
 });
 
-var propsDoc$G = {};
-var propTypes$J = __assign({}, spsGlobalPropTypes);
+var propsDoc$J = {};
+var propTypes$M = __assign({}, spsGlobalPropTypes);
 function SpsPageSubtitle(props) {
     var children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-page-title__subtitle', className);
     return (React.createElement("div", __assign({ className: classes, "data-testid": testId }, rest), children));
 }
 Object.assign(SpsPageSubtitle, {
-    props: propsDoc$G,
-    propTypes: propTypes$J,
+    props: propsDoc$J,
+    propTypes: propTypes$M,
     displayName: 'SpsPageSubtitle',
 });
 
@@ -7808,7 +7954,7 @@ var SpsPageTitleExamples = {
         label: 'Basic',
         examples: {
             basic: {
-                jsx: code(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n                    <SpsPageTitle>\n                        Cabela's Purchase Order #123456789012\n                    </SpsPageTitle>\n                "], ["\n                    <SpsPageTitle>\n                        Cabela's Purchase Order #123456789012\n                    </SpsPageTitle>\n                "]))),
+                jsx: code(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n                    <SpsPageTitle>\n                        Cabela's Purchase Order #123456789012\n                    </SpsPageTitle>\n                "], ["\n                    <SpsPageTitle>\n                        Cabela's Purchase Order #123456789012\n                    </SpsPageTitle>\n                "]))),
             },
         },
     },
@@ -7837,9 +7983,9 @@ var SpsPageTitleExamples = {
         },
     },
 };
-var templateObject_1$o, templateObject_2$m, templateObject_3$j, templateObject_4$d;
+var templateObject_1$p, templateObject_2$m, templateObject_3$j, templateObject_4$d;
 
-var propsDoc$F = {
+var propsDoc$I = {
     action: 'SpsActionMethod',
     captionKey: 'string',
     comparisonKey: 'string',
@@ -7858,7 +8004,7 @@ var propsDoc$F = {
     zeroState: 'string',
     autoFixWidth: 'boolean',
 };
-var propTypes$I = __assign(__assign({}, spsGlobalPropTypes), { action: fun(), captionKey: string, comparisonKey: string, disabled: bool, formControl: impl(), formMeta: impl(), notClearable: bool, options: oneOfType([
+var propTypes$L = __assign(__assign({}, spsGlobalPropTypes), { action: fun(), captionKey: string, comparisonKey: string, disabled: bool, formControl: impl(), formMeta: impl(), notClearable: bool, options: oneOfType([
         array,
         instanceOf(Promise),
         fun(),
@@ -7984,18 +8130,18 @@ var SpsSelect = React.forwardRef(function (props, ref) {
         React.createElement(SpsOptionList, { id: wrapperId + "-options", ref: optionsList, attachTo: controlButton, captionKey: captionKey, comparisonKey: comparisonKey, isOpen: state.isOpen, keyDown: state.keyDown, nullOption: state.value && !notClearable ? placeholder : null, options: options, onOptionSelected: updateValue, onPositionFlip: handlePositionFlip, onSelfToggle: handleSelfToggle, searchDebounce: searchDebounce, searchPlaceholder: searchPlaceholder, selectedOption: state.value, specialAction: action, tall: tallOptionList, textKey: textKey, optionRole: "option", valueKey: valueKey, onOptionListChanged: handleOptionListChanged, zeroState: zeroState, ignoreWidthStyles: autoFixWidth })));
 });
 Object.assign(SpsSelect, {
-    props: propsDoc$F,
-    propTypes: propTypes$I,
+    props: propsDoc$I,
+    propTypes: propTypes$L,
     displayName: 'SpsSelect',
 });
 
-var propsDoc$E = {
+var propsDoc$H = {
     page: 'number',
     numPages: 'number',
     onPageChange: '(number) => void',
     disabled: 'boolean',
 };
-var propTypes$H = __assign({ numPages: number, onPageChange: fun(), page: number, disabled: bool }, spsGlobalPropTypes);
+var propTypes$K = __assign({ numPages: number, onPageChange: fun(), page: number, disabled: bool }, spsGlobalPropTypes);
 function SpsPageSelector(props) {
     var _a = props.numPages, numPages = _a === void 0 ? 0 : _a, onPageChange = props.onPageChange, _b = props.page, pageProp = _b === void 0 ? 1 : _b, unsafelyReplaceClassName = props.unsafelyReplaceClassName, className = props.className, testId = props["data-testid"], _c = props.disabled, disabled = _c === void 0 ? false : _c, rest = __rest(props, ["numPages", "onPageChange", "page", "unsafelyReplaceClassName", "className", 'data-testid', "disabled"]);
     var t = React.useContext(I18nContext).t;
@@ -8039,12 +8185,12 @@ function SpsPageSelector(props) {
                     React.createElement("i", { className: "sps-icon sps-icon-chevron-right", "aria-hidden": "true" }))))));
 }
 Object.assign(SpsPageSelector, {
-    props: propsDoc$E,
-    propTypes: propTypes$H,
+    props: propsDoc$H,
+    propTypes: propTypes$K,
     displayName: 'SpsPageSelector',
 });
 
-var propsDoc$D = {
+var propsDoc$G = {
     page: 'number',
     pageSize: 'number',
     pageSizeOptions: 'Array<number>',
@@ -8052,7 +8198,7 @@ var propsDoc$D = {
     onPageChange: '(page: number, pageSize: number, indices: [number, number]) => void',
     disabled: 'boolean',
 };
-var propTypes$G = __assign({ onPageChange: fun()
+var propTypes$J = __assign({ onPageChange: fun()
         .isRequired, page: number, pageSize: number, pageSizeOptions: arrayOf(number), totalResults: number, disabled: bool }, spsGlobalPropTypes);
 function SpsPagination(props) {
     var className = props.className, onPageChange = props.onPageChange, _a = props.page, pageProp = _a === void 0 ? 1 : _a, _b = props.pageSizeOptions, pageSizeOptions = _b === void 0 ? DEFAULT_PAGE_SIZE_OPTIONS : _b, _c = props.pageSize, pageSizeProp = _c === void 0 ? pageSizeOptions[0] : _c, testId = props["data-testid"], totalResults = props.totalResults, unsafelyReplaceClassName = props.unsafelyReplaceClassName, _d = props.disabled, disabled = _d === void 0 ? false : _d, rest = __rest(props, ["className", "onPageChange", "page", "pageSizeOptions", "pageSize", 'data-testid', "totalResults", "unsafelyReplaceClassName", "disabled"]);
@@ -8132,8 +8278,8 @@ function SpsPagination(props) {
         React.createElement(SpsPageSelector, { numPages: state.numPages, page: state.page, onPageChange: handlePageChange, disabled: disabled })));
 }
 Object.assign(SpsPagination, {
-    props: propsDoc$D,
-    propTypes: propTypes$G,
+    props: propsDoc$G,
+    propTypes: propTypes$J,
     displayName: 'SpsPagination',
 });
 
@@ -8143,7 +8289,7 @@ var SpsPaginationExamples = {
         description: 'info about pagination',
         examples: {
             basic: {
-                react: code(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n                    function Component() {\n                        const [page, setPage] = React.useState(2);\n                        const [pageSize, setPageSize] = React.useState(25);\n\n                        function handlePageChange(newPage, newPageSize) {\n                          console.log(\"change\", newPage, newPageSize);\n                          setPage(newPage);\n                          setPageSize(newPageSize);\n                        }\n\n                        return (\n                          <React.Fragment>\n                            <SpsPagination id=\"basic\"\n                              totalResults={123}\n                              page={page}\n                              pageSize={pageSize}\n                              onPageChange={handlePageChange}\n                            />\n                            <span className=\"mr-2\">page: {page}</span>\n                            <span>pageSize: {pageSize}</span>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const [page, setPage] = React.useState(2);\n                        const [pageSize, setPageSize] = React.useState(25);\n\n                        function handlePageChange(newPage, newPageSize) {\n                          console.log(\"change\", newPage, newPageSize);\n                          setPage(newPage);\n                          setPageSize(newPageSize);\n                        }\n\n                        return (\n                          <React.Fragment>\n                            <SpsPagination id=\"basic\"\n                              totalResults={123}\n                              page={page}\n                              pageSize={pageSize}\n                              onPageChange={handlePageChange}\n                            />\n                            <span className=\"mr-2\">page: {page}</span>\n                            <span>pageSize: {pageSize}</span>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+                react: code(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n                    function Component() {\n                        const [page, setPage] = React.useState(2);\n                        const [pageSize, setPageSize] = React.useState(25);\n\n                        function handlePageChange(newPage, newPageSize) {\n                          console.log(\"change\", newPage, newPageSize);\n                          setPage(newPage);\n                          setPageSize(newPageSize);\n                        }\n\n                        return (\n                          <React.Fragment>\n                            <SpsPagination id=\"basic\"\n                              totalResults={123}\n                              page={page}\n                              pageSize={pageSize}\n                              onPageChange={handlePageChange}\n                            />\n                            <span className=\"mr-2\">page: {page}</span>\n                            <span>pageSize: {pageSize}</span>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const [page, setPage] = React.useState(2);\n                        const [pageSize, setPageSize] = React.useState(25);\n\n                        function handlePageChange(newPage, newPageSize) {\n                          console.log(\"change\", newPage, newPageSize);\n                          setPage(newPage);\n                          setPageSize(newPageSize);\n                        }\n\n                        return (\n                          <React.Fragment>\n                            <SpsPagination id=\"basic\"\n                              totalResults={123}\n                              page={page}\n                              pageSize={pageSize}\n                              onPageChange={handlePageChange}\n                            />\n                            <span className=\"mr-2\">page: {page}</span>\n                            <span>pageSize: {pageSize}</span>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
             },
             disabled: {
                 description: 'Disabled state',
@@ -8165,24 +8311,24 @@ var SpsPaginationExamples = {
         },
     },
 };
-var templateObject_1$n, templateObject_2$l, templateObject_3$i, templateObject_4$c;
+var templateObject_1$o, templateObject_2$l, templateObject_3$i, templateObject_4$c;
 
-var propsDoc$C = {
+var propsDoc$F = {
     active: 'boolean',
 };
-var propTypes$F = __assign(__assign({}, spsGlobalPropTypes), { active: bool });
+var propTypes$I = __assign(__assign({}, spsGlobalPropTypes), { active: bool });
 function SpsProductBarTab(props) {
     var children = props.children, active = props.active; props.className; var unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "active", "className", "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-nav__item', 'sps-nav__link', active && 'active');
     return (React.createElement("a", __assign({ className: classes }, rest), children));
 }
 Object.assign(SpsProductBarTab, {
-    props: propsDoc$C,
-    propTypes: propTypes$F,
+    props: propsDoc$F,
+    propTypes: propTypes$I,
     displayName: 'SpsProductBarTab',
 });
 
-var propsDoc$B = {
+var propsDoc$E = {
     activeTab: 'string',
     fullWidth: 'boolean',
     onTabChange: '(newTab: string) => void',
@@ -8192,7 +8338,7 @@ var propsDoc$B = {
     productNameHref: 'string',
     tabs: 'Array<string>',
 };
-var propTypes$E = __assign(__assign({}, spsGlobalPropTypes), { activeTab: string, fullWidth: bool, onTabChange: fun(), onProductNameClick: fun(), productLogoSrc: string, productName: string.isRequired, productNameHref: string, tabs: arrayOf(string) });
+var propTypes$H = __assign(__assign({}, spsGlobalPropTypes), { activeTab: string, fullWidth: bool, onTabChange: fun(), onProductNameClick: fun(), productLogoSrc: string, productName: string.isRequired, productNameHref: string, tabs: arrayOf(string) });
 function SpsProductBar(props) {
     var activeTabInit = props.activeTab, children = props.children, className = props.className, fullWidth = props.fullWidth, onProductNameClick = props.onProductNameClick, onTabChange = props.onTabChange, productLogoSrc = props.productLogoSrc, productName = props.productName, productNameHref = props.productNameHref, _a = props.tabs, tabs = _a === void 0 ? [] : _a, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["activeTab", "children", "className", "fullWidth", "onProductNameClick", "onTabChange", "productLogoSrc", "productName", "productNameHref", "tabs", "unsafelyReplaceClassName"]);
     var rootElement = React.useRef();
@@ -8223,15 +8369,15 @@ function SpsProductBar(props) {
                 React.createElement(PortalContext.Provider, { value: { parentElementRef: rootElement, fixed: true } }, otherChildren)))));
 }
 Object.assign(SpsProductBar, {
-    props: propsDoc$B,
-    propTypes: propTypes$E,
+    props: propsDoc$E,
+    propTypes: propTypes$H,
     displayName: 'SpsProductBar',
 });
 
 var SpsProductBarExamples = {
     basic: {
         label: 'Basic',
-        description: code(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n            <p>Product navigation bar</p>\n        "], ["\n            <p>Product navigation bar</p>\n        "]))),
+        description: code(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n            <p>Product navigation bar</p>\n        "], ["\n            <p>Product navigation bar</p>\n        "]))),
         examples: {
             basic: {
                 react: code(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const navTabs = [\"Foo\", \"Bar\", \"Baz\"];\n                        function handleTabChange(newTab) {\n                            alert(newTab);\n                        }\n\n                        return (\n                            <SpsProductBar productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                tabs={navTabs}\n                                activeTab=\"Bar\"\n                                onTabChange={handleTabChange}\n                                fullWidth\n                                style={{ position: \"relative\", zIndex: \"auto\" }} // display this example in its place instead of at the top\n                            ><SpsButton>do the thing</SpsButton></SpsProductBar>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const navTabs = [\"Foo\", \"Bar\", \"Baz\"];\n                        function handleTabChange(newTab) {\n                            alert(newTab);\n                        }\n\n                        return (\n                            <SpsProductBar productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                tabs={navTabs}\n                                activeTab=\"Bar\"\n                                onTabChange={handleTabChange}\n                                fullWidth\n                                style={{ position: \"relative\", zIndex: \"auto\" }} // display this example in its place instead of at the top\n                            ><SpsButton>do the thing</SpsButton></SpsProductBar>\n                        );\n                    }\n                "]))),
@@ -8263,16 +8409,16 @@ var SpsProductBarExamples = {
         },
     },
 };
-var templateObject_1$m, templateObject_2$k, templateObject_3$h, templateObject_4$b, templateObject_5$6;
+var templateObject_1$n, templateObject_2$k, templateObject_3$h, templateObject_4$b, templateObject_5$6;
 
-var propsDoc$A = {
+var propsDoc$D = {
     percentComplete: 'number',
     title: 'string',
     detail: 'string',
     disabled: 'boolean',
     onClose: '() => void',
 };
-var propTypes$D = __assign(__assign({}, spsGlobalPropTypes), { percentComplete: number, title: string, detail: string, disabled: bool, onClose: fun() });
+var propTypes$G = __assign(__assign({}, spsGlobalPropTypes), { percentComplete: number, title: string, detail: string, disabled: bool, onClose: fun() });
 function SpsProgressBar(props) {
     props.children; var className = props.className, detail = props.detail, disabled = props.disabled, onClose = props.onClose, percentComplete = props.percentComplete, title = props.title; props["data-testid"]; var unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "detail", "disabled", "onClose", "percentComplete", "title", 'data-testid', "unsafelyReplaceClassName"]);
     var t = React.useContext(I18nContext).t;
@@ -8291,8 +8437,8 @@ function SpsProgressBar(props) {
             React.createElement(SpsButton, { kind: ButtonKind.ICON, icon: SpsIcon$1.X, onClick: onClose, title: t('design-system:progressBar.closeButtonTitle') })))));
 }
 Object.assign(SpsProgressBar, {
-    props: propsDoc$A,
-    propTypes: propTypes$D,
+    props: propsDoc$D,
+    propTypes: propTypes$G,
     displayName: 'SpsProgressBar',
 });
 
@@ -8351,7 +8497,7 @@ var SpsProgressBarExamples = {
             standard: {
                 label: 'Building Standard Progress Bars',
                 description: function () { return (React.createElement("p", null, "The Standard Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements.")); },
-                react: code(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n                    function Component() {\n                        function handleClose() {\n                            console.log(\"closed\");\n                        }\n\n                        return (\n                            <SpsCard>\n                                <SpsProgressBar\n                                    title=\"File Name\"\n                                    detail=\"Step 3 of 5: Verifying Headers\"\n                                    percentComplete={0.5}\n                                    onClose={handleClose}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        function handleClose() {\n                            console.log(\"closed\");\n                        }\n\n                        return (\n                            <SpsCard>\n                                <SpsProgressBar\n                                    title=\"File Name\"\n                                    detail=\"Step 3 of 5: Verifying Headers\"\n                                    percentComplete={0.5}\n                                    onClose={handleClose}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n                    function Component() {\n                        function handleClose() {\n                            console.log(\"closed\");\n                        }\n\n                        return (\n                            <SpsCard>\n                                <SpsProgressBar\n                                    title=\"File Name\"\n                                    detail=\"Step 3 of 5: Verifying Headers\"\n                                    percentComplete={0.5}\n                                    onClose={handleClose}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        function handleClose() {\n                            console.log(\"closed\");\n                        }\n\n                        return (\n                            <SpsCard>\n                                <SpsProgressBar\n                                    title=\"File Name\"\n                                    detail=\"Step 3 of 5: Verifying Headers\"\n                                    percentComplete={0.5}\n                                    onClose={handleClose}\n                                />\n                            </SpsCard>\n                        )\n                    }\n                "]))),
             },
             completed: {
                 label: 'Completed State',
@@ -8366,9 +8512,9 @@ var SpsProgressBarExamples = {
         },
     },
 };
-var templateObject_1$l, templateObject_2$j, templateObject_3$g;
+var templateObject_1$m, templateObject_2$j, templateObject_3$g;
 
-var propsDoc$z = {
+var propsDoc$C = {
     checked: 'boolean',
     disabled: 'boolean',
     formMeta: 'SpsFormFieldMeta<any>',
@@ -8378,7 +8524,7 @@ var propsDoc$z = {
     onChange: 'ChangeEventHandler',
     value: 'any',
 };
-var propTypes$C = __assign(__assign({}, spsGlobalPropTypes), { checked: bool, disabled: bool, formControl: impl(), formMeta: impl(), inline: bool, label: string, name: string.isRequired, onChange: fun(), ref: ref(), value: any });
+var propTypes$F = __assign(__assign({}, spsGlobalPropTypes), { checked: bool, disabled: bool, formControl: impl(), formMeta: impl(), inline: bool, label: string, name: string.isRequired, onChange: fun(), ref: ref(), value: any });
 function SpsRadioButton(_a) {
     var checked = _a.checked, className = _a.className, testId = _a["data-testid"], disabled = _a.disabled, formControl = _a.formControl, formMeta = _a.formMeta, id = _a.id, inline = _a.inline, label = _a.label, name = _a.name, onChange = _a.onChange, ref = _a.ref, unsafelyReplaceClassName = _a.unsafelyReplaceClassName, value = _a.value, rest = __rest(_a, ["checked", "className", 'data-testid', "disabled", "formControl", "formMeta", "id", "inline", "label", "name", "onChange", "ref", "unsafelyReplaceClassName", "value"]);
     var meta = formMeta || formControl;
@@ -8400,8 +8546,8 @@ function SpsRadioButton(_a) {
         React.createElement("label", { className: "sps-checkable__label", htmlFor: controlId }, label || '')));
 }
 Object.assign(SpsRadioButton, {
-    props: propsDoc$z,
-    propTypes: propTypes$C,
+    props: propsDoc$C,
+    propTypes: propTypes$F,
     displayName: 'SpsRadioButton',
 });
 
@@ -8411,7 +8557,7 @@ var SpsRadioButtonExamples = {
         description: 'info about radio buttons with labels',
         examples: {
             label: {
-                react: code(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            color: \"blue\"\n                        });\n\n                        return <SpsForm formMeta={formMeta} id=\"labelRadioButton\">\n                            <SpsRadioButton name=\"blue\" value=\"blue\" label=\"Blue\"\n                                formMeta={formMeta.fields.color}\n                                checked={formValue.color === \"blue\"}\n                            ></SpsRadioButton>\n                            <SpsRadioButton name=\"green\" value=\"green\" label=\"Green\"\n                                formMeta={formMeta.fields.color}\n                                checked={formValue.color === \"green\"}\n                            ></SpsRadioButton>\n                        </SpsForm>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            color: \"blue\"\n                        });\n\n                        return <SpsForm formMeta={formMeta} id=\"labelRadioButton\">\n                            <SpsRadioButton name=\"blue\" value=\"blue\" label=\"Blue\"\n                                formMeta={formMeta.fields.color}\n                                checked={formValue.color === \"blue\"}\n                            ></SpsRadioButton>\n                            <SpsRadioButton name=\"green\" value=\"green\" label=\"Green\"\n                                formMeta={formMeta.fields.color}\n                                checked={formValue.color === \"green\"}\n                            ></SpsRadioButton>\n                        </SpsForm>\n                    }\n                "]))),
+                react: code(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            color: \"blue\"\n                        });\n\n                        return <SpsForm formMeta={formMeta} id=\"labelRadioButton\">\n                            <SpsRadioButton name=\"blue\" value=\"blue\" label=\"Blue\"\n                                formMeta={formMeta.fields.color}\n                                checked={formValue.color === \"blue\"}\n                            ></SpsRadioButton>\n                            <SpsRadioButton name=\"green\" value=\"green\" label=\"Green\"\n                                formMeta={formMeta.fields.color}\n                                checked={formValue.color === \"green\"}\n                            ></SpsRadioButton>\n                        </SpsForm>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            color: \"blue\"\n                        });\n\n                        return <SpsForm formMeta={formMeta} id=\"labelRadioButton\">\n                            <SpsRadioButton name=\"blue\" value=\"blue\" label=\"Blue\"\n                                formMeta={formMeta.fields.color}\n                                checked={formValue.color === \"blue\"}\n                            ></SpsRadioButton>\n                            <SpsRadioButton name=\"green\" value=\"green\" label=\"Green\"\n                                formMeta={formMeta.fields.color}\n                                checked={formValue.color === \"green\"}\n                            ></SpsRadioButton>\n                        </SpsForm>\n                    }\n                "]))),
             },
         },
     },
@@ -8434,19 +8580,19 @@ var SpsRadioButtonExamples = {
         },
     },
 };
-var templateObject_1$k, templateObject_2$i, templateObject_3$f;
+var templateObject_1$l, templateObject_2$i, templateObject_3$f;
 
-var propsDoc$y = {
+var propsDoc$B = {
     maxHeight: 'string',
 };
-var propTypes$B = __assign(__assign({}, spsGlobalPropTypes), { maxHeight: string });
+var propTypes$E = __assign(__assign({}, spsGlobalPropTypes), { maxHeight: string });
 function SpsScrollableContainer(props) {
     var children = props.children, maxHeight = props.maxHeight;
     return (React.createElement("div", { className: "sps-scrollable-container", style: { maxHeight: maxHeight } }, children));
 }
 Object.assign(SpsScrollableContainer, {
-    props: propsDoc$y,
-    propTypes: propTypes$B,
+    props: propsDoc$B,
+    propTypes: propTypes$E,
     displayName: 'SpsScrollableContainer',
 });
 
@@ -8456,7 +8602,7 @@ var SpsScrollableContainerExamples = {
         description: 'basic scrollable container',
         examples: {
             text: {
-                jsx: code(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n                    <SpsCard>\n                        <SpsScrollableContainer maxHeight='100px'>\n                            <p>\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris\n                                sit amet molestie metus. Phasellus dignissim interdum arcu. Sed\n                                in nunc id sapien porta mollis eleifend nec mauris. Nulla\n                                molestie pulvinar velit eget fringilla. Pellentesque habitant\n                                morbi tristique senectus et netus et malesuada fames ac turpis\n                                egestas. Nam eu sem ut neque condimentum tempor. Integer\n                                bibendum in velit at consectetur. Nunc ut velit ac magna sodales\n                                tempor. Ut tempor rhoncus mi, eget feugiat nisi finibus at.\n                                Pellentesque habitant morbi tristique senectus et netus et\n                                malesuada fames ac turpis egestas. Vestibulum nunc ipsum,\n                                elementum consectetur urna a, sodales pellentesque nibh. Nullam\n                                in dui dolor. Vivamus sapien enim, tristique accumsan finibus\n                                nec, fringilla eget tellus. Duis sed pulvinar ipsum. Donec\n                                convallis aliquet dui, nec ullamcorper nulla tincidunt ac. Fusce\n                                tempus neque sit amet libero vestibulum maximus. Praesent id dui\n                                sed diam scelerisque pretium id vitae ante. Sed ullamcorper\n                                ligula quis mi vehicula, in interdum purus suscipit.\n                                Pellentesque venenatis velit nunc, quis tincidunt ligula egestas\n                                id. Praesent sollicitudin et mauris et auctor. Nullam diam erat,\n                                tincidunt at odio non, tincidunt laoreet quam. In consequat\n                                pulvinar sapien vel varius. Suspendisse potenti. Aenean pharetra\n                                felis sit amet tempus consequat. Donec eu molestie mauris. Nunc\n                                scelerisque ex id vehicula semper. Nunc eu interdum ante. Etiam\n                                in metus ante. Nulla ac turpis vel sem fermentum mattis. Nam\n                                elit mi, pretium a tristique vitae, vestibulum id tellus. In\n                                vitae nisl lectus. Sed fringilla eget velit quis aliquet.\n                                Vestibulum euismod, leo ut egestas dictum, mi quam euismod\n                                velit, nec iaculis elit mi a orci. Duis volutpat purus lacus. Ut\n                                sit amet semper ipsum. Sed aliquam, quam ac placerat facilisis,\n                                nulla odio vulputate erat, id condimentum sem arcu vel turpis.\n                                Fusce finibus tortor ac viverra semper. Pellentesque convallis\n                                mi sed metus finibus molestie. Duis vehicula dolor consequat\n                                placerat sollicitudin. Phasellus sed sagittis ligula, in\n                                molestie velit. In scelerisque maximus metus, ac convallis nisi\n                                dignissim non.\n                            </p>\n                        </SpsScrollableContainer>\n                    </SpsCard>\n                "], ["\n                    <SpsCard>\n                        <SpsScrollableContainer maxHeight='100px'>\n                            <p>\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris\n                                sit amet molestie metus. Phasellus dignissim interdum arcu. Sed\n                                in nunc id sapien porta mollis eleifend nec mauris. Nulla\n                                molestie pulvinar velit eget fringilla. Pellentesque habitant\n                                morbi tristique senectus et netus et malesuada fames ac turpis\n                                egestas. Nam eu sem ut neque condimentum tempor. Integer\n                                bibendum in velit at consectetur. Nunc ut velit ac magna sodales\n                                tempor. Ut tempor rhoncus mi, eget feugiat nisi finibus at.\n                                Pellentesque habitant morbi tristique senectus et netus et\n                                malesuada fames ac turpis egestas. Vestibulum nunc ipsum,\n                                elementum consectetur urna a, sodales pellentesque nibh. Nullam\n                                in dui dolor. Vivamus sapien enim, tristique accumsan finibus\n                                nec, fringilla eget tellus. Duis sed pulvinar ipsum. Donec\n                                convallis aliquet dui, nec ullamcorper nulla tincidunt ac. Fusce\n                                tempus neque sit amet libero vestibulum maximus. Praesent id dui\n                                sed diam scelerisque pretium id vitae ante. Sed ullamcorper\n                                ligula quis mi vehicula, in interdum purus suscipit.\n                                Pellentesque venenatis velit nunc, quis tincidunt ligula egestas\n                                id. Praesent sollicitudin et mauris et auctor. Nullam diam erat,\n                                tincidunt at odio non, tincidunt laoreet quam. In consequat\n                                pulvinar sapien vel varius. Suspendisse potenti. Aenean pharetra\n                                felis sit amet tempus consequat. Donec eu molestie mauris. Nunc\n                                scelerisque ex id vehicula semper. Nunc eu interdum ante. Etiam\n                                in metus ante. Nulla ac turpis vel sem fermentum mattis. Nam\n                                elit mi, pretium a tristique vitae, vestibulum id tellus. In\n                                vitae nisl lectus. Sed fringilla eget velit quis aliquet.\n                                Vestibulum euismod, leo ut egestas dictum, mi quam euismod\n                                velit, nec iaculis elit mi a orci. Duis volutpat purus lacus. Ut\n                                sit amet semper ipsum. Sed aliquam, quam ac placerat facilisis,\n                                nulla odio vulputate erat, id condimentum sem arcu vel turpis.\n                                Fusce finibus tortor ac viverra semper. Pellentesque convallis\n                                mi sed metus finibus molestie. Duis vehicula dolor consequat\n                                placerat sollicitudin. Phasellus sed sagittis ligula, in\n                                molestie velit. In scelerisque maximus metus, ac convallis nisi\n                                dignissim non.\n                            </p>\n                        </SpsScrollableContainer>\n                    </SpsCard>\n                "]))),
+                jsx: code(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n                    <SpsCard>\n                        <SpsScrollableContainer maxHeight='100px'>\n                            <p>\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris\n                                sit amet molestie metus. Phasellus dignissim interdum arcu. Sed\n                                in nunc id sapien porta mollis eleifend nec mauris. Nulla\n                                molestie pulvinar velit eget fringilla. Pellentesque habitant\n                                morbi tristique senectus et netus et malesuada fames ac turpis\n                                egestas. Nam eu sem ut neque condimentum tempor. Integer\n                                bibendum in velit at consectetur. Nunc ut velit ac magna sodales\n                                tempor. Ut tempor rhoncus mi, eget feugiat nisi finibus at.\n                                Pellentesque habitant morbi tristique senectus et netus et\n                                malesuada fames ac turpis egestas. Vestibulum nunc ipsum,\n                                elementum consectetur urna a, sodales pellentesque nibh. Nullam\n                                in dui dolor. Vivamus sapien enim, tristique accumsan finibus\n                                nec, fringilla eget tellus. Duis sed pulvinar ipsum. Donec\n                                convallis aliquet dui, nec ullamcorper nulla tincidunt ac. Fusce\n                                tempus neque sit amet libero vestibulum maximus. Praesent id dui\n                                sed diam scelerisque pretium id vitae ante. Sed ullamcorper\n                                ligula quis mi vehicula, in interdum purus suscipit.\n                                Pellentesque venenatis velit nunc, quis tincidunt ligula egestas\n                                id. Praesent sollicitudin et mauris et auctor. Nullam diam erat,\n                                tincidunt at odio non, tincidunt laoreet quam. In consequat\n                                pulvinar sapien vel varius. Suspendisse potenti. Aenean pharetra\n                                felis sit amet tempus consequat. Donec eu molestie mauris. Nunc\n                                scelerisque ex id vehicula semper. Nunc eu interdum ante. Etiam\n                                in metus ante. Nulla ac turpis vel sem fermentum mattis. Nam\n                                elit mi, pretium a tristique vitae, vestibulum id tellus. In\n                                vitae nisl lectus. Sed fringilla eget velit quis aliquet.\n                                Vestibulum euismod, leo ut egestas dictum, mi quam euismod\n                                velit, nec iaculis elit mi a orci. Duis volutpat purus lacus. Ut\n                                sit amet semper ipsum. Sed aliquam, quam ac placerat facilisis,\n                                nulla odio vulputate erat, id condimentum sem arcu vel turpis.\n                                Fusce finibus tortor ac viverra semper. Pellentesque convallis\n                                mi sed metus finibus molestie. Duis vehicula dolor consequat\n                                placerat sollicitudin. Phasellus sed sagittis ligula, in\n                                molestie velit. In scelerisque maximus metus, ac convallis nisi\n                                dignissim non.\n                            </p>\n                        </SpsScrollableContainer>\n                    </SpsCard>\n                "], ["\n                    <SpsCard>\n                        <SpsScrollableContainer maxHeight='100px'>\n                            <p>\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris\n                                sit amet molestie metus. Phasellus dignissim interdum arcu. Sed\n                                in nunc id sapien porta mollis eleifend nec mauris. Nulla\n                                molestie pulvinar velit eget fringilla. Pellentesque habitant\n                                morbi tristique senectus et netus et malesuada fames ac turpis\n                                egestas. Nam eu sem ut neque condimentum tempor. Integer\n                                bibendum in velit at consectetur. Nunc ut velit ac magna sodales\n                                tempor. Ut tempor rhoncus mi, eget feugiat nisi finibus at.\n                                Pellentesque habitant morbi tristique senectus et netus et\n                                malesuada fames ac turpis egestas. Vestibulum nunc ipsum,\n                                elementum consectetur urna a, sodales pellentesque nibh. Nullam\n                                in dui dolor. Vivamus sapien enim, tristique accumsan finibus\n                                nec, fringilla eget tellus. Duis sed pulvinar ipsum. Donec\n                                convallis aliquet dui, nec ullamcorper nulla tincidunt ac. Fusce\n                                tempus neque sit amet libero vestibulum maximus. Praesent id dui\n                                sed diam scelerisque pretium id vitae ante. Sed ullamcorper\n                                ligula quis mi vehicula, in interdum purus suscipit.\n                                Pellentesque venenatis velit nunc, quis tincidunt ligula egestas\n                                id. Praesent sollicitudin et mauris et auctor. Nullam diam erat,\n                                tincidunt at odio non, tincidunt laoreet quam. In consequat\n                                pulvinar sapien vel varius. Suspendisse potenti. Aenean pharetra\n                                felis sit amet tempus consequat. Donec eu molestie mauris. Nunc\n                                scelerisque ex id vehicula semper. Nunc eu interdum ante. Etiam\n                                in metus ante. Nulla ac turpis vel sem fermentum mattis. Nam\n                                elit mi, pretium a tristique vitae, vestibulum id tellus. In\n                                vitae nisl lectus. Sed fringilla eget velit quis aliquet.\n                                Vestibulum euismod, leo ut egestas dictum, mi quam euismod\n                                velit, nec iaculis elit mi a orci. Duis volutpat purus lacus. Ut\n                                sit amet semper ipsum. Sed aliquam, quam ac placerat facilisis,\n                                nulla odio vulputate erat, id condimentum sem arcu vel turpis.\n                                Fusce finibus tortor ac viverra semper. Pellentesque convallis\n                                mi sed metus finibus molestie. Duis vehicula dolor consequat\n                                placerat sollicitudin. Phasellus sed sagittis ligula, in\n                                molestie velit. In scelerisque maximus metus, ac convallis nisi\n                                dignissim non.\n                            </p>\n                        </SpsScrollableContainer>\n                    </SpsCard>\n                "]))),
             },
             components: {
                 react: code(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n                    function Component() {\n                        function buildTags() {\n                            let tagNames = [];\n                            for (let i = 0; i < 150; i++) {\n                                tagNames.push('tagName ' + i);\n                            }\n                            return tagNames;\n                        }\n                        return <SpsCard>\n                            <SpsScrollableContainer maxHeight='8.5rem'>\n                                {buildTags().map((name, index) => {\n                                    return (\n                                        <SpsClickableTag key={index} className=\"mt-1 ml-1\">\n                                            {name}\n                                        </SpsClickableTag>\n                                    );\n                                })}\n                            </SpsScrollableContainer>\n                        </SpsCard>\n                    }\n                "], ["\n                    function Component() {\n                        function buildTags() {\n                            let tagNames = [];\n                            for (let i = 0; i < 150; i++) {\n                                tagNames.push('tagName ' + i);\n                            }\n                            return tagNames;\n                        }\n                        return <SpsCard>\n                            <SpsScrollableContainer maxHeight='8.5rem'>\n                                {buildTags().map((name, index) => {\n                                    return (\n                                        <SpsClickableTag key={index} className=\"mt-1 ml-1\">\n                                            {name}\n                                        </SpsClickableTag>\n                                    );\n                                })}\n                            </SpsScrollableContainer>\n                        </SpsCard>\n                    }\n                "]))),
@@ -8464,14 +8610,14 @@ var SpsScrollableContainerExamples = {
         },
     },
 };
-var templateObject_1$j, templateObject_2$h;
+var templateObject_1$k, templateObject_2$h;
 
-var propsDoc$x = {
+var propsDoc$A = {
     resultsCount: 'number',
     totalResults: 'number',
     onClear: '() => void',
 };
-var propTypes$A = __assign(__assign({}, spsGlobalPropTypes), { resultsCount: number, totalResults: number, onClear: fun() });
+var propTypes$D = __assign(__assign({}, spsGlobalPropTypes), { resultsCount: number, totalResults: number, onClear: fun() });
 function SpsSearchResultsBar(props) {
     props.children; var className = props.className, resultsCount = props.resultsCount, totalResults = props.totalResults, onClear = props.onClear, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "resultsCount", "totalResults", "onClear", 'data-testid', "unsafelyReplaceClassName"]);
     var t = React.useContext(I18nContext).t;
@@ -8493,8 +8639,8 @@ function SpsSearchResultsBar(props) {
             React.createElement("button", { type: "button", onClick: onClear }, t('design-system:searchResultsBar.clear')))));
 }
 Object.assign(SpsSearchResultsBar, {
-    props: propsDoc$x,
-    propTypes: propTypes$A,
+    props: propsDoc$A,
+    propTypes: propTypes$D,
     displayName: 'SpsSearchResultsBar',
 });
 
@@ -8504,7 +8650,7 @@ var SpsSearchResultsBarExamples = {
         description: '<p>Info about Basic Search Result Bars</p>',
         examples: {
             noCount: {
-                react: code(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n                function SpsSearchResultsBarBasic() {\n                    function clearHandler() {\n                        console.log(\"change handler called\");\n                    }\n                    return (\n                        <SpsSearchResultsBar onClear={clearHandler}/>\n                    );\n                }\n                "], ["\n                function SpsSearchResultsBarBasic() {\n                    function clearHandler() {\n                        console.log(\"change handler called\");\n                    }\n                    return (\n                        <SpsSearchResultsBar onClear={clearHandler}/>\n                    );\n                }\n                "]))),
+                react: code(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n                function SpsSearchResultsBarBasic() {\n                    function clearHandler() {\n                        console.log(\"change handler called\");\n                    }\n                    return (\n                        <SpsSearchResultsBar onClear={clearHandler}/>\n                    );\n                }\n                "], ["\n                function SpsSearchResultsBarBasic() {\n                    function clearHandler() {\n                        console.log(\"change handler called\");\n                    }\n                    return (\n                        <SpsSearchResultsBar onClear={clearHandler}/>\n                    );\n                }\n                "]))),
             },
         },
     },
@@ -8527,7 +8673,7 @@ var SpsSearchResultsBarExamples = {
         },
     },
 };
-var templateObject_1$i, templateObject_2$g, templateObject_3$e;
+var templateObject_1$j, templateObject_2$g, templateObject_3$e;
 
 var SpsSelectExamples = {
     basic: {
@@ -8536,7 +8682,7 @@ var SpsSelectExamples = {
         examples: {
             a_simple: {
                 description: 'Simple value options',
-                react: code(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect id=\"basic\" options={colors}/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect id=\"basic\" options={colors}/>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect id=\"basic\" options={colors}/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect id=\"basic\" options={colors}/>\n                        )\n                    }\n                "]))),
             },
             b_formHooks: {
                 description: 'Form hooks',
@@ -8599,7 +8745,7 @@ var SpsSelectExamples = {
         },
     },
 };
-var templateObject_1$h, templateObject_2$f, templateObject_3$d, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1;
+var templateObject_1$i, templateObject_2$f, templateObject_3$d, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1;
 
 var SpsSideNavBranch = function (_a) {
     var branch = _a.branch, setActiveBranch = _a.setActiveBranch, activeBranch = _a.activeBranch;
@@ -8745,7 +8891,7 @@ var SpsSideNavExamples = {
         description: 'Use Filters when the Side Navigation benefits from filtering, usually when it contains a long list of navigation items.',
         examples: {
             simple: {
-                react: code(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n                    function DemoComponent() {\n                      function onChange(selection) {\n                        console.log(selection);\n                      }\n\n                      const items = [\n                          {\n                            sectionTitle: \"\",\n                            navItems: [\n                              {\n                                name: \"A Multiple Line Navigation Item That Has to Wrap Because it\u2019s so Long\",\n                              },\n                              {\n                                name: \"Navigation Item 2\",\n                              },\n                              {\n                                name: \"Navigation Item 3\",\n                              },\n                              {\n                                name: \"Navigation Item 4\",\n                              },\n                              {\n                                name: \"Navigation Item 5\",\n                              },\n                              {\n                                name: \"Navigation Item 6\",\n                              },\n                              {\n                                name: \"Navigation Item 7\",\n                              },\n                              {\n                                name: \"Navigation Item 8\",\n                              },\n                              {\n                                name: \"Navigation Item 9\",\n                              },\n                              {\n                                name: \"Navigation Item 10\",\n                              },\n                              {\n                                name: \"Navigation Item 11\",\n                              },\n                              {\n                                name: \"Navigation Item 12\",\n                              },\n                              {\n                                name: \"Navigation Item 13\",\n                              },\n                            ],\n                          }\n                      ];\n\n                      return (\n                        <div className=\"sfg-row\">\n                          <div className=\"sfg-col-4\">\n                            <SpsSideNav\n                                title=\"Title\"\n                                titleIcon={SpsIcon.STATUS_OK}\n                                navOptions={items}\n                                activeNavItem=\"Navigation Item 2\"\n                                onNavChange={onChange}\n                                filterable={true}\n                                filterInputPlaceholder=\"Filter\"\n                            />\n                          </div>\n                        </div>\n                      );\n                  }\n                "], ["\n                    function DemoComponent() {\n                      function onChange(selection) {\n                        console.log(selection);\n                      }\n\n                      const items = [\n                          {\n                            sectionTitle: \"\",\n                            navItems: [\n                              {\n                                name: \"A Multiple Line Navigation Item That Has to Wrap Because it\u2019s so Long\",\n                              },\n                              {\n                                name: \"Navigation Item 2\",\n                              },\n                              {\n                                name: \"Navigation Item 3\",\n                              },\n                              {\n                                name: \"Navigation Item 4\",\n                              },\n                              {\n                                name: \"Navigation Item 5\",\n                              },\n                              {\n                                name: \"Navigation Item 6\",\n                              },\n                              {\n                                name: \"Navigation Item 7\",\n                              },\n                              {\n                                name: \"Navigation Item 8\",\n                              },\n                              {\n                                name: \"Navigation Item 9\",\n                              },\n                              {\n                                name: \"Navigation Item 10\",\n                              },\n                              {\n                                name: \"Navigation Item 11\",\n                              },\n                              {\n                                name: \"Navigation Item 12\",\n                              },\n                              {\n                                name: \"Navigation Item 13\",\n                              },\n                            ],\n                          }\n                      ];\n\n                      return (\n                        <div className=\"sfg-row\">\n                          <div className=\"sfg-col-4\">\n                            <SpsSideNav\n                                title=\"Title\"\n                                titleIcon={SpsIcon.STATUS_OK}\n                                navOptions={items}\n                                activeNavItem=\"Navigation Item 2\"\n                                onNavChange={onChange}\n                                filterable={true}\n                                filterInputPlaceholder=\"Filter\"\n                            />\n                          </div>\n                        </div>\n                      );\n                  }\n                "]))),
+                react: code(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n                    function DemoComponent() {\n                      function onChange(selection) {\n                        console.log(selection);\n                      }\n\n                      const items = [\n                          {\n                            sectionTitle: \"\",\n                            navItems: [\n                              {\n                                name: \"A Multiple Line Navigation Item That Has to Wrap Because it\u2019s so Long\",\n                              },\n                              {\n                                name: \"Navigation Item 2\",\n                              },\n                              {\n                                name: \"Navigation Item 3\",\n                              },\n                              {\n                                name: \"Navigation Item 4\",\n                              },\n                              {\n                                name: \"Navigation Item 5\",\n                              },\n                              {\n                                name: \"Navigation Item 6\",\n                              },\n                              {\n                                name: \"Navigation Item 7\",\n                              },\n                              {\n                                name: \"Navigation Item 8\",\n                              },\n                              {\n                                name: \"Navigation Item 9\",\n                              },\n                              {\n                                name: \"Navigation Item 10\",\n                              },\n                              {\n                                name: \"Navigation Item 11\",\n                              },\n                              {\n                                name: \"Navigation Item 12\",\n                              },\n                              {\n                                name: \"Navigation Item 13\",\n                              },\n                            ],\n                          }\n                      ];\n\n                      return (\n                        <div className=\"sfg-row\">\n                          <div className=\"sfg-col-4\">\n                            <SpsSideNav\n                                title=\"Title\"\n                                titleIcon={SpsIcon.STATUS_OK}\n                                navOptions={items}\n                                activeNavItem=\"Navigation Item 2\"\n                                onNavChange={onChange}\n                                filterable={true}\n                                filterInputPlaceholder=\"Filter\"\n                            />\n                          </div>\n                        </div>\n                      );\n                  }\n                "], ["\n                    function DemoComponent() {\n                      function onChange(selection) {\n                        console.log(selection);\n                      }\n\n                      const items = [\n                          {\n                            sectionTitle: \"\",\n                            navItems: [\n                              {\n                                name: \"A Multiple Line Navigation Item That Has to Wrap Because it\u2019s so Long\",\n                              },\n                              {\n                                name: \"Navigation Item 2\",\n                              },\n                              {\n                                name: \"Navigation Item 3\",\n                              },\n                              {\n                                name: \"Navigation Item 4\",\n                              },\n                              {\n                                name: \"Navigation Item 5\",\n                              },\n                              {\n                                name: \"Navigation Item 6\",\n                              },\n                              {\n                                name: \"Navigation Item 7\",\n                              },\n                              {\n                                name: \"Navigation Item 8\",\n                              },\n                              {\n                                name: \"Navigation Item 9\",\n                              },\n                              {\n                                name: \"Navigation Item 10\",\n                              },\n                              {\n                                name: \"Navigation Item 11\",\n                              },\n                              {\n                                name: \"Navigation Item 12\",\n                              },\n                              {\n                                name: \"Navigation Item 13\",\n                              },\n                            ],\n                          }\n                      ];\n\n                      return (\n                        <div className=\"sfg-row\">\n                          <div className=\"sfg-col-4\">\n                            <SpsSideNav\n                                title=\"Title\"\n                                titleIcon={SpsIcon.STATUS_OK}\n                                navOptions={items}\n                                activeNavItem=\"Navigation Item 2\"\n                                onNavChange={onChange}\n                                filterable={true}\n                                filterInputPlaceholder=\"Filter\"\n                            />\n                          </div>\n                        </div>\n                      );\n                  }\n                "]))),
             },
         },
     },
@@ -8792,9 +8938,9 @@ var SpsSideNavExamples = {
         },
     },
 };
-var templateObject_1$g, templateObject_2$e, templateObject_3$c, templateObject_4$9, templateObject_5$4;
+var templateObject_1$h, templateObject_2$e, templateObject_3$c, templateObject_4$9, templateObject_5$4;
 
-var propsDoc$w = {
+var propsDoc$z = {
     sortKey: 'string',
     sortDisabled: 'boolean',
     sort: 'SortedColumn[]',
@@ -8802,7 +8948,7 @@ var propsDoc$w = {
     widthPx: 'number',
     widthRem: 'number',
 };
-var propTypes$z = __assign({ sortKey: string, sortDisabled: bool, sort: arrayOf(impl()), onSortChange: fun(), widthPx: number, widthRem: number }, spsGlobalPropTypes);
+var propTypes$C = __assign({ sortKey: string, sortDisabled: bool, sort: arrayOf(impl()), onSortChange: fun(), widthPx: number, widthRem: number }, spsGlobalPropTypes);
 function SpsSortingHeaderCell(_a) {
     var className = _a.className, testId = _a["data-testid"], unsafelyReplaceClassName = _a.unsafelyReplaceClassName, sortKey = _a.sortKey, sort = _a.sort, sortDisabled = _a.sortDisabled, onSortChange = _a.onSortChange, onClick = _a.onClick, children = _a.children, widthPx = _a.widthPx, widthRem = _a.widthRem, style = _a.style, rest = __rest(_a, ["className", 'data-testid', "unsafelyReplaceClassName", "sortKey", "sort", "sortDisabled", "onSortChange", "onClick", "children", "widthPx", "widthRem", "style"]);
     var sortDirection = React.useMemo(function () {
@@ -8832,16 +8978,16 @@ function SpsSortingHeaderCell(_a) {
         }, "data-testid": testId, style: inlineStyles }, rest), children));
 }
 Object.assign(SpsSortingHeaderCell, {
-    props: propsDoc$w,
-    propTypes: propTypes$z,
+    props: propsDoc$z,
+    propTypes: propTypes$C,
     displayName: 'SpsSortingHeaderCell',
 });
 
-var propsDoc$v = {
+var propsDoc$y = {
     sort: 'SortedColumn[]',
     onSortChange: 'SortChangeHandler',
 };
-var propTypes$y = __assign(__assign({}, spsGlobalPropTypes), { sort: arrayOf(impl()), onSortChange: fun() });
+var propTypes$B = __assign(__assign({}, spsGlobalPropTypes), { sort: arrayOf(impl()), onSortChange: fun() });
 function SpsSortingHeader(_a) {
     var className = _a.className; _a["data-testid"]; var unsafelyReplaceClassName = _a.unsafelyReplaceClassName, sort = _a.sort, onSortChange = _a.onSortChange, children = _a.children, rest = __rest(_a, ["className", 'data-testid', "unsafelyReplaceClassName", "sort", "onSortChange", "children"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-sorting-header', className);
@@ -8857,17 +9003,17 @@ function SpsSortingHeader(_a) {
     })));
 }
 Object.assign(SpsSortingHeader, {
-    props: propsDoc$v,
-    propTypes: propTypes$y,
+    props: propsDoc$y,
+    propTypes: propTypes$B,
     displayName: 'SpsSortingHeader',
 });
 
-var propsDoc$u = {
+var propsDoc$x = {
     alt: 'string',
     size: 'SpinnerSize',
     title: 'string',
 };
-var propTypes$x = __assign(__assign({}, spsGlobalPropTypes), { alt: string, size: enumValue(SpinnerSize), title: string });
+var propTypes$A = __assign(__assign({}, spsGlobalPropTypes), { alt: string, size: enumValue(SpinnerSize), title: string });
 function SpsSpinner(props) {
     var alt = props.alt, className = props.className, _a = props.size, size = _a === void 0 ? SpinnerSize.MEDIUM : _a, testId = props["data-testid"], title = props.title, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["alt", "className", "size", 'data-testid', "title", "unsafelyReplaceClassName"]);
     var t = React.useContext(I18nContext).t;
@@ -8876,8 +9022,8 @@ function SpsSpinner(props) {
     return (React.createElement("i", __assign({ className: spinnerClasses, "data-testid": testId, title: altText }, rest)));
 }
 Object.assign(SpsSpinner, {
-    props: propsDoc$u,
-    propTypes: propTypes$x,
+    props: propsDoc$x,
+    propTypes: propTypes$A,
     displayName: 'SpsSpinner',
 });
 
@@ -8885,7 +9031,7 @@ var SpsSpinnerExamples = {
     basic: {
         examples: {
             small: {
-                jsx: code(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n                    <React.Fragment>\n                        <SpsSpinner size=\"small\"/>\n                        <SpsSpinner size={SpinnerSize.SMALL}/>\n                    </React.Fragment>\n                "], ["\n                    <React.Fragment>\n                        <SpsSpinner size=\"small\"/>\n                        <SpsSpinner size={SpinnerSize.SMALL}/>\n                    </React.Fragment>\n                "]))),
+                jsx: code(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n                    <React.Fragment>\n                        <SpsSpinner size=\"small\"/>\n                        <SpsSpinner size={SpinnerSize.SMALL}/>\n                    </React.Fragment>\n                "], ["\n                    <React.Fragment>\n                        <SpsSpinner size=\"small\"/>\n                        <SpsSpinner size={SpinnerSize.SMALL}/>\n                    </React.Fragment>\n                "]))),
             },
             medium: {
                 jsx: code(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n                    <React.Fragment>\n                        <SpsSpinner />\n                        <SpsSpinner size=\"medium\" title=\"Please wait\u2026\"/>\n                        <SpsSpinner size={SpinnerSize.MEDIUM}/>\n                    </React.Fragment>\n                "], ["\n                    <React.Fragment>\n                        <SpsSpinner />\n                        <SpsSpinner size=\"medium\" title=\"Please wait\u2026\"/>\n                        <SpsSpinner size={SpinnerSize.MEDIUM}/>\n                    </React.Fragment>\n                "]))),
@@ -8896,9 +9042,9 @@ var SpsSpinnerExamples = {
         },
     },
 };
-var templateObject_1$f, templateObject_2$d, templateObject_3$b;
+var templateObject_1$g, templateObject_2$d, templateObject_3$b;
 
-var propsDoc$t = {
+var propsDoc$w = {
     disabled: 'boolean',
     href: 'string',
     label: 'string',
@@ -8906,7 +9052,7 @@ var propsDoc$t = {
     kind: 'StdButtonKind',
     options: 'Array<SpsActionMethod | [SpsActionDescriptor, () => void]>',
 };
-var propTypes$w = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, href: string, label: string, icon: enumValue(SpsIcon$1), kind: enumValue(StdButtonKind), 
+var propTypes$z = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, href: string, label: string, icon: enumValue(SpsIcon$1), kind: enumValue(StdButtonKind), 
     // eslint thinks there is a space between the name and open paren below for some reason
     // eslint-disable-next-line no-spaced-func
     options: arrayOf(oneOfType([func, any])) });
@@ -8925,15 +9071,15 @@ function SpsSplitButton(props) {
         React.createElement(SpsDropdown, { kind: kind, options: options, disabled: disabled, onOpen: setOpen, onClose: setClose })));
 }
 Object.assign(SpsSplitButton, {
-    props: propsDoc$t,
-    propTypes: propTypes$w,
+    props: propsDoc$w,
+    propTypes: propTypes$z,
     displayName: 'SpsSplitButton',
 });
 
 var SpsSplitButtonExamples = {
     kinds: {
         label: 'Regular Split Buttons',
-        description: code(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["<p>info about split buttons</p>"], ["<p>info about split buttons</p>"]))),
+        description: code(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["<p>info about split buttons</p>"], ["<p>info about split buttons</p>"]))),
         examples: {
             basic: {
                 description: code(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["<p>Basic</p>"], ["<p>Basic</p>"]))),
@@ -8962,12 +9108,12 @@ var SpsSplitButtonExamples = {
         },
     },
 };
-var templateObject_1$e, templateObject_2$c, templateObject_3$a, templateObject_4$8, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$2, templateObject_9$1;
+var templateObject_1$f, templateObject_2$c, templateObject_3$a, templateObject_4$8, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$2, templateObject_9$1;
 
-var propsDoc$s = {
+var propsDoc$v = {
     channelId: { type: 'string', required: true },
 };
-var propTypes$v = __assign(__assign({}, spsGlobalPropTypes), { channelId: string.isRequired });
+var propTypes$y = __assign(__assign({}, spsGlobalPropTypes), { channelId: string.isRequired });
 function SpsSlackLink(props) {
     var channelId = props.channelId, className = props.className, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["channelId", "className", "unsafelyReplaceClassName"]);
     var t = React.useContext(I18nContext).t;
@@ -8977,8 +9123,8 @@ function SpsSlackLink(props) {
         React.createElement("span", null, t('design-system:slackLink.label'))));
 }
 Object.assign(SpsSlackLink, {
-    props: propsDoc$s,
-    propTypes: propTypes$v,
+    props: propsDoc$v,
+    propTypes: propTypes$y,
     displayName: 'SpsSlackLink',
 });
 
@@ -8986,32 +9132,32 @@ var SpsSlackLinkExamples = {
     basic: {
         examples: {
             basic: {
-                react: code(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n                    function DemoComponent() {\n                        return (\n                            <SpsProductBar productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                tabs={[\"Foo\", \"Bar\", \"Baz\"]}\n                                activeTab=\"Bar\"\n                                fullWidth\n                                style={{ position: \"relative\" }} // display this example in its place instead of at the top\n                            ><SpsSlackLink channelId=\"CELEGDK4Y\" /></SpsProductBar>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        return (\n                            <SpsProductBar productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                tabs={[\"Foo\", \"Bar\", \"Baz\"]}\n                                activeTab=\"Bar\"\n                                fullWidth\n                                style={{ position: \"relative\" }} // display this example in its place instead of at the top\n                            ><SpsSlackLink channelId=\"CELEGDK4Y\" /></SpsProductBar>\n                        );\n                    }\n                "]))),
+                react: code(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n                    function DemoComponent() {\n                        return (\n                            <SpsProductBar productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                tabs={[\"Foo\", \"Bar\", \"Baz\"]}\n                                activeTab=\"Bar\"\n                                fullWidth\n                                style={{ position: \"relative\" }} // display this example in its place instead of at the top\n                            ><SpsSlackLink channelId=\"CELEGDK4Y\" /></SpsProductBar>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        return (\n                            <SpsProductBar productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                tabs={[\"Foo\", \"Bar\", \"Baz\"]}\n                                activeTab=\"Bar\"\n                                fullWidth\n                                style={{ position: \"relative\" }} // display this example in its place instead of at the top\n                            ><SpsSlackLink channelId=\"CELEGDK4Y\" /></SpsProductBar>\n                        );\n                    }\n                "]))),
             },
         },
     },
 };
-var templateObject_1$d;
+var templateObject_1$e;
 
-var propsDoc$r = {};
-var propTypes$u = __assign({}, spsGlobalPropTypes);
+var propsDoc$u = {};
+var propTypes$x = __assign({}, spsGlobalPropTypes);
 function SpsSummaryListExpansion(props) {
     var children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-content-row__expansion', className);
     return (React.createElement("div", __assign({ className: classes }, rest, { "data-testid": testId + "__expansion" }), children));
 }
 Object.assign(SpsSummaryListExpansion, {
-    props: propsDoc$r,
-    propTypes: propTypes$u,
+    props: propsDoc$u,
+    propTypes: propTypes$x,
     displayName: 'SpsSummaryListExpansion',
 });
 
-var propsDoc$q = {
+var propsDoc$t = {
     expanded: 'boolean',
     selected: 'boolean',
     onToggle: '(isExpanded: boolean) => void',
 };
-var propTypes$t = __assign(__assign({}, spsGlobalPropTypes), { expanded: bool, selected: bool, onToggle: fun() });
+var propTypes$w = __assign(__assign({}, spsGlobalPropTypes), { expanded: bool, selected: bool, onToggle: fun() });
 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({
@@ -9055,26 +9201,26 @@ function SpsSummaryListRow(props) {
         expansion));
 }
 Object.assign(SpsSummaryListRow, {
-    props: propsDoc$q,
-    propTypes: propTypes$t,
+    props: propsDoc$t,
+    propTypes: propTypes$w,
     displayName: 'SpsSummaryListRow',
 });
 
-var propsDoc$p = {
+var propsDoc$s = {
     borderless: 'boolean',
     lean: 'boolean',
     leaner: 'boolean',
     width: 'string',
 };
-var propTypes$s = __assign(__assign({}, spsGlobalPropTypes), { borderless: bool, lean: bool, leaner: bool, width: string });
+var propTypes$v = __assign(__assign({}, spsGlobalPropTypes), { borderless: bool, lean: bool, leaner: bool, width: string });
 function SpsSummaryListColumn(props) {
     var className = props.className, children = props.children, borderless = props.borderless, lean = props.lean, leaner = props.leaner, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, width = props.width, rest = __rest(props, ["className", "children", "borderless", "lean", "leaner", 'data-testid', "unsafelyReplaceClassName", "width"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-content-row__col', lean && 'sps-content-row__col--lean', leaner && 'sps-content-row__col--leaner', borderless && 'sps-content-row__col--borderless', className);
     return (React.createElement("div", __assign({ className: classes, style: { width: width } }, rest, { "data-testid": testId + "__col" }), children));
 }
 Object.assign(SpsSummaryListColumn, {
-    props: propsDoc$p,
-    propTypes: propTypes$s,
+    props: propsDoc$s,
+    propTypes: propTypes$v,
     displayName: 'SpsSummaryListColumn',
 });
 
@@ -9083,7 +9229,7 @@ var SpsSummaryListExamples = {
         label: 'Basic Usage',
         examples: {
             basic: {
-                jsx: code(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n                    <>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey={\"Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey={\"Long Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey={\"Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Long Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                    </>"], ["\n                    <>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey={\"Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey={\"Long Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey={\"Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Long Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                    </>"]))),
+                jsx: code(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n                    <>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey={\"Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey={\"Long Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey={\"Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Long Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                    </>"], ["\n                    <>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey={\"Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey={\"Long Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey={\"Title\"}>\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                        <SpsSummaryListRow>\n                            <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                <SpsI icon={SpsIcon.STAR} size={SpsIconSize.MEDIUM} className=\"d-block mb-2 yellow300\" />\n                                <SpsI icon={SpsIcon.FLAG} size={SpsIconSize.MEDIUM} className=\"d-block yellow300\" />\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn>\n                                <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                <div className=\"d-inline-block align-middle\">\n                                    <div className=\"fs-18\">\n                                        <a href=\"#\">Heading</a>\n                                    </div>\n                                    <div className=\"fs-14\">Sub Heading</div>\n                                </div>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"13.5rem\">\n                                <SpsKeyValueList inline>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Long Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                    <SpsKeyValueListItem itemKey=\"Title\">\n                                        Sub copy goes here\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"9rem\">\n                                <SpsKeyValueList>\n                                    <SpsKeyValueListItem itemKey=\"Buying From\">\n                                        75 Companies\n                                        <div className=\"font-weight-light\">38 of 75 Operational</div>\n                                    </SpsKeyValueListItem>\n                                </SpsKeyValueList>\n                            </SpsSummaryListColumn>\n                            <SpsSummaryListColumn width=\"3.6rem\" leaner>\n                                <SpsDropdown\n                                    label=\"\"\n                                    icon=\"ellipses\"\n                                    options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], [{ label: \"Option B\" }, () => console.log(\"Option B\")]]}\n                                />\n                            </SpsSummaryListColumn>\n                        </SpsSummaryListRow>\n                    </>"]))),
             },
         },
     },
@@ -9115,7 +9261,7 @@ var SpsSummaryListExamples = {
         },
     },
 };
-var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$7, templateObject_5$2, templateObject_6$2, templateObject_7$2;
+var templateObject_1$d, templateObject_2$b, templateObject_3$9, templateObject_4$7, templateObject_5$2, templateObject_6$2, templateObject_7$2;
 
 var props = {
     tasks: 'ReactSpsTask[]',
@@ -9127,7 +9273,7 @@ var props = {
     onClearCompleted: '() => void',
     suppressTooltips: 'boolean',
 };
-var propTypes$r = __assign(__assign({}, spsGlobalPropTypes), { tasks: arrayOf(any), taskQueuePosition: enumValue(Position), notificationText: string, tooltipConfig: shape({
+var propTypes$u = __assign(__assign({}, spsGlobalPropTypes), { tasks: arrayOf(any), taskQueuePosition: enumValue(Position), notificationText: string, tooltipConfig: shape({
         position: enumValue(Position),
         kind: enumValue(TooltipKind),
     }), onClose: fun(), onOpen: fun(), onClearCompleted: fun(), suppressTooltips: bool });
@@ -9281,7 +9427,7 @@ function SpsTaskQueue(_a) {
 }
 Object.assign(SpsTaskQueue, {
     props: props,
-    propTypes: propTypes$r,
+    propTypes: propTypes$u,
     displayName: 'SpsTaskQueue',
 });
 
@@ -9291,7 +9437,7 @@ var SpsTaskQueueExamples = {
         description: '<p>Info about Task Queue</p>',
         examples: {
             inProgress: {
-                react: code(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n                function SpsTaskQueueInProgress() {\n                    const [tasks, setTasks] = React.useState([\n                        {\n                            status: SpsTaskStatus.IN_PROGRESS,\n                            unread: false,\n                            heading: \"Downloading 245 transactions\",\n                            subheading: \"processing\u2026\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.X,\n                                    onClick: task => {\n                                        console.log(\"cancel\", task);\n                                    }\n                                }\n                            ]\n                        },\n                        {\n                            status: SpsTaskStatus.COMPLETED,\n                            unread: false,\n                            heading: \"Document Upload - 02/21/2021\",\n                            subheading: \"Lamps Plus | VY1X_Williams Sonoma Iventory Upload Spreadsheet (846).xls\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.X,\n                                    onClick: task => {\n                                        console.log(\"remove\", task);\n                                    }\n                                }\n                            ]\n                        },\n                        {\n                            status: SpsTaskStatus.COMPLETED,\n                            unread: true,\n                            heading: \"Document Download - 02/21/2019\",\n                            subheading: \"245 transactions | Expires in 2 days\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.SEARCH,\n                                    onClick: task => {\n                                        console.log(\"view\", task);\n                                    }\n                                },\n                                {\n                                    icon: SpsIcon.DOWNLOAD_CLOUD,\n                                    onClick: task => {\n                                        console.log(\"download\", task);\n                                    }\n                                }\n                            ]\n                        },\n                        {\n                            status: SpsTaskStatus.ERRORED,\n                            unread: true,\n                            heading: \"Data XREF Test.xls\",\n                            subheading: \"Failed | Reason it failed\u2026\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.REFRESH,\n                                    onClick: task => {\n                                        console.log(\"retry\", task);\n                                    }\n                                }\n                            ]\n                        }\n                    ]);\n\n                    function handleOpen() {\n                        console.log(\"opened\");\n                    }\n\n                    function handleClose() {\n                        console.log(\"closed (we mark all tasks as read)\");\n                        setTasks(currentTasks => currentTasks.map(task => ({ ...task, unread: false })));\n                    }\n\n                    function handleClearCompleted() {\n                        setTasks(currentTasks =>\n                            currentTasks.filter(task => task.status === SpsTaskStatus.IN_PROGRESS)\n                        );\n                    }\n\n                    return (\n                        <SpsTaskQueue\n                            tasks={tasks}\n                            onOpen={handleOpen}\n                            onClose={handleClose}\n                            onClearCompleted={handleClearCompleted}\n                        />\n                    );\n                }\n                "], ["\n                function SpsTaskQueueInProgress() {\n                    const [tasks, setTasks] = React.useState([\n                        {\n                            status: SpsTaskStatus.IN_PROGRESS,\n                            unread: false,\n                            heading: \"Downloading 245 transactions\",\n                            subheading: \"processing\u2026\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.X,\n                                    onClick: task => {\n                                        console.log(\"cancel\", task);\n                                    }\n                                }\n                            ]\n                        },\n                        {\n                            status: SpsTaskStatus.COMPLETED,\n                            unread: false,\n                            heading: \"Document Upload - 02/21/2021\",\n                            subheading: \"Lamps Plus | VY1X_Williams Sonoma Iventory Upload Spreadsheet (846).xls\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.X,\n                                    onClick: task => {\n                                        console.log(\"remove\", task);\n                                    }\n                                }\n                            ]\n                        },\n                        {\n                            status: SpsTaskStatus.COMPLETED,\n                            unread: true,\n                            heading: \"Document Download - 02/21/2019\",\n                            subheading: \"245 transactions | Expires in 2 days\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.SEARCH,\n                                    onClick: task => {\n                                        console.log(\"view\", task);\n                                    }\n                                },\n                                {\n                                    icon: SpsIcon.DOWNLOAD_CLOUD,\n                                    onClick: task => {\n                                        console.log(\"download\", task);\n                                    }\n                                }\n                            ]\n                        },\n                        {\n                            status: SpsTaskStatus.ERRORED,\n                            unread: true,\n                            heading: \"Data XREF Test.xls\",\n                            subheading: \"Failed | Reason it failed\u2026\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.REFRESH,\n                                    onClick: task => {\n                                        console.log(\"retry\", task);\n                                    }\n                                }\n                            ]\n                        }\n                    ]);\n\n                    function handleOpen() {\n                        console.log(\"opened\");\n                    }\n\n                    function handleClose() {\n                        console.log(\"closed (we mark all tasks as read)\");\n                        setTasks(currentTasks => currentTasks.map(task => ({ ...task, unread: false })));\n                    }\n\n                    function handleClearCompleted() {\n                        setTasks(currentTasks =>\n                            currentTasks.filter(task => task.status === SpsTaskStatus.IN_PROGRESS)\n                        );\n                    }\n\n                    return (\n                        <SpsTaskQueue\n                            tasks={tasks}\n                            onOpen={handleOpen}\n                            onClose={handleClose}\n                            onClearCompleted={handleClearCompleted}\n                        />\n                    );\n                }\n                "]))),
+                react: code(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n                function SpsTaskQueueInProgress() {\n                    const [tasks, setTasks] = React.useState([\n                        {\n                            status: SpsTaskStatus.IN_PROGRESS,\n                            unread: false,\n                            heading: \"Downloading 245 transactions\",\n                            subheading: \"processing\u2026\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.X,\n                                    onClick: task => {\n                                        console.log(\"cancel\", task);\n                                    }\n                                }\n                            ]\n                        },\n                        {\n                            status: SpsTaskStatus.COMPLETED,\n                            unread: false,\n                            heading: \"Document Upload - 02/21/2021\",\n                            subheading: \"Lamps Plus | VY1X_Williams Sonoma Iventory Upload Spreadsheet (846).xls\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.X,\n                                    onClick: task => {\n                                        console.log(\"remove\", task);\n                                    }\n                                }\n                            ]\n                        },\n                        {\n                            status: SpsTaskStatus.COMPLETED,\n                            unread: true,\n                            heading: \"Document Download - 02/21/2019\",\n                            subheading: \"245 transactions | Expires in 2 days\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.SEARCH,\n                                    onClick: task => {\n                                        console.log(\"view\", task);\n                                    }\n                                },\n                                {\n                                    icon: SpsIcon.DOWNLOAD_CLOUD,\n                                    onClick: task => {\n                                        console.log(\"download\", task);\n                                    }\n                                }\n                            ]\n                        },\n                        {\n                            status: SpsTaskStatus.ERRORED,\n                            unread: true,\n                            heading: \"Data XREF Test.xls\",\n                            subheading: \"Failed | Reason it failed\u2026\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.REFRESH,\n                                    onClick: task => {\n                                        console.log(\"retry\", task);\n                                    }\n                                }\n                            ]\n                        }\n                    ]);\n\n                    function handleOpen() {\n                        console.log(\"opened\");\n                    }\n\n                    function handleClose() {\n                        console.log(\"closed (we mark all tasks as read)\");\n                        setTasks(currentTasks => currentTasks.map(task => ({ ...task, unread: false })));\n                    }\n\n                    function handleClearCompleted() {\n                        setTasks(currentTasks =>\n                            currentTasks.filter(task => task.status === SpsTaskStatus.IN_PROGRESS)\n                        );\n                    }\n\n                    return (\n                        <SpsTaskQueue\n                            tasks={tasks}\n                            onOpen={handleOpen}\n                            onClose={handleClose}\n                            onClearCompleted={handleClearCompleted}\n                        />\n                    );\n                }\n                "], ["\n                function SpsTaskQueueInProgress() {\n                    const [tasks, setTasks] = React.useState([\n                        {\n                            status: SpsTaskStatus.IN_PROGRESS,\n                            unread: false,\n                            heading: \"Downloading 245 transactions\",\n                            subheading: \"processing\u2026\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.X,\n                                    onClick: task => {\n                                        console.log(\"cancel\", task);\n                                    }\n                                }\n                            ]\n                        },\n                        {\n                            status: SpsTaskStatus.COMPLETED,\n                            unread: false,\n                            heading: \"Document Upload - 02/21/2021\",\n                            subheading: \"Lamps Plus | VY1X_Williams Sonoma Iventory Upload Spreadsheet (846).xls\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.X,\n                                    onClick: task => {\n                                        console.log(\"remove\", task);\n                                    }\n                                }\n                            ]\n                        },\n                        {\n                            status: SpsTaskStatus.COMPLETED,\n                            unread: true,\n                            heading: \"Document Download - 02/21/2019\",\n                            subheading: \"245 transactions | Expires in 2 days\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.SEARCH,\n                                    onClick: task => {\n                                        console.log(\"view\", task);\n                                    }\n                                },\n                                {\n                                    icon: SpsIcon.DOWNLOAD_CLOUD,\n                                    onClick: task => {\n                                        console.log(\"download\", task);\n                                    }\n                                }\n                            ]\n                        },\n                        {\n                            status: SpsTaskStatus.ERRORED,\n                            unread: true,\n                            heading: \"Data XREF Test.xls\",\n                            subheading: \"Failed | Reason it failed\u2026\",\n                            actions: [\n                                {\n                                    icon: SpsIcon.REFRESH,\n                                    onClick: task => {\n                                        console.log(\"retry\", task);\n                                    }\n                                }\n                            ]\n                        }\n                    ]);\n\n                    function handleOpen() {\n                        console.log(\"opened\");\n                    }\n\n                    function handleClose() {\n                        console.log(\"closed (we mark all tasks as read)\");\n                        setTasks(currentTasks => currentTasks.map(task => ({ ...task, unread: false })));\n                    }\n\n                    function handleClearCompleted() {\n                        setTasks(currentTasks =>\n                            currentTasks.filter(task => task.status === SpsTaskStatus.IN_PROGRESS)\n                        );\n                    }\n\n                    return (\n                        <SpsTaskQueue\n                            tasks={tasks}\n                            onOpen={handleOpen}\n                            onClose={handleClose}\n                            onClearCompleted={handleClearCompleted}\n                        />\n                    );\n                }\n                "]))),
             },
         },
     },
@@ -9323,9 +9469,9 @@ var SpsTaskQueueExamples = {
         },
     },
 };
-var templateObject_1$b, templateObject_2$a, templateObject_3$8, templateObject_4$6;
+var templateObject_1$c, templateObject_2$a, templateObject_3$8, templateObject_4$6;
 
-var propsDoc$o = {
+var propsDoc$r = {
     disabled: 'boolean',
     formMeta: 'SpsFormFieldMeta<string>',
     icon: 'SpsIcon',
@@ -9334,7 +9480,7 @@ var propsDoc$o = {
     placeholder: 'string',
     value: 'string',
 };
-var propTypes$q = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, formControl: impl(), formMeta: impl(), icon: enumValue(SpsIcon$1), name: string, onChange: fun(), placeholder: string, value: string });
+var propTypes$t = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, formControl: impl(), formMeta: impl(), icon: enumValue(SpsIcon$1), name: string, onChange: fun(), placeholder: string, value: string });
 var SpsTextInput = React.forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, formControl = _a.formControl, formMeta = _a.formMeta, icon = _a.icon, id = _a.id, name = _a.name, onChange = _a.onChange, placeholder = _a.placeholder, testId = _a["data-testid"], title = _a.title, unsafelyReplaceClassName = _a.unsafelyReplaceClassName, _c = _a.value, value = _c === void 0 ? '' : _c, rest = __rest(_a, ["className", "disabled", "formControl", "formMeta", "icon", "id", "name", "onChange", "placeholder", 'data-testid', "title", "unsafelyReplaceClassName", "value"]);
     var meta = formMeta || formControl;
@@ -9364,8 +9510,8 @@ var SpsTextInput = React.forwardRef(function (_a, ref) {
             value && !disabled && (React.createElement("i", { className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn", onClick: clear })))));
 });
 Object.assign(SpsTextInput, {
-    props: propsDoc$o,
-    propTypes: propTypes$q,
+    props: propsDoc$r,
+    propTypes: propTypes$t,
     displayName: 'SpsTextInput',
 });
 
@@ -9375,7 +9521,7 @@ var SpsTextInputExamples = {
         description: 'info about standard text inputs',
         examples: {
             standard: {
-                react: code(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({ foo: \"bar\" });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.foo}>Foo</SpsLabel>\n                            <SpsTextInput\n                                value={formValue.foo}\n                                formMeta={formMeta.fields.foo}\n                            />\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({ foo: \"bar\" });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.foo}>Foo</SpsLabel>\n                            <SpsTextInput\n                                value={formValue.foo}\n                                formMeta={formMeta.fields.foo}\n                            />\n                        </>;\n                    }\n                "]))),
+                react: code(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({ foo: \"bar\" });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.foo}>Foo</SpsLabel>\n                            <SpsTextInput\n                                value={formValue.foo}\n                                formMeta={formMeta.fields.foo}\n                            />\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({ foo: \"bar\" });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.foo}>Foo</SpsLabel>\n                            <SpsTextInput\n                                value={formValue.foo}\n                                formMeta={formMeta.fields.foo}\n                            />\n                        </>;\n                    }\n                "]))),
             },
         },
     },
@@ -9407,9 +9553,9 @@ var SpsTextInputExamples = {
         },
     },
 };
-var templateObject_1$a, templateObject_2$9, templateObject_3$7, templateObject_4$5;
+var templateObject_1$b, templateObject_2$9, templateObject_3$7, templateObject_4$5;
 
-var propsDoc$n = {
+var propsDoc$q = {
     disabled: 'boolean',
     formMeta: 'SpsFormFieldMeta<string>',
     name: 'string',
@@ -9418,7 +9564,7 @@ var propsDoc$n = {
     rows: 'number',
     value: 'string',
 };
-var propTypes$p = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, formControl: impl(), formMeta: impl(), name: string, onChange: fun(), placeholder: string, ref: ref(), rows: number, value: string });
+var propTypes$s = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, formControl: impl(), formMeta: impl(), name: string, onChange: fun(), placeholder: string, ref: ref(), rows: number, value: string });
 function SpsTextarea(_a) {
     var className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, formControl = _a.formControl, formMeta = _a.formMeta, id = _a.id, name = _a.name, onChange = _a.onChange, _c = _a.placeholder, placeholder = _c === void 0 ? '' : _c, ref = _a.ref, _d = _a.rows, rows = _d === void 0 ? 2 : _d, testId = _a["data-testid"], unsafelyReplaceClassName = _a.unsafelyReplaceClassName, _e = _a.value, value = _e === void 0 ? '' : _e, rest = __rest(_a, ["className", "disabled", "formControl", "formMeta", "id", "name", "onChange", "placeholder", "ref", "rows", 'data-testid', "unsafelyReplaceClassName", "value"]);
     var meta = formMeta || formControl;
@@ -9447,8 +9593,8 @@ function SpsTextarea(_a) {
             value && !disabled && (React.createElement("i", { className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn", onClick: clear })))));
 }
 Object.assign(SpsTextarea, {
-    props: propsDoc$n,
-    propTypes: propTypes$p,
+    props: propsDoc$q,
+    propTypes: propTypes$s,
     displayName: 'SpsTextarea',
 });
 
@@ -9458,7 +9604,7 @@ var SpsTextareaExamples = {
         description: 'info about basic text areas',
         examples: {
             basic: {
-                react: code(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        function numLinesValidator(n) {\n                            return function(value) {\n                                const lines = typeof value === \"string\" ? value.split(\"\\n\").length : 0;\n                                if (lines !== n) {\n                                    return {\n                                        numLines: {\n                                            actualLines: lines,\n                                            requiredLines: n\n                                        }\n                                    };\n                                }\n                                return null;\n                            };\n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            haiku: \"\"\n                        }, {\n                            \"haiku\": [numLinesValidator(3)]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.haiku}\n                                help=\"A haiku is a three-line poem of 5, 7, and 5 syllables respectively.\"\n                                errors={() =>\n                                    formMeta.fields.haiku.hasError(\"numLines\") && (\n                                        <>\n                                        You need {formMeta.fields.haiku.errors[\"numLines\"].requiredLines} lines,\n                                        but you've only written {formMeta.fields.haiku.errors[\"numLines\"].actualLines} lines!\n                                    </>\n                                )\n                            }>\n                                Haiku\n                            </SpsLabel>\n                            <SpsTextarea placeholder=\"Write a haiku\" rows={3}\n                                formMeta={formMeta.fields.haiku}\n                                value={formValue.haiku}\n                            ></SpsTextarea>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        function numLinesValidator(n) {\n                            return function(value) {\n                                const lines = typeof value === \"string\" ? value.split(\"\\\\n\").length : 0;\n                                if (lines !== n) {\n                                    return {\n                                        numLines: {\n                                            actualLines: lines,\n                                            requiredLines: n\n                                        }\n                                    };\n                                }\n                                return null;\n                            };\n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            haiku: \"\"\n                        }, {\n                            \"haiku\": [numLinesValidator(3)]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.haiku}\n                                help=\"A haiku is a three-line poem of 5, 7, and 5 syllables respectively.\"\n                                errors={() =>\n                                    formMeta.fields.haiku.hasError(\"numLines\") && (\n                                        <>\n                                        You need {formMeta.fields.haiku.errors[\"numLines\"].requiredLines} lines,\n                                        but you've only written {formMeta.fields.haiku.errors[\"numLines\"].actualLines} lines!\n                                    </>\n                                )\n                            }>\n                                Haiku\n                            </SpsLabel>\n                            <SpsTextarea placeholder=\"Write a haiku\" rows={3}\n                                formMeta={formMeta.fields.haiku}\n                                value={formValue.haiku}\n                            ></SpsTextarea>\n                        </>\n                    }\n                "]))),
+                react: code(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n                    function DemoComponent() {\n                        function numLinesValidator(n) {\n                            return function(value) {\n                                const lines = typeof value === \"string\" ? value.split(\"\\n\").length : 0;\n                                if (lines !== n) {\n                                    return {\n                                        numLines: {\n                                            actualLines: lines,\n                                            requiredLines: n\n                                        }\n                                    };\n                                }\n                                return null;\n                            };\n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            haiku: \"\"\n                        }, {\n                            \"haiku\": [numLinesValidator(3)]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.haiku}\n                                help=\"A haiku is a three-line poem of 5, 7, and 5 syllables respectively.\"\n                                errors={() =>\n                                    formMeta.fields.haiku.hasError(\"numLines\") && (\n                                        <>\n                                        You need {formMeta.fields.haiku.errors[\"numLines\"].requiredLines} lines,\n                                        but you've only written {formMeta.fields.haiku.errors[\"numLines\"].actualLines} lines!\n                                    </>\n                                )\n                            }>\n                                Haiku\n                            </SpsLabel>\n                            <SpsTextarea placeholder=\"Write a haiku\" rows={3}\n                                formMeta={formMeta.fields.haiku}\n                                value={formValue.haiku}\n                            ></SpsTextarea>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        function numLinesValidator(n) {\n                            return function(value) {\n                                const lines = typeof value === \"string\" ? value.split(\"\\\\n\").length : 0;\n                                if (lines !== n) {\n                                    return {\n                                        numLines: {\n                                            actualLines: lines,\n                                            requiredLines: n\n                                        }\n                                    };\n                                }\n                                return null;\n                            };\n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            haiku: \"\"\n                        }, {\n                            \"haiku\": [numLinesValidator(3)]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.haiku}\n                                help=\"A haiku is a three-line poem of 5, 7, and 5 syllables respectively.\"\n                                errors={() =>\n                                    formMeta.fields.haiku.hasError(\"numLines\") && (\n                                        <>\n                                        You need {formMeta.fields.haiku.errors[\"numLines\"].requiredLines} lines,\n                                        but you've only written {formMeta.fields.haiku.errors[\"numLines\"].actualLines} lines!\n                                    </>\n                                )\n                            }>\n                                Haiku\n                            </SpsLabel>\n                            <SpsTextarea placeholder=\"Write a haiku\" rows={3}\n                                formMeta={formMeta.fields.haiku}\n                                value={formValue.haiku}\n                            ></SpsTextarea>\n                        </>\n                    }\n                "]))),
             },
         },
     },
@@ -9481,16 +9627,16 @@ var SpsTextareaExamples = {
         },
     },
 };
-var templateObject_1$9, templateObject_2$8, templateObject_3$6;
+var templateObject_1$a, templateObject_2$8, templateObject_3$6;
 
-var propsDoc$m = {
+var propsDoc$p = {
     href: 'string',
     icon: { type: 'ReactNodeOrRenderFn', required: 'true' },
     error: 'boolean',
     title: { type: 'string', required: 'true' },
     warning: 'boolean',
 };
-var propTypes$o = __assign(__assign({}, spsGlobalPropTypes), { href: string, target: string, icon: nodeOrRenderFn.isRequired, error: bool, title: string.isRequired, warning: bool });
+var propTypes$r = __assign(__assign({}, spsGlobalPropTypes), { href: string, target: string, icon: nodeOrRenderFn.isRequired, error: bool, title: string.isRequired, warning: bool });
 function SpsTile(props) {
     var className = props.className, href = props.href, target = props.target, icon = props.icon, _a = props.error, error = _a === void 0 ? false : _a, title = props.title, unsafelyReplaceClassName = props.unsafelyReplaceClassName, _b = props.warning, warning = _b === void 0 ? false : _b, rest = __rest(props, ["className", "href", "target", "icon", "error", "title", "unsafelyReplaceClassName", "warning"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-tile', className, error && 'sps-tile--error', warning && 'sps-tile--warning');
@@ -9512,21 +9658,21 @@ function SpsTile(props) {
                         target === '_blank' && (React.createElement("i", { className: clsx('sps-icon', 'sps-icon-tabs') }))))))));
 }
 Object.assign(SpsTile, {
-    props: propsDoc$m,
-    propTypes: propTypes$o,
+    props: propsDoc$p,
+    propTypes: propTypes$r,
     displayName: 'SpsTile',
 });
 
-var propsDoc$l = {};
-var propTypes$n = __assign({}, spsGlobalPropTypes);
+var propsDoc$o = {};
+var propTypes$q = __assign({}, spsGlobalPropTypes);
 function SpsTileList(props) {
     var children = props.children, unsafelyReplaceClassName = props.unsafelyReplaceClassName; props["data-testid"]; var className = props.className, rest = __rest(props, ["children", "unsafelyReplaceClassName", 'data-testid', "className"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-tile-list', className || 'sfg-row');
     return (React.createElement("div", __assign({ className: classes }, rest), children));
 }
 Object.assign(SpsTileList, {
-    props: propsDoc$l,
-    propTypes: propTypes$n,
+    props: propsDoc$o,
+    propTypes: propTypes$q,
     displayName: 'SpsTileList',
 });
 
@@ -9535,7 +9681,7 @@ var SpsTileListExamples = {
         label: 'Basic',
         examples: {
             basic: {
-                react: code(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n                    function Component() {\n                        const apps = [\n                            {\n                                name: \"App Manager\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/generic/generic.svg\",\n                            },\n                            {\n                                name: \"Assortment\",\n                                warning: false,\n                                error: false,\n                                href: \"https://www.google.com\",\n                                target: \"_blank\",\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg\",\n                            },\n                            {\n                                name: \"Community\",\n                                warning: false,\n                                error: false,\n                                onClick: () => console.log(\"Community\"),\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg\",\n                            },\n                            {\n                                name: \"Design System\",\n                                warning: false,\n                                error: true,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg\",\n                            },\n                            {\n                                name: \"Nexus\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/nexus/nexus.svg\",\n                            },\n                            {\n                                name: \"Testing & Certification\",\n                                warning: true,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/checkmark/checkmark.svg\",\n                            },\n                        ];\n\n                        return (\n                            <>\n                                <SpsTileList>\n                                    {apps.map((app, index) => {\n                                        return (\n                                            <SpsTile\n                                                key={index}\n                                                title={app.name}\n                                                warning={app.warning}\n                                                error={app.error}\n                                                href={app.href}\n                                                target={app.target}\n                                                icon={app.icon}\n                                                onClick={app.onClick}\n                                            />\n                                        )\n                                    })}\n                                </SpsTileList>\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const apps = [\n                            {\n                                name: \"App Manager\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/generic/generic.svg\",\n                            },\n                            {\n                                name: \"Assortment\",\n                                warning: false,\n                                error: false,\n                                href: \"https://www.google.com\",\n                                target: \"_blank\",\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg\",\n                            },\n                            {\n                                name: \"Community\",\n                                warning: false,\n                                error: false,\n                                onClick: () => console.log(\"Community\"),\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg\",\n                            },\n                            {\n                                name: \"Design System\",\n                                warning: false,\n                                error: true,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg\",\n                            },\n                            {\n                                name: \"Nexus\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/nexus/nexus.svg\",\n                            },\n                            {\n                                name: \"Testing & Certification\",\n                                warning: true,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/checkmark/checkmark.svg\",\n                            },\n                        ];\n\n                        return (\n                            <>\n                                <SpsTileList>\n                                    {apps.map((app, index) => {\n                                        return (\n                                            <SpsTile\n                                                key={index}\n                                                title={app.name}\n                                                warning={app.warning}\n                                                error={app.error}\n                                                href={app.href}\n                                                target={app.target}\n                                                icon={app.icon}\n                                                onClick={app.onClick}\n                                            />\n                                        )\n                                    })}\n                                </SpsTileList>\n                            </>\n                        )\n                    }\n                "]))),
+                react: code(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n                    function Component() {\n                        const apps = [\n                            {\n                                name: \"App Manager\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/generic/generic.svg\",\n                            },\n                            {\n                                name: \"Assortment\",\n                                warning: false,\n                                error: false,\n                                href: \"https://www.google.com\",\n                                target: \"_blank\",\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg\",\n                            },\n                            {\n                                name: \"Community\",\n                                warning: false,\n                                error: false,\n                                onClick: () => console.log(\"Community\"),\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg\",\n                            },\n                            {\n                                name: \"Design System\",\n                                warning: false,\n                                error: true,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg\",\n                            },\n                            {\n                                name: \"Nexus\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/nexus/nexus.svg\",\n                            },\n                            {\n                                name: \"Testing & Certification\",\n                                warning: true,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/checkmark/checkmark.svg\",\n                            },\n                        ];\n\n                        return (\n                            <>\n                                <SpsTileList>\n                                    {apps.map((app, index) => {\n                                        return (\n                                            <SpsTile\n                                                key={index}\n                                                title={app.name}\n                                                warning={app.warning}\n                                                error={app.error}\n                                                href={app.href}\n                                                target={app.target}\n                                                icon={app.icon}\n                                                onClick={app.onClick}\n                                            />\n                                        )\n                                    })}\n                                </SpsTileList>\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const apps = [\n                            {\n                                name: \"App Manager\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/generic/generic.svg\",\n                            },\n                            {\n                                name: \"Assortment\",\n                                warning: false,\n                                error: false,\n                                href: \"https://www.google.com\",\n                                target: \"_blank\",\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg\",\n                            },\n                            {\n                                name: \"Community\",\n                                warning: false,\n                                error: false,\n                                onClick: () => console.log(\"Community\"),\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg\",\n                            },\n                            {\n                                name: \"Design System\",\n                                warning: false,\n                                error: true,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg\",\n                            },\n                            {\n                                name: \"Nexus\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/nexus/nexus.svg\",\n                            },\n                            {\n                                name: \"Testing & Certification\",\n                                warning: true,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/checkmark/checkmark.svg\",\n                            },\n                        ];\n\n                        return (\n                            <>\n                                <SpsTileList>\n                                    {apps.map((app, index) => {\n                                        return (\n                                            <SpsTile\n                                                key={index}\n                                                title={app.name}\n                                                warning={app.warning}\n                                                error={app.error}\n                                                href={app.href}\n                                                target={app.target}\n                                                icon={app.icon}\n                                                onClick={app.onClick}\n                                            />\n                                        )\n                                    })}\n                                </SpsTileList>\n                            </>\n                        )\n                    }\n                "]))),
             },
         },
     },
@@ -9559,9 +9705,9 @@ var SpsTileListExamples = {
         },
     },
 };
-var templateObject_1$8, templateObject_2$7, templateObject_3$5, templateObject_4$4;
+var templateObject_1$9, templateObject_2$7, templateObject_3$5, templateObject_4$4;
 
-var propsDoc$k = {
+var propsDoc$n = {
     active: 'boolean',
     activeDescription: { type: 'string', deprecated: true },
     activeLabel: { type: 'string', deprecated: true },
@@ -9574,10 +9720,10 @@ var propsDoc$k = {
     large: 'boolean',
     onChange: '(isActive: boolean) => void',
 };
-var propTypes$m = __assign(__assign({}, spsGlobalPropTypes), { active: bool, activeDescription: deprecated(string), activeLabel: deprecated(string), description: string, disabled: bool, formControl: impl(), formMeta: impl(), id: string, inactiveDescription: deprecated(string), inactiveLabel: deprecated(string), label: string, large: bool, onChange: fun(), ref: ref() });
+var propTypes$p = __assign(__assign({}, spsGlobalPropTypes), { active: bool, activeDescription: deprecated(string), activeLabel: deprecated(string), description: string, disabled: bool, formControl: impl(), formMeta: impl(), id: string, inactiveDescription: deprecated(string), inactiveLabel: deprecated(string), label: string, large: bool, onChange: fun(), ref: ref() });
 function SpsToggle(props) {
     var activeProp = props.active, activeDescription = props.activeDescription, activeLabel = props.activeLabel, className = props.className, _a = props.description, description = _a === void 0 ? activeDescription : _a, disabled = props.disabled, formControl = props.formControl, formMeta = props.formMeta, id = props.id; props.inactiveDescription; props.inactiveLabel; var _b = props.label, label = _b === void 0 ? activeLabel : _b, large = props.large, onChange = props.onChange, ref = props.ref, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["active", "activeDescription", "activeLabel", "className", "description", "disabled", "formControl", "formMeta", "id", "inactiveDescription", "inactiveLabel", "label", "large", "onChange", "ref", 'data-testid', "unsafelyReplaceClassName"]);
-    useCheckDeprecatedProps('SpsToggle', propsDoc$k, props);
+    useCheckDeprecatedProps('SpsToggle', propsDoc$n, props);
     var meta = formMeta || formControl;
     var _c = __read(React.useState(activeProp), 2), active = _c[0], setActive = _c[1];
     var _d = useFormControlId(id, meta), wrapperId = _d.wrapperId, controlId = _d.controlId;
@@ -9607,8 +9753,8 @@ function SpsToggle(props) {
                 && (React.createElement("span", { className: "sps-toggle__description", id: descriptionID }, description)))));
 }
 Object.assign(SpsToggle, {
-    props: propsDoc$k,
-    propTypes: propTypes$m,
+    props: propsDoc$n,
+    propTypes: propTypes$p,
     displayName: 'SpsToggle',
 });
 
@@ -9617,7 +9763,7 @@ var SpsToggleExamples = {
         label: 'Small',
         examples: {
             a_small: {
-                react: code(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            toggle: false\n                        });\n\n                        return <SpsToggle formMeta={formMeta.fields.toggle}\n                            active={formValue.toggle}\n                            label=\"Main Label\"\n                            description=\"Extra descriptive text\"\n                        />;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            toggle: false\n                        });\n\n                        return <SpsToggle formMeta={formMeta.fields.toggle}\n                            active={formValue.toggle}\n                            label=\"Main Label\"\n                            description=\"Extra descriptive text\"\n                        />;\n                    }\n                "]))),
+                react: code(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            toggle: false\n                        });\n\n                        return <SpsToggle formMeta={formMeta.fields.toggle}\n                            active={formValue.toggle}\n                            label=\"Main Label\"\n                            description=\"Extra descriptive text\"\n                        />;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            toggle: false\n                        });\n\n                        return <SpsToggle formMeta={formMeta.fields.toggle}\n                            active={formValue.toggle}\n                            label=\"Main Label\"\n                            description=\"Extra descriptive text\"\n                        />;\n                    }\n                "]))),
             },
             b_changeHandler: {
                 description: 'With UseState',
@@ -9642,7 +9788,7 @@ var SpsToggleExamples = {
         },
     },
 };
-var templateObject_1$7, templateObject_2$6, templateObject_3$4, templateObject_4$3;
+var templateObject_1$8, templateObject_2$6, templateObject_3$4, templateObject_4$3;
 
 var SpsTooltipExamples = {
     basic: {
@@ -9650,7 +9796,7 @@ var SpsTooltipExamples = {
         description: 'Info about basic usage of tooltip',
         examples: {
             basic: {
-                description: code(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n                  <p>There are two ways to tell the tooltip what to attach to. The first is to\n                  pass in a ref.</p>\n                "], ["\n                  <p>There are two ways to tell the tooltip what to attach to. The first is to\n                  pass in a ref.</p>\n                "]))),
+                description: code(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n                  <p>There are two ways to tell the tooltip what to attach to. The first is to\n                  pass in a ref.</p>\n                "], ["\n                  <p>There are two ways to tell the tooltip what to attach to. The first is to\n                  pass in a ref.</p>\n                "]))),
                 react: code(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <div>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target}>\n                              target\n                            </div>\n                            <SpsTooltip for={target} title=\"Tooltip Title\">\n                              Tooltip content\n                            </SpsTooltip>\n                          </div>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <div>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target}>\n                              target\n                            </div>\n                            <SpsTooltip for={target} title=\"Tooltip Title\">\n                              Tooltip content\n                            </SpsTooltip>\n                          </div>\n                        );\n                    }\n                "]))),
             },
             withElementId: {
@@ -9748,13 +9894,13 @@ var SpsTooltipExamples = {
         },
     },
 };
-var templateObject_1$6, templateObject_2$5, templateObject_3$3, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;
+var templateObject_1$7, templateObject_2$5, templateObject_3$3, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;
 
-var propsDoc$j = {
+var propsDoc$m = {
     heading: 'string',
     icon: 'SpsIcon',
 };
-var propTypes$l = __assign(__assign({}, spsGlobalPropTypes), { heading: string, icon: enumValue(SpsIcon$1) });
+var propTypes$o = __assign(__assign({}, spsGlobalPropTypes), { heading: string, icon: enumValue(SpsIcon$1) });
 function SpsWorkflow(props) {
     var children = props.children, className = props.className, icon = props.icon, title = props.title, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "icon", "title", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-workflow', className);
@@ -9767,24 +9913,24 @@ function SpsWorkflow(props) {
         children));
 }
 Object.assign(SpsWorkflow, {
-    props: propsDoc$j,
-    propTypes: propTypes$l,
+    props: propsDoc$m,
+    propTypes: propTypes$o,
     displayName: 'SpsWorkflow',
 });
 function SpsWf(props) {
     return SpsWorkflow(props);
 }
 Object.assign(SpsWf, {
-    props: propsDoc$j,
-    propTypes: propTypes$l,
+    props: propsDoc$m,
+    propTypes: propTypes$o,
     displayName: 'SpsWf',
 });
 
-var propsDoc$i = {
+var propsDoc$l = {
     size: 'RingSize',
     progress: 'number',
 };
-var propTypes$k = __assign(__assign({}, spsGlobalPropTypes), { progress: number, size: enumValue(RingSize) });
+var propTypes$n = __assign(__assign({}, spsGlobalPropTypes), { progress: number, size: enumValue(RingSize) });
 function SpsProgressRing(_a) {
     var _b = _a.size, size = _b === void 0 ? RingSize.SMALL : _b, _c = _a.progress, progress = _c === void 0 ? 0 : _c;
     var stroke = 4;
@@ -9797,15 +9943,15 @@ function SpsProgressRing(_a) {
             React.createElement("circle", { stroke: colors.purple200, fill: "transparent", strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset: strokeDashoffset }, r: normalizedRadius, cx: size, cy: size }))));
 }
 Object.assign(SpsProgressRing, {
-    props: propsDoc$i,
-    propTypes: propTypes$k,
+    props: propsDoc$l,
+    propTypes: propTypes$n,
     displayName: 'SpsProgressRing',
 });
 
-var propsDoc$h = {
+var propsDoc$k = {
     phases: 'WizardPhase[]',
 };
-var propTypes$j = __assign(__assign({}, spsGlobalPropTypes), { phases: arrayOf(impl()) });
+var propTypes$m = __assign(__assign({}, spsGlobalPropTypes), { phases: arrayOf(impl()) });
 var CSS_BLOCK$2 = 'sps-wizard-sidebar';
 function SpsWizardSidebar(_a) {
     var className = _a.className, phases = _a.phases;
@@ -9824,17 +9970,17 @@ function SpsWizardSidebar(_a) {
     })));
 }
 Object.assign(SpsWizardSidebar, {
-    props: propsDoc$h,
-    propTypes: propTypes$j,
+    props: propsDoc$k,
+    propTypes: propTypes$m,
     displayName: 'SpsWizardSidebar',
 });
 
-var propsDoc$g = {
+var propsDoc$j = {
     display: 'string',
     condition: 'WizardSubstepConditions',
     orderPosition: 'string | number',
 };
-var propTypes$i = __assign(__assign({}, spsGlobalPropTypes), { condition: enumValue(WizardSubstepConditions).isRequired, display: string.isRequired, orderPosition: oneOfType([
+var propTypes$l = __assign(__assign({}, spsGlobalPropTypes), { condition: enumValue(WizardSubstepConditions).isRequired, display: string.isRequired, orderPosition: oneOfType([
         string,
         number,
     ]).isRequired });
@@ -9847,8 +9993,8 @@ function SpsWizardSubstep(props) {
         React.createElement("div", { className: clsx('sps-wizard-substep__body', "sps-wizard-substep__body--" + condition) }, children)));
 }
 Object.assign(SpsWizardSubstep, {
-    props: propsDoc$g,
-    propTypes: propTypes$i,
+    props: propsDoc$j,
+    propTypes: propTypes$l,
     displayName: 'SpsWizardSubstep',
 });
 
@@ -9857,7 +10003,7 @@ var SpsWizardExamples = {
         label: 'Substep',
         examples: {
             completed: {
-                jsx: code(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n                    <SpsWizardSubstep condition={WizardSubstepConditions.COMPLETED} orderPosition=\"1\" display=\"Payment Options\">\n                      <div>Put a Route here</div>\n                    </SpsWizardSubstep>\n            "], ["\n                    <SpsWizardSubstep condition={WizardSubstepConditions.COMPLETED} orderPosition=\"1\" display=\"Payment Options\">\n                      <div>Put a Route here</div>\n                    </SpsWizardSubstep>\n            "]))),
+                jsx: code(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n                    <SpsWizardSubstep condition={WizardSubstepConditions.COMPLETED} orderPosition=\"1\" display=\"Payment Options\">\n                      <div>Put a Route here</div>\n                    </SpsWizardSubstep>\n            "], ["\n                    <SpsWizardSubstep condition={WizardSubstepConditions.COMPLETED} orderPosition=\"1\" display=\"Payment Options\">\n                      <div>Put a Route here</div>\n                    </SpsWizardSubstep>\n            "]))),
             },
             active: {
                 jsx: code(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n                      <SpsWizardSubstep condition={WizardSubstepConditions.ACTIVE} orderPosition=\"2\" display=\"Payment Options\">\n                        <div>Put a Route here</div>\n                      </SpsWizardSubstep>\n              "], ["\n                      <SpsWizardSubstep condition={WizardSubstepConditions.ACTIVE} orderPosition=\"2\" display=\"Payment Options\">\n                        <div>Put a Route here</div>\n                      </SpsWizardSubstep>\n              "]))),
@@ -9876,33 +10022,33 @@ var SpsWizardExamples = {
         },
     },
 };
-var templateObject_1$5, templateObject_2$4, templateObject_3$2, templateObject_4$1;
+var templateObject_1$6, templateObject_2$4, templateObject_3$2, templateObject_4$1;
 
-var propsDoc$f = {};
-var propTypes$h = __assign({}, spsGlobalPropTypes);
+var propsDoc$i = {};
+var propTypes$k = __assign({}, spsGlobalPropTypes);
 function SpsWorkflowDocument(props) {
     var children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-workflow__document', className);
     return (React.createElement("span", __assign({ className: classes, "data-testid": testId + "__document" }, rest), children));
 }
 Object.assign(SpsWorkflowDocument, {
-    props: propsDoc$f,
-    propTypes: propTypes$h,
+    props: propsDoc$i,
+    propTypes: propTypes$k,
     displayName: 'SpsWorkflowDocument',
 });
 function SpsWfDoc(props) {
     return SpsWorkflowDocument(props);
 }
 Object.assign(SpsWfDoc, {
-    props: propsDoc$f,
-    propTypes: propTypes$h,
+    props: propsDoc$i,
+    propTypes: propTypes$k,
     displayName: 'SpsWfDoc',
 });
 
-var propsDoc$e = {
+var propsDoc$h = {
     icon: 'SpsIcon',
 };
-var propTypes$g = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(SpsIcon$1) });
+var propTypes$j = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(SpsIcon$1) });
 function SpsWorkflowDocumentStatus(props) {
     var children = props.children, className = props.className, icon = props.icon, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "icon", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-workflow__document-status', className);
@@ -9912,24 +10058,24 @@ function SpsWorkflowDocumentStatus(props) {
         children));
 }
 Object.assign(SpsWorkflowDocumentStatus, {
-    props: propsDoc$e,
-    propTypes: propTypes$g,
+    props: propsDoc$h,
+    propTypes: propTypes$j,
     displayName: 'SpsWorkflowDocumentStatus',
 });
 function SpsWfDs(props) {
     return SpsWorkflowDocumentStatus(props);
 }
 Object.assign(SpsWfDs, {
-    props: propsDoc$e,
-    propTypes: propTypes$g,
+    props: propsDoc$h,
+    propTypes: propTypes$j,
     displayName: 'SpsWfDs',
 });
 
-var propsDoc$d = {
+var propsDoc$g = {
     icon: { type: 'SpsIcon', required: true },
     title: { type: 'string', required: true },
 };
-var propTypes$f = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(SpsIcon$1).isRequired, title: string.isRequired });
+var propTypes$i = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(SpsIcon$1).isRequired, title: string.isRequired });
 function SpsWorkflowStep(props) {
     var children = props.children, className = props.className, icon = props.icon, title = props.title, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "icon", "title", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-workflow__step', className);
@@ -9939,16 +10085,16 @@ function SpsWorkflowStep(props) {
         children));
 }
 Object.assign(SpsWorkflowStep, {
-    props: propsDoc$d,
-    propTypes: propTypes$f,
+    props: propsDoc$g,
+    propTypes: propTypes$i,
     displayName: 'SpsWorkflowStep',
 });
 function SpsWfStep(props) {
     return SpsWorkflowStep(props);
 }
 Object.assign(SpsWfStep, {
-    props: propsDoc$d,
-    propTypes: propTypes$f,
+    props: propsDoc$g,
+    propTypes: propTypes$i,
     displayName: 'SpsWfStep',
 });
 
@@ -9957,7 +10103,7 @@ var SpsWorkflowExamples = {
         label: 'Basic Usage',
         examples: {
             basic: {
-                jsx: code(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n                <div className=\"col-4\">\n                    <SpsWorkflow icon=\"list-summary\" title=\"Workflow\">\n                        <SpsWorkflowStep icon=\"heart\" title=\"Name of Step\">\n                            <SpsWorkflowDocument>\n                                <a href=\"https://github.com/SPSCommerce/ui-angular\" target=\"_blank\">\n                                    Document Name\n                                </a>\n                                <SpsWorkflowDocumentStatus icon=\"status-error\">\n                                    Status\n                                </SpsWorkflowDocumentStatus>\n                            </SpsWorkflowDocument>\n                            <SpsWorkflowDocument>\n                                Document Name\n                                <SpsWorkflowDocumentStatus>\n                                    Status\n                                </SpsWorkflowDocumentStatus>\n                            </SpsWorkflowDocument>\n                        </SpsWorkflowStep>\n                        <SpsWorkflowStep icon=\"heart\" title=\"Done\">\n                        </SpsWorkflowStep>\n                    </SpsWorkflow>\n                </div>\n            "], ["\n                <div className=\"col-4\">\n                    <SpsWorkflow icon=\"list-summary\" title=\"Workflow\">\n                        <SpsWorkflowStep icon=\"heart\" title=\"Name of Step\">\n                            <SpsWorkflowDocument>\n                                <a href=\"https://github.com/SPSCommerce/ui-angular\" target=\"_blank\">\n                                    Document Name\n                                </a>\n                                <SpsWorkflowDocumentStatus icon=\"status-error\">\n                                    Status\n                                </SpsWorkflowDocumentStatus>\n                            </SpsWorkflowDocument>\n                            <SpsWorkflowDocument>\n                                Document Name\n                                <SpsWorkflowDocumentStatus>\n                                    Status\n                                </SpsWorkflowDocumentStatus>\n                            </SpsWorkflowDocument>\n                        </SpsWorkflowStep>\n                        <SpsWorkflowStep icon=\"heart\" title=\"Done\">\n                        </SpsWorkflowStep>\n                    </SpsWorkflow>\n                </div>\n            "]))),
+                jsx: code(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n                <div className=\"col-4\">\n                    <SpsWorkflow icon=\"list-summary\" title=\"Workflow\">\n                        <SpsWorkflowStep icon=\"heart\" title=\"Name of Step\">\n                            <SpsWorkflowDocument>\n                                <a href=\"https://github.com/SPSCommerce/ui-angular\" target=\"_blank\">\n                                    Document Name\n                                </a>\n                                <SpsWorkflowDocumentStatus icon=\"status-error\">\n                                    Status\n                                </SpsWorkflowDocumentStatus>\n                            </SpsWorkflowDocument>\n                            <SpsWorkflowDocument>\n                                Document Name\n                                <SpsWorkflowDocumentStatus>\n                                    Status\n                                </SpsWorkflowDocumentStatus>\n                            </SpsWorkflowDocument>\n                        </SpsWorkflowStep>\n                        <SpsWorkflowStep icon=\"heart\" title=\"Done\">\n                        </SpsWorkflowStep>\n                    </SpsWorkflow>\n                </div>\n            "], ["\n                <div className=\"col-4\">\n                    <SpsWorkflow icon=\"list-summary\" title=\"Workflow\">\n                        <SpsWorkflowStep icon=\"heart\" title=\"Name of Step\">\n                            <SpsWorkflowDocument>\n                                <a href=\"https://github.com/SPSCommerce/ui-angular\" target=\"_blank\">\n                                    Document Name\n                                </a>\n                                <SpsWorkflowDocumentStatus icon=\"status-error\">\n                                    Status\n                                </SpsWorkflowDocumentStatus>\n                            </SpsWorkflowDocument>\n                            <SpsWorkflowDocument>\n                                Document Name\n                                <SpsWorkflowDocumentStatus>\n                                    Status\n                                </SpsWorkflowDocumentStatus>\n                            </SpsWorkflowDocument>\n                        </SpsWorkflowStep>\n                        <SpsWorkflowStep icon=\"heart\" title=\"Done\">\n                        </SpsWorkflowStep>\n                    </SpsWorkflow>\n                </div>\n            "]))),
             },
         },
     },
@@ -9970,14 +10116,14 @@ var SpsWorkflowExamples = {
         },
     },
 };
-var templateObject_1$4, templateObject_2$3;
+var templateObject_1$5, templateObject_2$3;
 
-var propsDoc$c = {
+var propsDoc$f = {
     artwork: { type: 'string', required: true },
     heading: { type: 'string', required: true },
     subHeading: 'string',
 };
-var propTypes$e = __assign(__assign({}, spsGlobalPropTypes), { artwork: string.isRequired, heading: string.isRequired, subHeading: string });
+var propTypes$h = __assign(__assign({}, spsGlobalPropTypes), { artwork: string.isRequired, heading: string.isRequired, subHeading: string });
 function SpsZeroState(props) {
     var artwork = props.artwork, children = props.children, className = props.className, heading = props.heading, subHeading = props.subHeading, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["artwork", "children", "className", "heading", "subHeading", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-zero-state', className);
@@ -9989,17 +10135,17 @@ function SpsZeroState(props) {
             React.createElement("div", { className: "sps-zero-state__content", "data-testid": testId + "__content" }, children))));
 }
 Object.assign(SpsZeroState, {
-    props: propsDoc$c,
-    propTypes: propTypes$e,
+    props: propsDoc$f,
+    propTypes: propTypes$h,
     displayName: 'SpsZeroState',
 });
 
-var propsDoc$b = {
+var propsDoc$e = {
     icon: { type: 'SpsIcon', required: true },
     heading: 'ReactNodeOrRenderFn',
     subHeading: 'ReactNodeOrRenderFn',
 };
-var propTypes$d = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(SpsIcon$1).isRequired, heading: nodeOrRenderFn, subHeading: nodeOrRenderFn });
+var propTypes$g = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(SpsIcon$1).isRequired, heading: nodeOrRenderFn, subHeading: nodeOrRenderFn });
 function SpsMicroZeroState(props) {
     var className = props.className, heading = props.heading, icon = props.icon, subHeading = props.subHeading, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["className", "heading", "icon", "subHeading", 'data-testid', "unsafelyReplaceClassName"]);
     var classes = clsx(unsafelyReplaceClassName || 'sps-zero-state', 'sps-zero-state--micro', className);
@@ -10009,8 +10155,8 @@ function SpsMicroZeroState(props) {
         subHeading && React.createElement("h2", { className: "sps-zero-state__subheading", "data-testid": testId + "__subheading" }, subHeading)));
 }
 Object.assign(SpsMicroZeroState, {
-    props: propsDoc$b,
-    propTypes: propTypes$d,
+    props: propsDoc$e,
+    propTypes: propTypes$g,
     displayName: 'SpsMicroZeroState',
 });
 
@@ -10044,7 +10190,7 @@ var SpsZeroStateExamples = {
         examples: {
             illustrationAndHeading: {
                 description: 'Illustration + Heading',
-                jsx: code(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n                    <SpsCard>\n                        <SpsZeroState\n                            heading=\"Search for a record\"\n                            artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n                        />\n                    </SpsCard>\n                "], ["\n                    <SpsCard>\n                        <SpsZeroState\n                            heading=\"Search for a record\"\n                            artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n                        />\n                    </SpsCard>\n                "]))),
+                jsx: code(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n                    <SpsCard>\n                        <SpsZeroState\n                            heading=\"Search for a record\"\n                            artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n                        />\n                    </SpsCard>\n                "], ["\n                    <SpsCard>\n                        <SpsZeroState\n                            heading=\"Search for a record\"\n                            artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n                        />\n                    </SpsCard>\n                "]))),
             },
             illustrationHeadingAndSubtitle: {
                 description: 'Illustration + Heading + Subtitle',
@@ -10083,7 +10229,91 @@ var SpsZeroStateExamples = {
         },
     },
 };
-var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+
+var propsDoc$d = {};
+var propTypes$f = __assign({}, spsGlobalPropTypes);
+function SpsFilterPanel(_a) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", __assign({ className: clsx('sps-filter-panel', className) }, rest), children));
+}
+Object.assign(SpsFilterPanel, {
+    props: propsDoc$d,
+    propTypes: propTypes$f,
+    displayName: 'SpsFilterPanel',
+});
+
+var propsDoc$c = {
+    title: 'string',
+    expanded: 'boolean',
+    heightPx: 'number',
+    heightRem: 'number',
+    onExpand: '() => void',
+    onCollapse: '() => void',
+};
+var propTypes$e = __assign(__assign({}, spsGlobalPropTypes), { title: string, expanded: bool, heightPx: number, heightRem: number, onExpand: fun(), onCollapse: fun() });
+function SpsFilterPanelSection(_a) {
+    var children = _a.children, className = _a.className, title = _a.title, expanded = _a.expanded, heightPx = _a.heightPx, heightRem = _a.heightRem, onExpand = _a.onExpand, onCollapse = _a.onCollapse, rest = __rest(_a, ["children", "className", "title", "expanded", "heightPx", "heightRem", "onExpand", "onCollapse"]);
+    var _b = __read(React.useState(expanded), 2), localExpanded = _b[0], setLocalExpanded = _b[1];
+    var isExpanded = typeof expanded !== 'undefined' ? expanded : localExpanded;
+    var height = heightPx ? heightPx / 16 : heightRem;
+    var inlineStyles = height ? { overflowY: 'scroll', height: height + "rem" } : {};
+    var ExpandHideButton = function () { return (React.createElement("button", { type: "button", className: "sps-filter-panel__section__expand-btn", onClick: function () {
+            setLocalExpanded(!isExpanded);
+            if (!isExpanded && onExpand) {
+                onExpand();
+            }
+            else if (isExpanded && onCollapse) {
+                onCollapse();
+            }
+        } },
+        React.createElement(SpsI, { icon: isExpanded ? SpsIcon$1.MINUS_CIRCLE : SpsIcon$1.PLUS_CIRCLE }))); };
+    React.useEffect(function () {
+        setLocalExpanded(expanded);
+    }, [expanded]);
+    return (React.createElement("div", __assign({ className: clsx('sps-filter-panel__section', className) }, rest),
+        React.createElement("div", { className: "sps-filter-panel__section__title-wrapper" },
+            React.createElement(ExpandHideButton, null),
+            React.createElement("p", null, title)),
+        isExpanded && (React.createElement("div", { className: "sps-filter-panel__section__content-wrapper", style: inlineStyles },
+            React.createElement("div", { className: "sps-filter-panel__section__content" }, children)))));
+}
+Object.assign(SpsFilterPanelSection, {
+    props: propsDoc$c,
+    propTypes: propTypes$e,
+    displayName: 'SpsFilterPanelSection',
+});
+
+var propsDoc$b = {
+    onClear: '() => void',
+};
+var propTypes$d = __assign(__assign({}, spsGlobalPropTypes), { onClear: fun() });
+function SpsFilterPanelCap(_a) {
+    _a.children; var className = _a.className, onClear = _a.onClear, rest = __rest(_a, ["children", "className", "onClear"]);
+    var t = React.useContext(I18nContext).t;
+    return (React.createElement("div", __assign({ className: clsx('sps-filter-panel__cap', className) }, rest),
+        React.createElement("div", { className: "sps-filter-panel__cap__title-wrapper" },
+            React.createElement(SpsI, { icon: SpsIcon$1.FILTER, size: SpsIconSize.SMALL }),
+            React.createElement("p", null, t('design-system:filterPanel.title'))),
+        React.createElement(SpsButton, { kind: ButtonKind.LINK, onClick: onClear }, t('design-system:filterPanel.clear'))));
+}
+Object.assign(SpsFilterPanelCap, {
+    props: propsDoc$b,
+    propTypes: propTypes$d,
+    displayName: 'SpsFilterPanelCap',
+});
+
+var SpsFilterPanelExamples = {
+    generalUsage: {
+        label: 'General Usage',
+        examples: {
+            general: {
+                react: code(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n                    function Component() {\n                        const initialValues = {\n                            colors: {\n                                red: false,\n                                blue: false,\n                                green: false,\n                            },\n                            options: {\n                                '1': false,\n                                '2': false,\n                                '3': false,\n                                '4': false,\n                                '5': false,\n                                '6': false,\n                                '7': false,\n                                '8': false,\n                                '9': false,\n                                '10': false,\n                            },\n                            radio: 'yes',                \n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm(initialValues);\n\n                        const handleClear = () => {\n                            updateForm(initialValues);\n                            formMeta.markAsPristine();\n                        }\n\n                        const [expanded, setExpanded] = React.useState(true);\n    \n                        const onExpand = () => {\n                            setExpanded(true);\n                        }\n                        \n                        const onCollapse = () => {\n                            setExpanded(false);\n                        }\n                        \n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-4\">\n                                    <SpsForm formMeta={formMeta}>\n                                        <SpsFilterPanel>\n                                            <SpsFilterPanelCap onClear={handleClear}/>\n                                            <SpsFilterPanelSection title=\"Section one\">\n                                                <SpsCheckbox\n                                                    name=\"red\"\n                                                    label=\"Red\"\n                                                    checked={formValue.colors.red}\n                                                    formMeta={formMeta.fields.colors.fields.red}\n                                                />\n                                                <SpsCheckbox\n                                                    name=\"blue\"\n                                                    label=\"Blue\"\n                                                    checked={formValue.colors.blue}\n                                                    formMeta={formMeta.fields.colors.fields.blue}\n                                                />\n                                                <SpsCheckbox\n                                                    name=\"green\"\n                                                    label=\"Green\"\n                                                    checked={formValue.colors.green}\n                                                    formMeta={formMeta.fields.colors.fields.green}\n                                                />\n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section two\"\n                                            expanded={expanded}\n                                            onExpand={onExpand}\n                                            onCollapse={onCollapse}\n                                            heightPx={150}\n                                            >\n                                                {Object.keys(initialValues.options).map((o) => (\n                                                    <SpsCheckbox\n                                                    name={`option_${o}`}\n                                                    label={`Option ${o}`}\n                                                    checked={formValue.options[o]}\n                                                    formMeta={formMeta.fields.options.fields[o]}\n                                                    />\n                                                ))}                                \n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section three\">                                            \n                                                <SpsRadioButton name=\"yes\" value=\"yes\" label=\"Yes\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"yes\"}\n                                                ></SpsRadioButton>\n                                                <SpsRadioButton name=\"no\" value=\"no\" label=\"No\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"no\"}\n                                                ></SpsRadioButton>                                           \n                                            </SpsFilterPanelSection>\n                                        </SpsFilterPanel>\n                                    </SpsForm>\n                                </div>\n                            </div>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const initialValues = {\n                            colors: {\n                                red: false,\n                                blue: false,\n                                green: false,\n                            },\n                            options: {\n                                '1': false,\n                                '2': false,\n                                '3': false,\n                                '4': false,\n                                '5': false,\n                                '6': false,\n                                '7': false,\n                                '8': false,\n                                '9': false,\n                                '10': false,\n                            },\n                            radio: 'yes',                \n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm(initialValues);\n\n                        const handleClear = () => {\n                            updateForm(initialValues);\n                            formMeta.markAsPristine();\n                        }\n\n                        const [expanded, setExpanded] = React.useState(true);\n    \n                        const onExpand = () => {\n                            setExpanded(true);\n                        }\n                        \n                        const onCollapse = () => {\n                            setExpanded(false);\n                        }\n                        \n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-4\">\n                                    <SpsForm formMeta={formMeta}>\n                                        <SpsFilterPanel>\n                                            <SpsFilterPanelCap onClear={handleClear}/>\n                                            <SpsFilterPanelSection title=\"Section one\">\n                                                <SpsCheckbox\n                                                    name=\"red\"\n                                                    label=\"Red\"\n                                                    checked={formValue.colors.red}\n                                                    formMeta={formMeta.fields.colors.fields.red}\n                                                />\n                                                <SpsCheckbox\n                                                    name=\"blue\"\n                                                    label=\"Blue\"\n                                                    checked={formValue.colors.blue}\n                                                    formMeta={formMeta.fields.colors.fields.blue}\n                                                />\n                                                <SpsCheckbox\n                                                    name=\"green\"\n                                                    label=\"Green\"\n                                                    checked={formValue.colors.green}\n                                                    formMeta={formMeta.fields.colors.fields.green}\n                                                />\n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section two\"\n                                            expanded={expanded}\n                                            onExpand={onExpand}\n                                            onCollapse={onCollapse}\n                                            heightPx={150}\n                                            >\n                                                {Object.keys(initialValues.options).map((o) => (\n                                                    <SpsCheckbox\n                                                    name={\\`option_\\${o}\\`}\n                                                    label={\\`Option \\${o}\\`}\n                                                    checked={formValue.options[o]}\n                                                    formMeta={formMeta.fields.options.fields[o]}\n                                                    />\n                                                ))}                                \n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section three\">                                            \n                                                <SpsRadioButton name=\"yes\" value=\"yes\" label=\"Yes\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"yes\"}\n                                                ></SpsRadioButton>\n                                                <SpsRadioButton name=\"no\" value=\"no\" label=\"No\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"no\"}\n                                                ></SpsRadioButton>                                           \n                                            </SpsFilterPanelSection>\n                                        </SpsFilterPanel>\n                                    </SpsForm>\n                                </div>\n                            </div>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1$3;
 
 /* eslint-disable react/prop-types */
 var MANIFEST = {
@@ -10194,6 +10424,10 @@ var MANIFEST = {
         components: [SpsFieldset],
         examples: SpsFieldsetExamples,
     },
+    'Filter Panel': {
+        components: [SpsFilterPanel, SpsFilterPanelSection, SpsFilterPanelCap],
+        examples: SpsFilterPanelExamples,
+    },
     'Focused Task': {
         components: [SpsFocusedTask, SpsFocusedTaskActions],
         examples: SpsFocusedTaskExamples,
@@ -14406,4 +14640,4 @@ Object.assign(SpsVr, {
     displayName: 'SpsDescriptionListTerm / SpsDt',
 });
 
-export { ContentOrderExample, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, PortalContext, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsAutocomplete, SpsAutocompleteExamples, SpsButton, SpsButtonExamples, SpsButtonGroup, SpsCard, SpsCardExamples, SpsCardTabbedPane, SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsCheckbox, SpsCheckboxDropdown, SpsCheckboxExamples, SpsClickableTag, SpsClickableTagExamples, SpsColumnChooser, SpsColumnChooserColumn, SpsColumnChooserExamples, SpsContentRow, SpsContentRowCol, SpsContentRowExamples, SpsContentRowExpansion, SpsCurrencyInput, SpsCurrencyInputExamples, SpsDateRangePicker, SpsDateRangePickerExamples, SpsDateRangePickerV2, SpsDateTime, SpsDatepicker, SpsDatepickerExamples, SpsDatepickerV2, SpsDatetimeExamples, SpsDd, SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListExamples, SpsDescriptionListTerm, SpsDl, SpsDropdown, SpsDropdownExamples, SpsDt, SpsFeedbackBlock, SpsFeedbackBlockExamples, SpsFieldset, SpsFieldsetExamples, SpsFocusedTask, SpsFocusedTaskActions, SpsFocusedTaskExamples, SpsForm, SpsFormArrayMeta, SpsFormComponentWrapper, SpsFormExamples, SpsFormFieldMeta, SpsFormGroupMeta, SpsFormMetaBase, SpsFormSetMeta, SpsGrowler, SpsGrowlerExamples, SpsI, SpsIcon, SpsIconButtonPanel, SpsIncrementor, SpsIncrementorExamples, SpsInputGroup, SpsKeyValueList, SpsKeyValueListExamples, SpsKeyValueListItem, SpsKeyValueTag, SpsKeyValueTagExamples, SpsLabel, SpsLabelExamples, SpsListActionBar, SpsListActionBarExamples, SpsListToolbar, SpsListToolbarExamples, SpsListToolbarSearch, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalAction, SpsModalBody, SpsModalExamples, SpsModalFooter, SpsModalHeader, SpsModalOverlay, SpsModalV2, SpsModalV2Footer, SpsMultiSelect, SpsMultiSelectExamples, SpsMultiSelectTag, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, SpsSortingHeader, SpsSortingHeaderCell, SpsSortingHeaderExamples, SpsSpinner, SpsSpinnerExamples, SpsSplitButton, SpsSplitButtonExamples, SpsSummaryListColumn, SpsSummaryListExamples, SpsSummaryListExpansion, SpsSummaryListRow, SpsTab, SpsTabPanel, SpsTable, SpsTableBody, SpsTableCell, SpsTableExamples, SpsTableHead, SpsTableHeader, SpsTableRow, SpsTabsV2, SpsTag, SpsTagExamples, SpsTaskQueue, SpsTaskQueueExamples, SpsTbody, SpsTd, SpsTextInput, SpsTextInputExamples, SpsTextarea, SpsTextareaExamples, SpsTh, SpsThead, SpsTile, SpsTileList, SpsTileListExamples, SpsToggle, SpsToggleExamples, SpsTooltip, SpsTooltipExamples, SpsTr, SpsValidators, SpsVerticalRule, SpsVr, SpsWf, SpsWfDoc, SpsWfDs, SpsWfStep, SpsWizardExamples, SpsWizardSidebar, SpsWizardSubstep, SpsWorkflow, SpsWorkflowDocument, SpsWorkflowDocumentStatus, SpsWorkflowExamples, SpsWorkflowStep, SpsZeroState, SpsZeroStateExamples, TooltipVisibility, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate, weekOfMonth };
+export { ContentOrderExample, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, PortalContext, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsAutocomplete, SpsAutocompleteExamples, SpsButton, SpsButtonExamples, SpsButtonGroup, SpsCard, SpsCardExamples, SpsCardTabbedPane, SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsCheckbox, SpsCheckboxDropdown, SpsCheckboxExamples, SpsClickableTag, SpsClickableTagExamples, SpsColumnChooser, SpsColumnChooserColumn, SpsColumnChooserExamples, SpsContentRow, SpsContentRowCol, SpsContentRowExamples, SpsContentRowExpansion, SpsCurrencyInput, SpsCurrencyInputExamples, SpsDateRangePicker, SpsDateRangePickerExamples, SpsDateRangePickerV2, SpsDateTime, SpsDatepicker, SpsDatepickerExamples, SpsDatepickerV2, SpsDatetimeExamples, SpsDd, SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListExamples, SpsDescriptionListTerm, SpsDl, SpsDropdown, SpsDropdownExamples, SpsDt, SpsFeedbackBlock, SpsFeedbackBlockExamples, SpsFieldset, SpsFieldsetExamples, SpsFilterPanel, SpsFilterPanelCap, SpsFilterPanelExamples, SpsFilterPanelSection, SpsFocusedTask, SpsFocusedTaskActions, SpsFocusedTaskExamples, SpsForm, SpsFormArrayMeta, SpsFormComponentWrapper, SpsFormExamples, SpsFormFieldMeta, SpsFormGroupMeta, SpsFormMetaBase, SpsFormSetMeta, SpsGrowler, SpsGrowlerExamples, SpsI, SpsIcon, SpsIconButtonPanel, SpsIncrementor, SpsIncrementorExamples, SpsInputGroup, SpsKeyValueList, SpsKeyValueListExamples, SpsKeyValueListItem, SpsKeyValueTag, SpsKeyValueTagExamples, SpsLabel, SpsLabelExamples, SpsListActionBar, SpsListActionBarExamples, SpsListToolbar, SpsListToolbarExamples, SpsListToolbarSearch, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalAction, SpsModalBody, SpsModalExamples, SpsModalFooter, SpsModalHeader, SpsModalOverlay, SpsModalV2, SpsModalV2Footer, SpsMultiSelect, SpsMultiSelectExamples, SpsMultiSelectTag, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, SpsSortingHeader, SpsSortingHeaderCell, SpsSortingHeaderExamples, SpsSpinner, SpsSpinnerExamples, SpsSplitButton, SpsSplitButtonExamples, SpsSummaryListColumn, SpsSummaryListExamples, SpsSummaryListExpansion, SpsSummaryListRow, SpsTab, SpsTabPanel, SpsTable, SpsTableBody, SpsTableCell, SpsTableExamples, SpsTableHead, SpsTableHeader, SpsTableRow, SpsTabsV2, SpsTag, SpsTagExamples, SpsTaskQueue, SpsTaskQueueExamples, SpsTbody, SpsTd, SpsTextInput, SpsTextInputExamples, SpsTextarea, SpsTextareaExamples, SpsTh, SpsThead, SpsTile, SpsTileList, SpsTileListExamples, SpsToggle, SpsToggleExamples, SpsTooltip, SpsTooltipExamples, SpsTr, SpsValidators, SpsVerticalRule, SpsVr, SpsWf, SpsWfDoc, SpsWfDs, SpsWfStep, SpsWizardExamples, SpsWizardSidebar, SpsWizardSubstep, SpsWorkflow, SpsWorkflowDocument, SpsWorkflowDocumentStatus, SpsWorkflowExamples, SpsWorkflowStep, SpsZeroState, SpsZeroStateExamples, TooltipVisibility, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate, weekOfMonth };