@spscommerce/ds-react 4.3.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',
@@ -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$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 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                "]))),
@@ -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$c, templateObject_9$9, templateObject_10$7, 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                "]))),
@@ -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$b, 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>',
@@ -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$a, templateObject_9$7, templateObject_10$6, 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',
@@ -4171,9 +4171,9 @@ var SpsFeedbackBlockExamples = {
         },
     },
 };
-var templateObject_1$E, 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 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',
@@ -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$8, templateObject_9$5, templateObject_10$4, 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                "]))),
             },
         },
     },
@@ -6231,13 +6231,13 @@ var SpsLabelExamples = {
         },
     },
 };
-var templateObject_1$w, templateObject_2$t, templateObject_3$p, templateObject_4$j, templateObject_5$c, templateObject_6$9, templateObject_7$8, templateObject_8$7;
+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,8 +6258,8 @@ 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',
 });
 
@@ -6475,13 +6475,13 @@ var usePinnedTableHeadStyle = function (containerRef) {
     });
 };
 
-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];
@@ -6510,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 = {
@@ -6543,24 +6543,24 @@ 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()), pinned: bool });
+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, pinned = props.pinned, rest = __rest(props, ["children", "className", "currentSort", "onSortChange", 'data-testid', "unsafelyReplaceClassName", "pinned"]);
     var newProps = {
@@ -6576,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];
@@ -6629,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);
@@ -6669,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"]);
@@ -6694,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',
 });
 
@@ -6737,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                "]))),
             },
         },
     },
@@ -6827,14 +6827,14 @@ var SpsTableExamples = {
         },
     },
 };
-var templateObject_1$v, templateObject_2$s, templateObject_3$o, templateObject_4$i, templateObject_5$b, templateObject_6$8, templateObject_7$7, templateObject_8$6;
+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                "]))),
             },
         },
     },
@@ -6847,7 +6847,7 @@ var SpsTagExamples = {
         },
     },
 };
-var templateObject_1$u, templateObject_2$r;
+var templateObject_1$v, templateObject_2$r;
 
 var SpsListActionBarExamples = {
     general: {
@@ -6893,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];
@@ -6932,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;
@@ -6964,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) {
@@ -6985,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',
@@ -7003,7 +7003,7 @@ var propsDoc$L = {
     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(), selectable: bool, isSelected: bool, isIndeterminate: bool, onSelectionChange: fun() });
@@ -7079,8 +7079,8 @@ function SpsListToolbar(props) {
             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',
 });
 
@@ -7176,7 +7176,7 @@ var SpsListToolbarExamples = {
         },
         examples: {
             checkbox: {
-                react: code(templateObject_1$s || (templateObject_1$s = __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                "]))),
+                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                "]))),
             },
         },
     },
@@ -7436,13 +7436,13 @@ var SpsListToolbarExamples = {
         },
     },
 };
-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, templateObject_10$3;
+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);
@@ -7451,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',
 });
 
@@ -7461,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                "]))),
             },
         },
     },
@@ -7498,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);
@@ -7577,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',
 });
 
@@ -7611,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                "]))),
             },
         },
     },
@@ -7710,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',
@@ -7728,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(),
@@ -7878,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',
 });
 
@@ -7889,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                "]))),
@@ -7909,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;
@@ -7931,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',
 });
 
@@ -7954,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                "]))),
             },
         },
     },
@@ -7983,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',
@@ -8004,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(),
@@ -8130,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;
@@ -8185,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>',
@@ -8198,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"]);
@@ -8278,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',
 });
 
@@ -8289,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',
@@ -8311,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',
@@ -8338,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();
@@ -8369,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                "]))),
@@ -8409,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;
@@ -8437,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',
 });
 
@@ -8497,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',
@@ -8512,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>',
@@ -8524,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;
@@ -8546,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',
 });
 
@@ -8557,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                "]))),
             },
         },
     },
@@ -8580,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',
 });
 
@@ -8602,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                "]))),
@@ -8610,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;
@@ -8639,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',
 });
 
@@ -8650,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                "]))),
             },
         },
     },
@@ -8673,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: {
@@ -8682,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',
@@ -8745,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;
@@ -8891,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                "]))),
             },
         },
     },
@@ -8938,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[]',
@@ -8948,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 () {
@@ -8978,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);
@@ -9003,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;
@@ -9022,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',
 });
 
@@ -9031,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                "]))),
@@ -9042,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',
@@ -9052,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])) });
@@ -9071,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>"]))),
@@ -9108,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;
@@ -9123,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',
 });
 
@@ -9132,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({
@@ -9201,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',
 });
 
@@ -9229,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                    </>"]))),
             },
         },
     },
@@ -9261,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[]',
@@ -9273,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 });
@@ -9427,7 +9427,7 @@ function SpsTaskQueue(_a) {
 }
 Object.assign(SpsTaskQueue, {
     props: props,
-    propTypes: propTypes$r,
+    propTypes: propTypes$u,
     displayName: 'SpsTaskQueue',
 });
 
@@ -9437,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                "]))),
             },
         },
     },
@@ -9469,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',
@@ -9480,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;
@@ -9510,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',
 });
 
@@ -9521,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                "]))),
             },
         },
     },
@@ -9553,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',
@@ -9564,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;
@@ -9593,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',
 });
 
@@ -9604,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                "]))),
             },
         },
     },
@@ -9627,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');
@@ -9658,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',
 });
 
@@ -9681,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                "]))),
             },
         },
     },
@@ -9705,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 },
@@ -9720,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;
@@ -9753,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',
 });
 
@@ -9763,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',
@@ -9788,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: {
@@ -9796,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: {
@@ -9894,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);
@@ -9913,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;
@@ -9943,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;
@@ -9970,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 });
@@ -9993,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',
 });
 
@@ -10003,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              "]))),
@@ -10022,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);
@@ -10058,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);
@@ -10085,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',
 });
 
@@ -10103,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            "]))),
             },
         },
     },
@@ -10116,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);
@@ -10135,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);
@@ -10155,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',
 });
 
@@ -10190,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',
@@ -10229,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 = {
@@ -10340,6 +10424,10 @@ var MANIFEST = {
         components: [SpsFieldset],
         examples: SpsFieldsetExamples,
     },
+    'Filter Panel': {
+        components: [SpsFilterPanel, SpsFilterPanelSection, SpsFilterPanelCap],
+        examples: SpsFilterPanelExamples,
+    },
     'Focused Task': {
         components: [SpsFocusedTask, SpsFocusedTaskActions],
         examples: SpsFocusedTaskExamples,
@@ -14552,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 };