@spscommerce/ds-react 5.10.5 → 5.12.0

package/lib/index.es.js

@@ -81,7 +81,7 @@ var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof win
 function commonjsRequire(path) {
   throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }
-var propTypes$1M = { exports: {} };
+var propTypes$1N = { exports: {} };
 var ReactPropTypesSecret$1 = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
 var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
 var ReactPropTypesSecret = ReactPropTypesSecret_1;
@@ -129,32 +129,32 @@ var factoryWithThrowingShims = function() {
   return ReactPropTypes;
 };
 {
-  propTypes$1M.exports = factoryWithThrowingShims();
+  propTypes$1N.exports = factoryWithThrowingShims();
 }
 function deprecated(type) {
   return type;
 }
 function enumValue(e2) {
-  return propTypes$1M.exports.oneOf(values$3(e2));
+  return propTypes$1N.exports.oneOf(values$3(e2));
 }
 function fun() {
-  return propTypes$1M.exports.func;
+  return propTypes$1N.exports.func;
 }
 function impl() {
-  return propTypes$1M.exports.object;
+  return propTypes$1N.exports.object;
 }
 function ref() {
-  return propTypes$1M.exports.object;
+  return propTypes$1N.exports.object;
 }
-const nodeOrRenderFn = propTypes$1M.exports.oneOfType([propTypes$1M.exports.node, propTypes$1M.exports.func]);
+const nodeOrRenderFn = propTypes$1N.exports.oneOfType([propTypes$1N.exports.node, propTypes$1N.exports.func]);
 const spsGlobalPropTypes = {
-  children: propTypes$1M.exports.oneOfType([propTypes$1M.exports.arrayOf(propTypes$1M.exports.node), propTypes$1M.exports.node]),
-  className: propTypes$1M.exports.string,
-  "data-testid": propTypes$1M.exports.string,
-  unsafelyReplaceClassName: propTypes$1M.exports.string
+  children: propTypes$1N.exports.oneOfType([propTypes$1N.exports.arrayOf(propTypes$1N.exports.node), propTypes$1N.exports.node]),
+  className: propTypes$1N.exports.string,
+  "data-testid": propTypes$1N.exports.string,
+  unsafelyReplaceClassName: propTypes$1N.exports.string
 };
 const I18nContext = React.createContext(noI18nI18n);
-const propsDoc$1H = {
+const propsDoc$1I = {
   disabled: "boolean",
   href: "string",
   icon: "SpsIcon",
@@ -163,13 +163,13 @@ const propsDoc$1H = {
   spinningTitle: "string",
   type: "ButtonType"
 };
-const propTypes$1L = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1M.exports.bool,
-  href: propTypes$1M.exports.string,
+const propTypes$1M = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  disabled: propTypes$1N.exports.bool,
+  href: propTypes$1N.exports.string,
   icon: enumValue(SpsIcon),
   kind: enumValue(ButtonKind),
-  spinning: propTypes$1M.exports.bool,
-  spinningTitle: propTypes$1M.exports.string,
+  spinning: propTypes$1N.exports.bool,
+  spinningTitle: propTypes$1N.exports.string,
   type: enumValue(ButtonType)
 });
 function SpsButton(props2) {
@@ -219,8 +219,8 @@ function SpsButton(props2) {
   }), iconElement, children, spinner));
 }
 Object.assign(SpsButton, {
-  props: propsDoc$1H,
-  propTypes: propTypes$1L,
+  props: propsDoc$1I,
+  propTypes: propTypes$1M,
   displayName: "SpsButton"
 });
 const spsFormProps = {
@@ -272,7 +272,7 @@ Object.assign(SpsForm, {
 function contentOf(nodeOrRenderFn2) {
   return typeof nodeOrRenderFn2 === "function" ? nodeOrRenderFn2() : nodeOrRenderFn2;
 }
-const propsDoc$1G = __spreadProps(__spreadValues({}, spsFormProps), {
+const propsDoc$1H = __spreadProps(__spreadValues({}, spsFormProps), {
   controlsDisabled: "boolean",
   footerLinks: "ReactNodeOrRenderFn",
   formMeta: "SpsFormArrayMeta<any> | SpsFormGroupMeta<any>",
@@ -280,16 +280,16 @@ const propsDoc$1G = __spreadProps(__spreadValues({}, spsFormProps), {
   onClear: "() => void",
   onSubmit: "React.FormEventHandler"
 });
-const propTypes$1K = __spreadProps(__spreadValues(__spreadValues({}, spsGlobalPropTypes), spsFormPropTypes), {
-  controlsDisabled: propTypes$1M.exports.bool,
+const propTypes$1L = __spreadProps(__spreadValues(__spreadValues({}, spsGlobalPropTypes), spsFormPropTypes), {
+  controlsDisabled: propTypes$1N.exports.bool,
   footerLinks: nodeOrRenderFn,
   formArray: impl(),
   formGroup: impl(),
-  formMeta: propTypes$1M.exports.oneOfType([
+  formMeta: propTypes$1N.exports.oneOfType([
     impl(),
     impl()
   ]),
-  isOpen: propTypes$1M.exports.bool,
+  isOpen: propTypes$1N.exports.bool,
   onClear: fun(),
   onSubmit: fun()
 });
@@ -354,8 +354,8 @@ function SpsAdvancedSearch(props2) {
   }, t2("design-system:advancedSearch.search"))))));
 }
 Object.assign(SpsAdvancedSearch, {
-  props: propsDoc$1G,
-  propTypes: propTypes$1K,
+  props: propsDoc$1H,
+  propTypes: propTypes$1L,
   displayName: "SpsAdvancedSearch"
 });
 const SpsAdvancedSearchExamples = {
@@ -922,6 +922,9 @@ class SpsFormMetaBase {
   isValid() {
     return !this.errors || this.isPristine();
   }
+  hasErrors() {
+    return !!this.errors;
+  }
   isVisibilyInvalid() {
     return this.errors && (this.revealAllErrors || !this.isPristine() && Object.keys(this.errors).some((key) => AsTypingErrorKeys.has(key)));
   }
@@ -1019,6 +1022,9 @@ class SpsFormSetMeta extends SpsFormFieldMeta {
   isValid() {
     return super.isValid() && this.rollup("isValid");
   }
+  hasErrors() {
+    return super.hasErrors() || Object.keys(this.fields).some((key) => this.fields[key].hasErrors());
+  }
   contentsAreValid() {
     return this.rollup("isValid") && this.rollup("contentsAreValid");
   }
@@ -1268,7 +1274,7 @@ function useSpsForm(value, validatorMap) {
   return state;
 }
 const spsFormComponentWrapperPropTypes = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  focusInputOnClick: propTypes$1M.exports.bool,
+  focusInputOnClick: propTypes$1N.exports.bool,
   formMeta: impl(),
   formControl: impl(),
   inputRef: ref()
@@ -1444,15 +1450,15 @@ var scrollIntoViewImport = /* @__PURE__ */ Object.freeze({
   [Symbol.toStringTag]: "Module",
   "default": scrollIntoView$1
 });
-const propsDoc$1F = {
+const propsDoc$1G = {
   alt: "string",
   size: "SpinnerSize",
   title: "string"
 };
-const propTypes$1J = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  alt: propTypes$1M.exports.string,
+const propTypes$1K = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  alt: propTypes$1N.exports.string,
   size: enumValue(SpinnerSize),
-  title: propTypes$1M.exports.string
+  title: propTypes$1N.exports.string
 });
 function SpsSpinner(props2) {
   const _a = props2, {
@@ -1480,8 +1486,8 @@ function SpsSpinner(props2) {
   }, rest));
 }
 Object.assign(SpsSpinner, {
-  props: propsDoc$1F,
-  propTypes: propTypes$1J,
+  props: propsDoc$1G,
+  propTypes: propTypes$1K,
   displayName: "SpsSpinner"
 });
 const NAVBAR_HEIGHT = 60;
@@ -1665,51 +1671,53 @@ const spsOptionListPassthroughProps = {
     tall: "boolean",
     textKey: "string",
     valueKey: "string",
-    zeroState: "string"
+    zeroState: "string",
+    maxHeight: "number"
   },
   propTypes: {
-    captionKey: propTypes$1M.exports.string,
-    comparisonKey: propTypes$1M.exports.string,
-    disabledOptions: propTypes$1M.exports.arrayOf(propTypes$1M.exports.any),
-    options: propTypes$1M.exports.oneOfType([
-      propTypes$1M.exports.array,
-      propTypes$1M.exports.instanceOf(Promise),
+    captionKey: propTypes$1N.exports.string,
+    comparisonKey: propTypes$1N.exports.string,
+    disabledOptions: propTypes$1N.exports.arrayOf(propTypes$1N.exports.any),
+    options: propTypes$1N.exports.oneOfType([
+      propTypes$1N.exports.array,
+      propTypes$1N.exports.instanceOf(Promise),
       fun()
     ]).isRequired,
-    tall: propTypes$1M.exports.bool,
-    textKey: propTypes$1M.exports.string,
-    valueKey: propTypes$1M.exports.string,
-    zeroState: propTypes$1M.exports.string
+    tall: propTypes$1N.exports.bool,
+    textKey: propTypes$1N.exports.string,
+    valueKey: propTypes$1N.exports.string,
+    zeroState: propTypes$1N.exports.string,
+    maxHeight: propTypes$1N.exports.number
   }
 };
 const searchableOptionListProps = {
-  hideInlineSearch: propTypes$1M.exports.bool,
+  hideInlineSearch: propTypes$1N.exports.bool,
   onSearchChange: fun(),
-  search: propTypes$1M.exports.string,
-  searchDebounce: propTypes$1M.exports.number,
-  searchPlaceholder: propTypes$1M.exports.string,
+  search: propTypes$1N.exports.string,
+  searchDebounce: propTypes$1N.exports.number,
+  searchPlaceholder: propTypes$1N.exports.string,
   searchInputRef: ref()
 };
-const propTypes$1I = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, spsGlobalPropTypes), spsOptionListPassthroughProps.propTypes), searchableOptionListProps), {
+const propTypes$1J = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, spsGlobalPropTypes), spsOptionListPassthroughProps.propTypes), searchableOptionListProps), {
   attachTo: ref().isRequired,
-  conformWidth: propTypes$1M.exports.bool,
-  id: propTypes$1M.exports.string.isRequired,
-  isOpen: propTypes$1M.exports.bool,
-  keepOpen: propTypes$1M.exports.bool,
+  conformWidth: propTypes$1N.exports.bool,
+  id: propTypes$1N.exports.string.isRequired,
+  isOpen: propTypes$1N.exports.bool,
+  keepOpen: propTypes$1N.exports.bool,
   keyDown: impl(),
-  nullOption: propTypes$1M.exports.string,
-  offsets: propTypes$1M.exports.arrayOf(propTypes$1M.exports.number),
+  nullOption: propTypes$1N.exports.string,
+  offsets: propTypes$1N.exports.arrayOf(propTypes$1N.exports.number),
   onOptionListChanged: fun(),
   onOptionSelected: fun(),
   onPositionFlip: fun(),
   onSelfToggle: fun(),
-  optionRole: propTypes$1M.exports.string,
-  positionOverride: propTypes$1M.exports.arrayOf(enumValue(Position)),
-  selectedOption: propTypes$1M.exports.any,
+  optionRole: propTypes$1N.exports.string,
+  positionOverride: propTypes$1N.exports.arrayOf(enumValue(Position)),
+  selectedOption: propTypes$1N.exports.any,
   specialAction: fun(),
-  ignoreWidthStyles: propTypes$1M.exports.bool,
-  loading: propTypes$1M.exports.bool,
-  filterByTextAndCaptionKey: propTypes$1M.exports.bool
+  ignoreWidthStyles: propTypes$1N.exports.bool,
+  loading: propTypes$1N.exports.bool,
+  filterByTextAndCaptionKey: propTypes$1N.exports.bool
 });
 async function updateOptions(props2, searchState, searchStatePatch, setOptionList, setAnyOptionHasIcon, promiseRef) {
   const options = typeof props2.options === "function" ? props2.options(searchState.value) : props2.options || [];
@@ -1760,11 +1768,15 @@ function useOptionListOptions(props2, searchState, searchStatePatch) {
   const [optionList, setOptionList] = React.useState(Object.freeze([]));
   const [anyOptionHasIcon, setAnyOptionHasIcon] = React.useState(false);
   const promiseRef = React.useRef(null);
-  const update2 = React.useMemo(() => typeof props2.options === "function" ? debounce(updateOptions, typeof props2.searchDebounce !== "undefined" ? props2.searchDebounce : 500) : updateOptions, [props2.options, props2.disabledOptions]);
+  const optionsRef = React.useRef(props2.options);
+  if (typeof props2.options !== "function") {
+    optionsRef.current = props2.options;
+  }
+  const update2 = React.useMemo(() => typeof optionsRef.current === "function" ? debounce(updateOptions, typeof props2.searchDebounce !== "undefined" ? props2.searchDebounce : 500) : updateOptions, [optionsRef.current, props2.disabledOptions]);
   React.useEffect(() => {
     void update2(props2, searchState, searchStatePatch, setOptionList, setAnyOptionHasIcon, promiseRef);
   }, [
-    props2.options,
+    optionsRef.current,
     searchState.value,
     props2.disabledOptions
   ]);
@@ -2013,6 +2025,7 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     unsafelyReplaceClassName,
     loading,
     filterByTextAndCaptionKey,
+    maxHeight,
     "data-testid": testId
   } = _a, rest = __objRest(_a, [
     "captionKey",
@@ -2048,6 +2061,7 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     "unsafelyReplaceClassName",
     "loading",
     "filterByTextAndCaptionKey",
+    "maxHeight",
     "data-testid"
   ]);
   const specialActionOption = React.useMemo(() => specialAction ? new SpsOptionListOption(specialAction, {
@@ -2281,7 +2295,8 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
   }, rest), searchElement, /* @__PURE__ */ React.createElement("div", {
     className: optionsClasses,
     ref: optionsRef,
-    "data-testid": `${testId}-options`
+    "data-testid": `${testId}-options`,
+    style: maxHeight ? { maxHeight: `${maxHeight}px` } : {}
   }, !loading && !searchState.pending && zeroState && (searchState.value || !searchState.isAsync) && optionList.length === 0 && /* @__PURE__ */ React.createElement("div", {
     className: "sps-option-list__zero-state"
   }, zeroState), (loading || searchState.pending) && /* @__PURE__ */ React.createElement("div", {
@@ -2329,7 +2344,7 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
   }), /* @__PURE__ */ React.createElement("span", null, specialAction.label))));
 });
 Object.assign(SpsOptionList, {
-  propTypes: propTypes$1I,
+  propTypes: propTypes$1J,
   displayName: "SpsOptionList"
 });
 function selectChildren(children = [], groups = []) {
@@ -2396,17 +2411,17 @@ function documentClickHandlerFactory(rootRef, popupRef, doHidePopup) {
 function useInputPopup(rootRef, popupRef) {
   const suppressPopup = React.useRef(false);
   const [showPopup, setShowPopup] = React.useState(false);
-  function doShowPopup() {
+  const doShowPopup = React.useCallback(() => {
     if (suppressPopup.current) {
       suppressPopup.current = false;
     } else {
       setShowPopup(true);
     }
-  }
+  }, []);
   const doHidePopup = React.useCallback((suppressNextShow = false) => {
     setShowPopup(false);
     suppressPopup.current = suppressNextShow;
-  }, [setShowPopup]);
+  }, []);
   useDocumentEventListener("click", documentClickHandlerFactory, [
     rootRef,
     popupRef,
@@ -2418,7 +2433,7 @@ function useInputPopup(rootRef, popupRef) {
     doHidePopup
   };
 }
-const propsDoc$1E = {
+const propsDoc$1F = {
   debounce: "number",
   disabled: "boolean",
   formMeta: "SpsFormFieldMeta<string>",
@@ -2435,25 +2450,27 @@ const propsDoc$1E = {
   tallOptionList: "boolean",
   value: "string",
   zeroState: "string",
-  loading: "boolean"
+  loading: "boolean",
+  maxHeightOptionList: "number"
 };
-const propTypes$1H = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  debounce: propTypes$1M.exports.number,
-  disabled: propTypes$1M.exports.bool,
+const propTypes$1I = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  debounce: propTypes$1N.exports.number,
+  disabled: propTypes$1N.exports.bool,
   formControl: impl(),
   formMeta: impl(),
   icon: enumValue(SpsIcon),
   onChange: fun(),
-  placeholder: propTypes$1M.exports.string,
-  suggestions: propTypes$1M.exports.oneOfType([
-    propTypes$1M.exports.arrayOf(propTypes$1M.exports.string),
-    propTypes$1M.exports.instanceOf(Promise),
+  placeholder: propTypes$1N.exports.string,
+  suggestions: propTypes$1N.exports.oneOfType([
+    propTypes$1N.exports.arrayOf(propTypes$1N.exports.string),
+    propTypes$1N.exports.instanceOf(Promise),
     fun()
   ]).isRequired,
-  tallOptionList: propTypes$1M.exports.bool,
-  value: propTypes$1M.exports.string,
-  zeroState: propTypes$1M.exports.string,
-  loading: propTypes$1M.exports.bool
+  tallOptionList: propTypes$1N.exports.bool,
+  value: propTypes$1N.exports.string,
+  zeroState: propTypes$1N.exports.string,
+  loading: propTypes$1N.exports.bool,
+  maxHeightOptionList: propTypes$1N.exports.number
 });
 function SpsAutocomplete(_a) {
   var _b = _a, {
@@ -2471,7 +2488,8 @@ function SpsAutocomplete(_a) {
     tallOptionList,
     value = "",
     zeroState,
-    loading
+    loading,
+    maxHeightOptionList
   } = _b, rest = __objRest(_b, [
     "className",
     "debounce",
@@ -2487,7 +2505,8 @@ function SpsAutocomplete(_a) {
     "tallOptionList",
     "value",
     "zeroState",
-    "loading"
+    "loading",
+    "maxHeightOptionList"
   ]);
   const meta = formMeta || formControl2;
   const { wrapperId, controlId } = useFormControlId(id2, meta);
@@ -2596,12 +2615,13 @@ function SpsAutocomplete(_a) {
     searchDebounce: debounce2,
     tall: tallOptionList,
     zeroState,
-    loading
+    loading,
+    maxHeight: maxHeightOptionList
   }));
 }
 Object.assign(SpsAutocomplete, {
-  props: propsDoc$1E,
-  propTypes: propTypes$1H,
+  props: propsDoc$1F,
+  propTypes: propTypes$1I,
   displayName: "SpsAutocomplete"
 });
 const SpsAutocompleteExamples = {
@@ -2724,7 +2744,7 @@ const SpsAutocompleteExamples = {
     }
   }
 };
-const propsDoc$1D = {
+const propsDoc$1E = {
   alignLeft: "boolean",
   disabled: "boolean",
   icon: "SpsIcon",
@@ -2736,21 +2756,23 @@ const propsDoc$1D = {
   tallOptionList: "boolean",
   onOpen: "() => void",
   onClose: "() => void",
-  loading: "boolean"
+  loading: "boolean",
+  maxHeightOptionList: "number"
 };
-const propTypes$1G = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  alignLeft: propTypes$1M.exports.bool,
-  disabled: propTypes$1M.exports.bool,
+const propTypes$1H = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  alignLeft: propTypes$1N.exports.bool,
+  disabled: propTypes$1N.exports.bool,
   icon: enumValue(SpsIcon),
   kind: enumValue(DropdownKind),
-  label: propTypes$1M.exports.string,
-  options: propTypes$1M.exports.arrayOf(propTypes$1M.exports.oneOfType([propTypes$1M.exports.func, propTypes$1M.exports.any])).isRequired,
-  spinning: propTypes$1M.exports.bool,
-  spinningTitle: propTypes$1M.exports.string,
-  tallOptionList: propTypes$1M.exports.bool,
+  label: propTypes$1N.exports.string,
+  options: propTypes$1N.exports.arrayOf(propTypes$1N.exports.oneOfType([propTypes$1N.exports.func, propTypes$1N.exports.any])).isRequired,
+  spinning: propTypes$1N.exports.bool,
+  spinningTitle: propTypes$1N.exports.string,
+  tallOptionList: propTypes$1N.exports.bool,
   onOpen: fun(),
   onClose: fun(),
-  loading: propTypes$1M.exports.bool
+  loading: propTypes$1N.exports.bool,
+  maxHeightOptionList: propTypes$1N.exports.number
 });
 function SpsDropdown(props2) {
   const _a = props2, {
@@ -2769,7 +2791,8 @@ function SpsDropdown(props2) {
     unsafelyReplaceClassName,
     onOpen,
     onClose,
-    loading
+    loading,
+    maxHeightOptionList
   } = _a, rest = __objRest(_a, [
     "alignLeft",
     "className",
@@ -2786,7 +2809,8 @@ function SpsDropdown(props2) {
     "unsafelyReplaceClassName",
     "onOpen",
     "onClose",
-    "loading"
+    "loading",
+    "maxHeightOptionList"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
   const id2 = useElementId(idProp);
@@ -2885,7 +2909,8 @@ function SpsDropdown(props2) {
     offsets: [0, 0],
     tall: tallOptionList,
     optionRole: "option",
-    loading
+    loading,
+    maxHeight: maxHeightOptionList
   }), /* @__PURE__ */ React.createElement("div", {
     onClick: handleButtonClick,
     className: buttonClasses,
@@ -2907,12 +2932,12 @@ function SpsDropdown(props2) {
   }, spinningTitle || t2("design-system:button.spinningTitle")))));
 }
 Object.assign(SpsDropdown, {
-  props: propsDoc$1D,
-  propTypes: propTypes$1G,
+  props: propsDoc$1E,
+  propTypes: propTypes$1H,
   displayName: "SpsDropdown"
 });
-const propsDoc$1C = {};
-const propTypes$1F = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$1D = {};
+const propTypes$1G = __spreadValues({}, spsGlobalPropTypes);
 function SpsButtonGroup(props2) {
   const _a = props2, {
     children,
@@ -2943,8 +2968,8 @@ function SpsButtonGroup(props2) {
   }), others.length > 0 && others);
 }
 Object.assign(SpsButtonGroup, {
-  props: propsDoc$1C,
-  propTypes: propTypes$1F,
+  props: propsDoc$1D,
+  propTypes: propTypes$1G,
   displayName: "SpsButtonGroup"
 });
 const SpsButtonExamples = {
@@ -5676,8 +5701,8 @@ function SpsTabPanel(_c) {
     className: "sps-card__body"
   }), state.selectedItem ? state.selectedItem.props.children : null);
 }
-const propsDoc$1B = {};
-const propTypes$1E = {};
+const propsDoc$1C = {};
+const propTypes$1F = {};
 function SpsTabsV2(props2) {
   const state = useTabListState(props2);
   const ref2 = React.useRef();
@@ -5695,12 +5720,12 @@ function SpsTabsV2(props2) {
   }));
 }
 Object.assign(SpsTabsV2, {
-  props: propsDoc$1B,
-  propTypes: propTypes$1E,
+  props: propsDoc$1C,
+  propTypes: propTypes$1F,
   displayName: "SpsTabsV2"
 });
-const propsDoc$1A = {};
-const propTypes$1D = {};
+const propsDoc$1B = {};
+const propTypes$1E = {};
 function SpsCardV2Footer(_e) {
   var _f = _e, {
     children,
@@ -5714,12 +5739,12 @@ function SpsCardV2Footer(_e) {
   }, rest), children);
 }
 Object.assign(SpsCardV2Footer, {
-  props: propsDoc$1A,
-  propTypes: propTypes$1D,
+  props: propsDoc$1B,
+  propTypes: propTypes$1E,
   displayName: "SpsCardV2Footer"
 });
-const propsDoc$1z = {};
-const propTypes$1C = {};
+const propsDoc$1A = {};
+const propTypes$1D = {};
 function SpsCardV2Header(_g) {
   var _h = _g, {
     children,
@@ -5733,12 +5758,12 @@ function SpsCardV2Header(_g) {
   }, rest), children);
 }
 Object.assign(SpsCardV2Header, {
-  props: propsDoc$1z,
-  propTypes: propTypes$1C,
+  props: propsDoc$1A,
+  propTypes: propTypes$1D,
   displayName: "SpsCardV2Header"
 });
-const propsDoc$1y = {};
-const propTypes$1B = {};
+const propsDoc$1z = {};
+const propTypes$1C = {};
 function SpsCardV2(_i) {
   var _j = _i, {
     children,
@@ -5764,12 +5789,12 @@ function SpsCardV2(_i) {
   }, bodyContent), footer);
 }
 Object.assign(SpsCardV2, {
-  props: propsDoc$1y,
-  propTypes: propTypes$1B,
+  props: propsDoc$1z,
+  propTypes: propTypes$1C,
   displayName: "SpsCardV2"
 });
-const propsDoc$1x = {};
-const propTypes$1A = {};
+const propsDoc$1y = {};
+const propTypes$1B = {};
 function SpsCardV2Title(_k) {
   var _l = _k, {
     children,
@@ -5783,8 +5808,8 @@ function SpsCardV2Title(_k) {
   }, rest), children);
 }
 Object.assign(SpsCardV2Title, {
-  props: propsDoc$1x,
-  propTypes: propTypes$1A,
+  props: propsDoc$1y,
+  propTypes: propTypes$1B,
   displayName: "SpsCardV2Title"
 });
 const SpsCardExamples = {
@@ -6092,7 +6117,7 @@ const SpsCardExamples = {
     }
   }
 };
-const propsDoc$1w = {
+const propsDoc$1x = {
   checked: "boolean",
   disabled: "boolean",
   formMeta: "SpsFormFieldMeta<boolean>",
@@ -6101,14 +6126,14 @@ const propsDoc$1w = {
   label: "string",
   onChange: "ChangeEventHandler"
 };
-const propTypes$1z = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  checked: propTypes$1M.exports.bool,
-  disabled: propTypes$1M.exports.bool,
+const propTypes$1A = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  checked: propTypes$1N.exports.bool,
+  disabled: propTypes$1N.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  indeterminate: propTypes$1M.exports.bool,
-  inline: propTypes$1M.exports.bool,
-  label: propTypes$1M.exports.string,
+  indeterminate: propTypes$1N.exports.bool,
+  inline: propTypes$1N.exports.bool,
+  label: propTypes$1N.exports.string,
   onChange: fun()
 });
 function SpsCheckbox(_m) {
@@ -6184,8 +6209,8 @@ function SpsCheckbox(_m) {
   }, label || ""));
 }
 Object.assign(SpsCheckbox, {
-  props: propsDoc$1w,
-  propTypes: propTypes$1z,
+  props: propsDoc$1x,
+  propTypes: propTypes$1A,
   displayName: "SpsCheckbox"
 });
 const SpsCheckboxExamples = {
@@ -6313,16 +6338,16 @@ const SpsCheckboxExamples = {
     }
   }
 };
-const propsDoc$1v = {
+const propsDoc$1w = {
   disabled: "boolean",
   href: "string",
   kind: "ClickableTagKind",
   onAdd: "() => void",
   onRemove: "() => void"
 };
-const propTypes$1y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1M.exports.bool,
-  href: propTypes$1M.exports.string,
+const propTypes$1z = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  disabled: propTypes$1N.exports.bool,
+  href: propTypes$1N.exports.string,
   kind: enumValue(ClickableTagKind),
   onAdd: fun(),
   onRemove: fun()
@@ -6393,8 +6418,8 @@ function SpsClickableTag(props2) {
   })));
 }
 Object.assign(SpsClickableTag, {
-  props: propsDoc$1v,
-  propTypes: propTypes$1y,
+  props: propsDoc$1w,
+  propTypes: propTypes$1z,
   displayName: "SpsClickableTag"
 });
 const SpsClickableTagExamples = {
@@ -14622,15 +14647,15 @@ var ConnectedDraggable = connect(makeMapStateToProps$1, mapDispatchToProps$1, nu
   areStatePropsEqual: isStrictEqual
 })(Draggable);
 ConnectedDraggable.defaultProps = defaultProps$1;
-const propsDoc$1u = {
+const propsDoc$1v = {
   content: "ReactNodeLike",
   icon: "SpsIcon",
   title: "string"
 };
-const propTypes$1x = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  content: propTypes$1M.exports.node,
+const propTypes$1y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  content: propTypes$1N.exports.node,
   icon: enumValue(SpsIcon),
-  title: propTypes$1M.exports.string
+  title: propTypes$1N.exports.string
 });
 function SpsCardHeader(props2) {
   const _a = props2, {
@@ -14662,15 +14687,15 @@ function SpsCardHeader(props2) {
   }, content));
 }
 Object.assign(SpsCardHeader, {
-  props: propsDoc$1u,
-  propTypes: propTypes$1x,
+  props: propsDoc$1v,
+  propTypes: propTypes$1y,
   displayName: "SpsCardHeader"
 });
-const propsDoc$1t = {
+const propsDoc$1u = {
   icon: "SpsIcon",
   kind: "TagKind"
 };
-const propTypes$1w = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$1x = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   icon: enumValue(SpsIcon),
   kind: enumValue(TagKind)
 });
@@ -14703,11 +14728,11 @@ function SpsTag(props2) {
   }), children);
 }
 Object.assign(SpsTag, {
-  props: propsDoc$1t,
-  propTypes: propTypes$1w,
+  props: propsDoc$1u,
+  propTypes: propTypes$1x,
   displayName: "SpsTag"
 });
-const propsDoc$1s = {
+const propsDoc$1t = {
   activateTab: "Function",
   active: "boolean",
   icon: "SpsIcon",
@@ -14717,13 +14742,13 @@ const propsDoc$1s = {
   tagKind: "TagKind",
   tagIcon: "SpsIcon"
 };
-const propTypes$1v = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  activateTab: propTypes$1M.exports.func,
-  active: propTypes$1M.exports.bool,
+const propTypes$1w = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  activateTab: propTypes$1N.exports.func,
+  active: propTypes$1N.exports.bool,
   icon: enumValue(SpsIcon),
-  label: propTypes$1M.exports.string,
-  index: propTypes$1M.exports.number,
-  tag: propTypes$1M.exports.string,
+  label: propTypes$1N.exports.string,
+  index: propTypes$1N.exports.number,
+  tag: propTypes$1N.exports.string,
   tagKind: enumValue(TagKind),
   tagIcon: enumValue(SpsIcon)
 });
@@ -14786,8 +14811,8 @@ function SpsCardTabbedPane(props2) {
   }, tag));
 }
 Object.assign(SpsCardTabbedPane, {
-  props: propsDoc$1s,
-  propTypes: propTypes$1v,
+  props: propsDoc$1t,
+  propTypes: propTypes$1w,
   displayName: "SpsCardTabbedPane"
 });
 function useTab(children, activeTab, isTabbedCard) {
@@ -14829,19 +14854,19 @@ function useTab(children, activeTab, isTabbedCard) {
   }, [activeTab, children]);
   return [currentlyActiveTab, activateTab];
 }
-const propsDoc$1r = {
+const propsDoc$1s = {
   activeTab: "string",
   footer: "ReactNodeOrRenderFn",
   headerContent: "ReactNodeOrRenderFn",
   headerIcon: "SpsIcon",
   headerTitle: "string"
 };
-const propTypes$1u = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  activeTab: propTypes$1M.exports.string,
+const propTypes$1v = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  activeTab: propTypes$1N.exports.string,
   footer: nodeOrRenderFn,
   headerContent: nodeOrRenderFn,
   headerIcon: enumValue(SpsIcon),
-  headerTitle: propTypes$1M.exports.string
+  headerTitle: propTypes$1N.exports.string
 });
 function SpsCard(props2) {
   React.useEffect(() => {
@@ -14908,11 +14933,11 @@ function SpsCard(props2) {
   }, contentOf(footer)));
 }
 Object.assign(SpsCard, {
-  props: propsDoc$1r,
-  propTypes: propTypes$1u,
+  props: propsDoc$1s,
+  propTypes: propTypes$1v,
   displayName: "SpsCard"
 });
-const propsDoc$1q = {
+const propsDoc$1r = {
   index: "number",
   key: "string",
   columnId: "string",
@@ -14921,14 +14946,14 @@ const propsDoc$1q = {
   onDelete: "(columnValue: string) => void",
   mandatory: "boolean"
 };
-const propTypes$1t = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  index: propTypes$1M.exports.number,
-  key: propTypes$1M.exports.string,
-  columnId: propTypes$1M.exports.string,
-  name: propTypes$1M.exports.string,
-  value: propTypes$1M.exports.string,
+const propTypes$1u = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  index: propTypes$1N.exports.number,
+  key: propTypes$1N.exports.string,
+  columnId: propTypes$1N.exports.string,
+  name: propTypes$1N.exports.string,
+  value: propTypes$1N.exports.string,
   onDelete: fun(),
-  mandatory: propTypes$1M.exports.bool
+  mandatory: propTypes$1N.exports.bool
 });
 function SpsColumnChooserColumn(props2) {
   const _a = props2, {
@@ -14984,20 +15009,20 @@ function SpsColumnChooserColumn(props2) {
   })))));
 }
 Object.assign(SpsColumnChooserColumn, {
-  props: propsDoc$1q,
-  propTypes: propTypes$1t,
+  props: propsDoc$1r,
+  propTypes: propTypes$1u,
   displayName: "SpsColumnChooserColumn"
 });
-const propsDoc$1p = {
+const propsDoc$1q = {
   maxSelectedColumns: "number",
   unselectedColumns: "ColumnProps[]",
   selectedColumns: "ColumnProps[]",
   onApplyChanges: "(selectedColumns: ColumnProps[]) => void"
 };
-const propTypes$1s = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  maxSelectedColumns: propTypes$1M.exports.number,
-  unselectedColumns: propTypes$1M.exports.array,
-  selectedColumns: propTypes$1M.exports.array,
+const propTypes$1t = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  maxSelectedColumns: propTypes$1N.exports.number,
+  unselectedColumns: propTypes$1N.exports.array,
+  selectedColumns: propTypes$1N.exports.array,
   onApplyChanges: fun()
 });
 function SpsColumnChooser(props2) {
@@ -15137,8 +15162,8 @@ function SpsColumnChooser(props2) {
   })), provided.placeholder)))));
 }
 Object.assign(SpsColumnChooser, {
-  props: propsDoc$1p,
-  propTypes: propTypes$1s,
+  props: propsDoc$1q,
+  propTypes: propTypes$1t,
   displayName: "SpsColumnChooser"
 });
 const SpsColumnChooserExamples = {
@@ -15170,11 +15195,11 @@ const SpsColumnChooserExamples = {
     }
   }
 };
-const propsDoc$1o = {
+const propsDoc$1p = {
   icon: { type: "SpsIcon", required: true },
   size: "SpsIconSize"
 };
-const propTypes$1r = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$1s = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   icon: enumValue(SpsIcon).isRequired,
   size: enumValue(SpsIconSize)
 });
@@ -15200,28 +15225,28 @@ function SpsI(props2) {
   }, rest));
 }
 Object.assign(SpsI, {
-  props: propsDoc$1o,
-  propTypes: propTypes$1r,
+  props: propsDoc$1p,
+  propTypes: propTypes$1s,
   displayName: "SpsI"
 });
 Object.assign(SpsI, {
-  props: propsDoc$1o,
-  propTypes: propTypes$1r,
+  props: propsDoc$1p,
+  propTypes: propTypes$1s,
   displayName: "SpsI"
 });
-const propsDoc$1n = {
+const propsDoc$1o = {
   borderless: "boolean",
   lean: "boolean",
   leaner: { type: "boolean", deprecated: true },
   widthPx: "number",
   widthRem: "number"
 };
-const propTypes$1q = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  borderless: propTypes$1M.exports.bool,
-  lean: propTypes$1M.exports.bool,
-  leaner: propTypes$1M.exports.bool,
-  widthPx: propTypes$1M.exports.number,
-  widthRem: propTypes$1M.exports.number
+const propTypes$1r = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  borderless: propTypes$1N.exports.bool,
+  lean: propTypes$1N.exports.bool,
+  leaner: propTypes$1N.exports.bool,
+  widthPx: propTypes$1N.exports.number,
+  widthRem: propTypes$1N.exports.number
 });
 function SpsContentRowCol(props2) {
   const _a = props2, {
@@ -15266,12 +15291,12 @@ function SpsContentRowCol(props2) {
   }), children);
 }
 Object.assign(SpsContentRowCol, {
-  props: propsDoc$1n,
-  propTypes: propTypes$1q,
+  props: propsDoc$1o,
+  propTypes: propTypes$1r,
   displayName: "SpsContentRowCol"
 });
-const propsDoc$1m = {};
-const propTypes$1p = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$1n = {};
+const propTypes$1q = __spreadValues({}, spsGlobalPropTypes);
 function SpsContentRowExpansion(props2) {
   const _a = props2, {
     children,
@@ -15292,11 +15317,11 @@ function SpsContentRowExpansion(props2) {
   }), children);
 }
 Object.assign(SpsContentRowExpansion, {
-  props: propsDoc$1m,
-  propTypes: propTypes$1p,
+  props: propsDoc$1n,
+  propTypes: propTypes$1q,
   displayName: "SpsContentRowExpansion"
 });
-const propsDoc$1l = {
+const propsDoc$1m = {
   alternateLayout: "boolean",
   initiallyExpanded: "boolean",
   cardSpacing: "boolean",
@@ -15309,18 +15334,18 @@ const propsDoc$1l = {
   selectable: "boolean",
   selected: "boolean"
 };
-const propTypes$1o = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  alternateLayout: propTypes$1M.exports.bool,
-  cardSpacing: propTypes$1M.exports.bool,
-  expanded: propTypes$1M.exports.bool,
-  initiallyExpanded: propTypes$1M.exports.bool,
+const propTypes$1p = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  alternateLayout: propTypes$1N.exports.bool,
+  cardSpacing: propTypes$1N.exports.bool,
+  expanded: propTypes$1N.exports.bool,
+  initiallyExpanded: propTypes$1N.exports.bool,
   onBeforeCollapsed: fun(),
   onBeforeExpanded: fun(),
   onSelectionChange: fun(),
   onCollapsed: fun(),
   onExpanded: fun(),
-  selectable: propTypes$1M.exports.bool,
-  selected: propTypes$1M.exports.bool
+  selectable: propTypes$1N.exports.bool,
+  selected: propTypes$1N.exports.bool
 });
 function SpsContentRow(props2) {
   const _a = props2, {
@@ -15401,8 +15426,8 @@ function SpsContentRow(props2) {
   }, /* @__PURE__ */ React.createElement("section", null, ContentRowCheckBox()), /* @__PURE__ */ React.createElement("section", null, ExpandoThingy())), columns), expansion);
 }
 Object.assign(SpsContentRow, {
-  props: propsDoc$1l,
-  propTypes: propTypes$1o,
+  props: propsDoc$1m,
+  propTypes: propTypes$1p,
   displayName: "SpsContentRow"
 });
 const SpsContentRowExamples = {
@@ -15871,7 +15896,7 @@ function parse2(value) {
 function weekOfMonth$1(date2) {
   return Math.floor((date2.clone().date(1).day() + date2.date() - 1) / 7);
 }
-const propsDoc$1k = {
+const propsDoc$1l = {
   disabled: "boolean",
   format: "string",
   maxDate: "string",
@@ -15881,15 +15906,15 @@ const propsDoc$1k = {
   placeholder: "string",
   value: "string"
 };
-const propTypes$1n = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1M.exports.bool,
-  format: propTypes$1M.exports.string,
-  maxDate: propTypes$1M.exports.string,
-  minDate: propTypes$1M.exports.string,
+const propTypes$1o = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  disabled: propTypes$1N.exports.bool,
+  format: propTypes$1N.exports.string,
+  maxDate: propTypes$1N.exports.string,
+  minDate: propTypes$1N.exports.string,
   onChange: fun(),
   onClickOutside: fun(),
-  placeholder: propTypes$1M.exports.string,
-  value: propTypes$1M.exports.string
+  placeholder: propTypes$1N.exports.string,
+  value: propTypes$1N.exports.string
 });
 function SpsDatepicker(props2) {
   const _a = props2, {
@@ -16252,8 +16277,8 @@ function SpsDatepicker(props2) {
   }))));
 }
 Object.assign(SpsDatepicker, {
-  props: propsDoc$1k,
-  propTypes: propTypes$1n,
+  props: propsDoc$1l,
+  propTypes: propTypes$1o,
   displayName: "SpsDatepicker"
 });
 const SpsDatepickerExamples = {
@@ -16348,7 +16373,7 @@ const SpsDatepickerExamples = {
     }
   }
 };
-const propsDoc$1j = {
+const propsDoc$1k = {
   placeholder: "string",
   disabled: "boolean",
   format: "string",
@@ -16359,13 +16384,13 @@ const propsDoc$1j = {
   value: "MomentRange",
   preset: "Duration"
 };
-const propTypes$1m = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  placeholder: propTypes$1M.exports.string,
-  disabled: propTypes$1M.exports.bool,
-  format: propTypes$1M.exports.string,
-  minDate: propTypes$1M.exports.string,
-  maxDate: propTypes$1M.exports.string,
-  availablePresets: propTypes$1M.exports.array,
+const propTypes$1n = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  placeholder: propTypes$1N.exports.string,
+  disabled: propTypes$1N.exports.bool,
+  format: propTypes$1N.exports.string,
+  minDate: propTypes$1N.exports.string,
+  maxDate: propTypes$1N.exports.string,
+  availablePresets: propTypes$1N.exports.array,
   onChange: fun(),
   value: impl(),
   preset: impl()
@@ -17013,8 +17038,8 @@ function SpsDateRangePicker(props2) {
   }) : "")));
 }
 Object.assign(SpsDateRangePicker, {
-  props: propsDoc$1j,
-  propTypes: propTypes$1m,
+  props: propsDoc$1k,
+  propTypes: propTypes$1n,
   displayName: "SpsDateRangePicker"
 });
 const SpsDateRangePickerExamples = {
@@ -21617,7 +21642,7 @@ const formatMaps = {
   LONG_FULLDATETIME: "LLLL",
   LONG_FULLDATETIME_ZONE: "LLLL z"
 };
-const propsDoc$1i = {
+const propsDoc$1j = {
   currentUser: "any",
   dateToFormat: "string | Date",
   format: "string",
@@ -21626,17 +21651,17 @@ const propsDoc$1i = {
   relativeHrs: "number",
   tz: "string"
 };
-const propTypes$1l = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  currentUser: propTypes$1M.exports.any,
-  dateToFormat: propTypes$1M.exports.oneOfType([
-    propTypes$1M.exports.string,
-    propTypes$1M.exports.instanceOf(Date)
+const propTypes$1m = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  currentUser: propTypes$1N.exports.any,
+  dateToFormat: propTypes$1N.exports.oneOfType([
+    propTypes$1N.exports.string,
+    propTypes$1N.exports.instanceOf(Date)
   ]),
-  format: propTypes$1M.exports.string,
-  locale: propTypes$1M.exports.string,
-  relative: propTypes$1M.exports.bool,
-  relativeHrs: propTypes$1M.exports.number,
-  tz: propTypes$1M.exports.string
+  format: propTypes$1N.exports.string,
+  locale: propTypes$1N.exports.string,
+  relative: propTypes$1N.exports.bool,
+  relativeHrs: propTypes$1N.exports.number,
+  tz: propTypes$1N.exports.string
 });
 function showRelative(dateToCheck, relative, relativeHrs) {
   if (!relativeHrs && !relative) {
@@ -21712,8 +21737,8 @@ function SpsDateTime(props2) {
   }));
 }
 Object.assign(SpsDateTime, {
-  props: propsDoc$1i,
-  propTypes: propTypes$1l,
+  props: propsDoc$1j,
+  propTypes: propTypes$1m,
   displayName: "SpsDateTime"
 });
 const SpsDatetimeExamples = {
@@ -21734,15 +21759,15 @@ const SpsDatetimeExamples = {
     }
   }
 };
-const propsDoc$1h = {
+const propsDoc$1i = {
   compact: "boolean",
   wideTerms: "boolean",
   widerTerms: "boolean"
 };
-const propTypes$1k = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  compact: propTypes$1M.exports.bool,
-  wideTerms: propTypes$1M.exports.bool,
-  widerTerms: propTypes$1M.exports.bool
+const propTypes$1l = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  compact: propTypes$1N.exports.bool,
+  wideTerms: propTypes$1N.exports.bool,
+  widerTerms: propTypes$1N.exports.bool
 });
 function SpsDescriptionList(props2) {
   const _a = props2, {
@@ -21782,20 +21807,20 @@ function SpsDescriptionList(props2) {
   }, rest), childrenWithProps);
 }
 Object.assign(SpsDescriptionList, {
-  props: propsDoc$1h,
-  propTypes: propTypes$1k,
+  props: propsDoc$1i,
+  propTypes: propTypes$1l,
   displayName: "SpsDescriptionList / SpsDl"
 });
 function SpsDl(p2) {
   return SpsDescriptionList(p2);
 }
 Object.assign(SpsDl, {
-  props: propsDoc$1h,
-  propTypes: propTypes$1k,
+  props: propsDoc$1i,
+  propTypes: propTypes$1l,
   displayName: "SpsDescriptionList / SpsDl"
 });
-const propsDoc$1g = {};
-const propTypes$1j = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$1h = {};
+const propTypes$1k = __spreadValues({}, spsGlobalPropTypes);
 function SpsDescriptionListDefinition(props2) {
   const _a = props2, {
     children,
@@ -21815,16 +21840,16 @@ function SpsDescriptionListDefinition(props2) {
   }, rest), children);
 }
 Object.assign(SpsDescriptionListDefinition, {
-  props: propsDoc$1g,
-  propTypes: propTypes$1j,
+  props: propsDoc$1h,
+  propTypes: propTypes$1k,
   displayName: "SpsDescriptionListDefinition / SpsDd"
 });
 function SpsDd(p2) {
   return SpsDescriptionListDefinition(p2);
 }
 Object.assign(SpsDd, {
-  props: propsDoc$1g,
-  propTypes: propTypes$1j,
+  props: propsDoc$1h,
+  propTypes: propTypes$1k,
   displayName: "SpsDescriptionListDefinition / SpsDd"
 });
 var TooltipVisibility;
@@ -21839,7 +21864,7 @@ function toggleTooltipState(state) {
 }
 const CARET_SPACING_PX = 13;
 const openTips = new Map();
-const propsDoc$1f = {
+const propsDoc$1g = {
   for: { type: "React.MutableRefObject<any> | string", required: true },
   hideDelay: "number",
   isShown: "TooltipVisibility",
@@ -21851,17 +21876,17 @@ const propsDoc$1f = {
   showOn: "TooltipShowTrigger",
   title: "string | ReactNode"
 };
-const propTypes$1i = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  for: propTypes$1M.exports.oneOfType([ref(), propTypes$1M.exports.string]).isRequired,
-  hideDelay: propTypes$1M.exports.number,
+const propTypes$1j = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  for: propTypes$1N.exports.oneOfType([ref(), propTypes$1N.exports.string]).isRequired,
+  hideDelay: propTypes$1N.exports.number,
   isShown: enumValue(TooltipVisibility),
   kind: enumValue(TooltipKind),
-  offsets: propTypes$1M.exports.arrayOf(propTypes$1M.exports.number),
+  offsets: propTypes$1N.exports.arrayOf(propTypes$1N.exports.number),
   onDeferred: fun(),
   position: enumValue(Position),
   altPosition: enumValue(Position),
   showOn: enumValue(TooltipShowTrigger),
-  title: propTypes$1M.exports.string || propTypes$1M.exports.node
+  title: propTypes$1N.exports.string || propTypes$1N.exports.node
 });
 function SpsTooltip({
   children,
@@ -22034,11 +22059,18 @@ function SpsTooltip({
   }, []);
   const portal = usePortal("sps-tooltip-portal");
   const portalContext = React.useContext(PortalContext);
-  const [posStyle, altPositionUsed] = shown ? getPosition(rootElement, forElementRef, position3, __spreadValues({
-    altPosition,
-    setMinWidth: false,
-    offsets: [offsets[0] - CARET_SPACING_PX, offsets[1] + getSecondaryOffset(position3)]
-  }, portalContext)) : [{}, false];
+  const [[posStyle, altPositionUsed], setPositionData] = React.useState([{}, false]);
+  React.useEffect(() => {
+    if (shown) {
+      setPositionData(getPosition(rootElement, forElementRef, position3, __spreadValues({
+        altPosition,
+        setMinWidth: false,
+        offsets: [offsets[0] - CARET_SPACING_PX, offsets[1] + getSecondaryOffset(position3)]
+      }, portalContext)));
+    } else {
+      setPositionData([{}, false]);
+    }
+  }, [shown, position3, altPosition, offsets[0], offsets[1], children]);
   const classes = clsx(unsafelyReplaceClassName || "sps-tooltip", "z-stratum-tip", `sps-tooltip--${kind}`, `sps-tooltip--pos-${(altPositionUsed ? altPosition : position3).replace(" ", "-")}`, shown && "sps-tooltip--shown", className);
   return portal(/* @__PURE__ */ React.createElement("div", {
     role: "tooltip",
@@ -22058,26 +22090,26 @@ function SpsTooltip({
   })));
 }
 Object.assign(SpsTooltip, {
-  props: propsDoc$1f,
-  propTypes: propTypes$1i,
+  props: propsDoc$1g,
+  propTypes: propTypes$1j,
   displayName: "SpsTooltip"
 });
-const propsDoc$1e = {
+const propsDoc$1f = {
   error: "boolean",
   errors: "ReactNodeOrRenderFn",
   help: "ReactNodeOrRenderFn",
   labelFor: "SpsFormFieldMeta<any>",
   required: "boolean"
 };
-const propTypes$1h = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  error: propTypes$1M.exports.bool,
+const propTypes$1i = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  error: propTypes$1N.exports.bool,
   errors: nodeOrRenderFn,
   help: nodeOrRenderFn,
-  labelFor: propTypes$1M.exports.oneOfType([
+  labelFor: propTypes$1N.exports.oneOfType([
     impl(),
     impl()
   ]),
-  required: propTypes$1M.exports.bool
+  required: propTypes$1N.exports.bool
 });
 function SpsDescriptionListTerm(props2) {
   const _a = props2, {
@@ -22133,16 +22165,16 @@ function SpsDescriptionListTerm(props2) {
   }, contentOf(tipKind === TooltipKind.ERROR ? errors : help)));
 }
 Object.assign(SpsDescriptionListTerm, {
-  props: propsDoc$1e,
-  propTypes: propTypes$1h,
+  props: propsDoc$1f,
+  propTypes: propTypes$1i,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
 function SpsDt(p2) {
   return SpsDescriptionListTerm(p2);
 }
 Object.assign(SpsDt, {
-  props: propsDoc$1e,
-  propTypes: propTypes$1h,
+  props: propsDoc$1f,
+  propTypes: propTypes$1i,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
 const SpsDescriptionListExamples = {
@@ -22620,19 +22652,19 @@ const SpsDropdownExamples = {
     }
   }
 };
-const propsDoc$1d = {
+const propsDoc$1e = {
   checked: "boolean",
   onChange: "ChangeEventHandler",
   indeterminate: "boolean",
   disabled: "boolean",
   options: "Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"
 };
-const propTypes$1g = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  checked: propTypes$1M.exports.bool,
+const propTypes$1h = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  checked: propTypes$1N.exports.bool,
   onChange: fun(),
-  indeterminate: propTypes$1M.exports.bool,
-  options: propTypes$1M.exports.arrayOf(propTypes$1M.exports.oneOfType([propTypes$1M.exports.func, propTypes$1M.exports.any])).isRequired,
-  disabled: propTypes$1M.exports.bool
+  indeterminate: propTypes$1N.exports.bool,
+  options: propTypes$1N.exports.arrayOf(propTypes$1N.exports.oneOfType([propTypes$1N.exports.func, propTypes$1N.exports.any])).isRequired,
+  disabled: propTypes$1N.exports.bool
 });
 function SpsCheckboxDropdown(props2) {
   const _a = props2, {
@@ -22666,14 +22698,14 @@ function SpsCheckboxDropdown(props2) {
   }));
 }
 Object.assign(SpsCheckboxDropdown, {
-  props: propsDoc$1d,
-  propTypes: propTypes$1g,
+  props: propsDoc$1e,
+  propTypes: propTypes$1h,
   displayName: "SpsCheckboxDropdown"
 });
-const propsDoc$1c = {
+const propsDoc$1d = {
   kind: "FeedbackBlockKind"
 };
-const propTypes$1f = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$1g = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   kind: enumValue(FeedbackBlockKind)
 });
 function SpsFeedbackBlock(props2) {
@@ -22704,8 +22736,8 @@ function SpsFeedbackBlock(props2) {
   }, children));
 }
 Object.assign(SpsFeedbackBlock, {
-  props: propsDoc$1c,
-  propTypes: propTypes$1f,
+  props: propsDoc$1d,
+  propTypes: propTypes$1g,
   displayName: "SpsFeedbackBlock"
 });
 const SpsFeedbackBlockExamples = {
@@ -22807,7 +22839,7 @@ const SpsFeedbackBlockExamples = {
     }
   }
 };
-const propsDoc$1b = {
+const propsDoc$1c = {
   errors: "ReactNodeOrRenderFn",
   formMeta: "SpsFormSetMeta<any>",
   legend: "string",
@@ -22816,16 +22848,16 @@ const propsDoc$1b = {
   onToggled: "(isEnabled: boolean) => void",
   tooltip: "string"
 };
-const propTypes$1e = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$1f = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   errors: nodeOrRenderFn,
   formArray: impl(),
   formGroup: impl(),
   formMeta: impl(),
-  legend: propTypes$1M.exports.string,
-  optional: propTypes$1M.exports.bool,
-  enabled: propTypes$1M.exports.bool,
+  legend: propTypes$1N.exports.string,
+  optional: propTypes$1N.exports.bool,
+  enabled: propTypes$1N.exports.bool,
   onToggled: fun(),
-  tooltip: propTypes$1M.exports.string
+  tooltip: propTypes$1N.exports.string
 });
 function SpsFieldset({
   children,
@@ -22905,8 +22937,8 @@ function SpsFieldset({
   }, contentOf(errors)), children));
 }
 Object.assign(SpsFieldset, {
-  props: propsDoc$1b,
-  propTypes: propTypes$1e,
+  props: propsDoc$1c,
+  propTypes: propTypes$1f,
   displayName: "SpsFieldset"
 });
 const SpsFieldsetExamples = {
@@ -23192,8 +23224,8 @@ const SpsFieldsetExamples = {
     }
   }
 };
-const propsDoc$1a = {};
-const propTypes$1d = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$1b = {};
+const propTypes$1e = __spreadValues({}, spsGlobalPropTypes);
 function SpsFocusedTaskActions(props2) {
   const _a = props2, {
     children,
@@ -23214,18 +23246,18 @@ function SpsFocusedTaskActions(props2) {
   }, children)));
 }
 Object.assign(SpsFocusedTaskActions, {
-  props: propsDoc$1a,
-  propTypes: propTypes$1d,
+  props: propsDoc$1b,
+  propTypes: propTypes$1e,
   displayName: "SpsFocusedTaskActions"
 });
-const propsDoc$19 = {
+const propsDoc$1a = {
   fullWidth: "boolean",
   isOpen: "boolean",
   onClose: "() => void"
 };
-const propTypes$1c = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  fullWidth: propTypes$1M.exports.bool,
-  isOpen: propTypes$1M.exports.bool,
+const propTypes$1d = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  fullWidth: propTypes$1N.exports.bool,
+  isOpen: propTypes$1N.exports.bool,
   onClose: fun()
 });
 function SpsFocusedTask(props2) {
@@ -23282,8 +23314,8 @@ function SpsFocusedTask(props2) {
   }, isOpen && content)), actions);
 }
 Object.assign(SpsFocusedTask, {
-  props: propsDoc$19,
-  propTypes: propTypes$1c,
+  props: propsDoc$1a,
+  propTypes: propTypes$1d,
   displayName: "SpsFocusedTask"
 });
 const SpsFocusedTaskExamples = {
@@ -24268,19 +24300,19 @@ const SpsAddRemoveFormRowExamples = {
     }
   }
 };
-const propsDoc$18 = {
+const propsDoc$19 = {
   imgSrc: "string",
   kind: "GrowlerKind",
   onClose: "() => void",
   persist: "boolean",
   title: "string"
 };
-const propTypes$1b = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  imgSrc: propTypes$1M.exports.string,
+const propTypes$1c = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  imgSrc: propTypes$1N.exports.string,
   kind: enumValue(GrowlerKind),
   onClose: fun(),
-  persist: propTypes$1M.exports.bool,
-  title: propTypes$1M.exports.string
+  persist: propTypes$1N.exports.bool,
+  title: propTypes$1N.exports.string
 });
 function SpsGrowler(props2) {
   const _a = props2, {
@@ -24386,8 +24418,8 @@ function SpsGrowler(props2) {
   })))));
 }
 Object.assign(SpsGrowler, {
-  props: propsDoc$18,
-  propTypes: propTypes$1b,
+  props: propsDoc$19,
+  propTypes: propTypes$1c,
   displayName: "SpsGrowler"
 });
 const SpsGrowlerExamples = {
@@ -24762,18 +24794,18 @@ const SpsGrowlerExamples = {
     }
   }
 };
-const propsDoc$17 = {
+const propsDoc$18 = {
   disabled: "boolean",
   min: "number",
   max: "number",
   step: "number",
   onValueChange: "(newValue: number) => void"
 };
-const propTypes$1a = __spreadValues({
-  disabled: propTypes$1M.exports.bool,
-  min: propTypes$1M.exports.number,
-  max: propTypes$1M.exports.number,
-  step: propTypes$1M.exports.number,
+const propTypes$1b = __spreadValues({
+  disabled: propTypes$1N.exports.bool,
+  min: propTypes$1N.exports.number,
+  max: propTypes$1N.exports.number,
+  step: propTypes$1N.exports.number,
   onValueChange: fun()
 }, spsGlobalPropTypes);
 function SpsIncrementor(props2) {
@@ -24876,8 +24908,8 @@ function SpsIncrementor(props2) {
   }))));
 }
 Object.assign(SpsIncrementor, {
-  props: propsDoc$17,
-  propTypes: propTypes$1a,
+  props: propsDoc$18,
+  propTypes: propTypes$1b,
   displayName: "SpsIncrementor"
 });
 const SpsIncrementorExamples = {
@@ -24916,7 +24948,7 @@ function SpsInsights(props2) {
     className: "insight-tile-wrapper"
   }, children);
 }
-const propsDoc$16 = {
+const propsDoc$17 = {
   horizontal: "boolean",
   icon: "SpsIcon",
   kind: "SpsInsightTileKind",
@@ -24925,14 +24957,14 @@ const propsDoc$16 = {
   partnerCount: "number",
   totalPartners: "number"
 };
-const propTypes$19 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  horizontal: propTypes$1M.exports.bool,
+const propTypes$1a = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  horizontal: propTypes$1N.exports.bool,
   icon: enumValue(SpsIcon),
   kind: enumValue(SpsInsightTileKind),
-  title: propTypes$1M.exports.string,
-  metric: propTypes$1M.exports.number || propTypes$1M.exports.string,
-  partnerCount: propTypes$1M.exports.number,
-  totalPartners: propTypes$1M.exports.number
+  title: propTypes$1N.exports.string,
+  metric: propTypes$1N.exports.number || propTypes$1N.exports.string,
+  partnerCount: propTypes$1N.exports.number,
+  totalPartners: propTypes$1N.exports.number
 });
 function SpsInsightTile(props2) {
   const _a = props2, {
@@ -24992,8 +25024,8 @@ function SpsInsightTile(props2) {
   }, t2("design-system:insightTile.partners")))));
 }
 Object.assign(SpsInsightTile, {
-  props: propsDoc$16,
-  propTypes: propTypes$19,
+  props: propsDoc$17,
+  propTypes: propTypes$1a,
   displayName: "SpsInsightTile"
 });
 const SpsInsightTileExamples = {
@@ -25267,11 +25299,11 @@ const SpsInsightTileExamples = {
     }
   }
 };
-const propsDoc$15 = {
+const propsDoc$16 = {
   inline: "boolean"
 };
-const propTypes$18 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  inline: propTypes$1M.exports.bool
+const propTypes$19 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  inline: propTypes$1N.exports.bool
 });
 function SpsKeyValueList(props2) {
   const _a = props2, {
@@ -25294,16 +25326,16 @@ function SpsKeyValueList(props2) {
   }, rest), children);
 }
 Object.assign(SpsKeyValueList, {
-  props: propsDoc$15,
-  propTypes: propTypes$18,
+  props: propsDoc$16,
+  propTypes: propTypes$19,
   displayName: "SpsKeyValueList"
 });
-const propsDoc$14 = {
+const propsDoc$15 = {
   itemKey: { type: "string | nodeOrRenderFn", required: true },
   titleColor: "KeyValueListTitleColor"
 };
-const propTypes$17 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  itemKey: propTypes$1M.exports.string.isRequired || nodeOrRenderFn.isRequired,
+const propTypes$18 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  itemKey: propTypes$1N.exports.string.isRequired || nodeOrRenderFn.isRequired,
   titleColor: enumValue(KeyValueListTitleColor)
 });
 function SpsKeyValueListItem(props2) {
@@ -25335,8 +25367,8 @@ function SpsKeyValueListItem(props2) {
   }, children));
 }
 Object.assign(SpsKeyValueListItem, {
-  props: propsDoc$14,
-  propTypes: propTypes$17,
+  props: propsDoc$15,
+  propTypes: propTypes$18,
   displayName: "SpsKeyValueListItem"
 });
 const SpsKeyValueListExamples = {
@@ -25379,7 +25411,7 @@ const SpsKeyValueListExamples = {
     }
   }
 };
-const propsDoc$13 = {
+const propsDoc$14 = {
   for: { type: "SpsFormMetaBase<any>", required: true },
   description: "string",
   stronglySuggested: "boolean",
@@ -25388,16 +25420,16 @@ const propsDoc$13 = {
   helpIconColor: "string",
   errors: "ReactNodeOrRenderFn"
 };
-const propTypes$16 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  description: propTypes$1M.exports.string,
-  for: propTypes$1M.exports.oneOfType([
+const propTypes$17 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  description: propTypes$1N.exports.string,
+  for: propTypes$1N.exports.oneOfType([
     impl(),
     impl()
   ]).isRequired,
-  stronglySuggested: propTypes$1M.exports.bool,
+  stronglySuggested: propTypes$1N.exports.bool,
   help: nodeOrRenderFn,
   helpIcon: enumValue(SpsIcon),
-  helpIconColor: propTypes$1M.exports.string,
+  helpIconColor: propTypes$1N.exports.string,
   errors: nodeOrRenderFn
 });
 function SpsLabel(_o) {
@@ -25593,8 +25625,8 @@ function SpsLabel(_o) {
   }, description));
 }
 Object.assign(SpsLabel, {
-  props: propsDoc$13,
-  propTypes: propTypes$16,
+  props: propsDoc$14,
+  propTypes: propTypes$17,
   displayName: "SpsLabel"
 });
 const SpsLabelExamples = {
@@ -25812,13 +25844,13 @@ const SpsLabelExamples = {
     }
   }
 };
-const propsDoc$12 = {
+const propsDoc$13 = {
   clearSelected: { type: "() => void", required: true },
   itemsSelected: { type: "string | number", required: true }
 };
-const propTypes$15 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$16 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   clearSelected: fun().isRequired,
-  itemsSelected: propTypes$1M.exports.oneOfType([propTypes$1M.exports.string, propTypes$1M.exports.number])
+  itemsSelected: propTypes$1N.exports.oneOfType([propTypes$1N.exports.string, propTypes$1N.exports.number])
 });
 function SpsListActionBar(props2) {
   const _a = props2, {
@@ -25868,8 +25900,8 @@ function SpsListActionBar(props2) {
   }, t2("design-system:listActionBar.clearSelected")))));
 }
 Object.assign(SpsListActionBar, {
-  props: propsDoc$12,
-  propTypes: propTypes$15,
+  props: propsDoc$13,
+  propTypes: propTypes$16,
   displayName: "SpsListActionBar"
 });
 const getScrollParent = (node) => {
@@ -26065,18 +26097,18 @@ const usePinnedTableHeadStyle = (containerRef) => {
     };
   });
 };
-const propsDoc$11 = {
+const propsDoc$12 = {
   controlCell: "boolean",
   currentSort: "Array<SortedColumn>",
   onSortChange: "SortChangeHandler",
   sortKey: "string"
 };
-const propTypes$14 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  controlCell: propTypes$1M.exports.bool,
-  currentSort: propTypes$1M.exports.arrayOf(impl()),
+const propTypes$15 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  controlCell: propTypes$1N.exports.bool,
+  currentSort: propTypes$1N.exports.arrayOf(impl()),
   onSortChange: fun(),
-  sortKey: propTypes$1M.exports.string,
-  pinned: propTypes$1M.exports.bool
+  sortKey: propTypes$1N.exports.string,
+  pinned: propTypes$1N.exports.bool
 });
 function SpsTableHeader(props2) {
   const _a = props2, {
@@ -26135,24 +26167,24 @@ function SpsTableHeader(props2) {
   }, children));
 }
 Object.assign(SpsTableHeader, {
-  props: propsDoc$11,
-  propTypes: propTypes$14,
+  props: propsDoc$12,
+  propTypes: propTypes$15,
   displayName: "SpsTableHeader"
 });
 function SpsTh(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableHeader, __spreadValues({}, props2));
 }
 Object.assign(SpsTh, {
-  props: propsDoc$11,
-  propTypes: propTypes$14,
+  props: propsDoc$12,
+  propTypes: propTypes$15,
   displayName: "SpsTh"
 });
-const propsDoc$10 = {
+const propsDoc$11 = {
   currentSort: "Array<SortedColumn>",
   onSortChange: "SortChangeHandler"
 };
-const propTypes$13 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  currentSort: propTypes$1M.exports.arrayOf(impl()),
+const propTypes$14 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  currentSort: propTypes$1N.exports.arrayOf(impl()),
   onSortChange: fun()
 });
 function SpsTableRow(props2) {
@@ -26188,26 +26220,26 @@ function SpsTableRow(props2) {
   }));
 }
 Object.assign(SpsTableRow, {
-  props: propsDoc$10,
-  propTypes: propTypes$13,
+  props: propsDoc$11,
+  propTypes: propTypes$14,
   displayName: "SpsTableRow"
 });
 function SpsTr(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableRow, __spreadValues({}, props2));
 }
 Object.assign(SpsTr, {
-  props: propsDoc$10,
-  propTypes: propTypes$13,
+  props: propsDoc$11,
+  propTypes: propTypes$14,
   displayName: "SpsTr"
 });
-const propsDoc$$ = {
+const propsDoc$10 = {
   currentSort: "Array<SortedColumn>",
   onSortChange: "SortChangeHandler"
 };
-const propTypes$12 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$13 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onSortChange: fun(),
-  currentSort: propTypes$1M.exports.arrayOf(impl()),
-  pinned: propTypes$1M.exports.bool
+  currentSort: propTypes$1N.exports.arrayOf(impl()),
+  pinned: propTypes$1N.exports.bool
 });
 function SpsTableHead(props2) {
   const _a = props2, {
@@ -26243,27 +26275,27 @@ function SpsTableHead(props2) {
   }));
 }
 Object.assign(SpsTableHead, {
-  props: propsDoc$$,
-  propTypes: propTypes$12,
+  props: propsDoc$10,
+  propTypes: propTypes$13,
   displayName: "SpsTableHead"
 });
 function SpsThead(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableHead, __spreadValues({}, props2));
 }
 Object.assign(SpsThead, {
-  props: propsDoc$$,
-  propTypes: propTypes$12,
+  props: propsDoc$10,
+  propTypes: propTypes$13,
   displayName: "SpsThead"
 });
-const propsDoc$_ = {
+const propsDoc$$ = {
   sort: "SortedColumn",
   onSortChange: "SortChangeHandler",
   selectable: "boolean"
 };
-const propTypes$11 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$12 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onSortChange: fun(),
-  sort: propTypes$1M.exports.arrayOf(impl()),
-  selectable: propTypes$1M.exports.bool
+  sort: propTypes$1N.exports.arrayOf(impl()),
+  selectable: propTypes$1N.exports.bool
 });
 function SpsTable(props2) {
   const _a = props2, {
@@ -26318,12 +26350,12 @@ function SpsTable(props2) {
   })));
 }
 Object.assign(SpsTable, {
-  props: propsDoc$_,
-  propTypes: propTypes$11,
+  props: propsDoc$$,
+  propTypes: propTypes$12,
   displayName: "SpsTable"
 });
-const propsDoc$Z = {};
-const propTypes$10 = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$_ = {};
+const propTypes$11 = __spreadValues({}, spsGlobalPropTypes);
 function SpsTableBody(props2) {
   const _a = props2, {
     children,
@@ -26343,34 +26375,34 @@ function SpsTableBody(props2) {
   }, rest), children);
 }
 Object.assign(SpsTableBody, {
-  props: propsDoc$Z,
-  propTypes: propTypes$10,
+  props: propsDoc$_,
+  propTypes: propTypes$11,
   displayName: "SpsTableBody"
 });
 function SpsTbody(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableBody, __spreadValues({}, props2));
 }
 Object.assign(SpsTbody, {
-  props: propsDoc$Z,
-  propTypes: propTypes$10,
+  props: propsDoc$_,
+  propTypes: propTypes$11,
   displayName: "SpsTbody"
 });
-const propsDoc$Y = {
+const propsDoc$Z = {
   buttonCell: "boolean",
   controlCell: "boolean",
   wrap: "SpsTableCellWrapWidth"
 };
-const propTypes$$ = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  buttonCell: propTypes$1M.exports.bool,
-  controlCell: propTypes$1M.exports.bool,
-  wrap: propTypes$1M.exports.oneOf([
+const propTypes$10 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  buttonCell: propTypes$1N.exports.bool,
+  controlCell: propTypes$1N.exports.bool,
+  wrap: propTypes$1N.exports.oneOf([
     200,
     300,
     400,
     500,
     600
   ]),
-  pinned: propTypes$1M.exports.bool
+  pinned: propTypes$1N.exports.bool
 });
 function SpsTableCell(props2) {
   const _a = props2, {
@@ -26403,20 +26435,20 @@ function SpsTableCell(props2) {
   }, rest), children);
 }
 Object.assign(SpsTableCell, {
-  props: propsDoc$Y,
-  propTypes: propTypes$$,
+  props: propsDoc$Z,
+  propTypes: propTypes$10,
   displayName: "SpsTableCell"
 });
 function SpsTd(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableCell, __spreadValues({}, props2));
 }
 Object.assign(SpsTd, {
-  props: propsDoc$Y,
-  propTypes: propTypes$$,
+  props: propsDoc$Z,
+  propTypes: propTypes$10,
   displayName: "SpsTd"
 });
-const propsDoc$X = {};
-const propTypes$_ = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$Y = {};
+const propTypes$$ = __spreadValues({}, spsGlobalPropTypes);
 const CSS_BLOCK$3 = "sps-icon-button-panel";
 function SpsIconButtonPanel(_q) {
   var _r = _q, {
@@ -26435,8 +26467,8 @@ function SpsIconButtonPanel(_q) {
   }, rest), iconButtons);
 }
 Object.assign(SpsIconButtonPanel, {
-  props: propsDoc$X,
-  propTypes: propTypes$_,
+  props: propsDoc$Y,
+  propTypes: propTypes$$,
   displayName: "SpsIconButtonPanel"
 });
 const SpsTableExamples = {
@@ -27620,8 +27652,8 @@ const SpsListActionBarExamples = {
     }
   }
 };
-const propTypes$Z = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  tabs: propTypes$1M.exports.arrayOf(impl()).isRequired,
+const propTypes$_ = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  tabs: propTypes$1N.exports.arrayOf(impl()).isRequired,
   activeTab: impl(),
   onTabChange: fun()
 });
@@ -27685,18 +27717,300 @@ function SpsTabs(props2) {
   }, tab2.tag)))));
 }
 Object.assign(SpsTabs, {
-  propTypes: propTypes$Z,
+  propTypes: propTypes$_,
   displayName: "SpsTabs"
 });
+const propsDoc$X = {
+  resultsCount: "number",
+  totalResults: "number",
+  onClear: "() => void"
+};
+const propTypes$Z = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  resultsCount: propTypes$1N.exports.number,
+  totalResults: propTypes$1N.exports.number,
+  onClear: fun()
+});
+function SpsSearchResultsBar(props2) {
+  const _a = props2, {
+    children,
+    className,
+    resultsCount,
+    totalResults,
+    onClear,
+    "data-testid": testId,
+    unsafelyReplaceClassName
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "className",
+    "resultsCount",
+    "totalResults",
+    "onClear",
+    "data-testid",
+    "unsafelyReplaceClassName"
+  ]);
+  const { t: t2 } = React.useContext(I18nContext);
+  const classes = clsx(unsafelyReplaceClassName || "sps-search-results-bar", className);
+  const [
+    count,
+    ofText,
+    total
+  ] = t2("design-system:searchResultsBar.count", { count: resultsCount, total: totalResults }).split(" ");
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+    className: classes,
+    "data-testid": `${testId}`
+  }, rest), /* @__PURE__ */ React.createElement("span", {
+    className: "sps-search-results-bar__label",
+    "data-testid": `${testId}__label`
+  }, t2("design-system:searchResultsBar.matchingResults")), count && !Number.isNaN(Number(count)) && /* @__PURE__ */ React.createElement("span", {
+    className: "sps-search-results-bar__count",
+    "data-testid": `${testId}__count`
+  }, /* @__PURE__ */ React.createElement("i", {
+    className: "sps-icon sps-icon-double-angle-right"
+  }), /* @__PURE__ */ React.createElement("span", null, count)), total && !Number.isNaN(Number(total)) && /* @__PURE__ */ React.createElement("span", {
+    className: "sps-search-results-bar__total",
+    "data-testid": `${testId}__total`
+  }, ofText, " ", total), /* @__PURE__ */ React.createElement("div", {
+    className: "sps-search-results-bar__buttons",
+    "data-testid": `${testId}__button`
+  }, /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    onClick: onClear
+  }, t2("design-system:searchResultsBar.clear"))));
+}
+Object.assign(SpsSearchResultsBar, {
+  props: propsDoc$X,
+  propTypes: propTypes$Z,
+  displayName: "SpsSearchResultsBar"
+});
 const propsDoc$W = {
+  results: "number",
+  selections: "{ [key: string]: string[] }",
+  zeroStateText: "string",
+  onClear: "() => void"
+};
+const propTypes$Y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  results: propTypes$1N.exports.number,
+  selections: impl(),
+  zeroStateText: propTypes$1N.exports.string,
+  onClear: fun()
+});
+function SpsSearchResultsBarV2(props2) {
+  const _a = props2, {
+    className,
+    results = 0,
+    selections,
+    zeroStateText,
+    onClear,
+    "data-testid": testId,
+    unsafelyReplaceClassName
+  } = _a, rest = __objRest(_a, [
+    "className",
+    "results",
+    "selections",
+    "zeroStateText",
+    "onClear",
+    "data-testid",
+    "unsafelyReplaceClassName"
+  ]);
+  const { t: t2 } = React.useContext(I18nContext);
+  const classes = clsx(unsafelyReplaceClassName || "sps-search-results-bar-v2", className);
+  const filteredSelections = selections ? Object.keys(selections).reduce((acc, value) => {
+    if (selections[value].length > 0) {
+      acc[value] = selections[value];
+    }
+    return acc;
+  }, {}) : {};
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+    className: classes,
+    "data-testid": `${testId}`
+  }, rest), /* @__PURE__ */ React.createElement("div", {
+    className: "sps-search-results-bar-v2__results"
+  }, /* @__PURE__ */ React.createElement("span", {
+    "data-testid": `${testId}__label`
+  }, t2("design-system:searchResultsBar.results")), /* @__PURE__ */ React.createElement(SpsTag, {
+    kind: TagKind.INFO
+  }, /* @__PURE__ */ React.createElement("span", null, results))), /* @__PURE__ */ React.createElement("div", {
+    className: "sps-search-results-bar-v2__selections"
+  }, Object.keys(filteredSelections).length > 0 ? Object.keys(filteredSelections).map((selection, i2) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
+    key: i2,
+    className: "sps-search-results-bar-v2__selection"
+  }, selection, ":"), filteredSelections[selection].map((label, j) => /* @__PURE__ */ React.createElement(SpsTag, {
+    key: j,
+    kind: TagKind.KEY
+  }, /* @__PURE__ */ React.createElement("span", null, label))))) : /* @__PURE__ */ React.createElement("span", {
+    className: "font-italic"
+  }, zeroStateText || t2("design-system:searchResultsBar.noAdvancedSearchSelections"))), /* @__PURE__ */ React.createElement("div", {
+    className: "sps-search-results-bar-v2__buttons",
+    "data-testid": `${testId}__button`
+  }, /* @__PURE__ */ React.createElement(SpsButton, {
+    kind: ButtonKind.LINK,
+    onClick: onClear
+  }, t2("design-system:searchResultsBar.clearResults"))));
+}
+Object.assign(SpsSearchResultsBarV2, {
+  props: propsDoc$W,
+  propTypes: propTypes$Y,
+  displayName: "SpsSearchResultsBarV2"
+});
+const SpsSearchResultsBarExamples = {
+  basic: {
+    label: "Basic",
+    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "SpsSearchResultsBarV2 should be used with List Toolbar and Advanced Search."), /* @__PURE__ */ React.createElement("p", null, "For more examples go to the Advanced Search section on the", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "list-toolbar"
+    }, "List Toolbar"), " page.")),
+    examples: {
+      basic: {
+        react: code`
+                    function Component() {
+                      
+                      const [advSearch, setAdvSearch] = React.useState({
+                        isOpen: false
+                      });
+                    
+                      const [showSearchBar, setShowSearchBar] = React.useState(true);
+
+                      const [results, setResults] = React.useState(10);
+
+                      const initialSelections = {
+                        sender: ["Aktie Sports","Modells Sporting Goods", "Perry Sport"],
+                        receiver: ["FGL Sports", "Foot Asylum", "Hervis", "Lovell Rugby"],
+                      };
+
+                      const [selections, setSelections] = React.useState(initialSelections);
+                      
+                      const initValue = {
+                        searchText: "",
+                      };
+
+                      const { formValue, formMeta, updateForm } = useSpsForm(initValue);
+
+                      function handleToggleAdvancedSearch(isOpen) {
+                        setAdvSearch({ isOpen });
+                      }
+
+                      function handleAdvancedSearchSubmit() {
+                        console.log("submit");
+                        setResults(10);
+                        setSelections(initialSelections);
+                      }
+
+                      function handleClear() {
+                          setResults(0);
+                          setSelections({});
+                      }
+                  
+                      return (
+                        <>
+                            <SpsListToolbar advancedSearch={advSearch}
+                                onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                            >
+                                <SpsListToolbarSearch>
+                                    <SpsTextInput
+                                        value={formValue.searchText}
+                                        formMeta={formMeta.fields.searchText}
+                                        placeholder="Search fields"
+                                    />
+                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />
+                                </SpsListToolbarSearch>
+                                <SpsSearchResultsBarV2
+                                  results={results}
+                                  onClear={handleClear}
+                                  selections={selections}
+                                />
+                            </SpsListToolbar>
+                            <SpsAdvancedSearch {...advSearch} onSubmit={handleAdvancedSearchSubmit}>
+                                <i>insert form here</i>
+                            </SpsAdvancedSearch>
+                        </>
+                      )
+                  }
+                `
+      }
+    }
+  },
+  customText: {
+    label: "Custom Text",
+    description: () => /* @__PURE__ */ React.createElement("p", null, "You can pass in custom text to be displayed when there are no selections."),
+    examples: {
+      customText: {
+        react: code`
+                    function Component() {
+                      const [advSearch, setAdvSearch] = React.useState({
+                        isOpen: false
+                      });
+                    
+                      const [showSearchBar, setShowSearchBar] = React.useState(true);
+
+                      const [results, setResults] = React.useState(0);
+
+                      const initialSelections = {
+                        sender: ["Aktie Sports","Modells Sporting Goods", "Perry Sport"],
+                        receiver: ["FGL Sports", "Foot Asylum", "Hervis", "Lovell Rugby"],
+                      };
+
+                      const [selections, setSelections] = React.useState({});
+                      
+                      const initValue = {
+                        searchText: "",
+                      };
+
+                      const { formValue, formMeta, updateForm } = useSpsForm(initValue);
+
+                      function handleToggleAdvancedSearch(isOpen) {
+                        setAdvSearch({ isOpen });
+                      }
+
+                      function handleAdvancedSearchSubmit() {
+                        console.log("submit");
+                        setResults(10);
+                        setSelections(initialSelections);
+                      }
+
+                      function handleClear() {
+                          setResults(0);
+                          setSelections({});
+                      }
+                  
+                      return (
+                        <>
+                            <SpsListToolbar advancedSearch={advSearch}
+                                onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                            >
+                                <SpsListToolbarSearch>
+                                    <SpsTextInput
+                                        value={formValue.searchText}
+                                        formMeta={formMeta.fields.searchText}
+                                        placeholder="Search fields"
+                                    />
+                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />
+                                </SpsListToolbarSearch>
+                                <SpsSearchResultsBarV2
+                                  results={results}
+                                  onClear={handleClear}
+                                  selections={selections}
+                                  zeroStateText="There are no selections here"
+                                />
+                            </SpsListToolbar>
+                            <SpsAdvancedSearch {...advSearch} onSubmit={handleAdvancedSearchSubmit}>
+                                <i>insert form here</i>
+                            </SpsAdvancedSearch>
+                        </>
+                      )
+                  }
+                `
+      }
+    }
+  }
+};
+const propsDoc$V = {
   formMeta: "SpsFormSetMeta<any>",
   stacked: "boolean"
 };
-const propTypes$Y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$X = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   formArray: impl(),
   formGroup: impl(),
   formMeta: impl(),
-  stacked: propTypes$1M.exports.bool
+  stacked: propTypes$1N.exports.bool
 });
 function SpsInputGroup(_s) {
   var _t = _s, {
@@ -27741,14 +28055,14 @@ function SpsInputGroup(_s) {
   }, children));
 }
 Object.assign(SpsInputGroup, {
-  props: propsDoc$W,
-  propTypes: propTypes$Y,
+  props: propsDoc$V,
+  propTypes: propTypes$X,
   displayName: "SpsInputGroup"
 });
-const propsDoc$V = {
+const propsDoc$U = {
   onSubmit: "FormEventHandler"
 };
-const propTypes$X = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$W = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onSubmit: fun()
 });
 function SpsListToolbarSearch(props2) {
@@ -27771,12 +28085,12 @@ function SpsListToolbarSearch(props2) {
   }, children));
 }
 Object.assign(SpsListToolbarSearch, {
-  props: propsDoc$V,
-  propTypes: propTypes$X,
+  props: propsDoc$U,
+  propTypes: propTypes$W,
   displayName: "SpsListToolbarSearch"
 });
-const propsDoc$U = {};
-const propTypes$W = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$T = {};
+const propTypes$V = __spreadValues({}, spsGlobalPropTypes);
 function SpsListToolbarSearchInfo(props2) {
   const {
     children
@@ -27784,11 +28098,11 @@ function SpsListToolbarSearchInfo(props2) {
   return /* @__PURE__ */ React.createElement("div", null, children);
 }
 Object.assign(SpsListToolbarSearchInfo, {
-  props: propsDoc$U,
-  propTypes: propTypes$W,
+  props: propsDoc$T,
+  propTypes: propTypes$V,
   displayName: "SpsListToolbarSearchInfo"
 });
-const propsDoc$T = {
+const propsDoc$S = {
   activeTab: "SpsTab",
   advancedSearch: "{ isOpen: boolean, enteredFields: number }",
   onToggleAdvancedSearch: "(boolean) => void",
@@ -27799,23 +28113,25 @@ const propsDoc$T = {
   selectable: "boolean",
   isSelected: "boolean",
   isIndeterminate: "boolean",
-  onSelectionChange: "(boolean) => void"
+  onSelectionChange: "(boolean) => void",
+  pinResultsBar: "boolean"
 };
-const propTypes$V = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$U = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   activeTab: impl(),
-  advancedSearch: propTypes$1M.exports.shape({
-    isOpen: propTypes$1M.exports.bool,
-    enteredFields: propTypes$1M.exports.number
+  advancedSearch: propTypes$1N.exports.shape({
+    isOpen: propTypes$1N.exports.bool,
+    enteredFields: propTypes$1N.exports.number
   }),
   onToggleAdvancedSearch: fun(),
   onTabChange: fun(),
-  title: propTypes$1M.exports.string,
-  tabs: propTypes$1M.exports.arrayOf(impl()),
+  title: propTypes$1N.exports.string,
+  tabs: propTypes$1N.exports.arrayOf(impl()),
   onToolbarPinned: fun(),
-  selectable: propTypes$1M.exports.bool,
-  isSelected: propTypes$1M.exports.bool,
-  isIndeterminate: propTypes$1M.exports.bool,
-  onSelectionChange: fun()
+  selectable: propTypes$1N.exports.bool,
+  isSelected: propTypes$1N.exports.bool,
+  isIndeterminate: propTypes$1N.exports.bool,
+  onSelectionChange: fun(),
+  pinResultsBar: propTypes$1N.exports.bool
 });
 function SpsListToolbar(props2) {
   const _a = props2, {
@@ -27833,6 +28149,7 @@ function SpsListToolbar(props2) {
     isSelected,
     isIndeterminate,
     onSelectionChange,
+    pinResultsBar,
     "data-testid": testId
   } = _a, rest = __objRest(_a, [
     "activeTab",
@@ -27849,6 +28166,7 @@ function SpsListToolbar(props2) {
     "isSelected",
     "isIndeterminate",
     "onSelectionChange",
+    "pinResultsBar",
     "data-testid"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
@@ -27921,10 +28239,12 @@ function SpsListToolbar(props2) {
   const [
     listToolbarSearch,
     listToolbarSearchInfo,
+    searchResultsBar,
     otherChildren
   ] = selectChildren(children, [
     { type: SpsListToolbarSearch },
-    { type: SpsListToolbarSearchInfo }
+    { type: SpsListToolbarSearchInfo },
+    { type: SpsSearchResultsBarV2 }
   ]);
   return /* @__PURE__ */ React.createElement("div", {
     className: "sps-list-toolbar__wrapper",
@@ -27933,7 +28253,9 @@ function SpsListToolbar(props2) {
     className: classes,
     "data-testid": testId,
     ref: rootElement
-  }, rest), !!selectable && /* @__PURE__ */ React.createElement("div", {
+  }, rest), /* @__PURE__ */ React.createElement("div", {
+    className: "sps-list-toolbar__content"
+  }, !!selectable && /* @__PURE__ */ React.createElement("div", {
     className: "sps-list-toolbar__selection-controls"
   }, /* @__PURE__ */ React.createElement(SpsCheckbox, {
     checked: isSelected,
@@ -27967,11 +28289,11 @@ function SpsListToolbar(props2) {
     value: { fixed: true }
   }, otherChildren)) : /* @__PURE__ */ React.createElement("div", {
     className: "sps-list-toolbar__header-content"
-  }, otherChildren)));
+  }, otherChildren)), /* @__PURE__ */ React.createElement("div", null, (!isPinned || isPinned && pinResultsBar) && searchResultsBar)));
 }
 Object.assign(SpsListToolbar, {
-  props: propsDoc$T,
-  propTypes: propTypes$V,
+  props: propsDoc$S,
+  propTypes: propTypes$U,
   displayName: "SpsListToolbar"
 });
 function ContentOrderExample() {
@@ -28313,6 +28635,185 @@ const SpsListToolbarExamples = {
                         )
                     }
                 `
+      },
+      withResultsBar: {
+        description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement("p", null, "You can include ", /* @__PURE__ */ React.createElement(NavigateTo, {
+          to: "search-results-bar"
+        }, "Search Results Bar"), " (SpsSearchResultsBarV2)."),
+        react: code`
+                    function Component() {
+                      const senderOptions = ["Aktie Sports", "FGL Sports","Modells Sporting Goods", "Perry Sport", "Sportman Warhouse Australia"];
+                      const receiverOptions = ["FGL Sports", "Foot Asylum", "Hervis", "Lovell Rugby", "Aktie Sports"];    
+                      const doctypeOptions = [".doc", ".txt", ".pdf"];    
+                      const statusOptions = ["pending", "done"];
+                  
+                      const [advSearch, setAdvSearch] = React.useState({
+                          isOpen: false
+                      });
+                      
+                      const [showSearchBar, setShowSearchBar] = React.useState(true);
+                      
+                      const [selections, setSelections] = React.useState();
+                      const [results, setResults] = React.useState(0);
+                      
+                      const initValue = {
+                          searchText: "",
+                          sender: [],
+                          receiver: [],
+                          doctype: [],
+                          status: [],
+                      };
+                  
+                      const { formValue, formMeta, updateForm } = useSpsForm(initValue);
+                  
+                      function handleToggleAdvancedSearch(isOpen) {
+                          setAdvSearch({ isOpen });
+                      }
+                      
+                      function handleAdvancedSearchSubmit() {
+                          console.log("submit");
+                          setShowSearchBar(true);
+                          setSelections(omit(formValue, "searchText"));
+                          setResults(Math.floor(Math.random() * 100));
+                      }
+                  
+                      function handleAdvancedSearchClear() {
+                          updateForm(initValue);
+                      }
+                  
+                      return (
+                          <>
+                              <SpsListToolbar advancedSearch={advSearch}
+                                  onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                              >
+                                  <SpsListToolbarSearch>
+                                      <SpsTextInput
+                                          value={formValue.searchText}
+                                          formMeta={formMeta.fields.searchText}
+                                          placeholder="Search fields"
+                                      />
+                                      <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />
+                                  </SpsListToolbarSearch>
+                                  <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />
+                                  <SpsButton>Button</SpsButton>
+                                  <SpsButton kind={ButtonKind.KEY}>Button</SpsButton>
+                                  {showSearchBar && (
+                                      <SpsSearchResultsBarV2
+                                          results={results}
+                                          selections={selections}
+                                          onClear={() => setShowSearchBar(false)}
+                                      />
+                                  )}
+                              </SpsListToolbar>
+                              <SpsAdvancedSearch {...advSearch}
+                                  formMeta={formMeta}
+                                  onSubmit={handleAdvancedSearchSubmit}
+                                  onClear={handleAdvancedSearchClear}
+                              >
+                                  <div className="sfg-row">
+                                      <div className="sfg-col-4">
+                                          <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>
+                                          <SpsMultiSelect
+                                              formMeta={formMeta.fields.sender}
+                                              value={formValue.sender}
+                                              options={senderOptions}
+                                          />
+                                      </div>
+                                      <div className="sfg-col-4">
+                                          <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>
+                                          <SpsMultiSelect
+                                              formMeta={formMeta.fields.receiver}
+                                              value={formValue.receiver}
+                                              options={receiverOptions}
+                                          />
+                                      </div>
+                                      <div className="sfg-col-4">
+                                          <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>
+                                          <SpsMultiSelect
+                                              formMeta={formMeta.fields.doctype}
+                                              value={formValue.doctype}
+                                              options={doctypeOptions}
+                                          />
+                                      </div>
+                                      <div className="sfg-col-4">
+                                          <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>
+                                          <SpsMultiSelect
+                                              formMeta={formMeta.fields.status}
+                                              value={formValue.status}
+                                              options={statusOptions}
+                                          />
+                                      </div>
+                                  </div>
+                              </SpsAdvancedSearch>
+                          </>
+                      )
+                  }
+                `
+      },
+      pinnedResultsBar: {
+        description: () => /* @__PURE__ */ React.createElement("p", null, "You can pin the Results Bar by passing pinResultsBar prop to SpsListToolbar."),
+        react: code`
+                    function Component() {            
+                      const [advSearch, setAdvSearch] = React.useState({
+                          isOpen: false
+                      });
+                      
+                      const [showSearchBar, setShowSearchBar] = React.useState(true);
+                      
+                      const [results, setResults] = React.useState(0);
+                      
+                      const initValue = {
+                          searchText: "",
+                      };
+                  
+                      const { formValue, formMeta, updateForm } = useSpsForm(initValue);
+                  
+                      function handleToggleAdvancedSearch(isOpen) {
+                          setAdvSearch({ isOpen });
+                      }
+                      
+                      function handleAdvancedSearchSubmit() {
+                          setShowSearchBar(true);
+                          setResults(Math.floor(Math.random() * 100));
+                      }
+                  
+                      function handleAdvancedSearchClear() {
+                          updateForm(initValue);
+                      }
+                  
+                      return (
+                          <>
+                              <SpsListToolbar advancedSearch={advSearch}
+                                  onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                                  pinResultsBar
+                              >
+                                  <SpsListToolbarSearch>
+                                      <SpsTextInput
+                                          value={formValue.searchText}
+                                          formMeta={formMeta.fields.searchText}
+                                          placeholder="Search fields"
+                                      />
+                                      <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />
+                                  </SpsListToolbarSearch>
+                                  <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />
+                                  <SpsButton>Button</SpsButton>
+                                  <SpsButton kind={ButtonKind.KEY}>Button</SpsButton>
+                                  {showSearchBar && (
+                                      <SpsSearchResultsBarV2
+                                          results={results}
+                                          onClear={() => setShowSearchBar(false)}
+                                      />
+                                  )}
+                              </SpsListToolbar>
+                              <SpsAdvancedSearch {...advSearch} 
+                                  onSubmit={handleAdvancedSearchSubmit}
+                              >
+                                  <i>insert form here</i>
+                              </SpsAdvancedSearch>
+                          </>
+                      )
+                  }
+                `
       }
     }
   },
@@ -28476,13 +28977,13 @@ const SpsListToolbarExamples = {
     }
   }
 };
-const propsDoc$S = {
+const propsDoc$R = {
   kind: "FeedbackBlockKind",
   message: { type: "string", required: true }
 };
-const propTypes$U = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$T = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   kind: enumValue(FeedbackBlockKind),
-  message: propTypes$1M.exports.node.isRequired
+  message: propTypes$1N.exports.node.isRequired
 });
 function SpsMicroBlock(props2) {
   const _a = props2, {
@@ -28509,8 +29010,8 @@ function SpsMicroBlock(props2) {
   }), /* @__PURE__ */ React.createElement("span", null, message));
 }
 Object.assign(SpsMicroBlock, {
-  props: propsDoc$S,
-  propTypes: propTypes$U,
+  props: propsDoc$R,
+  propTypes: propTypes$T,
   displayName: "SpsMicroBlock"
 });
 const SpsMicroBlockExamples = {
@@ -28565,17 +29066,17 @@ const SpsMicroBlockExamples = {
     }
   }
 };
-const propsDoc$R = {
+const propsDoc$Q = {
   kind: "ModalKind",
   size: "ModalSize",
   title: "string",
   onClose: "() => void",
   focusElementOnOpen: "React.MutableRefObject<HTMLElement>"
 };
-const propTypes$T = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$S = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   kind: enumValue(ModalKind),
   size: enumValue(ModalSize),
-  title: propTypes$1M.exports.string,
+  title: propTypes$1N.exports.string,
   onClose: fun(),
   focusElementOnOpen: ref()
 });
@@ -28701,8 +29202,8 @@ function SpsModalV2(_u) {
   }, t2("design-system:modal.defaultButtonLabel"))))) : /* @__PURE__ */ React.createElement(React.Fragment, null);
 }
 Object.assign(SpsModalV2, {
-  props: propsDoc$R,
-  propTypes: propTypes$T,
+  props: propsDoc$Q,
+  propTypes: propTypes$S,
   displayName: "SpsModalV2"
 });
 const SpsModalExamples = {
@@ -29149,7 +29650,7 @@ const SpsModalExamples = {
     }
   }
 };
-const propsDoc$Q = {
+const propsDoc$P = {
   captionKey: "string",
   debounce: "number",
   disabled: "boolean",
@@ -29165,31 +29666,33 @@ const propsDoc$Q = {
   textKey: "string",
   value: "any",
   zeroState: "string",
-  loading: "boolean"
+  loading: "boolean",
+  maxHeightOptionList: "number"
 };
-const propTypes$S = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$R = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   action: fun(),
-  captionKey: propTypes$1M.exports.string,
-  debounce: propTypes$1M.exports.number,
-  disabled: propTypes$1M.exports.bool,
-  disableSelected: propTypes$1M.exports.bool,
-  comparisonKey: propTypes$1M.exports.string,
+  captionKey: propTypes$1N.exports.string,
+  debounce: propTypes$1N.exports.number,
+  disabled: propTypes$1N.exports.bool,
+  disableSelected: propTypes$1N.exports.bool,
+  comparisonKey: propTypes$1N.exports.string,
   formControl: impl(),
   formMeta: impl(),
-  hideSelected: propTypes$1M.exports.bool,
+  hideSelected: propTypes$1N.exports.bool,
   icon: enumValue(SpsIcon),
   onChange: fun(),
-  options: propTypes$1M.exports.oneOfType([
-    propTypes$1M.exports.array,
-    propTypes$1M.exports.instanceOf(Promise),
+  options: propTypes$1N.exports.oneOfType([
+    propTypes$1N.exports.array,
+    propTypes$1N.exports.instanceOf(Promise),
     fun()
   ]).isRequired,
-  placeholder: propTypes$1M.exports.string,
-  tallOptionList: propTypes$1M.exports.bool,
-  textKey: propTypes$1M.exports.string,
-  value: propTypes$1M.exports.any,
-  zeroState: propTypes$1M.exports.string,
-  loading: propTypes$1M.exports.bool
+  placeholder: propTypes$1N.exports.string,
+  tallOptionList: propTypes$1N.exports.bool,
+  textKey: propTypes$1N.exports.string,
+  value: propTypes$1N.exports.any,
+  zeroState: propTypes$1N.exports.string,
+  loading: propTypes$1N.exports.bool,
+  maxHeightOptionList: propTypes$1N.exports.number
 });
 function SpsMultiSelect(_w) {
   var _x = _w, {
@@ -29214,6 +29717,7 @@ function SpsMultiSelect(_w) {
     zeroState = "There are no matching options.",
     loading,
     icon,
+    maxHeightOptionList,
     "data-testid": testId
   } = _x, rest = __objRest(_x, [
     "action",
@@ -29237,6 +29741,7 @@ function SpsMultiSelect(_w) {
     "zeroState",
     "loading",
     "icon",
+    "maxHeightOptionList",
     "data-testid"
   ]);
   const meta = formMeta || formControl2;
@@ -29435,12 +29940,13 @@ function SpsMultiSelect(_w) {
     tall: tallOptionList,
     textKey,
     zeroState,
-    loading
+    loading,
+    maxHeight: maxHeightOptionList
   }));
 }
 Object.assign(SpsMultiSelect, {
-  props: propsDoc$Q,
-  propTypes: propTypes$S,
+  props: propsDoc$P,
+  propTypes: propTypes$R,
   displayName: "SpsMultiSelect"
 });
 const SpsMultiSelectExamples = {
@@ -29604,8 +30110,8 @@ const SpsMultiSelectExamples = {
     }
   }
 };
-const propsDoc$P = {};
-const propTypes$R = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$O = {};
+const propTypes$Q = __spreadValues({}, spsGlobalPropTypes);
 function SpsPageTitle(props2) {
   const _a = props2, {
     children,
@@ -29637,12 +30143,12 @@ function SpsPageTitle(props2) {
   }, otherChildren));
 }
 Object.assign(SpsPageTitle, {
-  props: propsDoc$P,
-  propTypes: propTypes$R,
+  props: propsDoc$O,
+  propTypes: propTypes$Q,
   displayName: "SpsPageTitle"
 });
-const propsDoc$O = {};
-const propTypes$Q = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$N = {};
+const propTypes$P = __spreadValues({}, spsGlobalPropTypes);
 function SpsPageSubtitle(props2) {
   const _a = props2, {
     children,
@@ -29662,8 +30168,8 @@ function SpsPageSubtitle(props2) {
   }, rest), children);
 }
 Object.assign(SpsPageSubtitle, {
-  props: propsDoc$O,
-  propTypes: propTypes$Q,
+  props: propsDoc$N,
+  propTypes: propTypes$P,
   displayName: "SpsPageSubtitle"
 });
 const SpsPageTitleExamples = {
@@ -29726,7 +30232,7 @@ const SpsPageTitleExamples = {
     }
   }
 };
-const propsDoc$N = {
+const propsDoc$M = {
   action: "SpsActionMethod",
   captionKey: "string",
   comparisonKey: "string",
@@ -29745,33 +30251,35 @@ const propsDoc$N = {
   zeroState: "string",
   autoFixWidth: "boolean",
   loading: "boolean",
-  filterByTextAndCaptionKey: "boolean"
+  filterByTextAndCaptionKey: "boolean",
+  maxHeightOptionList: "number"
 };
-const propTypes$P = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$O = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   action: fun(),
-  captionKey: propTypes$1M.exports.string,
-  comparisonKey: propTypes$1M.exports.string,
-  disabled: propTypes$1M.exports.bool,
+  captionKey: propTypes$1N.exports.string,
+  comparisonKey: propTypes$1N.exports.string,
+  disabled: propTypes$1N.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  notClearable: propTypes$1M.exports.bool,
-  options: propTypes$1M.exports.oneOfType([
-    propTypes$1M.exports.array,
-    propTypes$1M.exports.instanceOf(Promise),
+  notClearable: propTypes$1N.exports.bool,
+  options: propTypes$1N.exports.oneOfType([
+    propTypes$1N.exports.array,
+    propTypes$1N.exports.instanceOf(Promise),
     fun()
   ]).isRequired,
   onChange: fun(),
-  placeholder: propTypes$1M.exports.string,
-  searchDebounce: propTypes$1M.exports.number,
-  searchPlaceholder: propTypes$1M.exports.string,
-  tallOptionList: propTypes$1M.exports.bool,
-  textKey: propTypes$1M.exports.string,
-  valueKey: propTypes$1M.exports.string,
-  value: propTypes$1M.exports.any,
-  zeroState: propTypes$1M.exports.string,
-  autoFixWidth: propTypes$1M.exports.bool,
-  loading: propTypes$1M.exports.bool,
-  filterByTextAndCaptionKey: propTypes$1M.exports.bool
+  placeholder: propTypes$1N.exports.string,
+  searchDebounce: propTypes$1N.exports.number,
+  searchPlaceholder: propTypes$1N.exports.string,
+  tallOptionList: propTypes$1N.exports.bool,
+  textKey: propTypes$1N.exports.string,
+  valueKey: propTypes$1N.exports.string,
+  value: propTypes$1N.exports.any,
+  zeroState: propTypes$1N.exports.string,
+  autoFixWidth: propTypes$1N.exports.bool,
+  loading: propTypes$1N.exports.bool,
+  filterByTextAndCaptionKey: propTypes$1N.exports.bool,
+  maxHeightOptionList: propTypes$1N.exports.number
 });
 const SpsSelect = React.forwardRef((props2, ref2) => {
   const _a = props2, {
@@ -29799,6 +30307,7 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     zeroState,
     loading,
     filterByTextAndCaptionKey,
+    maxHeightOptionList,
     "data-testid": testId
   } = _a, rest = __objRest(_a, [
     "action",
@@ -29825,6 +30334,7 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     "zeroState",
     "loading",
     "filterByTextAndCaptionKey",
+    "maxHeightOptionList",
     "data-testid"
   ]);
   const meta = formMeta || formControl2;
@@ -29995,25 +30505,26 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     zeroState,
     ignoreWidthStyles: autoFixWidth,
     loading,
+    maxHeight: maxHeightOptionList,
     "data-testid": `${testId}-option-list`
   }));
 });
 Object.assign(SpsSelect, {
-  props: propsDoc$N,
-  propTypes: propTypes$P,
+  props: propsDoc$M,
+  propTypes: propTypes$O,
   displayName: "SpsSelect"
 });
-const propsDoc$M = {
+const propsDoc$L = {
   page: "number",
   numPages: "number",
   onPageChange: "(number) => void",
   disabled: "boolean"
 };
-const propTypes$O = __spreadValues({
-  numPages: propTypes$1M.exports.number,
+const propTypes$N = __spreadValues({
+  numPages: propTypes$1N.exports.number,
   onPageChange: fun(),
-  page: propTypes$1M.exports.number,
-  disabled: propTypes$1M.exports.bool
+  page: propTypes$1N.exports.number,
+  disabled: propTypes$1N.exports.bool
 }, spsGlobalPropTypes);
 function SpsPageSelector(props2) {
   const _a = props2, {
@@ -30106,11 +30617,11 @@ function SpsPageSelector(props2) {
   })))));
 }
 Object.assign(SpsPageSelector, {
-  props: propsDoc$M,
-  propTypes: propTypes$O,
+  props: propsDoc$L,
+  propTypes: propTypes$N,
   displayName: "SpsPageSelector"
 });
-const propsDoc$L = {
+const propsDoc$K = {
   page: "number",
   pageSize: "number",
   pageSizeOptions: "Array<number>",
@@ -30118,13 +30629,13 @@ const propsDoc$L = {
   onPageChange: "(page: number, pageSize: number, indices: [number, number]) => void",
   disabled: "boolean"
 };
-const propTypes$N = __spreadValues({
+const propTypes$M = __spreadValues({
   onPageChange: fun().isRequired,
-  page: propTypes$1M.exports.number,
-  pageSize: propTypes$1M.exports.number,
-  pageSizeOptions: propTypes$1M.exports.arrayOf(propTypes$1M.exports.number),
-  totalResults: propTypes$1M.exports.number,
-  disabled: propTypes$1M.exports.bool
+  page: propTypes$1N.exports.number,
+  pageSize: propTypes$1N.exports.number,
+  pageSizeOptions: propTypes$1N.exports.arrayOf(propTypes$1N.exports.number),
+  totalResults: propTypes$1N.exports.number,
+  disabled: propTypes$1N.exports.bool
 }, spsGlobalPropTypes);
 function SpsPagination(props2) {
   const _a = props2, {
@@ -30234,8 +30745,8 @@ function SpsPagination(props2) {
   }));
 }
 Object.assign(SpsPagination, {
-  props: propsDoc$L,
-  propTypes: propTypes$N,
+  props: propsDoc$K,
+  propTypes: propTypes$M,
   displayName: "SpsPagination"
 });
 const SpsPaginationExamples = {
@@ -30331,7 +30842,7 @@ const SpsPaginationExamples = {
     }
   }
 };
-const propsDoc$K = {
+const propsDoc$J = {
   active: "boolean",
   as: "React.ElementType"
 };
@@ -30355,10 +30866,10 @@ function SpsProductBarTab(props2) {
   }, rest), children);
 }
 Object.assign(SpsProductBarTab, {
-  props: propsDoc$K,
+  props: propsDoc$J,
   displayName: "SpsProductBarTab"
 });
-const propsDoc$J = {
+const propsDoc$I = {
   activeTab: "string",
   fullWidth: "boolean",
   onTabChange: "(newTab: string) => void",
@@ -30368,15 +30879,15 @@ const propsDoc$J = {
   productNameHref: "string",
   tabs: "Array<string>"
 };
-const propTypes$M = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  activeTab: propTypes$1M.exports.string,
-  fullWidth: propTypes$1M.exports.bool,
+const propTypes$L = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  activeTab: propTypes$1N.exports.string,
+  fullWidth: propTypes$1N.exports.bool,
   onTabChange: fun(),
   onProductNameClick: fun(),
-  productLogoSrc: propTypes$1M.exports.string,
-  productName: propTypes$1M.exports.string.isRequired,
-  productNameHref: propTypes$1M.exports.string,
-  tabs: propTypes$1M.exports.arrayOf(propTypes$1M.exports.string)
+  productLogoSrc: propTypes$1N.exports.string,
+  productName: propTypes$1N.exports.string.isRequired,
+  productNameHref: propTypes$1N.exports.string,
+  tabs: propTypes$1N.exports.arrayOf(propTypes$1N.exports.string)
 });
 function SpsProductBar(props2) {
   const _a = props2, {
@@ -30451,8 +30962,8 @@ function SpsProductBar(props2) {
   }, otherChildren))));
 }
 Object.assign(SpsProductBar, {
-  props: propsDoc$J,
-  propTypes: propTypes$M,
+  props: propsDoc$I,
+  propTypes: propTypes$L,
   displayName: "SpsProductBar"
 });
 const SpsProductBarExamples = {
@@ -30591,18 +31102,18 @@ const SpsProductBarExamples = {
     }
   }
 };
-const propsDoc$I = {
+const propsDoc$H = {
   percentComplete: "number",
   title: "string",
   detail: "string",
   disabled: "boolean",
   onClose: "() => void"
 };
-const propTypes$L = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  percentComplete: propTypes$1M.exports.number,
-  title: propTypes$1M.exports.string,
-  detail: propTypes$1M.exports.string,
-  disabled: propTypes$1M.exports.bool,
+const propTypes$K = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  percentComplete: propTypes$1N.exports.number,
+  title: propTypes$1N.exports.string,
+  detail: propTypes$1N.exports.string,
+  disabled: propTypes$1N.exports.bool,
   onClose: fun()
 });
 function SpsProgressBar(props2) {
@@ -30658,8 +31169,8 @@ function SpsProgressBar(props2) {
   })));
 }
 Object.assign(SpsProgressBar, {
-  props: propsDoc$I,
-  propTypes: propTypes$L,
+  props: propsDoc$H,
+  propTypes: propTypes$K,
   displayName: "SpsProgressBar"
 });
 const SpsSteppedProgressBarExamples = {
@@ -30799,11 +31310,11 @@ const SpsSteppedProgressBarExamples = {
     }
   }
 };
-const propsDoc$H = {
+const propsDoc$G = {
   icon: "SpsIcon",
   iconSize: "SpsIconSize"
 };
-const propTypes$K = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$J = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   icon: enumValue(SpsIcon),
   iconSize: enumValue(SpsIconSize)
 });
@@ -30822,8 +31333,8 @@ function SpsTooltipTitle({
   }, children));
 }
 Object.assign(SpsTooltipTitle, {
-  props: propsDoc$H,
-  propTypes: propTypes$K,
+  props: propsDoc$G,
+  propTypes: propTypes$J,
   displayName: "SpsTooltipTitle"
 });
 const SpsTooltipExamples = {
@@ -31332,7 +31843,7 @@ const SpsTooltipExamples = {
     }
   }
 };
-const propsDoc$G = {
+const propsDoc$F = {
   title: "string",
   stepsCount: "number",
   completedStepsCount: "number",
@@ -31342,14 +31853,14 @@ const propsDoc$G = {
   tooltipsData: "TooltipsProps[]",
   color: "SteppedProgressBarColor"
 };
-const propTypes$J = {
-  title: propTypes$1M.exports.string,
-  stepsCount: propTypes$1M.exports.number,
-  completedStepsCount: propTypes$1M.exports.number,
-  disabled: propTypes$1M.exports.bool,
-  showStepsCounter: propTypes$1M.exports.bool,
-  icons: propTypes$1M.exports.arrayOf(impl()),
-  tooltipsData: propTypes$1M.exports.arrayOf(impl()),
+const propTypes$I = {
+  title: propTypes$1N.exports.string,
+  stepsCount: propTypes$1N.exports.number,
+  completedStepsCount: propTypes$1N.exports.number,
+  disabled: propTypes$1N.exports.bool,
+  showStepsCounter: propTypes$1N.exports.bool,
+  icons: propTypes$1N.exports.arrayOf(impl()),
+  tooltipsData: propTypes$1N.exports.arrayOf(impl()),
   color: enumValue(SteppedProgressBarColor)
 };
 function SpsSteppedProgressBar(props2) {
@@ -31398,8 +31909,8 @@ function SpsSteppedProgressBar(props2) {
   }, findTooltipData(index).description))))));
 }
 Object.assign(SpsSteppedProgressBar, {
-  props: propsDoc$G,
-  propTypes: propTypes$J,
+  props: propsDoc$F,
+  propTypes: propTypes$I,
   displayName: "SpsSteppedProgressBar"
 });
 const SpsProgressBarExamples = {
@@ -31497,7 +32008,7 @@ const SpsProgressBarExamples = {
     }
   }
 };
-const propsDoc$F = {
+const propsDoc$E = {
   checked: "boolean",
   disabled: "boolean",
   formMeta: "SpsFormFieldMeta<any>",
@@ -31507,17 +32018,17 @@ const propsDoc$F = {
   onChange: "ChangeEventHandler",
   value: "any"
 };
-const propTypes$I = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  checked: propTypes$1M.exports.bool,
-  disabled: propTypes$1M.exports.bool,
+const propTypes$H = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  checked: propTypes$1N.exports.bool,
+  disabled: propTypes$1N.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  inline: propTypes$1M.exports.bool,
-  label: propTypes$1M.exports.string,
-  name: propTypes$1M.exports.string.isRequired,
+  inline: propTypes$1N.exports.bool,
+  label: propTypes$1N.exports.string,
+  name: propTypes$1N.exports.string.isRequired,
   onChange: fun(),
   ref: ref(),
-  value: propTypes$1M.exports.any
+  value: propTypes$1N.exports.any
 });
 function SpsRadioButton(_y) {
   var _z = _y, {
@@ -31590,8 +32101,8 @@ function SpsRadioButton(_y) {
   }, label || ""));
 }
 Object.assign(SpsRadioButton, {
-  props: propsDoc$F,
-  propTypes: propTypes$I,
+  props: propsDoc$E,
+  propTypes: propTypes$H,
   displayName: "SpsRadioButton"
 });
 const SpsRadioButtonExamples = {
@@ -31679,11 +32190,11 @@ const SpsRadioButtonExamples = {
     }
   }
 };
-const propsDoc$E = {
+const propsDoc$D = {
   maxHeight: "string"
 };
-const propTypes$H = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  maxHeight: propTypes$1M.exports.string
+const propTypes$G = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  maxHeight: propTypes$1N.exports.string
 });
 function SpsScrollableContainer(props2) {
   const {
@@ -31696,8 +32207,8 @@ function SpsScrollableContainer(props2) {
   }, children);
 }
 Object.assign(SpsScrollableContainer, {
-  props: propsDoc$E,
-  propTypes: propTypes$H,
+  props: propsDoc$D,
+  propTypes: propTypes$G,
   displayName: "SpsScrollableContainer"
 });
 const SpsScrollableContainerExamples = {
@@ -31777,125 +32288,6 @@ const SpsScrollableContainerExamples = {
     }
   }
 };
-const propsDoc$D = {
-  resultsCount: "number",
-  totalResults: "number",
-  onClear: "() => void"
-};
-const propTypes$G = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  resultsCount: propTypes$1M.exports.number,
-  totalResults: propTypes$1M.exports.number,
-  onClear: fun()
-});
-function SpsSearchResultsBar(props2) {
-  const _a = props2, {
-    children,
-    className,
-    resultsCount,
-    totalResults,
-    onClear,
-    "data-testid": testId,
-    unsafelyReplaceClassName
-  } = _a, rest = __objRest(_a, [
-    "children",
-    "className",
-    "resultsCount",
-    "totalResults",
-    "onClear",
-    "data-testid",
-    "unsafelyReplaceClassName"
-  ]);
-  const { t: t2 } = React.useContext(I18nContext);
-  const classes = clsx(unsafelyReplaceClassName || "sps-search-results-bar", className);
-  const [
-    count,
-    ofText,
-    total
-  ] = t2("design-system:searchResultsBar.count", { count: resultsCount, total: totalResults }).split(" ");
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({
-    className: classes,
-    "data-testid": `${testId}`
-  }, rest), /* @__PURE__ */ React.createElement("span", {
-    className: "sps-search-results-bar__label",
-    "data-testid": `${testId}__label`
-  }, t2("design-system:searchResultsBar.matchingResults")), count && !Number.isNaN(Number(count)) && /* @__PURE__ */ React.createElement("span", {
-    className: "sps-search-results-bar__count",
-    "data-testid": `${testId}__count`
-  }, /* @__PURE__ */ React.createElement("i", {
-    className: "sps-icon sps-icon-double-angle-right"
-  }), /* @__PURE__ */ React.createElement("span", null, count)), total && !Number.isNaN(Number(total)) && /* @__PURE__ */ React.createElement("span", {
-    className: "sps-search-results-bar__total",
-    "data-testid": `${testId}__total`
-  }, ofText, " ", total), /* @__PURE__ */ React.createElement("div", {
-    className: "sps-search-results-bar__buttons",
-    "data-testid": `${testId}__button`
-  }, /* @__PURE__ */ React.createElement("button", {
-    type: "button",
-    onClick: onClear
-  }, t2("design-system:searchResultsBar.clear"))));
-}
-Object.assign(SpsSearchResultsBar, {
-  props: propsDoc$D,
-  propTypes: propTypes$G,
-  displayName: "SpsSearchResultsBar"
-});
-const SpsSearchResultsBarExamples = {
-  noCount: {
-    label: "Basic",
-    description: "<p>Info about Basic Search Result Bars</p>",
-    examples: {
-      noCount: {
-        react: code`
-                function SpsSearchResultsBarBasic() {
-                    function clearHandler() {
-                        console.log("change handler called");
-                    }
-                    return (
-                        <SpsSearchResultsBar onClear={clearHandler}/>
-                    );
-                }
-                `
-      }
-    }
-  },
-  withCount: {
-    label: "With Count",
-    description: "<p>Info about Search Result Bars with count bars</p>",
-    examples: {
-      withCount: {
-        react: code`
-                function SpsSearchResultsBarCount() {
-                    function clearHandler() {
-                        console.log("change handler called");
-                    }
-
-                    return (
-                        <SpsSearchResultsBar resultsCount={125} onClear={clearHandler}/>
-                    );
-                }
-                `
-      }
-    }
-  },
-  withCountAndTotal: {
-    label: "With Count and total",
-    description: "<p> Info about Search Result Bars with count & total</p>",
-    examples: {
-      withCountAndTotal: {
-        react: code`
-                function SpsSearchResultsBarCountTotal() {
-                    function clearHandler() {
-                        console.log("change handler called");
-                    }
-                    return (
-                        <SpsSearchResultsBar resultsCount={125} totalResults={250} onClear={clearHandler} />
-                    );
-                }
-                `
-      }
-    }
-  }
-};
 const SpsSelectExamples = {
   basic: {
     label: "Basic",
@@ -32653,12 +33045,12 @@ const propsDoc$C = {
   widthRem: "number"
 };
 const propTypes$F = __spreadValues({
-  sortKey: propTypes$1M.exports.string,
-  sortDisabled: propTypes$1M.exports.bool,
-  sort: propTypes$1M.exports.arrayOf(impl()),
+  sortKey: propTypes$1N.exports.string,
+  sortDisabled: propTypes$1N.exports.bool,
+  sort: propTypes$1N.exports.arrayOf(impl()),
   onSortChange: fun(),
-  widthPx: propTypes$1M.exports.number,
-  widthRem: propTypes$1M.exports.number
+  widthPx: propTypes$1N.exports.number,
+  widthRem: propTypes$1N.exports.number
 }, spsGlobalPropTypes);
 function SpsSortingHeaderCell(_A) {
   var _B = _A, {
@@ -32728,7 +33120,7 @@ const propsDoc$B = {
   onSortChange: "SortChangeHandler"
 };
 const propTypes$E = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  sort: propTypes$1M.exports.arrayOf(impl()),
+  sort: propTypes$1N.exports.arrayOf(impl()),
   onSortChange: fun()
 });
 function SpsSortingHeader(_C) {
@@ -32806,12 +33198,12 @@ const propsDoc$A = {
   options: "Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"
 };
 const propTypes$D = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1M.exports.bool,
-  href: propTypes$1M.exports.string,
-  label: propTypes$1M.exports.string,
+  disabled: propTypes$1N.exports.bool,
+  href: propTypes$1N.exports.string,
+  label: propTypes$1N.exports.string,
   icon: enumValue(SpsIcon),
   kind: enumValue(StdButtonKind),
-  options: propTypes$1M.exports.arrayOf(propTypes$1M.exports.oneOfType([propTypes$1M.exports.func, propTypes$1M.exports.any]))
+  options: propTypes$1N.exports.arrayOf(propTypes$1N.exports.oneOfType([propTypes$1N.exports.func, propTypes$1N.exports.any]))
 });
 function SpsSplitButton(props2) {
   const _a = props2, {
@@ -32968,7 +33360,7 @@ const propsDoc$z = {
   channelId: { type: "string", required: true }
 };
 const propTypes$C = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  channelId: propTypes$1M.exports.string.isRequired
+  channelId: propTypes$1N.exports.string.isRequired
 });
 function SpsSlackLink(props2) {
   const _a = props2, {
@@ -33050,8 +33442,8 @@ const propsDoc$x = {
   onToggle: "(isExpanded: boolean) => void"
 };
 const propTypes$A = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  expanded: propTypes$1M.exports.bool,
-  selected: propTypes$1M.exports.bool,
+  expanded: propTypes$1N.exports.bool,
+  selected: propTypes$1N.exports.bool,
   onToggle: fun()
 });
 function SpsSummaryListRow(props2) {
@@ -33133,10 +33525,10 @@ const propsDoc$w = {
   width: "string"
 };
 const propTypes$z = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  borderless: propTypes$1M.exports.bool,
-  lean: propTypes$1M.exports.bool,
-  leaner: propTypes$1M.exports.bool,
-  width: propTypes$1M.exports.string
+  borderless: propTypes$1N.exports.bool,
+  lean: propTypes$1N.exports.bool,
+  leaner: propTypes$1N.exports.bool,
+  width: propTypes$1N.exports.string
 });
 function SpsSummaryListColumn(props2) {
   const _a = props2, {
@@ -33469,17 +33861,17 @@ const props = {
   suppressTooltips: "boolean"
 };
 const propTypes$y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  tasks: propTypes$1M.exports.arrayOf(propTypes$1M.exports.any),
+  tasks: propTypes$1N.exports.arrayOf(propTypes$1N.exports.any),
   taskQueuePosition: enumValue(Position),
-  notificationText: propTypes$1M.exports.string,
-  tooltipConfig: propTypes$1M.exports.shape({
+  notificationText: propTypes$1N.exports.string,
+  tooltipConfig: propTypes$1N.exports.shape({
     position: enumValue(Position),
     kind: enumValue(TooltipKind)
   }),
   onClose: fun(),
   onOpen: fun(),
   onClearCompleted: fun(),
-  suppressTooltips: propTypes$1M.exports.bool
+  suppressTooltips: propTypes$1N.exports.bool
 });
 function SpsTaskQueue(_E) {
   var _F = _E, {
@@ -34015,14 +34407,14 @@ const propsDoc$v = {
   value: "string"
 };
 const propTypes$x = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1M.exports.bool,
+  disabled: propTypes$1N.exports.bool,
   formControl: impl(),
   formMeta: impl(),
   icon: enumValue(SpsIcon),
-  name: propTypes$1M.exports.string,
+  name: propTypes$1N.exports.string,
   onChange: fun(),
-  placeholder: propTypes$1M.exports.string,
-  value: propTypes$1M.exports.string
+  placeholder: propTypes$1N.exports.string,
+  value: propTypes$1N.exports.string
 });
 const SpsTextInput = React.forwardRef((_G, ref2) => {
   var _H = _G, {
@@ -34212,15 +34604,15 @@ const propsDoc$u = {
   value: "string"
 };
 const propTypes$w = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1M.exports.bool,
+  disabled: propTypes$1N.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  name: propTypes$1M.exports.string,
+  name: propTypes$1N.exports.string,
   onChange: fun(),
-  placeholder: propTypes$1M.exports.string,
+  placeholder: propTypes$1N.exports.string,
   ref: ref(),
-  rows: propTypes$1M.exports.number,
-  value: propTypes$1M.exports.string
+  rows: propTypes$1N.exports.number,
+  value: propTypes$1N.exports.string
 });
 function SpsTextarea(_I) {
   var _J = _I, {
@@ -34415,12 +34807,12 @@ const propsDoc$t = {
   warning: "boolean"
 };
 const propTypes$v = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  href: propTypes$1M.exports.string,
-  target: propTypes$1M.exports.string,
+  href: propTypes$1N.exports.string,
+  target: propTypes$1N.exports.string,
   icon: nodeOrRenderFn.isRequired,
-  error: propTypes$1M.exports.bool,
-  title: propTypes$1M.exports.string.isRequired,
-  warning: propTypes$1M.exports.bool
+  error: propTypes$1N.exports.bool,
+  title: propTypes$1N.exports.string.isRequired,
+  warning: propTypes$1N.exports.bool
 });
 function SpsTile(props2) {
   const _a = props2, {
@@ -34739,10 +35131,10 @@ const propsDoc$r = {
   active: "boolean"
 };
 const propTypes$t = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  value: propTypes$1M.exports.number.isRequired,
-  title: propTypes$1M.exports.string.isRequired,
+  value: propTypes$1N.exports.number.isRequired,
+  title: propTypes$1N.exports.string.isRequired,
   kind: enumValue(SpsFilterTileKind),
-  active: propTypes$1M.exports.bool
+  active: propTypes$1N.exports.bool
 });
 function SpsFilterTile(props2) {
   const _a = props2, {
@@ -34880,18 +35272,18 @@ const propsDoc$p = {
   onChange: "(isActive: boolean) => void"
 };
 const propTypes$r = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  active: propTypes$1M.exports.bool,
-  activeDescription: deprecated(propTypes$1M.exports.string),
-  activeLabel: deprecated(propTypes$1M.exports.string),
-  description: propTypes$1M.exports.string,
-  disabled: propTypes$1M.exports.bool,
+  active: propTypes$1N.exports.bool,
+  activeDescription: deprecated(propTypes$1N.exports.string),
+  activeLabel: deprecated(propTypes$1N.exports.string),
+  description: propTypes$1N.exports.string,
+  disabled: propTypes$1N.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  id: propTypes$1M.exports.string,
-  inactiveDescription: deprecated(propTypes$1M.exports.string),
-  inactiveLabel: deprecated(propTypes$1M.exports.string),
-  label: propTypes$1M.exports.string,
-  large: propTypes$1M.exports.bool,
+  id: propTypes$1N.exports.string,
+  inactiveDescription: deprecated(propTypes$1N.exports.string),
+  inactiveLabel: deprecated(propTypes$1N.exports.string),
+  label: propTypes$1N.exports.string,
+  large: propTypes$1N.exports.bool,
   onChange: fun(),
   ref: ref()
 });
@@ -35077,7 +35469,7 @@ const propsDoc$o = {
   icon: "SpsIcon"
 };
 const propTypes$q = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  heading: propTypes$1M.exports.string,
+  heading: propTypes$1N.exports.string,
   icon: enumValue(SpsIcon)
 });
 function SpsWorkflow(props2) {
@@ -35129,7 +35521,7 @@ const propsDoc$n = {
   progress: "number"
 };
 const propTypes$p = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  progress: propTypes$1M.exports.number,
+  progress: propTypes$1N.exports.number,
   size: enumValue(RingSize)
 });
 function SpsProgressRing({
@@ -35174,7 +35566,7 @@ const propsDoc$m = {
   phases: "WizardPhase[]"
 };
 const propTypes$o = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  phases: propTypes$1M.exports.arrayOf(impl())
+  phases: propTypes$1N.exports.arrayOf(impl())
 });
 const CSS_BLOCK$2 = "sps-wizard-sidebar";
 function SpsWizardSidebar({
@@ -35225,10 +35617,10 @@ const propsDoc$l = {
 };
 const propTypes$n = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   condition: enumValue(WizardSubstepConditions).isRequired,
-  display: propTypes$1M.exports.string.isRequired,
-  orderPosition: propTypes$1M.exports.oneOfType([
-    propTypes$1M.exports.string,
-    propTypes$1M.exports.number
+  display: propTypes$1N.exports.string.isRequired,
+  orderPosition: propTypes$1N.exports.oneOfType([
+    propTypes$1N.exports.string,
+    propTypes$1N.exports.number
   ]).isRequired
 });
 function SpsWizardSubstep(props2) {
@@ -35429,7 +35821,7 @@ const propsDoc$i = {
 };
 const propTypes$k = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   icon: enumValue(SpsIcon).isRequired,
-  title: propTypes$1M.exports.string.isRequired
+  title: propTypes$1N.exports.string.isRequired
 });
 function SpsWorkflowStep(props2) {
   const _a = props2, {
@@ -35540,9 +35932,9 @@ const propsDoc$h = {
   subHeading: "string"
 };
 const propTypes$j = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  artwork: propTypes$1M.exports.string.isRequired,
-  heading: propTypes$1M.exports.string.isRequired,
-  subHeading: propTypes$1M.exports.string
+  artwork: propTypes$1N.exports.string.isRequired,
+  heading: propTypes$1N.exports.string.isRequired,
+  subHeading: propTypes$1N.exports.string
 });
 function SpsZeroState(props2) {
   const _a = props2, {
@@ -35818,10 +36210,10 @@ const propsDoc$e = {
   onCollapse: "() => void"
 };
 const propTypes$g = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  title: propTypes$1M.exports.string,
-  expanded: propTypes$1M.exports.bool,
-  heightPx: propTypes$1M.exports.number,
-  heightRem: propTypes$1M.exports.number,
+  title: propTypes$1N.exports.string,
+  expanded: propTypes$1N.exports.bool,
+  heightPx: propTypes$1N.exports.number,
+  heightRem: propTypes$1N.exports.number,
   onExpand: fun(),
   onCollapse: fun()
 });
@@ -36247,9 +36639,9 @@ const propsDoc$c = {
   onFilterChange: "ChangeEventHandler<HTMLInputElement>"
 };
 const propTypes$e = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  value: propTypes$1M.exports.string,
-  placeholder: propTypes$1M.exports.string,
-  formMeta: propTypes$1M.exports.oneOfType([
+  value: propTypes$1N.exports.string,
+  placeholder: propTypes$1N.exports.string,
+  formMeta: propTypes$1N.exports.oneOfType([
     impl(),
     impl()
   ]),
@@ -36289,7 +36681,7 @@ const propsDoc$b = {
   showCondition: "boolean"
 };
 const propTypes$d = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  showCondition: propTypes$1M.exports.bool
+  showCondition: propTypes$1N.exports.bool
 });
 function SpsConditionalField(_S) {
   var _T = _S, {
@@ -36483,7 +36875,13 @@ const MANIFEST = {
   },
   Cards: {
     description: () => /* @__PURE__ */ React.createElement("p", null, "Cards are used to group similar or related content together in a single container. They can be combined with additional elements such as Headers, Footers, or Tabs."),
-    components: [SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsTabsV2],
+    components: [
+      SpsCardV2,
+      SpsCardV2Footer,
+      SpsCardV2Header,
+      SpsCardV2Title,
+      SpsTabsV2
+    ],
     examples: SpsCardExamples
   },
   Checkbox: {
@@ -36668,7 +37066,7 @@ const MANIFEST = {
     examples: SpsScrollableContainerExamples
   },
   "Search Results Bar": {
-    components: [SpsSearchResultsBar],
+    components: [SpsSearchResultsBarV2],
     examples: SpsSearchResultsBarExamples
   },
   Select: {
@@ -36816,7 +37214,7 @@ const propTypes$c = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   minDate: impl(),
   onNewSelection: fun().isRequired,
   selectedDate: impl(),
-  selectedRange: propTypes$1M.exports.arrayOf(impl())
+  selectedRange: propTypes$1N.exports.arrayOf(impl())
 });
 const CSS_ELEMENT$1 = "sps-datepicker__calendar";
 function determineViewMonth({
@@ -36942,7 +37340,7 @@ Object.assign(SpsDatepickerCalendar, {
 const CSS_ELEMENT = "sps-datepicker__popup";
 const propTypes$b = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   attachTo: ref().isRequired,
-  isOpen: propTypes$1M.exports.bool.isRequired
+  isOpen: propTypes$1N.exports.bool.isRequired
 });
 const SpsDatepickerPopup = React.forwardRef((_U, ref2) => {
   var _V = _U, {
@@ -36980,7 +37378,7 @@ const propsDoc$a = {
   value: "SimpleDate"
 };
 const propTypes$a = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1M.exports.bool,
+  disabled: propTypes$1N.exports.bool,
   formMeta: impl(),
   maxDate: impl(),
   minDate: impl(),
@@ -36998,7 +37396,8 @@ function SpsDatepickerV2(_W) {
     maxDate,
     minDate,
     onChange,
-    value
+    value,
+    "data-testid": testId
   } = _X, rest = __objRest(_X, [
     "children",
     "className",
@@ -37008,7 +37407,8 @@ function SpsDatepickerV2(_W) {
     "maxDate",
     "minDate",
     "onChange",
-    "value"
+    "value",
+    "data-testid"
   ]);
   const { wrapperId, controlId } = useFormControlId(id2, formMeta);
   const rootRef = React.useRef(null);
@@ -37071,7 +37471,8 @@ function SpsDatepickerV2(_W) {
     onClick: doShowPopup,
     onFocus: doShowPopup,
     value: stringValue,
-    disabled
+    disabled,
+    "data-testid": `${testId}_date_input`
   }, rest)), value && !disabled && /* @__PURE__ */ React.createElement("i", {
     className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn",
     onClick: clear
@@ -37080,6 +37481,7 @@ function SpsDatepickerV2(_W) {
     attachTo: rootRef,
     ref: datepickerPopupRef
   }, /* @__PURE__ */ React.createElement(SpsDatepickerCalendar, {
+    "data-testid": `${testId}_calendar`,
     selectedDate: value,
     onNewSelection: handleNewSelection,
     minDate,
@@ -37101,12 +37503,12 @@ const propsDoc$9 = {
   value: "SimpleDateRange | DatePreset"
 };
 const propTypes$9 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1M.exports.bool,
+  disabled: propTypes$1N.exports.bool,
   formMeta: impl(),
   maxDate: impl(),
   minDate: impl(),
   onChange: fun(),
-  presets: propTypes$1M.exports.arrayOf(impl())
+  presets: propTypes$1N.exports.arrayOf(impl())
 });
 const CSS_BLOCK = "sps-datepicker";
 const DEFAULT_PRESETS = [
@@ -37332,12 +37734,12 @@ const propsDoc$8 = {
   value: "number"
 };
 const propTypes$8 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1M.exports.bool,
+  disabled: propTypes$1N.exports.bool,
   formMeta: impl(),
-  name: propTypes$1M.exports.string,
+  name: propTypes$1N.exports.string,
   onChange: fun(),
   ref: ref(),
-  value: propTypes$1M.exports.number
+  value: propTypes$1N.exports.number
 });
 function strToDollars(str) {
   return str ? Number.parseInt(str.replace(/[^\d]/g, ""), 10) / 100 : null;
@@ -37512,10 +37914,10 @@ const propsDoc$7 = {
 };
 const propTypes$7 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   color: enumValue(TagKind),
-  href: propTypes$1M.exports.string,
+  href: propTypes$1N.exports.string,
   icon: enumValue(SpsIcon),
-  tagKey: propTypes$1M.exports.string.isRequired,
-  value: propTypes$1M.exports.string.isRequired
+  tagKey: propTypes$1N.exports.string.isRequired,
+  value: propTypes$1N.exports.string.isRequired
 });
 function SpsKeyValueTag(props2) {
   const _a = props2, {
@@ -37608,8 +38010,8 @@ const propsDoc$6 = {
   header: "string | () => string"
 };
 const propTypes$6 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  header: propTypes$1M.exports.oneOfType([
-    propTypes$1M.exports.string,
+  header: propTypes$1N.exports.oneOfType([
+    propTypes$1N.exports.string,
     fun()
   ])
 });
@@ -37641,8 +38043,8 @@ const propsDoc$5 = {
   backdrop: "string"
 };
 const propTypes$5 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  onOverlayClick: propTypes$1M.exports.func,
-  backdrop: propTypes$1M.exports.string
+  onOverlayClick: propTypes$1N.exports.func,
+  backdrop: propTypes$1N.exports.string
 });
 function SpsModalOverlay(props2) {
   const _a = props2, {
@@ -37712,12 +38114,12 @@ const propsDoc$3 = {
   closeModal: "() => void"
 };
 const propTypes$3 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  handleAsync: propTypes$1M.exports.shape({
-    turnAsyncOn: propTypes$1M.exports.func,
-    turnAsyncOff: propTypes$1M.exports.func,
-    isAsyncOn: propTypes$1M.exports.bool
+  handleAsync: propTypes$1N.exports.shape({
+    turnAsyncOn: propTypes$1N.exports.func,
+    turnAsyncOff: propTypes$1N.exports.func,
+    isAsyncOn: propTypes$1N.exports.bool
   }),
-  closeModal: propTypes$1M.exports.func
+  closeModal: propTypes$1N.exports.func
 });
 function SpsModalFooter(props2) {
   const {
@@ -37759,10 +38161,10 @@ const propsDoc$2 = {
 const propTypes$2 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   kind: enumValue(ButtonKind),
   closeModal: fun(),
-  handleAsync: propTypes$1M.exports.shape({
-    turnAsyncOn: propTypes$1M.exports.func,
-    turnAsyncOff: propTypes$1M.exports.func,
-    isAsyncOn: propTypes$1M.exports.bool
+  handleAsync: propTypes$1N.exports.shape({
+    turnAsyncOn: propTypes$1N.exports.func,
+    turnAsyncOff: propTypes$1N.exports.func,
+    isAsyncOn: propTypes$1N.exports.bool
   })
 });
 function SpsModalAction(props2) {
@@ -37817,18 +38219,18 @@ const propsDoc$1 = {
   onClose: "Function"
 };
 const propTypes$1 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  kind: propTypes$1M.exports.string,
-  id: propTypes$1M.exports.string,
-  isOpen: propTypes$1M.exports.bool,
-  header: propTypes$1M.exports.oneOfType([
-    propTypes$1M.exports.string,
+  kind: propTypes$1N.exports.string,
+  id: propTypes$1N.exports.string,
+  isOpen: propTypes$1N.exports.bool,
+  header: propTypes$1N.exports.oneOfType([
+    propTypes$1N.exports.string,
     fun()
   ]),
-  onClose: propTypes$1M.exports.func,
-  onOpen: propTypes$1M.exports.func,
-  size: propTypes$1M.exports.string,
-  backdrop: propTypes$1M.exports.string,
-  actionRequired: propTypes$1M.exports.bool
+  onClose: propTypes$1N.exports.func,
+  onOpen: propTypes$1N.exports.func,
+  size: propTypes$1N.exports.string,
+  backdrop: propTypes$1N.exports.string,
+  actionRequired: propTypes$1N.exports.bool
 });
 function SpsModal(modalProps) {
   let lastFocusable;
@@ -38082,4 +38484,4 @@ Object.assign(SpsVr, {
   propTypes,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
-export { AsTypingErrorKeys, ContentOrderExample, DEFAULT_PRESETS, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, PortalContext, PreventativeErrorKeys, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsAutocomplete, SpsAutocompleteExamples, SpsButton, SpsButtonExamples, SpsButtonGroup, SpsCard, SpsCardExamples, SpsCardTabbedPane, SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsCheckbox, SpsCheckboxDropdown, SpsCheckboxExamples, SpsClickableTag, SpsClickableTagExamples, SpsColumnChooser, SpsColumnChooserColumn, SpsColumnChooserExamples, SpsConditionalField, SpsConditionalFieldExamples, 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, SpsFilterPanelFilterBox, SpsFilterPanelSection, SpsFilterTile, SpsFilterTileList, SpsFilterTileListExamples, SpsFocusedTask, SpsFocusedTaskActions, SpsFocusedTaskExamples, SpsForm, SpsFormArrayMeta, SpsFormComponentWrapper, SpsFormExamples, SpsFormFieldMeta, SpsFormGroupMeta, SpsFormMetaBase, SpsFormSetMeta, SpsGrowler, SpsGrowlerExamples, SpsI, SpsIconButtonPanel, SpsIncrementor, SpsIncrementorExamples, SpsInputGroup, SpsInsightTile, SpsInsights, SpsKeyValueList, SpsKeyValueListExamples, SpsKeyValueListItem, SpsKeyValueTag, SpsKeyValueTagExamples, SpsLabel, SpsLabelExamples, SpsListActionBar, SpsListActionBarExamples, SpsListToolbar, SpsListToolbarExamples, SpsListToolbarSearch, SpsListToolbarSearchInfo, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalAction, SpsModalBody, SpsModalExamples, SpsModalFooter, SpsModalHeader, SpsModalOverlay, SpsModalV2, SpsModalV2Footer, SpsMultiSelect, SpsMultiSelectExamples, 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, SpsSteppedProgressBar, SpsSteppedProgressBarExamples, 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, SpsTooltipTitle, 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 { AsTypingErrorKeys, ContentOrderExample, DEFAULT_PRESETS, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, PortalContext, PreventativeErrorKeys, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsAutocomplete, SpsAutocompleteExamples, SpsButton, SpsButtonExamples, SpsButtonGroup, SpsCard, SpsCardExamples, SpsCardTabbedPane, SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsCheckbox, SpsCheckboxDropdown, SpsCheckboxExamples, SpsClickableTag, SpsClickableTagExamples, SpsColumnChooser, SpsColumnChooserColumn, SpsColumnChooserExamples, SpsConditionalField, SpsConditionalFieldExamples, 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, SpsFilterPanelFilterBox, SpsFilterPanelSection, SpsFilterTile, SpsFilterTileList, SpsFilterTileListExamples, SpsFocusedTask, SpsFocusedTaskActions, SpsFocusedTaskExamples, SpsForm, SpsFormArrayMeta, SpsFormComponentWrapper, SpsFormExamples, SpsFormFieldMeta, SpsFormGroupMeta, SpsFormMetaBase, SpsFormSetMeta, SpsGrowler, SpsGrowlerExamples, SpsI, SpsIconButtonPanel, SpsIncrementor, SpsIncrementorExamples, SpsInputGroup, SpsInsightTile, SpsInsights, SpsKeyValueList, SpsKeyValueListExamples, SpsKeyValueListItem, SpsKeyValueTag, SpsKeyValueTagExamples, SpsLabel, SpsLabelExamples, SpsListActionBar, SpsListActionBarExamples, SpsListToolbar, SpsListToolbarExamples, SpsListToolbarSearch, SpsListToolbarSearchInfo, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalAction, SpsModalBody, SpsModalExamples, SpsModalFooter, SpsModalHeader, SpsModalOverlay, SpsModalV2, SpsModalV2Footer, SpsMultiSelect, SpsMultiSelectExamples, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSearchResultsBarV2, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, SpsSortingHeader, SpsSortingHeaderCell, SpsSortingHeaderExamples, SpsSpinner, SpsSpinnerExamples, SpsSplitButton, SpsSplitButtonExamples, SpsSteppedProgressBar, SpsSteppedProgressBarExamples, 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, SpsTooltipTitle, 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 };