@spscommerce/ds-react 5.16.1 → 5.18.1

package/lib/index.es.js

@@ -40,6 +40,7 @@ import { createPortal, unstable_batchedUpdates } from "react-dom";
 import { useCollection } from "@react-stately/collections";
 import { PositioningService, Position as Position$1 } from "@spscommerce/positioning";
 import { colors } from "@spscommerce/ds-colors";
+import { SpsIllustrations } from "@spscommerce/ds-illustrations";
 function toVal(mix) {
   var k2, y2, str = "";
   if (typeof mix === "string" || typeof mix === "number") {
@@ -81,7 +82,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$1N = { exports: {} };
+var propTypes$1O = { 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 +130,32 @@ var factoryWithThrowingShims = function() {
   return ReactPropTypes;
 };
 {
-  propTypes$1N.exports = factoryWithThrowingShims();
+  propTypes$1O.exports = factoryWithThrowingShims();
 }
 function deprecated(type) {
   return type;
 }
 function enumValue(e2) {
-  return propTypes$1N.exports.oneOf(values$3(e2));
+  return propTypes$1O.exports.oneOf(values$3(e2));
 }
 function fun() {
-  return propTypes$1N.exports.func;
+  return propTypes$1O.exports.func;
 }
 function impl() {
-  return propTypes$1N.exports.object;
+  return propTypes$1O.exports.object;
 }
 function ref() {
-  return propTypes$1N.exports.object;
+  return propTypes$1O.exports.object;
 }
-const nodeOrRenderFn = propTypes$1N.exports.oneOfType([propTypes$1N.exports.node, propTypes$1N.exports.func]);
+const nodeOrRenderFn = propTypes$1O.exports.oneOfType([propTypes$1O.exports.node, propTypes$1O.exports.func]);
 const spsGlobalPropTypes = {
-  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
+  children: propTypes$1O.exports.oneOfType([propTypes$1O.exports.arrayOf(propTypes$1O.exports.node), propTypes$1O.exports.node]),
+  className: propTypes$1O.exports.string,
+  "data-testid": propTypes$1O.exports.string,
+  unsafelyReplaceClassName: propTypes$1O.exports.string
 };
 const I18nContext = React.createContext(noI18nI18n);
-const propsDoc$1I = {
+const propsDoc$1J = {
   disabled: "boolean",
   href: "string",
   icon: "SpsIcon",
@@ -163,13 +164,13 @@ const propsDoc$1I = {
   spinningTitle: "string",
   type: "ButtonType"
 };
-const propTypes$1M = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1N.exports.bool,
-  href: propTypes$1N.exports.string,
+const propTypes$1N = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  disabled: propTypes$1O.exports.bool,
+  href: propTypes$1O.exports.string,
   icon: enumValue(SpsIcon),
   kind: enumValue(ButtonKind),
-  spinning: propTypes$1N.exports.bool,
-  spinningTitle: propTypes$1N.exports.string,
+  spinning: propTypes$1O.exports.bool,
+  spinningTitle: propTypes$1O.exports.string,
   type: enumValue(ButtonType)
 });
 function SpsButton(props2) {
@@ -219,8 +220,8 @@ function SpsButton(props2) {
   }), iconElement, children, spinner));
 }
 Object.assign(SpsButton, {
-  props: propsDoc$1I,
-  propTypes: propTypes$1M,
+  props: propsDoc$1J,
+  propTypes: propTypes$1N,
   displayName: "SpsButton"
 });
 const spsFormProps = {
@@ -273,7 +274,7 @@ Object.assign(SpsForm, {
 function contentOf(nodeOrRenderFn2) {
   return typeof nodeOrRenderFn2 === "function" ? nodeOrRenderFn2() : nodeOrRenderFn2;
 }
-const propsDoc$1H = __spreadProps(__spreadValues({}, spsFormProps), {
+const propsDoc$1I = __spreadProps(__spreadValues({}, spsFormProps), {
   controlsDisabled: "boolean",
   footerLinks: "ReactNodeOrRenderFn",
   formMeta: "SpsFormArrayMeta<any> | SpsFormGroupMeta<any>",
@@ -281,16 +282,16 @@ const propsDoc$1H = __spreadProps(__spreadValues({}, spsFormProps), {
   onClear: "() => void",
   onSubmit: "React.FormEventHandler"
 });
-const propTypes$1L = __spreadProps(__spreadValues(__spreadValues({}, spsGlobalPropTypes), spsFormPropTypes), {
-  controlsDisabled: propTypes$1N.exports.bool,
+const propTypes$1M = __spreadProps(__spreadValues(__spreadValues({}, spsGlobalPropTypes), spsFormPropTypes), {
+  controlsDisabled: propTypes$1O.exports.bool,
   footerLinks: nodeOrRenderFn,
   formArray: impl(),
   formGroup: impl(),
-  formMeta: propTypes$1N.exports.oneOfType([
+  formMeta: propTypes$1O.exports.oneOfType([
     impl(),
     impl()
   ]),
-  isOpen: propTypes$1N.exports.bool,
+  isOpen: propTypes$1O.exports.bool,
   onClear: fun(),
   onSubmit: fun()
 });
@@ -355,8 +356,8 @@ function SpsAdvancedSearch(props2) {
   }, t2("design-system:advancedSearch.search"))))));
 }
 Object.assign(SpsAdvancedSearch, {
-  props: propsDoc$1H,
-  propTypes: propTypes$1L,
+  props: propsDoc$1I,
+  propTypes: propTypes$1M,
   displayName: "SpsAdvancedSearch"
 });
 const SpsAdvancedSearchExamples = {
@@ -1322,7 +1323,7 @@ function useSpsForm(value, validatorMap) {
   return state;
 }
 const spsFormComponentWrapperPropTypes = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  focusInputOnClick: propTypes$1N.exports.bool,
+  focusInputOnClick: propTypes$1O.exports.bool,
   formMeta: impl(),
   formControl: impl(),
   inputRef: ref()
@@ -1498,15 +1499,15 @@ var scrollIntoViewImport = /* @__PURE__ */ Object.freeze({
   [Symbol.toStringTag]: "Module",
   "default": scrollIntoView$1
 });
-const propsDoc$1G = {
+const propsDoc$1H = {
   alt: "string",
   size: "SpinnerSize",
   title: "string"
 };
-const propTypes$1K = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  alt: propTypes$1N.exports.string,
+const propTypes$1L = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  alt: propTypes$1O.exports.string,
   size: enumValue(SpinnerSize),
-  title: propTypes$1N.exports.string
+  title: propTypes$1O.exports.string
 });
 function SpsSpinner(props2) {
   const _a = props2, {
@@ -1534,8 +1535,8 @@ function SpsSpinner(props2) {
   }, rest));
 }
 Object.assign(SpsSpinner, {
-  props: propsDoc$1G,
-  propTypes: propTypes$1K,
+  props: propsDoc$1H,
+  propTypes: propTypes$1L,
   displayName: "SpsSpinner"
 });
 const NAVBAR_HEIGHT = 60;
@@ -1724,50 +1725,50 @@ const spsOptionListPassthroughProps = {
     maxHeightRem: "number"
   },
   propTypes: {
-    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),
+    captionKey: propTypes$1O.exports.string,
+    comparisonKey: propTypes$1O.exports.string,
+    disabledOptions: propTypes$1O.exports.arrayOf(propTypes$1O.exports.any),
+    options: propTypes$1O.exports.oneOfType([
+      propTypes$1O.exports.array,
+      propTypes$1O.exports.instanceOf(Promise),
       fun()
     ]).isRequired,
-    tall: propTypes$1N.exports.bool,
-    textKey: propTypes$1N.exports.string,
-    valueKey: propTypes$1N.exports.string,
-    zeroState: propTypes$1N.exports.string,
-    maxHeightPx: propTypes$1N.exports.number,
-    maxHeightRem: propTypes$1N.exports.number
+    tall: propTypes$1O.exports.bool,
+    textKey: propTypes$1O.exports.string,
+    valueKey: propTypes$1O.exports.string,
+    zeroState: propTypes$1O.exports.string,
+    maxHeightPx: propTypes$1O.exports.number,
+    maxHeightRem: propTypes$1O.exports.number
   }
 };
 const searchableOptionListProps = {
-  hideInlineSearch: propTypes$1N.exports.bool,
+  hideInlineSearch: propTypes$1O.exports.bool,
   onSearchChange: fun(),
-  search: propTypes$1N.exports.string,
-  searchDebounce: propTypes$1N.exports.number,
-  searchPlaceholder: propTypes$1N.exports.string,
+  search: propTypes$1O.exports.string,
+  searchDebounce: propTypes$1O.exports.number,
+  searchPlaceholder: propTypes$1O.exports.string,
   searchInputRef: ref()
 };
-const propTypes$1J = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, spsGlobalPropTypes), spsOptionListPassthroughProps.propTypes), searchableOptionListProps), {
+const propTypes$1K = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, spsGlobalPropTypes), spsOptionListPassthroughProps.propTypes), searchableOptionListProps), {
   attachTo: ref().isRequired,
-  conformWidth: propTypes$1N.exports.bool,
-  id: propTypes$1N.exports.string.isRequired,
-  isOpen: propTypes$1N.exports.bool,
-  keepOpen: propTypes$1N.exports.bool,
+  conformWidth: propTypes$1O.exports.bool,
+  id: propTypes$1O.exports.string.isRequired,
+  isOpen: propTypes$1O.exports.bool,
+  keepOpen: propTypes$1O.exports.bool,
   keyDown: impl(),
-  nullOption: propTypes$1N.exports.string,
-  offsets: propTypes$1N.exports.arrayOf(propTypes$1N.exports.number),
+  nullOption: propTypes$1O.exports.string,
+  offsets: propTypes$1O.exports.arrayOf(propTypes$1O.exports.number),
   onOptionListChanged: fun(),
   onOptionSelected: fun(),
   onPositionFlip: fun(),
   onSelfToggle: fun(),
-  optionRole: propTypes$1N.exports.string,
-  positionOverride: propTypes$1N.exports.arrayOf(enumValue(Position)),
-  selectedOption: propTypes$1N.exports.any,
+  optionRole: propTypes$1O.exports.string,
+  positionOverride: propTypes$1O.exports.arrayOf(enumValue(Position)),
+  selectedOption: propTypes$1O.exports.any,
   specialAction: fun(),
-  ignoreWidthStyles: propTypes$1N.exports.bool,
-  loading: propTypes$1N.exports.bool,
-  filterByTextAndCaptionKey: propTypes$1N.exports.bool
+  ignoreWidthStyles: propTypes$1O.exports.bool,
+  loading: propTypes$1O.exports.bool,
+  filterByTextAndCaptionKey: propTypes$1O.exports.bool
 });
 async function updateOptions(props2, searchState, searchStatePatch, setOptionList, setAnyOptionHasIcon, promiseRef) {
   const options = typeof props2.options === "function" ? props2.options(searchState.value) : props2.options || [];
@@ -2398,7 +2399,7 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
   }), /* @__PURE__ */ React.createElement("span", null, specialAction.label))));
 });
 Object.assign(SpsOptionList, {
-  propTypes: propTypes$1J,
+  propTypes: propTypes$1K,
   displayName: "SpsOptionList"
 });
 function selectChildren(children = [], groups = []) {
@@ -2487,7 +2488,7 @@ function useInputPopup(rootRef, popupRef) {
     doHidePopup
   };
 }
-const propsDoc$1F = {
+const propsDoc$1G = {
   debounce: "number",
   disabled: "boolean",
   formMeta: "SpsFormFieldMeta<string>",
@@ -2508,25 +2509,25 @@ const propsDoc$1F = {
   maxHeightOptionListPx: "number",
   maxHeightOptionListRem: "number"
 };
-const propTypes$1I = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  debounce: propTypes$1N.exports.number,
-  disabled: propTypes$1N.exports.bool,
+const propTypes$1J = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  debounce: propTypes$1O.exports.number,
+  disabled: propTypes$1O.exports.bool,
   formControl: impl(),
   formMeta: impl(),
   icon: enumValue(SpsIcon),
   onChange: fun(),
-  placeholder: propTypes$1N.exports.string,
-  suggestions: propTypes$1N.exports.oneOfType([
-    propTypes$1N.exports.arrayOf(propTypes$1N.exports.string),
-    propTypes$1N.exports.instanceOf(Promise),
+  placeholder: propTypes$1O.exports.string,
+  suggestions: propTypes$1O.exports.oneOfType([
+    propTypes$1O.exports.arrayOf(propTypes$1O.exports.string),
+    propTypes$1O.exports.instanceOf(Promise),
     fun()
   ]).isRequired,
-  tallOptionList: propTypes$1N.exports.bool,
-  value: propTypes$1N.exports.string,
-  zeroState: propTypes$1N.exports.string,
-  loading: propTypes$1N.exports.bool,
-  maxHeightOptionListPx: propTypes$1N.exports.number,
-  maxHeightOptionListRem: propTypes$1N.exports.number
+  tallOptionList: propTypes$1O.exports.bool,
+  value: propTypes$1O.exports.string,
+  zeroState: propTypes$1O.exports.string,
+  loading: propTypes$1O.exports.bool,
+  maxHeightOptionListPx: propTypes$1O.exports.number,
+  maxHeightOptionListRem: propTypes$1O.exports.number
 });
 function SpsAutocomplete(_a) {
   var _b = _a, {
@@ -2684,8 +2685,8 @@ function SpsAutocomplete(_a) {
   }));
 }
 Object.assign(SpsAutocomplete, {
-  props: propsDoc$1F,
-  propTypes: propTypes$1I,
+  props: propsDoc$1G,
+  propTypes: propTypes$1J,
   displayName: "SpsAutocomplete"
 });
 const SpsAutocompleteExamples = {
@@ -2808,7 +2809,7 @@ const SpsAutocompleteExamples = {
     }
   }
 };
-const propsDoc$1E = {
+const propsDoc$1F = {
   alignLeft: "boolean",
   disabled: "boolean",
   icon: "SpsIcon",
@@ -2824,21 +2825,21 @@ const propsDoc$1E = {
   maxHeightOptionListPx: "number",
   maxHeightOptionListRem: "number"
 };
-const propTypes$1H = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  alignLeft: propTypes$1N.exports.bool,
-  disabled: propTypes$1N.exports.bool,
+const propTypes$1I = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  alignLeft: propTypes$1O.exports.bool,
+  disabled: propTypes$1O.exports.bool,
   icon: enumValue(SpsIcon),
   kind: enumValue(DropdownKind),
-  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,
+  label: propTypes$1O.exports.string,
+  options: propTypes$1O.exports.arrayOf(propTypes$1O.exports.oneOfType([propTypes$1O.exports.func, propTypes$1O.exports.any])).isRequired,
+  spinning: propTypes$1O.exports.bool,
+  spinningTitle: propTypes$1O.exports.string,
+  tallOptionList: propTypes$1O.exports.bool,
   onOpen: fun(),
   onClose: fun(),
-  loading: propTypes$1N.exports.bool,
-  maxHeightOptionListPx: propTypes$1N.exports.number,
-  maxHeightOptionListRem: propTypes$1N.exports.number
+  loading: propTypes$1O.exports.bool,
+  maxHeightOptionListPx: propTypes$1O.exports.number,
+  maxHeightOptionListRem: propTypes$1O.exports.number
 });
 function SpsDropdown(props2) {
   const _a = props2, {
@@ -3001,12 +3002,12 @@ function SpsDropdown(props2) {
   }, spinningTitle || t2("design-system:button.spinningTitle")))));
 }
 Object.assign(SpsDropdown, {
-  props: propsDoc$1E,
-  propTypes: propTypes$1H,
+  props: propsDoc$1F,
+  propTypes: propTypes$1I,
   displayName: "SpsDropdown"
 });
-const propsDoc$1D = {};
-const propTypes$1G = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$1E = {};
+const propTypes$1H = __spreadValues({}, spsGlobalPropTypes);
 function SpsButtonGroup(props2) {
   const _a = props2, {
     children,
@@ -3037,8 +3038,8 @@ function SpsButtonGroup(props2) {
   }), others.length > 0 && others);
 }
 Object.assign(SpsButtonGroup, {
-  props: propsDoc$1D,
-  propTypes: propTypes$1G,
+  props: propsDoc$1E,
+  propTypes: propTypes$1H,
   displayName: "SpsButtonGroup"
 });
 const SpsButtonExamples = {
@@ -5770,8 +5771,8 @@ function SpsTabPanel(_c) {
     className: "sps-card__body"
   }), state.selectedItem ? state.selectedItem.props.children : null);
 }
-const propsDoc$1C = {};
-const propTypes$1F = {};
+const propsDoc$1D = {};
+const propTypes$1G = {};
 function SpsTabsV2(props2) {
   const state = useTabListState(props2);
   const ref2 = React.useRef();
@@ -5789,12 +5790,12 @@ function SpsTabsV2(props2) {
   }));
 }
 Object.assign(SpsTabsV2, {
-  props: propsDoc$1C,
-  propTypes: propTypes$1F,
+  props: propsDoc$1D,
+  propTypes: propTypes$1G,
   displayName: "SpsTabsV2"
 });
-const propsDoc$1B = {};
-const propTypes$1E = {};
+const propsDoc$1C = {};
+const propTypes$1F = {};
 function SpsCardV2Footer(_e) {
   var _f = _e, {
     children,
@@ -5808,12 +5809,12 @@ function SpsCardV2Footer(_e) {
   }, rest), children);
 }
 Object.assign(SpsCardV2Footer, {
-  props: propsDoc$1B,
-  propTypes: propTypes$1E,
+  props: propsDoc$1C,
+  propTypes: propTypes$1F,
   displayName: "SpsCardV2Footer"
 });
-const propsDoc$1A = {};
-const propTypes$1D = {};
+const propsDoc$1B = {};
+const propTypes$1E = {};
 function SpsCardV2Header(_g) {
   var _h = _g, {
     children,
@@ -5827,12 +5828,12 @@ function SpsCardV2Header(_g) {
   }, rest), children);
 }
 Object.assign(SpsCardV2Header, {
-  props: propsDoc$1A,
-  propTypes: propTypes$1D,
+  props: propsDoc$1B,
+  propTypes: propTypes$1E,
   displayName: "SpsCardV2Header"
 });
-const propsDoc$1z = {};
-const propTypes$1C = {};
+const propsDoc$1A = {};
+const propTypes$1D = {};
 function SpsCardV2(_i) {
   var _j = _i, {
     children,
@@ -5858,12 +5859,12 @@ function SpsCardV2(_i) {
   }, bodyContent), footer);
 }
 Object.assign(SpsCardV2, {
-  props: propsDoc$1z,
-  propTypes: propTypes$1C,
+  props: propsDoc$1A,
+  propTypes: propTypes$1D,
   displayName: "SpsCardV2"
 });
-const propsDoc$1y = {};
-const propTypes$1B = {};
+const propsDoc$1z = {};
+const propTypes$1C = {};
 function SpsCardV2Title(_k) {
   var _l = _k, {
     children,
@@ -5877,8 +5878,8 @@ function SpsCardV2Title(_k) {
   }, rest), children);
 }
 Object.assign(SpsCardV2Title, {
-  props: propsDoc$1y,
-  propTypes: propTypes$1B,
+  props: propsDoc$1z,
+  propTypes: propTypes$1C,
   displayName: "SpsCardV2Title"
 });
 const SpsCardExamples = {
@@ -6186,7 +6187,7 @@ const SpsCardExamples = {
     }
   }
 };
-const propsDoc$1x = {
+const propsDoc$1y = {
   checked: "boolean",
   disabled: "boolean",
   formMeta: "SpsFormFieldMeta<boolean>",
@@ -6195,14 +6196,14 @@ const propsDoc$1x = {
   label: "string",
   onChange: "ChangeEventHandler"
 };
-const propTypes$1A = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  checked: propTypes$1N.exports.bool,
-  disabled: propTypes$1N.exports.bool,
+const propTypes$1B = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  checked: propTypes$1O.exports.bool,
+  disabled: propTypes$1O.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  indeterminate: propTypes$1N.exports.bool,
-  inline: propTypes$1N.exports.bool,
-  label: propTypes$1N.exports.string,
+  indeterminate: propTypes$1O.exports.bool,
+  inline: propTypes$1O.exports.bool,
+  label: propTypes$1O.exports.string,
   onChange: fun()
 });
 function SpsCheckbox(_m) {
@@ -6278,8 +6279,8 @@ function SpsCheckbox(_m) {
   }, label || ""));
 }
 Object.assign(SpsCheckbox, {
-  props: propsDoc$1x,
-  propTypes: propTypes$1A,
+  props: propsDoc$1y,
+  propTypes: propTypes$1B,
   displayName: "SpsCheckbox"
 });
 const SpsCheckboxExamples = {
@@ -6407,16 +6408,16 @@ const SpsCheckboxExamples = {
     }
   }
 };
-const propsDoc$1w = {
+const propsDoc$1x = {
   disabled: "boolean",
   href: "string",
   kind: "ClickableTagKind",
   onAdd: "() => void",
   onRemove: "() => void"
 };
-const propTypes$1z = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1N.exports.bool,
-  href: propTypes$1N.exports.string,
+const propTypes$1A = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  disabled: propTypes$1O.exports.bool,
+  href: propTypes$1O.exports.string,
   kind: enumValue(ClickableTagKind),
   onAdd: fun(),
   onRemove: fun()
@@ -6487,8 +6488,8 @@ function SpsClickableTag(props2) {
   })));
 }
 Object.assign(SpsClickableTag, {
-  props: propsDoc$1w,
-  propTypes: propTypes$1z,
+  props: propsDoc$1x,
+  propTypes: propTypes$1A,
   displayName: "SpsClickableTag"
 });
 const SpsClickableTagExamples = {
@@ -14716,15 +14717,15 @@ var ConnectedDraggable = connect(makeMapStateToProps$1, mapDispatchToProps$1, nu
   areStatePropsEqual: isStrictEqual
 })(Draggable);
 ConnectedDraggable.defaultProps = defaultProps$1;
-const propsDoc$1v = {
+const propsDoc$1w = {
   content: "ReactNodeLike",
   icon: "SpsIcon",
   title: "string"
 };
-const propTypes$1y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  content: propTypes$1N.exports.node,
+const propTypes$1z = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  content: propTypes$1O.exports.node,
   icon: enumValue(SpsIcon),
-  title: propTypes$1N.exports.string
+  title: propTypes$1O.exports.string
 });
 function SpsCardHeader(props2) {
   const _a = props2, {
@@ -14756,15 +14757,15 @@ function SpsCardHeader(props2) {
   }, content));
 }
 Object.assign(SpsCardHeader, {
-  props: propsDoc$1v,
-  propTypes: propTypes$1y,
+  props: propsDoc$1w,
+  propTypes: propTypes$1z,
   displayName: "SpsCardHeader"
 });
-const propsDoc$1u = {
+const propsDoc$1v = {
   icon: "SpsIcon",
   kind: "TagKind"
 };
-const propTypes$1x = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$1y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   icon: enumValue(SpsIcon),
   kind: enumValue(TagKind)
 });
@@ -14797,11 +14798,11 @@ function SpsTag(props2) {
   }), children);
 }
 Object.assign(SpsTag, {
-  props: propsDoc$1u,
-  propTypes: propTypes$1x,
+  props: propsDoc$1v,
+  propTypes: propTypes$1y,
   displayName: "SpsTag"
 });
-const propsDoc$1t = {
+const propsDoc$1u = {
   activateTab: "Function",
   active: "boolean",
   icon: "SpsIcon",
@@ -14811,13 +14812,13 @@ const propsDoc$1t = {
   tagKind: "TagKind",
   tagIcon: "SpsIcon"
 };
-const propTypes$1w = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  activateTab: propTypes$1N.exports.func,
-  active: propTypes$1N.exports.bool,
+const propTypes$1x = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  activateTab: propTypes$1O.exports.func,
+  active: propTypes$1O.exports.bool,
   icon: enumValue(SpsIcon),
-  label: propTypes$1N.exports.string,
-  index: propTypes$1N.exports.number,
-  tag: propTypes$1N.exports.string,
+  label: propTypes$1O.exports.string,
+  index: propTypes$1O.exports.number,
+  tag: propTypes$1O.exports.string,
   tagKind: enumValue(TagKind),
   tagIcon: enumValue(SpsIcon)
 });
@@ -14880,8 +14881,8 @@ function SpsCardTabbedPane(props2) {
   }, tag));
 }
 Object.assign(SpsCardTabbedPane, {
-  props: propsDoc$1t,
-  propTypes: propTypes$1w,
+  props: propsDoc$1u,
+  propTypes: propTypes$1x,
   displayName: "SpsCardTabbedPane"
 });
 function useTab(children, activeTab, isTabbedCard) {
@@ -14923,19 +14924,19 @@ function useTab(children, activeTab, isTabbedCard) {
   }, [activeTab, children]);
   return [currentlyActiveTab, activateTab];
 }
-const propsDoc$1s = {
+const propsDoc$1t = {
   activeTab: "string",
   footer: "ReactNodeOrRenderFn",
   headerContent: "ReactNodeOrRenderFn",
   headerIcon: "SpsIcon",
   headerTitle: "string"
 };
-const propTypes$1v = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  activeTab: propTypes$1N.exports.string,
+const propTypes$1w = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  activeTab: propTypes$1O.exports.string,
   footer: nodeOrRenderFn,
   headerContent: nodeOrRenderFn,
   headerIcon: enumValue(SpsIcon),
-  headerTitle: propTypes$1N.exports.string
+  headerTitle: propTypes$1O.exports.string
 });
 function SpsCard(props2) {
   React.useEffect(() => {
@@ -15002,11 +15003,11 @@ function SpsCard(props2) {
   }, contentOf(footer)));
 }
 Object.assign(SpsCard, {
-  props: propsDoc$1s,
-  propTypes: propTypes$1v,
+  props: propsDoc$1t,
+  propTypes: propTypes$1w,
   displayName: "SpsCard"
 });
-const propsDoc$1r = {
+const propsDoc$1s = {
   index: "number",
   key: "string",
   columnId: "string",
@@ -15015,14 +15016,14 @@ const propsDoc$1r = {
   onDelete: "(columnValue: string) => void",
   mandatory: "boolean"
 };
-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,
+const propTypes$1v = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  index: propTypes$1O.exports.number,
+  key: propTypes$1O.exports.string,
+  columnId: propTypes$1O.exports.string,
+  name: propTypes$1O.exports.string,
+  value: propTypes$1O.exports.string,
   onDelete: fun(),
-  mandatory: propTypes$1N.exports.bool
+  mandatory: propTypes$1O.exports.bool
 });
 function SpsColumnChooserColumn(props2) {
   const _a = props2, {
@@ -15078,20 +15079,20 @@ function SpsColumnChooserColumn(props2) {
   })))));
 }
 Object.assign(SpsColumnChooserColumn, {
-  props: propsDoc$1r,
-  propTypes: propTypes$1u,
+  props: propsDoc$1s,
+  propTypes: propTypes$1v,
   displayName: "SpsColumnChooserColumn"
 });
-const propsDoc$1q = {
+const propsDoc$1r = {
   maxSelectedColumns: "number",
   unselectedColumns: "ColumnProps[]",
   selectedColumns: "ColumnProps[]",
   onApplyChanges: "(selectedColumns: ColumnProps[]) => void"
 };
-const propTypes$1t = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  maxSelectedColumns: propTypes$1N.exports.number,
-  unselectedColumns: propTypes$1N.exports.array,
-  selectedColumns: propTypes$1N.exports.array,
+const propTypes$1u = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  maxSelectedColumns: propTypes$1O.exports.number,
+  unselectedColumns: propTypes$1O.exports.array,
+  selectedColumns: propTypes$1O.exports.array,
   onApplyChanges: fun()
 });
 function SpsColumnChooser(props2) {
@@ -15231,8 +15232,8 @@ function SpsColumnChooser(props2) {
   })), provided.placeholder)))));
 }
 Object.assign(SpsColumnChooser, {
-  props: propsDoc$1q,
-  propTypes: propTypes$1t,
+  props: propsDoc$1r,
+  propTypes: propTypes$1u,
   displayName: "SpsColumnChooser"
 });
 const SpsColumnChooserExamples = {
@@ -15264,11 +15265,11 @@ const SpsColumnChooserExamples = {
     }
   }
 };
-const propsDoc$1p = {
+const propsDoc$1q = {
   icon: { type: "SpsIcon", required: true },
   size: "SpsIconSize"
 };
-const propTypes$1s = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$1t = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   icon: enumValue(SpsIcon).isRequired,
   size: enumValue(SpsIconSize)
 });
@@ -15294,28 +15295,28 @@ function SpsI(props2) {
   }, rest));
 }
 Object.assign(SpsI, {
-  props: propsDoc$1p,
-  propTypes: propTypes$1s,
+  props: propsDoc$1q,
+  propTypes: propTypes$1t,
   displayName: "SpsI"
 });
 Object.assign(SpsI, {
-  props: propsDoc$1p,
-  propTypes: propTypes$1s,
+  props: propsDoc$1q,
+  propTypes: propTypes$1t,
   displayName: "SpsI"
 });
-const propsDoc$1o = {
+const propsDoc$1p = {
   borderless: "boolean",
   lean: "boolean",
   leaner: { type: "boolean", deprecated: true },
   widthPx: "number",
   widthRem: "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
+const propTypes$1s = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  borderless: propTypes$1O.exports.bool,
+  lean: propTypes$1O.exports.bool,
+  leaner: propTypes$1O.exports.bool,
+  widthPx: propTypes$1O.exports.number,
+  widthRem: propTypes$1O.exports.number
 });
 function SpsContentRowCol(props2) {
   const _a = props2, {
@@ -15360,12 +15361,12 @@ function SpsContentRowCol(props2) {
   }), children);
 }
 Object.assign(SpsContentRowCol, {
-  props: propsDoc$1o,
-  propTypes: propTypes$1r,
+  props: propsDoc$1p,
+  propTypes: propTypes$1s,
   displayName: "SpsContentRowCol"
 });
-const propsDoc$1n = {};
-const propTypes$1q = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$1o = {};
+const propTypes$1r = __spreadValues({}, spsGlobalPropTypes);
 function SpsContentRowExpansion(props2) {
   const _a = props2, {
     children,
@@ -15386,11 +15387,11 @@ function SpsContentRowExpansion(props2) {
   }), children);
 }
 Object.assign(SpsContentRowExpansion, {
-  props: propsDoc$1n,
-  propTypes: propTypes$1q,
+  props: propsDoc$1o,
+  propTypes: propTypes$1r,
   displayName: "SpsContentRowExpansion"
 });
-const propsDoc$1m = {
+const propsDoc$1n = {
   alternateLayout: "boolean",
   initiallyExpanded: "boolean",
   cardSpacing: "boolean",
@@ -15403,18 +15404,18 @@ const propsDoc$1m = {
   selectable: "boolean",
   selected: "boolean"
 };
-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,
+const propTypes$1q = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  alternateLayout: propTypes$1O.exports.bool,
+  cardSpacing: propTypes$1O.exports.bool,
+  expanded: propTypes$1O.exports.bool,
+  initiallyExpanded: propTypes$1O.exports.bool,
   onBeforeCollapsed: fun(),
   onBeforeExpanded: fun(),
   onSelectionChange: fun(),
   onCollapsed: fun(),
   onExpanded: fun(),
-  selectable: propTypes$1N.exports.bool,
-  selected: propTypes$1N.exports.bool
+  selectable: propTypes$1O.exports.bool,
+  selected: propTypes$1O.exports.bool
 });
 function SpsContentRow(props2) {
   const _a = props2, {
@@ -15495,8 +15496,8 @@ function SpsContentRow(props2) {
   }, /* @__PURE__ */ React.createElement("section", null, ContentRowCheckBox()), /* @__PURE__ */ React.createElement("section", null, ExpandoThingy())), columns), expansion);
 }
 Object.assign(SpsContentRow, {
-  props: propsDoc$1m,
-  propTypes: propTypes$1p,
+  props: propsDoc$1n,
+  propTypes: propTypes$1q,
   displayName: "SpsContentRow"
 });
 const SpsContentRowExamples = {
@@ -15965,7 +15966,7 @@ function parse2(value) {
 function weekOfMonth$1(date2) {
   return Math.floor((date2.clone().date(1).day() + date2.date() - 1) / 7);
 }
-const propsDoc$1l = {
+const propsDoc$1m = {
   disabled: "boolean",
   format: "string",
   maxDate: "string",
@@ -15975,15 +15976,15 @@ const propsDoc$1l = {
   placeholder: "string",
   value: "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,
+const propTypes$1p = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  disabled: propTypes$1O.exports.bool,
+  format: propTypes$1O.exports.string,
+  maxDate: propTypes$1O.exports.string,
+  minDate: propTypes$1O.exports.string,
   onChange: fun(),
   onClickOutside: fun(),
-  placeholder: propTypes$1N.exports.string,
-  value: propTypes$1N.exports.string
+  placeholder: propTypes$1O.exports.string,
+  value: propTypes$1O.exports.string
 });
 function SpsDatepicker(props2) {
   const _a = props2, {
@@ -16346,8 +16347,8 @@ function SpsDatepicker(props2) {
   }))));
 }
 Object.assign(SpsDatepicker, {
-  props: propsDoc$1l,
-  propTypes: propTypes$1o,
+  props: propsDoc$1m,
+  propTypes: propTypes$1p,
   displayName: "SpsDatepicker"
 });
 const SpsDatepickerExamples = {
@@ -16442,7 +16443,7 @@ const SpsDatepickerExamples = {
     }
   }
 };
-const propsDoc$1k = {
+const propsDoc$1l = {
   placeholder: "string",
   disabled: "boolean",
   format: "string",
@@ -16453,13 +16454,13 @@ const propsDoc$1k = {
   value: "MomentRange",
   preset: "Duration"
 };
-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,
+const propTypes$1o = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  placeholder: propTypes$1O.exports.string,
+  disabled: propTypes$1O.exports.bool,
+  format: propTypes$1O.exports.string,
+  minDate: propTypes$1O.exports.string,
+  maxDate: propTypes$1O.exports.string,
+  availablePresets: propTypes$1O.exports.array,
   onChange: fun(),
   value: impl(),
   preset: impl()
@@ -17107,8 +17108,8 @@ function SpsDateRangePicker(props2) {
   }) : "")));
 }
 Object.assign(SpsDateRangePicker, {
-  props: propsDoc$1k,
-  propTypes: propTypes$1n,
+  props: propsDoc$1l,
+  propTypes: propTypes$1o,
   displayName: "SpsDateRangePicker"
 });
 const SpsDateRangePickerExamples = {
@@ -21711,7 +21712,7 @@ const formatMaps = {
   LONG_FULLDATETIME: "LLLL",
   LONG_FULLDATETIME_ZONE: "LLLL z"
 };
-const propsDoc$1j = {
+const propsDoc$1k = {
   currentUser: "any",
   dateToFormat: "string | Date",
   format: "string",
@@ -21720,17 +21721,17 @@ const propsDoc$1j = {
   relativeHrs: "number",
   tz: "string"
 };
-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)
+const propTypes$1n = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  currentUser: propTypes$1O.exports.any,
+  dateToFormat: propTypes$1O.exports.oneOfType([
+    propTypes$1O.exports.string,
+    propTypes$1O.exports.instanceOf(Date)
   ]),
-  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
+  format: propTypes$1O.exports.string,
+  locale: propTypes$1O.exports.string,
+  relative: propTypes$1O.exports.bool,
+  relativeHrs: propTypes$1O.exports.number,
+  tz: propTypes$1O.exports.string
 });
 function showRelative(dateToCheck, relative, relativeHrs) {
   if (!relativeHrs && !relative) {
@@ -21806,8 +21807,8 @@ function SpsDateTime(props2) {
   }));
 }
 Object.assign(SpsDateTime, {
-  props: propsDoc$1j,
-  propTypes: propTypes$1m,
+  props: propsDoc$1k,
+  propTypes: propTypes$1n,
   displayName: "SpsDateTime"
 });
 const SpsDatetimeExamples = {
@@ -21828,15 +21829,15 @@ const SpsDatetimeExamples = {
     }
   }
 };
-const propsDoc$1i = {
+const propsDoc$1j = {
   compact: "boolean",
   wideTerms: "boolean",
   widerTerms: "boolean"
 };
-const propTypes$1l = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  compact: propTypes$1N.exports.bool,
-  wideTerms: propTypes$1N.exports.bool,
-  widerTerms: propTypes$1N.exports.bool
+const propTypes$1m = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  compact: propTypes$1O.exports.bool,
+  wideTerms: propTypes$1O.exports.bool,
+  widerTerms: propTypes$1O.exports.bool
 });
 function SpsDescriptionList(props2) {
   const _a = props2, {
@@ -21876,20 +21877,20 @@ function SpsDescriptionList(props2) {
   }, rest), childrenWithProps);
 }
 Object.assign(SpsDescriptionList, {
-  props: propsDoc$1i,
-  propTypes: propTypes$1l,
+  props: propsDoc$1j,
+  propTypes: propTypes$1m,
   displayName: "SpsDescriptionList / SpsDl"
 });
 function SpsDl(p2) {
   return SpsDescriptionList(p2);
 }
 Object.assign(SpsDl, {
-  props: propsDoc$1i,
-  propTypes: propTypes$1l,
+  props: propsDoc$1j,
+  propTypes: propTypes$1m,
   displayName: "SpsDescriptionList / SpsDl"
 });
-const propsDoc$1h = {};
-const propTypes$1k = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$1i = {};
+const propTypes$1l = __spreadValues({}, spsGlobalPropTypes);
 function SpsDescriptionListDefinition(props2) {
   const _a = props2, {
     children,
@@ -21909,16 +21910,16 @@ function SpsDescriptionListDefinition(props2) {
   }, rest), children);
 }
 Object.assign(SpsDescriptionListDefinition, {
-  props: propsDoc$1h,
-  propTypes: propTypes$1k,
+  props: propsDoc$1i,
+  propTypes: propTypes$1l,
   displayName: "SpsDescriptionListDefinition / SpsDd"
 });
 function SpsDd(p2) {
   return SpsDescriptionListDefinition(p2);
 }
 Object.assign(SpsDd, {
-  props: propsDoc$1h,
-  propTypes: propTypes$1k,
+  props: propsDoc$1i,
+  propTypes: propTypes$1l,
   displayName: "SpsDescriptionListDefinition / SpsDd"
 });
 var TooltipVisibility;
@@ -21933,7 +21934,7 @@ function toggleTooltipState(state) {
 }
 const CARET_SPACING_PX = 13;
 const openTips = new Map();
-const propsDoc$1g = {
+const propsDoc$1h = {
   for: { type: "React.MutableRefObject<any> | string", required: true },
   hideDelay: "number",
   isShown: "TooltipVisibility",
@@ -21945,17 +21946,17 @@ const propsDoc$1g = {
   showOn: "TooltipShowTrigger",
   title: "string | ReactNode"
 };
-const propTypes$1j = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  for: propTypes$1N.exports.oneOfType([ref(), propTypes$1N.exports.string]).isRequired,
-  hideDelay: propTypes$1N.exports.number,
+const propTypes$1k = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  for: propTypes$1O.exports.oneOfType([ref(), propTypes$1O.exports.string]).isRequired,
+  hideDelay: propTypes$1O.exports.number,
   isShown: enumValue(TooltipVisibility),
   kind: enumValue(TooltipKind),
-  offsets: propTypes$1N.exports.arrayOf(propTypes$1N.exports.number),
+  offsets: propTypes$1O.exports.arrayOf(propTypes$1O.exports.number),
   onDeferred: fun(),
   position: enumValue(Position),
   altPosition: enumValue(Position),
   showOn: enumValue(TooltipShowTrigger),
-  title: propTypes$1N.exports.string || propTypes$1N.exports.node
+  title: propTypes$1O.exports.string || propTypes$1O.exports.node
 });
 function SpsTooltip({
   children,
@@ -22159,26 +22160,26 @@ function SpsTooltip({
   })));
 }
 Object.assign(SpsTooltip, {
-  props: propsDoc$1g,
-  propTypes: propTypes$1j,
+  props: propsDoc$1h,
+  propTypes: propTypes$1k,
   displayName: "SpsTooltip"
 });
-const propsDoc$1f = {
+const propsDoc$1g = {
   error: "boolean",
   errors: "ReactNodeOrRenderFn",
   help: "ReactNodeOrRenderFn",
   labelFor: "SpsFormFieldMeta<any>",
   required: "boolean"
 };
-const propTypes$1i = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  error: propTypes$1N.exports.bool,
+const propTypes$1j = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  error: propTypes$1O.exports.bool,
   errors: nodeOrRenderFn,
   help: nodeOrRenderFn,
-  labelFor: propTypes$1N.exports.oneOfType([
+  labelFor: propTypes$1O.exports.oneOfType([
     impl(),
     impl()
   ]),
-  required: propTypes$1N.exports.bool
+  required: propTypes$1O.exports.bool
 });
 function SpsDescriptionListTerm(props2) {
   const _a = props2, {
@@ -22234,16 +22235,16 @@ function SpsDescriptionListTerm(props2) {
   }, contentOf(tipKind === TooltipKind.ERROR ? errors : help)));
 }
 Object.assign(SpsDescriptionListTerm, {
-  props: propsDoc$1f,
-  propTypes: propTypes$1i,
+  props: propsDoc$1g,
+  propTypes: propTypes$1j,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
 function SpsDt(p2) {
   return SpsDescriptionListTerm(p2);
 }
 Object.assign(SpsDt, {
-  props: propsDoc$1f,
-  propTypes: propTypes$1i,
+  props: propsDoc$1g,
+  propTypes: propTypes$1j,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
 const SpsDescriptionListExamples = {
@@ -22721,19 +22722,19 @@ const SpsDropdownExamples = {
     }
   }
 };
-const propsDoc$1e = {
+const propsDoc$1f = {
   checked: "boolean",
   onChange: "ChangeEventHandler",
   indeterminate: "boolean",
   disabled: "boolean",
   options: "Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"
 };
-const propTypes$1h = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  checked: propTypes$1N.exports.bool,
+const propTypes$1i = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  checked: propTypes$1O.exports.bool,
   onChange: fun(),
-  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
+  indeterminate: propTypes$1O.exports.bool,
+  options: propTypes$1O.exports.arrayOf(propTypes$1O.exports.oneOfType([propTypes$1O.exports.func, propTypes$1O.exports.any])).isRequired,
+  disabled: propTypes$1O.exports.bool
 });
 function SpsCheckboxDropdown(props2) {
   const _a = props2, {
@@ -22767,14 +22768,14 @@ function SpsCheckboxDropdown(props2) {
   }));
 }
 Object.assign(SpsCheckboxDropdown, {
-  props: propsDoc$1e,
-  propTypes: propTypes$1h,
+  props: propsDoc$1f,
+  propTypes: propTypes$1i,
   displayName: "SpsCheckboxDropdown"
 });
-const propsDoc$1d = {
+const propsDoc$1e = {
   kind: "FeedbackBlockKind"
 };
-const propTypes$1g = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$1h = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   kind: enumValue(FeedbackBlockKind)
 });
 function SpsFeedbackBlock(props2) {
@@ -22805,8 +22806,8 @@ function SpsFeedbackBlock(props2) {
   }, children));
 }
 Object.assign(SpsFeedbackBlock, {
-  props: propsDoc$1d,
-  propTypes: propTypes$1g,
+  props: propsDoc$1e,
+  propTypes: propTypes$1h,
   displayName: "SpsFeedbackBlock"
 });
 const SpsFeedbackBlockExamples = {
@@ -22908,7 +22909,7 @@ const SpsFeedbackBlockExamples = {
     }
   }
 };
-const propsDoc$1c = {
+const propsDoc$1d = {
   errors: "ReactNodeOrRenderFn",
   formMeta: "SpsFormSetMeta<any>",
   legend: "string",
@@ -22917,16 +22918,16 @@ const propsDoc$1c = {
   onToggled: "(isEnabled: boolean) => void",
   tooltip: "string"
 };
-const propTypes$1f = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$1g = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   errors: nodeOrRenderFn,
   formArray: impl(),
   formGroup: impl(),
   formMeta: impl(),
-  legend: propTypes$1N.exports.string,
-  optional: propTypes$1N.exports.bool,
-  enabled: propTypes$1N.exports.bool,
+  legend: propTypes$1O.exports.string,
+  optional: propTypes$1O.exports.bool,
+  enabled: propTypes$1O.exports.bool,
   onToggled: fun(),
-  tooltip: propTypes$1N.exports.string
+  tooltip: propTypes$1O.exports.string
 });
 function SpsFieldset({
   children,
@@ -23006,8 +23007,8 @@ function SpsFieldset({
   }, contentOf(errors)), children));
 }
 Object.assign(SpsFieldset, {
-  props: propsDoc$1c,
-  propTypes: propTypes$1f,
+  props: propsDoc$1d,
+  propTypes: propTypes$1g,
   displayName: "SpsFieldset"
 });
 const SpsFieldsetExamples = {
@@ -23293,8 +23294,8 @@ const SpsFieldsetExamples = {
     }
   }
 };
-const propsDoc$1b = {};
-const propTypes$1e = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$1c = {};
+const propTypes$1f = __spreadValues({}, spsGlobalPropTypes);
 function SpsFocusedTaskActions(props2) {
   const _a = props2, {
     children,
@@ -23315,18 +23316,18 @@ function SpsFocusedTaskActions(props2) {
   }, children)));
 }
 Object.assign(SpsFocusedTaskActions, {
-  props: propsDoc$1b,
-  propTypes: propTypes$1e,
+  props: propsDoc$1c,
+  propTypes: propTypes$1f,
   displayName: "SpsFocusedTaskActions"
 });
-const propsDoc$1a = {
+const propsDoc$1b = {
   fullWidth: "boolean",
   isOpen: "boolean",
   onClose: "() => void"
 };
-const propTypes$1d = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  fullWidth: propTypes$1N.exports.bool,
-  isOpen: propTypes$1N.exports.bool,
+const propTypes$1e = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  fullWidth: propTypes$1O.exports.bool,
+  isOpen: propTypes$1O.exports.bool,
   onClose: fun()
 });
 function SpsFocusedTask(props2) {
@@ -23383,8 +23384,8 @@ function SpsFocusedTask(props2) {
   }, isOpen && content)), actions);
 }
 Object.assign(SpsFocusedTask, {
-  props: propsDoc$1a,
-  propTypes: propTypes$1d,
+  props: propsDoc$1b,
+  propTypes: propTypes$1e,
   displayName: "SpsFocusedTask"
 });
 const SpsFocusedTaskExamples = {
@@ -24447,19 +24448,19 @@ const SpsAddRemoveFormRowExamples = {
     }
   }
 };
-const propsDoc$19 = {
+const propsDoc$1a = {
   imgSrc: "string",
   kind: "GrowlerKind",
   onClose: "() => void",
   persist: "boolean",
   title: "string"
 };
-const propTypes$1c = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  imgSrc: propTypes$1N.exports.string,
+const propTypes$1d = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  imgSrc: propTypes$1O.exports.string,
   kind: enumValue(GrowlerKind),
   onClose: fun(),
-  persist: propTypes$1N.exports.bool,
-  title: propTypes$1N.exports.string
+  persist: propTypes$1O.exports.bool,
+  title: propTypes$1O.exports.string
 });
 function SpsGrowler(props2) {
   const _a = props2, {
@@ -24565,8 +24566,8 @@ function SpsGrowler(props2) {
   })))));
 }
 Object.assign(SpsGrowler, {
-  props: propsDoc$19,
-  propTypes: propTypes$1c,
+  props: propsDoc$1a,
+  propTypes: propTypes$1d,
   displayName: "SpsGrowler"
 });
 const SpsGrowlerExamples = {
@@ -24941,18 +24942,18 @@ const SpsGrowlerExamples = {
     }
   }
 };
-const propsDoc$18 = {
+const propsDoc$19 = {
   disabled: "boolean",
   min: "number",
   max: "number",
   step: "number",
   onValueChange: "(newValue: number) => void"
 };
-const propTypes$1b = __spreadValues({
-  disabled: propTypes$1N.exports.bool,
-  min: propTypes$1N.exports.number,
-  max: propTypes$1N.exports.number,
-  step: propTypes$1N.exports.number,
+const propTypes$1c = __spreadValues({
+  disabled: propTypes$1O.exports.bool,
+  min: propTypes$1O.exports.number,
+  max: propTypes$1O.exports.number,
+  step: propTypes$1O.exports.number,
   onValueChange: fun()
 }, spsGlobalPropTypes);
 function SpsIncrementor(props2) {
@@ -25055,8 +25056,8 @@ function SpsIncrementor(props2) {
   }))));
 }
 Object.assign(SpsIncrementor, {
-  props: propsDoc$18,
-  propTypes: propTypes$1b,
+  props: propsDoc$19,
+  propTypes: propTypes$1c,
   displayName: "SpsIncrementor"
 });
 const SpsIncrementorExamples = {
@@ -25095,7 +25096,7 @@ function SpsInsights(props2) {
     className: "insight-tile-wrapper"
   }, children);
 }
-const propsDoc$17 = {
+const propsDoc$18 = {
   horizontal: "boolean",
   icon: "SpsIcon",
   kind: "SpsInsightTileKind",
@@ -25104,14 +25105,14 @@ const propsDoc$17 = {
   partnerCount: "number",
   totalPartners: "number"
 };
-const propTypes$1a = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  horizontal: propTypes$1N.exports.bool,
+const propTypes$1b = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  horizontal: propTypes$1O.exports.bool,
   icon: enumValue(SpsIcon),
   kind: enumValue(SpsInsightTileKind),
-  title: propTypes$1N.exports.string,
-  metric: propTypes$1N.exports.number || propTypes$1N.exports.string,
-  partnerCount: propTypes$1N.exports.number,
-  totalPartners: propTypes$1N.exports.number
+  title: propTypes$1O.exports.string,
+  metric: propTypes$1O.exports.number || propTypes$1O.exports.string,
+  partnerCount: propTypes$1O.exports.number,
+  totalPartners: propTypes$1O.exports.number
 });
 function SpsInsightTile(props2) {
   const _a = props2, {
@@ -25171,8 +25172,8 @@ function SpsInsightTile(props2) {
   }, t2("design-system:insightTile.partners")))));
 }
 Object.assign(SpsInsightTile, {
-  props: propsDoc$17,
-  propTypes: propTypes$1a,
+  props: propsDoc$18,
+  propTypes: propTypes$1b,
   displayName: "SpsInsightTile"
 });
 const SpsInsightTileExamples = {
@@ -25446,11 +25447,11 @@ const SpsInsightTileExamples = {
     }
   }
 };
-const propsDoc$16 = {
+const propsDoc$17 = {
   inline: "boolean"
 };
-const propTypes$19 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  inline: propTypes$1N.exports.bool
+const propTypes$1a = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  inline: propTypes$1O.exports.bool
 });
 function SpsKeyValueList(props2) {
   const _a = props2, {
@@ -25473,16 +25474,16 @@ function SpsKeyValueList(props2) {
   }, rest), children);
 }
 Object.assign(SpsKeyValueList, {
-  props: propsDoc$16,
-  propTypes: propTypes$19,
+  props: propsDoc$17,
+  propTypes: propTypes$1a,
   displayName: "SpsKeyValueList"
 });
-const propsDoc$15 = {
+const propsDoc$16 = {
   itemKey: { type: "string | nodeOrRenderFn", required: true },
   titleColor: "KeyValueListTitleColor"
 };
-const propTypes$18 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  itemKey: propTypes$1N.exports.string.isRequired || nodeOrRenderFn.isRequired,
+const propTypes$19 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  itemKey: propTypes$1O.exports.string.isRequired || nodeOrRenderFn.isRequired,
   titleColor: enumValue(KeyValueListTitleColor)
 });
 function SpsKeyValueListItem(props2) {
@@ -25514,8 +25515,8 @@ function SpsKeyValueListItem(props2) {
   }, children));
 }
 Object.assign(SpsKeyValueListItem, {
-  props: propsDoc$15,
-  propTypes: propTypes$18,
+  props: propsDoc$16,
+  propTypes: propTypes$19,
   displayName: "SpsKeyValueListItem"
 });
 const SpsKeyValueListExamples = {
@@ -25558,7 +25559,7 @@ const SpsKeyValueListExamples = {
     }
   }
 };
-const propsDoc$14 = {
+const propsDoc$15 = {
   for: { type: "SpsFormMetaBase<any>", required: true },
   description: "string",
   stronglySuggested: "boolean",
@@ -25567,16 +25568,16 @@ const propsDoc$14 = {
   helpIconColor: "string",
   errors: "ReactNodeOrRenderFn"
 };
-const propTypes$17 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  description: propTypes$1N.exports.string,
-  for: propTypes$1N.exports.oneOfType([
+const propTypes$18 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  description: propTypes$1O.exports.string,
+  for: propTypes$1O.exports.oneOfType([
     impl(),
     impl()
   ]).isRequired,
-  stronglySuggested: propTypes$1N.exports.bool,
+  stronglySuggested: propTypes$1O.exports.bool,
   help: nodeOrRenderFn,
   helpIcon: enumValue(SpsIcon),
-  helpIconColor: propTypes$1N.exports.string,
+  helpIconColor: propTypes$1O.exports.string,
   errors: nodeOrRenderFn
 });
 function SpsLabel(_o) {
@@ -25772,8 +25773,8 @@ function SpsLabel(_o) {
   }, description));
 }
 Object.assign(SpsLabel, {
-  props: propsDoc$14,
-  propTypes: propTypes$17,
+  props: propsDoc$15,
+  propTypes: propTypes$18,
   displayName: "SpsLabel"
 });
 const SpsLabelExamples = {
@@ -25991,13 +25992,13 @@ const SpsLabelExamples = {
     }
   }
 };
-const propsDoc$13 = {
+const propsDoc$14 = {
   clearSelected: { type: "() => void", required: true },
   itemsSelected: { type: "string | number", required: true }
 };
-const propTypes$16 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$17 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   clearSelected: fun().isRequired,
-  itemsSelected: propTypes$1N.exports.oneOfType([propTypes$1N.exports.string, propTypes$1N.exports.number])
+  itemsSelected: propTypes$1O.exports.oneOfType([propTypes$1O.exports.string, propTypes$1O.exports.number])
 });
 function SpsListActionBar(props2) {
   const _a = props2, {
@@ -26047,8 +26048,8 @@ function SpsListActionBar(props2) {
   }, t2("design-system:listActionBar.clearSelected")))));
 }
 Object.assign(SpsListActionBar, {
-  props: propsDoc$13,
-  propTypes: propTypes$16,
+  props: propsDoc$14,
+  propTypes: propTypes$17,
   displayName: "SpsListActionBar"
 });
 const getScrollParent = (node) => {
@@ -26244,18 +26245,18 @@ const usePinnedTableHeadStyle = (containerRef) => {
     };
   });
 };
-const propsDoc$12 = {
+const propsDoc$13 = {
   controlCell: "boolean",
   currentSort: "Array<SortedColumn>",
   onSortChange: "SortChangeHandler",
   sortKey: "string"
 };
-const propTypes$15 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  controlCell: propTypes$1N.exports.bool,
-  currentSort: propTypes$1N.exports.arrayOf(impl()),
+const propTypes$16 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  controlCell: propTypes$1O.exports.bool,
+  currentSort: propTypes$1O.exports.arrayOf(impl()),
   onSortChange: fun(),
-  sortKey: propTypes$1N.exports.string,
-  pinned: propTypes$1N.exports.bool
+  sortKey: propTypes$1O.exports.string,
+  pinned: propTypes$1O.exports.bool
 });
 function SpsTableHeader(props2) {
   const _a = props2, {
@@ -26314,24 +26315,24 @@ function SpsTableHeader(props2) {
   }, children));
 }
 Object.assign(SpsTableHeader, {
-  props: propsDoc$12,
-  propTypes: propTypes$15,
+  props: propsDoc$13,
+  propTypes: propTypes$16,
   displayName: "SpsTableHeader"
 });
 function SpsTh(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableHeader, __spreadValues({}, props2));
 }
 Object.assign(SpsTh, {
-  props: propsDoc$12,
-  propTypes: propTypes$15,
+  props: propsDoc$13,
+  propTypes: propTypes$16,
   displayName: "SpsTh"
 });
-const propsDoc$11 = {
+const propsDoc$12 = {
   currentSort: "Array<SortedColumn>",
   onSortChange: "SortChangeHandler"
 };
-const propTypes$14 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  currentSort: propTypes$1N.exports.arrayOf(impl()),
+const propTypes$15 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  currentSort: propTypes$1O.exports.arrayOf(impl()),
   onSortChange: fun()
 });
 function SpsTableRow(props2) {
@@ -26367,26 +26368,26 @@ function SpsTableRow(props2) {
   }));
 }
 Object.assign(SpsTableRow, {
-  props: propsDoc$11,
-  propTypes: propTypes$14,
+  props: propsDoc$12,
+  propTypes: propTypes$15,
   displayName: "SpsTableRow"
 });
 function SpsTr(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableRow, __spreadValues({}, props2));
 }
 Object.assign(SpsTr, {
-  props: propsDoc$11,
-  propTypes: propTypes$14,
+  props: propsDoc$12,
+  propTypes: propTypes$15,
   displayName: "SpsTr"
 });
-const propsDoc$10 = {
+const propsDoc$11 = {
   currentSort: "Array<SortedColumn>",
   onSortChange: "SortChangeHandler"
 };
-const propTypes$13 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$14 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onSortChange: fun(),
-  currentSort: propTypes$1N.exports.arrayOf(impl()),
-  pinned: propTypes$1N.exports.bool
+  currentSort: propTypes$1O.exports.arrayOf(impl()),
+  pinned: propTypes$1O.exports.bool
 });
 function SpsTableHead(props2) {
   const _a = props2, {
@@ -26422,27 +26423,27 @@ function SpsTableHead(props2) {
   }));
 }
 Object.assign(SpsTableHead, {
-  props: propsDoc$10,
-  propTypes: propTypes$13,
+  props: propsDoc$11,
+  propTypes: propTypes$14,
   displayName: "SpsTableHead"
 });
 function SpsThead(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableHead, __spreadValues({}, props2));
 }
 Object.assign(SpsThead, {
-  props: propsDoc$10,
-  propTypes: propTypes$13,
+  props: propsDoc$11,
+  propTypes: propTypes$14,
   displayName: "SpsThead"
 });
-const propsDoc$$ = {
+const propsDoc$10 = {
   sort: "SortedColumn",
   onSortChange: "SortChangeHandler",
   selectable: "boolean"
 };
-const propTypes$12 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$13 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onSortChange: fun(),
-  sort: propTypes$1N.exports.arrayOf(impl()),
-  selectable: propTypes$1N.exports.bool
+  sort: propTypes$1O.exports.arrayOf(impl()),
+  selectable: propTypes$1O.exports.bool
 });
 function SpsTable(props2) {
   const _a = props2, {
@@ -26498,12 +26499,12 @@ function SpsTable(props2) {
   })));
 }
 Object.assign(SpsTable, {
-  props: propsDoc$$,
-  propTypes: propTypes$12,
+  props: propsDoc$10,
+  propTypes: propTypes$13,
   displayName: "SpsTable"
 });
-const propsDoc$_ = {};
-const propTypes$11 = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$$ = {};
+const propTypes$12 = __spreadValues({}, spsGlobalPropTypes);
 function SpsTableBody(props2) {
   const _a = props2, {
     children,
@@ -26523,34 +26524,34 @@ function SpsTableBody(props2) {
   }, rest), children);
 }
 Object.assign(SpsTableBody, {
-  props: propsDoc$_,
-  propTypes: propTypes$11,
+  props: propsDoc$$,
+  propTypes: propTypes$12,
   displayName: "SpsTableBody"
 });
 function SpsTbody(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableBody, __spreadValues({}, props2));
 }
 Object.assign(SpsTbody, {
-  props: propsDoc$_,
-  propTypes: propTypes$11,
+  props: propsDoc$$,
+  propTypes: propTypes$12,
   displayName: "SpsTbody"
 });
-const propsDoc$Z = {
+const propsDoc$_ = {
   buttonCell: "boolean",
   controlCell: "boolean",
   wrap: "SpsTableCellWrapWidth"
 };
-const propTypes$10 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  buttonCell: propTypes$1N.exports.bool,
-  controlCell: propTypes$1N.exports.bool,
-  wrap: propTypes$1N.exports.oneOf([
+const propTypes$11 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  buttonCell: propTypes$1O.exports.bool,
+  controlCell: propTypes$1O.exports.bool,
+  wrap: propTypes$1O.exports.oneOf([
     200,
     300,
     400,
     500,
     600
   ]),
-  pinned: propTypes$1N.exports.bool
+  pinned: propTypes$1O.exports.bool
 });
 function SpsTableCell(props2) {
   const _a = props2, {
@@ -26583,20 +26584,20 @@ function SpsTableCell(props2) {
   }, rest), children);
 }
 Object.assign(SpsTableCell, {
-  props: propsDoc$Z,
-  propTypes: propTypes$10,
+  props: propsDoc$_,
+  propTypes: propTypes$11,
   displayName: "SpsTableCell"
 });
 function SpsTd(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableCell, __spreadValues({}, props2));
 }
 Object.assign(SpsTd, {
-  props: propsDoc$Z,
-  propTypes: propTypes$10,
+  props: propsDoc$_,
+  propTypes: propTypes$11,
   displayName: "SpsTd"
 });
-const propsDoc$Y = {};
-const propTypes$$ = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$Z = {};
+const propTypes$10 = __spreadValues({}, spsGlobalPropTypes);
 const CSS_BLOCK$3 = "sps-icon-button-panel";
 function SpsIconButtonPanel(_q) {
   var _r = _q, {
@@ -26615,8 +26616,8 @@ function SpsIconButtonPanel(_q) {
   }, rest), iconButtons);
 }
 Object.assign(SpsIconButtonPanel, {
-  props: propsDoc$Y,
-  propTypes: propTypes$$,
+  props: propsDoc$Z,
+  propTypes: propTypes$10,
   displayName: "SpsIconButtonPanel"
 });
 const SpsTableExamples = {
@@ -27800,8 +27801,8 @@ const SpsListActionBarExamples = {
     }
   }
 };
-const propTypes$_ = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  tabs: propTypes$1N.exports.arrayOf(impl()).isRequired,
+const propTypes$$ = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  tabs: propTypes$1O.exports.arrayOf(impl()).isRequired,
   activeTab: impl(),
   onTabChange: fun()
 });
@@ -27865,17 +27866,17 @@ function SpsTabs(props2) {
   }, tab2.tag)))));
 }
 Object.assign(SpsTabs, {
-  propTypes: propTypes$_,
+  propTypes: propTypes$$,
   displayName: "SpsTabs"
 });
-const propsDoc$X = {
+const propsDoc$Y = {
   resultsCount: "number",
   totalResults: "number",
   onClear: "() => void"
 };
-const propTypes$Z = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  resultsCount: propTypes$1N.exports.number,
-  totalResults: propTypes$1N.exports.number,
+const propTypes$_ = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  resultsCount: propTypes$1O.exports.number,
+  totalResults: propTypes$1O.exports.number,
   onClear: fun()
 });
 function SpsSearchResultsBar(props2) {
@@ -27926,20 +27927,20 @@ function SpsSearchResultsBar(props2) {
   }, t2("design-system:searchResultsBar.clear"))));
 }
 Object.assign(SpsSearchResultsBar, {
-  props: propsDoc$X,
-  propTypes: propTypes$Z,
+  props: propsDoc$Y,
+  propTypes: propTypes$_,
   displayName: "SpsSearchResultsBar"
 });
-const propsDoc$W = {
+const propsDoc$X = {
   results: "number",
   selections: "{ [key: string]: string[] }",
   zeroStateText: "string",
   onClear: "() => void"
 };
-const propTypes$Y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  results: propTypes$1N.exports.number,
+const propTypes$Z = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  results: propTypes$1O.exports.number,
   selections: impl(),
-  zeroStateText: propTypes$1N.exports.string,
+  zeroStateText: propTypes$1O.exports.string,
   onClear: fun()
 });
 function SpsSearchResultsBarV2(props2) {
@@ -27996,8 +27997,8 @@ function SpsSearchResultsBarV2(props2) {
   }, t2("design-system:searchResultsBar.clearResults"))));
 }
 Object.assign(SpsSearchResultsBarV2, {
-  props: propsDoc$W,
-  propTypes: propTypes$Y,
+  props: propsDoc$X,
+  propTypes: propTypes$Z,
   displayName: "SpsSearchResultsBarV2"
 });
 const SpsSearchResultsBarExamples = {
@@ -28150,15 +28151,15 @@ const SpsSearchResultsBarExamples = {
     }
   }
 };
-const propsDoc$V = {
+const propsDoc$W = {
   formMeta: "SpsFormSetMeta<any>",
   stacked: "boolean"
 };
-const propTypes$X = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$Y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   formArray: impl(),
   formGroup: impl(),
   formMeta: impl(),
-  stacked: propTypes$1N.exports.bool
+  stacked: propTypes$1O.exports.bool
 });
 function SpsInputGroup(_s) {
   var _t = _s, {
@@ -28203,14 +28204,14 @@ function SpsInputGroup(_s) {
   }, children));
 }
 Object.assign(SpsInputGroup, {
-  props: propsDoc$V,
-  propTypes: propTypes$X,
+  props: propsDoc$W,
+  propTypes: propTypes$Y,
   displayName: "SpsInputGroup"
 });
-const propsDoc$U = {
+const propsDoc$V = {
   onSubmit: "FormEventHandler"
 };
-const propTypes$W = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$X = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onSubmit: fun()
 });
 function SpsListToolbarSearch(props2) {
@@ -28233,12 +28234,12 @@ function SpsListToolbarSearch(props2) {
   }, children));
 }
 Object.assign(SpsListToolbarSearch, {
-  props: propsDoc$U,
-  propTypes: propTypes$W,
+  props: propsDoc$V,
+  propTypes: propTypes$X,
   displayName: "SpsListToolbarSearch"
 });
-const propsDoc$T = {};
-const propTypes$V = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$U = {};
+const propTypes$W = __spreadValues({}, spsGlobalPropTypes);
 function SpsListToolbarSearchInfo(props2) {
   const {
     children
@@ -28246,11 +28247,11 @@ function SpsListToolbarSearchInfo(props2) {
   return /* @__PURE__ */ React.createElement("div", null, children);
 }
 Object.assign(SpsListToolbarSearchInfo, {
-  props: propsDoc$T,
-  propTypes: propTypes$V,
+  props: propsDoc$U,
+  propTypes: propTypes$W,
   displayName: "SpsListToolbarSearchInfo"
 });
-const propsDoc$S = {
+const propsDoc$T = {
   activeTab: "SpsTab",
   advancedSearch: "{ isOpen: boolean, enteredFields: number }",
   onToggleAdvancedSearch: "(boolean) => void",
@@ -28265,23 +28266,23 @@ const propsDoc$S = {
   pinResultsBar: "boolean",
   pinToolbar: "boolean"
 };
-const propTypes$U = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$V = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   activeTab: impl(),
-  advancedSearch: propTypes$1N.exports.shape({
-    isOpen: propTypes$1N.exports.bool,
-    enteredFields: propTypes$1N.exports.number
+  advancedSearch: propTypes$1O.exports.shape({
+    isOpen: propTypes$1O.exports.bool,
+    enteredFields: propTypes$1O.exports.number
   }),
   onToggleAdvancedSearch: fun(),
   onTabChange: fun(),
-  title: propTypes$1N.exports.string,
-  tabs: propTypes$1N.exports.arrayOf(impl()),
+  title: propTypes$1O.exports.string,
+  tabs: propTypes$1O.exports.arrayOf(impl()),
   onToolbarPinned: fun(),
-  selectable: propTypes$1N.exports.bool,
-  isSelected: propTypes$1N.exports.bool,
-  isIndeterminate: propTypes$1N.exports.bool,
+  selectable: propTypes$1O.exports.bool,
+  isSelected: propTypes$1O.exports.bool,
+  isIndeterminate: propTypes$1O.exports.bool,
   onSelectionChange: fun(),
-  pinResultsBar: propTypes$1N.exports.bool,
-  pinToolbar: propTypes$1N.exports.bool
+  pinResultsBar: propTypes$1O.exports.bool,
+  pinToolbar: propTypes$1O.exports.bool
 });
 function SpsListToolbar(props2) {
   const _a = props2, {
@@ -28387,7 +28388,7 @@ function SpsListToolbar(props2) {
   React.useEffect(() => {
     emitToolbarPinned(isPinned);
   }, [isPinned]);
-  const classes = clsx(unsafelyReplaceClassName || "sps-list-toolbar", isPinned && pinToolbar && "sps-list-toolbar--pinned", isPinned && pinToolbar && "z-stratum-bar", advancedSearch && advancedSearch.isOpen && "sps-list-toolbar--advanced-search-open", className);
+  const classes = clsx(unsafelyReplaceClassName || "sps-list-toolbar", isPinned && pinToolbar && "sps-list-toolbar--pinned", isPinned && pinToolbar && "z-stratum-toolbar", advancedSearch && advancedSearch.isOpen && "sps-list-toolbar--advanced-search-open", className);
   const [
     listToolbarSearch,
     listToolbarSearchInfo,
@@ -28444,9 +28445,50 @@ function SpsListToolbar(props2) {
   }, otherChildren)), /* @__PURE__ */ React.createElement("div", null, (!isPinned || isPinned && pinResultsBar) && searchResultsBar)));
 }
 Object.assign(SpsListToolbar, {
+  props: propsDoc$T,
+  propTypes: propTypes$V,
+  displayName: "SpsListToolbar"
+});
+const propsDoc$S = {
+  options: "SortOption[]",
+  onSortChange: "(key: string, direction: SortDirection) => void",
+  defaultOption: "SortOption"
+};
+const propTypes$U = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  options: propTypes$1O.exports.arrayOf(impl()),
+  onSortChange: fun(),
+  defaultOption: impl()
+});
+function SpsListToolbarSortBy(props2) {
+  const {
+    options,
+    onSortChange,
+    defaultOption,
+    className,
+    unsafelyReplaceClassName
+  } = props2;
+  const [label, setLabel] = React.useState(defaultOption.label || "");
+  const [directionIcon, setDirectionIcon] = React.useState(defaultOption.icon);
+  const sortOptions = options.map((option) => [
+    { label: option.label, icon: option.icon },
+    () => {
+      setLabel(option.label);
+      setDirectionIcon(option.icon);
+      onSortChange(option.key, option.direction);
+    }
+  ]);
+  const classes = clsx(unsafelyReplaceClassName || "sps-list-toolbar-sort-by", className);
+  return /* @__PURE__ */ React.createElement(SpsDropdown, {
+    className: classes,
+    icon: directionIcon,
+    label,
+    options: sortOptions
+  });
+}
+Object.assign(SpsListToolbarSortBy, {
   props: propsDoc$S,
   propTypes: propTypes$U,
-  displayName: "SpsListToolbar"
+  displayName: "SpsListToolbarSortBy"
 });
 function ContentOrderExample() {
   const [showFocusedTask, setShowFocusedTask] = React.useState(false);
@@ -29127,6 +29169,67 @@ const SpsListToolbarExamples = {
                 `
       }
     }
+  },
+  sortBy: {
+    label: "Sort By",
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Use Sort By component to sort list of rows. It looks like SpsDropdown but with sorting interface."),
+    examples: {
+      title: {
+        react: code`
+                    function Component() {
+                        return (
+                            <SpsListToolbar title="List of sortable rows">
+                            <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />
+                            <SpsVerticalRule />
+                            <SpsListToolbarSortBy
+                                options={[
+                                    {
+                                        label: "Default",
+                                        key: "default",
+                                        direction: SortDirection.ASCENDING,
+                                        icon: SpsIcon.SORT_ALPHA_ASC,
+                                    },
+                                    {
+                                        label: "Company Name: A-Z",
+                                        key: "name",
+                                        direction: SortDirection.ASCENDING,
+                                        icon: SpsIcon.SORT_ALPHA_ASC,
+                                    },
+                                    {
+                                        label: "Company Name: Z-A",
+                                        key: "name",
+                                        direction: SortDirection.DESCENDING,
+                                        icon: SpsIcon.SORT_ALPHA_DESC,
+                                    },
+                                    {
+                                      label: 'Created Date: Oldest to Newest',
+                                      key: 'created',
+                                      direction: SortDirection.ASCENDING,
+                                      icon: SpsIcon.SORT_NUM_ASC,
+                                    },
+                                    {
+                                      label: 'Created Date: Newest to Oldest',
+                                      key: 'created',
+                                      direction: SortDirection.DESCENDING,
+                                      icon: SpsIcon.SORT_NUM_DESC,
+                                    }
+                                ]}
+                                defaultOption={{
+                                    label: "Default",
+                                    key: "default",
+                                    direction: SortDirection.ASCENDING,
+                                    icon: SpsIcon.SORT_ALPHA_ASC,
+                                }}
+                                onSortChange={(key, direction) => console.log(key, direction)}
+                            />
+                            <SpsVerticalRule />
+                            <SpsButton kind={ButtonKind.CONFIRM}>Create New</SpsButton>
+                            </SpsListToolbar>
+                        )
+                    }
+                `
+      }
+    }
   }
 };
 const propsDoc$R = {
@@ -29135,7 +29238,7 @@ const propsDoc$R = {
 };
 const propTypes$T = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   kind: enumValue(FeedbackBlockKind),
-  message: propTypes$1N.exports.node.isRequired
+  message: propTypes$1O.exports.node.isRequired
 });
 function SpsMicroBlock(props2) {
   const _a = props2, {
@@ -29228,7 +29331,7 @@ const propsDoc$Q = {
 const propTypes$S = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   kind: enumValue(ModalKind),
   size: enumValue(ModalSize),
-  title: propTypes$1N.exports.string,
+  title: propTypes$1O.exports.string,
   onClose: fun(),
   focusElementOnOpen: ref()
 });
@@ -29824,29 +29927,29 @@ const propsDoc$P = {
 };
 const propTypes$R = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   action: fun(),
-  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,
+  captionKey: propTypes$1O.exports.string,
+  debounce: propTypes$1O.exports.number,
+  disabled: propTypes$1O.exports.bool,
+  disableSelected: propTypes$1O.exports.bool,
+  comparisonKey: propTypes$1O.exports.string,
   formControl: impl(),
   formMeta: impl(),
-  hideSelected: propTypes$1N.exports.bool,
+  hideSelected: propTypes$1O.exports.bool,
   icon: enumValue(SpsIcon),
   onChange: fun(),
-  options: propTypes$1N.exports.oneOfType([
-    propTypes$1N.exports.array,
-    propTypes$1N.exports.instanceOf(Promise),
+  options: propTypes$1O.exports.oneOfType([
+    propTypes$1O.exports.array,
+    propTypes$1O.exports.instanceOf(Promise),
     fun()
   ]).isRequired,
-  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,
-  maxHeightOptionListPx: propTypes$1N.exports.number,
-  maxHeightOptionListRem: propTypes$1N.exports.number
+  placeholder: propTypes$1O.exports.string,
+  tallOptionList: propTypes$1O.exports.bool,
+  textKey: propTypes$1O.exports.string,
+  value: propTypes$1O.exports.any,
+  zeroState: propTypes$1O.exports.string,
+  loading: propTypes$1O.exports.bool,
+  maxHeightOptionListPx: propTypes$1O.exports.number,
+  maxHeightOptionListRem: propTypes$1O.exports.number
 });
 function SpsMultiSelect(_w) {
   var _x = _w, {
@@ -30414,31 +30517,31 @@ const propsDoc$M = {
 };
 const propTypes$O = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   action: fun(),
-  captionKey: propTypes$1N.exports.string,
-  comparisonKey: propTypes$1N.exports.string,
-  disabled: propTypes$1N.exports.bool,
+  captionKey: propTypes$1O.exports.string,
+  comparisonKey: propTypes$1O.exports.string,
+  disabled: propTypes$1O.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  notClearable: propTypes$1N.exports.bool,
-  options: propTypes$1N.exports.oneOfType([
-    propTypes$1N.exports.array,
-    propTypes$1N.exports.instanceOf(Promise),
+  notClearable: propTypes$1O.exports.bool,
+  options: propTypes$1O.exports.oneOfType([
+    propTypes$1O.exports.array,
+    propTypes$1O.exports.instanceOf(Promise),
     fun()
   ]).isRequired,
   onChange: fun(),
-  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,
-  maxHeightOptionListPx: propTypes$1N.exports.number,
-  maxHeightOptionListRem: propTypes$1N.exports.number
+  placeholder: propTypes$1O.exports.string,
+  searchDebounce: propTypes$1O.exports.number,
+  searchPlaceholder: propTypes$1O.exports.string,
+  tallOptionList: propTypes$1O.exports.bool,
+  textKey: propTypes$1O.exports.string,
+  valueKey: propTypes$1O.exports.string,
+  value: propTypes$1O.exports.any,
+  zeroState: propTypes$1O.exports.string,
+  autoFixWidth: propTypes$1O.exports.bool,
+  loading: propTypes$1O.exports.bool,
+  filterByTextAndCaptionKey: propTypes$1O.exports.bool,
+  maxHeightOptionListPx: propTypes$1O.exports.number,
+  maxHeightOptionListRem: propTypes$1O.exports.number
 });
 const SpsSelect = React.forwardRef((props2, ref2) => {
   const _a = props2, {
@@ -30683,10 +30786,10 @@ const propsDoc$L = {
   disabled: "boolean"
 };
 const propTypes$N = __spreadValues({
-  numPages: propTypes$1N.exports.number,
+  numPages: propTypes$1O.exports.number,
   onPageChange: fun(),
-  page: propTypes$1N.exports.number,
-  disabled: propTypes$1N.exports.bool
+  page: propTypes$1O.exports.number,
+  disabled: propTypes$1O.exports.bool
 }, spsGlobalPropTypes);
 function SpsPageSelector(props2) {
   const _a = props2, {
@@ -30793,11 +30896,11 @@ const propsDoc$K = {
 };
 const propTypes$M = __spreadValues({
   onPageChange: fun().isRequired,
-  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
+  page: propTypes$1O.exports.number,
+  pageSize: propTypes$1O.exports.number,
+  pageSizeOptions: propTypes$1O.exports.arrayOf(propTypes$1O.exports.number),
+  totalResults: propTypes$1O.exports.number,
+  disabled: propTypes$1O.exports.bool
 }, spsGlobalPropTypes);
 function SpsPagination(props2) {
   const _a = props2, {
@@ -31042,14 +31145,14 @@ const propsDoc$I = {
   tabs: "Array<string>"
 };
 const propTypes$L = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  activeTab: propTypes$1N.exports.string,
-  fullWidth: propTypes$1N.exports.bool,
+  activeTab: propTypes$1O.exports.string,
+  fullWidth: propTypes$1O.exports.bool,
   onTabChange: fun(),
   onProductNameClick: fun(),
-  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)
+  productLogoSrc: propTypes$1O.exports.string,
+  productName: propTypes$1O.exports.string.isRequired,
+  productNameHref: propTypes$1O.exports.string,
+  tabs: propTypes$1O.exports.arrayOf(propTypes$1O.exports.string)
 });
 function SpsProductBar(props2) {
   const _a = props2, {
@@ -31272,10 +31375,10 @@ const propsDoc$H = {
   onClose: "() => void"
 };
 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,
+  percentComplete: propTypes$1O.exports.number,
+  title: propTypes$1O.exports.string,
+  detail: propTypes$1O.exports.string,
+  disabled: propTypes$1O.exports.bool,
   onClose: fun()
 });
 function SpsProgressBar(props2) {
@@ -31366,16 +31469,12 @@ const SpsSteppedProgressBarExamples = {
         description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Building Stepped Progress Bars"), /* @__PURE__ */ React.createElement("p", null, "The Stepped Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements.")),
         react: code`
                     function Component() {
-                        const iconsData = [
-                            {index: 4, icon: SpsIcon.CALENDAR},
-                            {index: 8, icon: SpsIcon.CALENDAR},
-                        ];
-                        const tooltipsData = [
+                        const data = [
                             {index: 0, title: 'Title 1', description: 'Description'},
-                            {index: 4, title: 'Title 5', description: 'Description'},
-                            {index: 8, title: 'Title 9', description: 'Description'},
+                            {index: 4, title: 'Title 5', description: 'Description', icon: SpsIcon.CALENDAR},
+                            {index: 8, title: 'Title 9', description: 'Description', icon: SpsIcon.CALENDAR},
                             {index: 11, title: 'Title 12', description: 'Description'},
-                        ]
+                        ];
 
                         return (
                             <SpsCard>
@@ -31384,8 +31483,7 @@ const SpsSteppedProgressBarExamples = {
                                     showStepsCounter={true}
                                     stepsCount={12}
                                     completedStepsCount={4}
-                                    icons={iconsData}
-                                    tooltipsData={tooltipsData}
+                                    data={data}
                                 />
                             </SpsCard>
                         )
@@ -31396,16 +31494,11 @@ const SpsSteppedProgressBarExamples = {
         description: () => /* @__PURE__ */ React.createElement("h4", null, "Alternate Color"),
         react: code`
                     function Component() {
-                        const iconsData = [
-                            {index: 4, icon: SpsIcon.CALENDAR},
-                            {index: 8, icon: SpsIcon.CALENDAR},
-                        ];
-                        const tooltipsData = [
-                            {index: 0, title: 'Title 1', description: 'Description'},
-                            {index: 4, title: 'Title 5', description: 'Description'},
-                            {index: 8, title: 'Title 9', description: 'Description'},
+                        const data = [
+                            {index: 4, title: 'Title 5', description: 'Description', icon: SpsIcon.CALENDAR},
+                            {index: 8, title: 'Title 9', description: 'Description', icon: SpsIcon.CALENDAR},
                             {index: 11, title: 'Title 12', description: 'Description'},
-                        ]
+                        ];
 
                         return (
                             <SpsCard>
@@ -31414,22 +31507,42 @@ const SpsSteppedProgressBarExamples = {
                                     showStepsCounter={true}
                                     stepsCount={12}
                                     completedStepsCount={4}
-                                    icons={iconsData}
-                                    tooltipsData={tooltipsData}
                                     color={SteppedProgressBarColor.GRAY}
+                                    data={data}
                                 />
                             </SpsCard>
                         )
                     }
                 `
       },
+      skippedSteps: {
+        description: () => /* @__PURE__ */ React.createElement("h4", null, "Skip steps"),
+        react: code`
+                function Component() {
+                    const data = [{index: 0, skipped: true}];
+
+                    return (
+                        <SpsCard>
+                            <SpsSteppedProgressBar
+                                title="Process Name"
+                                showStepsCounter={true}
+                                stepsCount={12}
+                                completedStepsCount={7}
+                                data={data}
+                            />
+                        </SpsCard>
+                    )
+                }
+            `
+      },
       completed: {
         description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Completed State"), /* @__PURE__ */ React.createElement("p", null, "Once complete, the progress bar appears in green.")),
         react: code`
                     function Component() {
-                        const iconsData = [
-                            {index: 4, icon: SpsIcon.CALENDAR},
-                            {index: 8, icon: SpsIcon.CALENDAR},
+                        const data = [
+                            {index: 4, title: 'Title 5', description: 'Description', icon: SpsIcon.CALENDAR},
+                            {index: 8, title: 'Title 9', description: 'Description', icon: SpsIcon.CALENDAR},
+                            {index: 11, title: 'Title 12', description: 'Description'},
                         ];
 
                         return (
@@ -31439,7 +31552,7 @@ const SpsSteppedProgressBarExamples = {
                                     showStepsCounter={true}
                                     stepsCount={10}
                                     completedStepsCount={10}
-                                    icons={iconsData}
+                                    data={data}
                                 />
                             </SpsCard>
                         )
@@ -31450,18 +31563,12 @@ const SpsSteppedProgressBarExamples = {
         description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Disabled State"), /* @__PURE__ */ React.createElement("p", null, "A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted.")),
         react: code`
                     function Component() {
-                        const iconsData = [
-                            {index: 4, icon: SpsIcon.CALENDAR},
-                            {index: 8, icon: SpsIcon.CALENDAR},
-                        ];
-
                         return (
                             <SpsCard>
                                 <SpsSteppedProgressBar
                                     title="Process Name"
                                     stepsCount={10}
                                     completedStepsCount={7}
-                                    icons={iconsData}
                                     disabled
                                 />
                             </SpsCard>
@@ -32011,19 +32118,17 @@ const propsDoc$F = {
   completedStepsCount: "number",
   disabled: "boolean",
   showStepsCounter: "boolean",
-  icons: "IconsProps[]",
-  tooltipsData: "TooltipsProps[]",
-  color: "SteppedProgressBarColor"
+  color: "SteppedProgressBarColor",
+  data: "SteppedProgressBarData[]"
 };
 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)
+  title: propTypes$1O.exports.string,
+  stepsCount: propTypes$1O.exports.number,
+  completedStepsCount: propTypes$1O.exports.number,
+  disabled: propTypes$1O.exports.bool,
+  showStepsCounter: propTypes$1O.exports.bool,
+  color: enumValue(SteppedProgressBarColor),
+  data: propTypes$1O.exports.arrayOf(impl())
 };
 function SpsSteppedProgressBar(props2) {
   const {
@@ -32032,18 +32137,11 @@ function SpsSteppedProgressBar(props2) {
     completedStepsCount = 0,
     disabled,
     showStepsCounter,
-    icons,
-    tooltipsData,
     className,
+    data,
     color = SteppedProgressBarColor.PURPLE
   } = props2;
-  function findIcon(idx) {
-    return icons && icons.find((i2) => i2.index === idx);
-  }
-  function findTooltipData(idx) {
-    return tooltipsData && tooltipsData.find((i2) => i2.index === idx);
-  }
-  const data = Array.from(Array(stepsCount)).map(() => useElementId(null).current);
+  const dataSet = Array.from(Array(stepsCount)).map((_, index) => __spreadValues({ id: useElementId(null).current }, data == null ? void 0 : data.find((item) => item.index === index)));
   const classes = clsx("sps-stepped-progress-bar", `sps-stepped-progress-bar--${color}`, completedStepsCount === stepsCount && "sps-stepped-progress-bar--complete", disabled && "sps-stepped-progress-bar--disabled", className);
   return /* @__PURE__ */ React.createElement("div", {
     className: classes
@@ -32057,18 +32155,18 @@ function SpsSteppedProgressBar(props2) {
     className: "sps-stepped-progress-bar__percentage"
   }, `${completedStepsCount} of ${stepsCount} Complete`)), /* @__PURE__ */ React.createElement("ul", {
     className: "sps-stepped-progress-bar__bar-background d-flex align-items-center list-unstyled mb-0"
-  }, data.map((id2, index) => /* @__PURE__ */ React.createElement("li", {
-    id: id2,
-    key: id2,
-    className: clsx("sps-stepped-progress-bar__step", completedStepsCount > index && "sps-stepped-progress-bar__step-complete")
-  }, findIcon(index) && /* @__PURE__ */ React.createElement(SpsI, {
-    icon: findIcon(index).icon,
+  }, dataSet.map((item, index) => /* @__PURE__ */ React.createElement("li", {
+    id: item.id,
+    key: item.id,
+    className: clsx("sps-stepped-progress-bar__step", completedStepsCount > index && !item.skipped && "sps-stepped-progress-bar__step-complete")
+  }, item.icon && /* @__PURE__ */ React.createElement(SpsI, {
+    icon: item.icon,
     size: SpsIconSize.SMALL,
-    className: clsx("d-block", findIcon(index).index > completedStepsCount - 1 ? "gray400" : "white")
-  }), findTooltipData(index) && /* @__PURE__ */ React.createElement(SpsTooltip, {
-    for: id2,
-    title: findTooltipData(index).title
-  }, findTooltipData(index).description))))));
+    className: clsx("d-block", item.index > completedStepsCount - 1 ? "gray400" : "white")
+  }), item.title && /* @__PURE__ */ React.createElement(SpsTooltip, {
+    for: item.id,
+    title: item.title
+  }, item.description))))));
 }
 Object.assign(SpsSteppedProgressBar, {
   props: propsDoc$F,
@@ -32181,16 +32279,16 @@ const propsDoc$E = {
   value: "any"
 };
 const propTypes$H = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  checked: propTypes$1N.exports.bool,
-  disabled: propTypes$1N.exports.bool,
+  checked: propTypes$1O.exports.bool,
+  disabled: propTypes$1O.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  inline: propTypes$1N.exports.bool,
-  label: propTypes$1N.exports.string,
-  name: propTypes$1N.exports.string.isRequired,
+  inline: propTypes$1O.exports.bool,
+  label: propTypes$1O.exports.string,
+  name: propTypes$1O.exports.string.isRequired,
   onChange: fun(),
   ref: ref(),
-  value: propTypes$1N.exports.any
+  value: propTypes$1O.exports.any
 });
 function SpsRadioButton(_y) {
   var _z = _y, {
@@ -32356,7 +32454,7 @@ const propsDoc$D = {
   maxHeight: "string"
 };
 const propTypes$G = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  maxHeight: propTypes$1N.exports.string
+  maxHeight: propTypes$1O.exports.string
 });
 function SpsScrollableContainer(props2) {
   const {
@@ -33207,12 +33305,12 @@ const propsDoc$C = {
   widthRem: "number"
 };
 const propTypes$F = __spreadValues({
-  sortKey: propTypes$1N.exports.string,
-  sortDisabled: propTypes$1N.exports.bool,
-  sort: propTypes$1N.exports.arrayOf(impl()),
+  sortKey: propTypes$1O.exports.string,
+  sortDisabled: propTypes$1O.exports.bool,
+  sort: propTypes$1O.exports.arrayOf(impl()),
   onSortChange: fun(),
-  widthPx: propTypes$1N.exports.number,
-  widthRem: propTypes$1N.exports.number
+  widthPx: propTypes$1O.exports.number,
+  widthRem: propTypes$1O.exports.number
 }, spsGlobalPropTypes);
 function SpsSortingHeaderCell(_A) {
   var _B = _A, {
@@ -33282,7 +33380,7 @@ const propsDoc$B = {
   onSortChange: "SortChangeHandler"
 };
 const propTypes$E = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  sort: propTypes$1N.exports.arrayOf(impl()),
+  sort: propTypes$1O.exports.arrayOf(impl()),
   onSortChange: fun()
 });
 function SpsSortingHeader(_C) {
@@ -33360,12 +33458,12 @@ const propsDoc$A = {
   options: "Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"
 };
 const propTypes$D = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1N.exports.bool,
-  href: propTypes$1N.exports.string,
-  label: propTypes$1N.exports.string,
+  disabled: propTypes$1O.exports.bool,
+  href: propTypes$1O.exports.string,
+  label: propTypes$1O.exports.string,
   icon: enumValue(SpsIcon),
   kind: enumValue(StdButtonKind),
-  options: propTypes$1N.exports.arrayOf(propTypes$1N.exports.oneOfType([propTypes$1N.exports.func, propTypes$1N.exports.any]))
+  options: propTypes$1O.exports.arrayOf(propTypes$1O.exports.oneOfType([propTypes$1O.exports.func, propTypes$1O.exports.any]))
 });
 function SpsSplitButton(props2) {
   const _a = props2, {
@@ -33522,7 +33620,7 @@ const propsDoc$z = {
   channelId: { type: "string", required: true }
 };
 const propTypes$C = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  channelId: propTypes$1N.exports.string.isRequired
+  channelId: propTypes$1O.exports.string.isRequired
 });
 function SpsSlackLink(props2) {
   const _a = props2, {
@@ -33604,8 +33702,8 @@ const propsDoc$x = {
   onToggle: "(isExpanded: boolean) => void"
 };
 const propTypes$A = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  expanded: propTypes$1N.exports.bool,
-  selected: propTypes$1N.exports.bool,
+  expanded: propTypes$1O.exports.bool,
+  selected: propTypes$1O.exports.bool,
   onToggle: fun()
 });
 function SpsSummaryListRow(props2) {
@@ -33687,10 +33785,10 @@ const propsDoc$w = {
   width: "string"
 };
 const propTypes$z = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  borderless: propTypes$1N.exports.bool,
-  lean: propTypes$1N.exports.bool,
-  leaner: propTypes$1N.exports.bool,
-  width: propTypes$1N.exports.string
+  borderless: propTypes$1O.exports.bool,
+  lean: propTypes$1O.exports.bool,
+  leaner: propTypes$1O.exports.bool,
+  width: propTypes$1O.exports.string
 });
 function SpsSummaryListColumn(props2) {
   const _a = props2, {
@@ -34023,17 +34121,17 @@ const props = {
   suppressTooltips: "boolean"
 };
 const propTypes$y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  tasks: propTypes$1N.exports.arrayOf(propTypes$1N.exports.any),
+  tasks: propTypes$1O.exports.arrayOf(propTypes$1O.exports.any),
   taskQueuePosition: enumValue(Position),
-  notificationText: propTypes$1N.exports.string,
-  tooltipConfig: propTypes$1N.exports.shape({
+  notificationText: propTypes$1O.exports.string,
+  tooltipConfig: propTypes$1O.exports.shape({
     position: enumValue(Position),
     kind: enumValue(TooltipKind)
   }),
   onClose: fun(),
   onOpen: fun(),
   onClearCompleted: fun(),
-  suppressTooltips: propTypes$1N.exports.bool
+  suppressTooltips: propTypes$1O.exports.bool
 });
 function SpsTaskQueue(_E) {
   var _F = _E, {
@@ -34569,14 +34667,14 @@ const propsDoc$v = {
   value: "string"
 };
 const propTypes$x = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1N.exports.bool,
+  disabled: propTypes$1O.exports.bool,
   formControl: impl(),
   formMeta: impl(),
   icon: enumValue(SpsIcon),
-  name: propTypes$1N.exports.string,
+  name: propTypes$1O.exports.string,
   onChange: fun(),
-  placeholder: propTypes$1N.exports.string,
-  value: propTypes$1N.exports.string
+  placeholder: propTypes$1O.exports.string,
+  value: propTypes$1O.exports.string
 });
 const SpsTextInput = React.forwardRef((_G, ref2) => {
   var _H = _G, {
@@ -34766,15 +34864,15 @@ const propsDoc$u = {
   value: "string"
 };
 const propTypes$w = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1N.exports.bool,
+  disabled: propTypes$1O.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  name: propTypes$1N.exports.string,
+  name: propTypes$1O.exports.string,
   onChange: fun(),
-  placeholder: propTypes$1N.exports.string,
+  placeholder: propTypes$1O.exports.string,
   ref: ref(),
-  rows: propTypes$1N.exports.number,
-  value: propTypes$1N.exports.string
+  rows: propTypes$1O.exports.number,
+  value: propTypes$1O.exports.string
 });
 function SpsTextarea(_I) {
   var _J = _I, {
@@ -34969,12 +35067,12 @@ const propsDoc$t = {
   warning: "boolean"
 };
 const propTypes$v = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  href: propTypes$1N.exports.string,
-  target: propTypes$1N.exports.string,
+  href: propTypes$1O.exports.string,
+  target: propTypes$1O.exports.string,
   icon: nodeOrRenderFn.isRequired,
-  error: propTypes$1N.exports.bool,
-  title: propTypes$1N.exports.string.isRequired,
-  warning: propTypes$1N.exports.bool
+  error: propTypes$1O.exports.bool,
+  title: propTypes$1O.exports.string.isRequired,
+  warning: propTypes$1O.exports.bool
 });
 function SpsTile(props2) {
   const _a = props2, {
@@ -35293,10 +35391,10 @@ const propsDoc$r = {
   active: "boolean"
 };
 const propTypes$t = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  value: propTypes$1N.exports.number.isRequired,
-  title: propTypes$1N.exports.string.isRequired,
+  value: propTypes$1O.exports.number.isRequired,
+  title: propTypes$1O.exports.string.isRequired,
   kind: enumValue(SpsFilterTileKind),
-  active: propTypes$1N.exports.bool
+  active: propTypes$1O.exports.bool
 });
 function SpsFilterTile(props2) {
   const _a = props2, {
@@ -35434,18 +35532,18 @@ const propsDoc$p = {
   onChange: "(isActive: boolean) => void"
 };
 const propTypes$r = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  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,
+  active: propTypes$1O.exports.bool,
+  activeDescription: deprecated(propTypes$1O.exports.string),
+  activeLabel: deprecated(propTypes$1O.exports.string),
+  description: propTypes$1O.exports.string,
+  disabled: propTypes$1O.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  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,
+  id: propTypes$1O.exports.string,
+  inactiveDescription: deprecated(propTypes$1O.exports.string),
+  inactiveLabel: deprecated(propTypes$1O.exports.string),
+  label: propTypes$1O.exports.string,
+  large: propTypes$1O.exports.bool,
   onChange: fun(),
   ref: ref()
 });
@@ -35631,7 +35729,7 @@ const propsDoc$o = {
   icon: "SpsIcon"
 };
 const propTypes$q = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  heading: propTypes$1N.exports.string,
+  heading: propTypes$1O.exports.string,
   icon: enumValue(SpsIcon)
 });
 function SpsWorkflow(props2) {
@@ -35683,7 +35781,7 @@ const propsDoc$n = {
   progress: "number"
 };
 const propTypes$p = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  progress: propTypes$1N.exports.number,
+  progress: propTypes$1O.exports.number,
   size: enumValue(RingSize)
 });
 function SpsProgressRing({
@@ -35728,7 +35826,7 @@ const propsDoc$m = {
   phases: "WizardPhase[]"
 };
 const propTypes$o = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  phases: propTypes$1N.exports.arrayOf(impl())
+  phases: propTypes$1O.exports.arrayOf(impl())
 });
 const CSS_BLOCK$2 = "sps-wizard-sidebar";
 function SpsWizardSidebar({
@@ -35779,10 +35877,10 @@ const propsDoc$l = {
 };
 const propTypes$n = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   condition: enumValue(WizardSubstepConditions).isRequired,
-  display: propTypes$1N.exports.string.isRequired,
-  orderPosition: propTypes$1N.exports.oneOfType([
-    propTypes$1N.exports.string,
-    propTypes$1N.exports.number
+  display: propTypes$1O.exports.string.isRequired,
+  orderPosition: propTypes$1O.exports.oneOfType([
+    propTypes$1O.exports.string,
+    propTypes$1O.exports.number
   ]).isRequired
 });
 function SpsWizardSubstep(props2) {
@@ -35983,7 +36081,7 @@ const propsDoc$i = {
 };
 const propTypes$k = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   icon: enumValue(SpsIcon).isRequired,
-  title: propTypes$1N.exports.string.isRequired
+  title: propTypes$1O.exports.string.isRequired
 });
 function SpsWorkflowStep(props2) {
   const _a = props2, {
@@ -36089,14 +36187,16 @@ const SpsWorkflowExamples = {
   }
 };
 const propsDoc$h = {
-  artwork: { type: "string", required: true },
+  illustration: "string",
+  artwork: { type: "string", deprecated: true },
   heading: { type: "string", required: true },
   subHeading: "string"
 };
 const propTypes$j = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  artwork: propTypes$1N.exports.string.isRequired,
-  heading: propTypes$1N.exports.string.isRequired,
-  subHeading: propTypes$1N.exports.string
+  illustration: propTypes$1O.exports.string,
+  artwork: propTypes$1O.exports.string,
+  heading: propTypes$1O.exports.string.isRequired,
+  subHeading: propTypes$1O.exports.string
 });
 function SpsZeroState(props2) {
   const _a = props2, {
@@ -36104,6 +36204,7 @@ function SpsZeroState(props2) {
     children,
     className,
     heading,
+    illustration,
     subHeading,
     "data-testid": testId,
     unsafelyReplaceClassName
@@ -36112,10 +36213,12 @@ function SpsZeroState(props2) {
     "children",
     "className",
     "heading",
+    "illustration",
     "subHeading",
     "data-testid",
     "unsafelyReplaceClassName"
   ]);
+  const imageSrc = illustration || artwork || SpsIllustrations.Large.BUILDING;
   const classes = clsx(unsafelyReplaceClassName || "sps-zero-state", className);
   return /* @__PURE__ */ React.createElement("div", {
     className: "sps-card__body",
@@ -36125,7 +36228,7 @@ function SpsZeroState(props2) {
     "data-testid": `${testId}__actual-zero-state`
   }, rest), /* @__PURE__ */ React.createElement("img", {
     className: "sps-zero-state__image",
-    src: artwork,
+    src: imageSrc,
     alt: "",
     "data-testid": `${testId}__artwork`
   }), /* @__PURE__ */ React.createElement("h1", {
@@ -36145,12 +36248,14 @@ Object.assign(SpsZeroState, {
   displayName: "SpsZeroState"
 });
 const propsDoc$g = {
-  icon: { type: "SpsIcon", required: true },
+  illustration: "string",
+  icon: { type: "SpsIcon", deprecated: true },
   heading: "ReactNodeOrRenderFn",
   subHeading: "ReactNodeOrRenderFn"
 };
 const propTypes$i = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  icon: enumValue(SpsIcon).isRequired,
+  illustration: propTypes$1O.exports.string,
+  icon: enumValue(SpsIcon),
   heading: nodeOrRenderFn,
   subHeading: nodeOrRenderFn
 });
@@ -36159,6 +36264,7 @@ function SpsMicroZeroState(props2) {
     className,
     heading,
     icon,
+    illustration = SpsIllustrations.Small.BUILDING,
     subHeading,
     "data-testid": testId,
     unsafelyReplaceClassName
@@ -36166,6 +36272,7 @@ function SpsMicroZeroState(props2) {
     "className",
     "heading",
     "icon",
+    "illustration",
     "subHeading",
     "data-testid",
     "unsafelyReplaceClassName"
@@ -36174,10 +36281,13 @@ function SpsMicroZeroState(props2) {
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: classes,
     "data-testid": `${testId}__actual-micro-zero-state`
-  }, rest), /* @__PURE__ */ React.createElement("i", {
+  }, rest), icon ? /* @__PURE__ */ React.createElement("i", {
     className: `sps-icon sps-icon-${icon}`,
     "aria-hidden": "true",
     "data-testid": `${testId}__icon`
+  }) : /* @__PURE__ */ React.createElement("img", {
+    style: { height: "3rem" },
+    src: illustration
   }), heading && /* @__PURE__ */ React.createElement("h1", {
     className: "sps-zero-state__heading",
     "data-testid": `${testId}__heading`
@@ -36224,88 +36334,88 @@ const SpsZeroStateExamples = {
       illustrationAndHeading: {
         description: "Illustration + Heading",
         jsx: code`
-                    <SpsCard>
-                        <SpsZeroState
-                            heading="Search for a record"
-                            artwork="https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg"
-                        />
-                    </SpsCard>
-                `
+<SpsCard>
+  <SpsZeroState
+    heading="Search for a record"
+    artwork={SpsIllustrations.Large.GENERAL_SEARCH}
+  />
+</SpsCard>
+        `
       },
       illustrationHeadingAndSubtitle: {
         description: "Illustration + Heading + Subtitle",
         jsx: code`
-                    <SpsCard>
-                        <SpsZeroState
-                            heading="Search for a record"
-                            subHeading="Find new record by using the search box above."
-                            artwork="https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg"
-                        />
-                    </SpsCard>
-                `
+          <SpsCard>
+            <SpsZeroState
+              artwork={SpsIllustrations.Large.GENERAL_SEARCH}
+              heading="Search for a record"
+              subHeading="Find new record by using the search box above."
+            />
+          </SpsCard>
+        `
       },
       illustrationHeadingAndButton: {
         description: "Illustration + Heading + Button",
         jsx: code`
-                    <SpsCard>
-                        <SpsZeroState
-                            heading="Search for a record"
-                            artwork="https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg"
-                        >
-                            <SpsButton kind={ButtonKind.CONFIRM}>
-                                Search
-                            </SpsButton>
-                        </SpsZeroState>
-                    </SpsCard>
-                `
+          <SpsCard>
+            <SpsZeroState
+              artwork={SpsIllustrations.Large.GENERAL_SEARCH}
+              heading="Search for a record"
+            >
+              <SpsButton kind={ButtonKind.CONFIRM}>
+                Search
+              </SpsButton>
+            </SpsZeroState>
+          </SpsCard>
+        `
       },
       illustrationHeadingSubtitleAndButton: {
         description: "Illustration + Heading + Subtitle + Button",
         jsx: code`
-                    <SpsCard>
-                        <SpsZeroState
-                            heading="Search for a record"
-                            subHeading="Find new companies by using the Search button below."
-                            artwork="https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg"
-                        >
-                            <SpsButton kind={ButtonKind.CONFIRM}>
-                                Search
-                            </SpsButton>
-                        </SpsZeroState>
-                    </SpsCard>
-                `
+          <SpsCard>
+            <SpsZeroState
+              artwork={SpsIllustrations.Large.GENERAL_SEARCH}
+              heading="Search for a record"
+              subHeading="Find new companies by using the Search button below."
+            >
+              <SpsButton kind={ButtonKind.CONFIRM}>
+                Search
+              </SpsButton>
+            </SpsZeroState>
+          </SpsCard>
+        `
       },
       illustrationHeadingSubtitleAndSearch: {
         description: "Illustration + Heading + Subtitle + Search",
         react: code`
-                    function Component() {
-                        const [searchText, setSearchText] = React.useState("");
-
-                        function handleChange(e) {
-                            setSearchText(e.target.value);
-                        }
-
-                        return (
-                            <SpsCard>
-                                <SpsZeroState
-                                    heading="Search for a record"
-                                    subHeading="Find new records by using the search box below."
-                                    artwork="https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg"
-                                >
-                                    <SpsInputGroup>
-                                        <SpsTextInput
-                                            name="search"
-                                            value={searchText}
-                                            placeholder="Search for a record"
-                                            onChange={handleChange}
-                                        />
-                                        <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} aria-label="Search" />
-                                    </SpsInputGroup>
-                                </SpsZeroState>
-                            </SpsCard>
-                        );
-                    }
-                `
+function Component() {
+  const [searchText, setSearchText] = React.useState("");
+
+  function handleChange(e) {
+    setSearchText(e.target.value);
+  }
+
+  return (
+    <SpsCard>
+      <SpsZeroState
+        artwork={SpsIllustrations.Large.GENERAL_SEARCH}
+        heading="Search for a record"
+        subHeading="Find new records by using the search box below."
+      >
+        <SpsInputGroup>
+          <SpsTextInput
+            name="search"
+            value={searchText}
+            placeholder="Search for a record"
+            onChange={handleChange}
+          />
+          <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} aria-label="Search" />
+        </SpsInputGroup>
+      </SpsZeroState>
+    </SpsCard>
+  );
+}
+        `
       }
     }
   },
@@ -36316,36 +36426,48 @@ const SpsZeroStateExamples = {
       illustrationAndHeading: {
         description: "Illustration + Heading",
         jsx: code`
-                    <SpsCard>
-                        <SpsMicroZeroState
-                            heading="No Data Available"
-                            icon={SpsIcon.CHART_BAR}
-                        />
-                    </SpsCard>
-                `
+          <div className="sfg-row">
+            <div className="sfg-col-4">
+              <SpsCard>
+                <SpsMicroZeroState
+                  illustration={SpsIllustrations.Small.BAR_CHART}
+                  heading="No Data Available"
+                />
+              </SpsCard>
+            </div>
+          </div>
+        `
       },
       IllustrationAndSubtitle: {
         description: "Illustration + Subtitle",
         jsx: code`
-                    <SpsCard>
-                        <SpsMicroZeroState
-                            subHeading="No data available. Create a report and try again."
-                            icon={SpsIcon.CHART_BAR}
-                        />
-                    </SpsCard>
-                `
+          <div className="sfg-row">
+            <div className="sfg-col-4">
+              <SpsCard>
+                <SpsMicroZeroState
+                  illustration={SpsIllustrations.Small.BAR_CHART}
+                  subHeading="No data available. Create a report and try again."
+                />
+              </SpsCard>
+            </div>
+          </div>
+        `
       },
       IllustrationHeadingAndSubtitle: {
         description: "Illustration + Heading + Subtitle",
         jsx: code`
-                    <SpsCard>
-                        <SpsMicroZeroState
-                            heading="No Data Available"
-                            subHeading="Create a report and try again."
-                            icon={SpsIcon.CHART_BAR}
-                        />
-                    </SpsCard>
-                `
+          <div className="sfg-row">
+            <div className="sfg-col-4">
+              <SpsCard>
+                <SpsMicroZeroState
+                  illustration={SpsIllustrations.Small.BAR_CHART}
+                  heading="No Data Available"
+                  subHeading="No data available. Create a report and try again."
+                />
+              </SpsCard>
+            </div>
+          </div>
+        `
       }
     }
   }
@@ -36372,10 +36494,10 @@ const propsDoc$e = {
   onCollapse: "() => void"
 };
 const propTypes$g = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  title: propTypes$1N.exports.string,
-  expanded: propTypes$1N.exports.bool,
-  heightPx: propTypes$1N.exports.number,
-  heightRem: propTypes$1N.exports.number,
+  title: propTypes$1O.exports.string,
+  expanded: propTypes$1O.exports.bool,
+  heightPx: propTypes$1O.exports.number,
+  heightRem: propTypes$1O.exports.number,
   onExpand: fun(),
   onCollapse: fun()
 });
@@ -36801,9 +36923,9 @@ const propsDoc$c = {
   onFilterChange: "ChangeEventHandler<HTMLInputElement>"
 };
 const propTypes$e = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  value: propTypes$1N.exports.string,
-  placeholder: propTypes$1N.exports.string,
-  formMeta: propTypes$1N.exports.oneOfType([
+  value: propTypes$1O.exports.string,
+  placeholder: propTypes$1O.exports.string,
+  formMeta: propTypes$1O.exports.oneOfType([
     impl(),
     impl()
   ]),
@@ -36843,7 +36965,7 @@ const propsDoc$b = {
   showCondition: "boolean"
 };
 const propTypes$d = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  showCondition: propTypes$1N.exports.bool
+  showCondition: propTypes$1O.exports.bool
 });
 function SpsConditionalField(_S) {
   var _T = _S, {
@@ -37184,7 +37306,8 @@ const MANIFEST = {
     components: [
       SpsListToolbar,
       SpsListToolbarSearch,
-      SpsListToolbarSearchInfo
+      SpsListToolbarSearchInfo,
+      SpsListToolbarSortBy
     ],
     examples: SpsListToolbarExamples
   },
@@ -37376,7 +37499,7 @@ const propTypes$c = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   minDate: impl(),
   onNewSelection: fun().isRequired,
   selectedDate: impl(),
-  selectedRange: propTypes$1N.exports.arrayOf(impl())
+  selectedRange: propTypes$1O.exports.arrayOf(impl())
 });
 const CSS_ELEMENT$1 = "sps-datepicker__calendar";
 function determineViewMonth({
@@ -37502,7 +37625,7 @@ Object.assign(SpsDatepickerCalendar, {
 const CSS_ELEMENT = "sps-datepicker__popup";
 const propTypes$b = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   attachTo: ref().isRequired,
-  isOpen: propTypes$1N.exports.bool.isRequired
+  isOpen: propTypes$1O.exports.bool.isRequired
 });
 const SpsDatepickerPopup = React.forwardRef((_U, ref2) => {
   var _V = _U, {
@@ -37540,7 +37663,7 @@ const propsDoc$a = {
   value: "SimpleDate"
 };
 const propTypes$a = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1N.exports.bool,
+  disabled: propTypes$1O.exports.bool,
   formMeta: impl(),
   maxDate: impl(),
   minDate: impl(),
@@ -37665,12 +37788,12 @@ const propsDoc$9 = {
   value: "SimpleDateRange | DatePreset"
 };
 const propTypes$9 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1N.exports.bool,
+  disabled: propTypes$1O.exports.bool,
   formMeta: impl(),
   maxDate: impl(),
   minDate: impl(),
   onChange: fun(),
-  presets: propTypes$1N.exports.arrayOf(impl())
+  presets: propTypes$1O.exports.arrayOf(impl())
 });
 const CSS_BLOCK = "sps-datepicker";
 const DEFAULT_PRESETS = [
@@ -37896,12 +38019,12 @@ const propsDoc$8 = {
   value: "number"
 };
 const propTypes$8 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1N.exports.bool,
+  disabled: propTypes$1O.exports.bool,
   formMeta: impl(),
-  name: propTypes$1N.exports.string,
+  name: propTypes$1O.exports.string,
   onChange: fun(),
   ref: ref(),
-  value: propTypes$1N.exports.number
+  value: propTypes$1O.exports.number
 });
 function strToDollars(str) {
   return str ? Number.parseInt(str.replace(/[^\d]/g, ""), 10) / 100 : null;
@@ -38076,10 +38199,10 @@ const propsDoc$7 = {
 };
 const propTypes$7 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   color: enumValue(TagKind),
-  href: propTypes$1N.exports.string,
+  href: propTypes$1O.exports.string,
   icon: enumValue(SpsIcon),
-  tagKey: propTypes$1N.exports.string.isRequired,
-  value: propTypes$1N.exports.string.isRequired
+  tagKey: propTypes$1O.exports.string.isRequired,
+  value: propTypes$1O.exports.string.isRequired
 });
 function SpsKeyValueTag(props2) {
   const _a = props2, {
@@ -38172,8 +38295,8 @@ const propsDoc$6 = {
   header: "string | () => string"
 };
 const propTypes$6 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  header: propTypes$1N.exports.oneOfType([
-    propTypes$1N.exports.string,
+  header: propTypes$1O.exports.oneOfType([
+    propTypes$1O.exports.string,
     fun()
   ])
 });
@@ -38205,8 +38328,8 @@ const propsDoc$5 = {
   backdrop: "string"
 };
 const propTypes$5 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  onOverlayClick: propTypes$1N.exports.func,
-  backdrop: propTypes$1N.exports.string
+  onOverlayClick: propTypes$1O.exports.func,
+  backdrop: propTypes$1O.exports.string
 });
 function SpsModalOverlay(props2) {
   const _a = props2, {
@@ -38276,12 +38399,12 @@ const propsDoc$3 = {
   closeModal: "() => void"
 };
 const propTypes$3 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  handleAsync: propTypes$1N.exports.shape({
-    turnAsyncOn: propTypes$1N.exports.func,
-    turnAsyncOff: propTypes$1N.exports.func,
-    isAsyncOn: propTypes$1N.exports.bool
+  handleAsync: propTypes$1O.exports.shape({
+    turnAsyncOn: propTypes$1O.exports.func,
+    turnAsyncOff: propTypes$1O.exports.func,
+    isAsyncOn: propTypes$1O.exports.bool
   }),
-  closeModal: propTypes$1N.exports.func
+  closeModal: propTypes$1O.exports.func
 });
 function SpsModalFooter(props2) {
   const {
@@ -38323,10 +38446,10 @@ const propsDoc$2 = {
 const propTypes$2 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   kind: enumValue(ButtonKind),
   closeModal: fun(),
-  handleAsync: propTypes$1N.exports.shape({
-    turnAsyncOn: propTypes$1N.exports.func,
-    turnAsyncOff: propTypes$1N.exports.func,
-    isAsyncOn: propTypes$1N.exports.bool
+  handleAsync: propTypes$1O.exports.shape({
+    turnAsyncOn: propTypes$1O.exports.func,
+    turnAsyncOff: propTypes$1O.exports.func,
+    isAsyncOn: propTypes$1O.exports.bool
   })
 });
 function SpsModalAction(props2) {
@@ -38381,18 +38504,18 @@ const propsDoc$1 = {
   onClose: "Function"
 };
 const propTypes$1 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  kind: propTypes$1N.exports.string,
-  id: propTypes$1N.exports.string,
-  isOpen: propTypes$1N.exports.bool,
-  header: propTypes$1N.exports.oneOfType([
-    propTypes$1N.exports.string,
+  kind: propTypes$1O.exports.string,
+  id: propTypes$1O.exports.string,
+  isOpen: propTypes$1O.exports.bool,
+  header: propTypes$1O.exports.oneOfType([
+    propTypes$1O.exports.string,
     fun()
   ]),
-  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
+  onClose: propTypes$1O.exports.func,
+  onOpen: propTypes$1O.exports.func,
+  size: propTypes$1O.exports.string,
+  backdrop: propTypes$1O.exports.string,
+  actionRequired: propTypes$1O.exports.bool
 });
 function SpsModal(modalProps) {
   let lastFocusable;
@@ -38646,4 +38769,4 @@ Object.assign(SpsVr, {
   propTypes,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
-export { AsTypingErrorKeys, ContentOrderExample, DEFAULT_PRESETS, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, OnSubmitErrorKeys, 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, ValidationMode, addOnChangeErrorKey, addOnSubmitErrorKey, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useCustomValidator, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate, weekOfMonth };
+export { AsTypingErrorKeys, ContentOrderExample, DEFAULT_PRESETS, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, OnSubmitErrorKeys, 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, SpsListToolbarSortBy, 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, ValidationMode, addOnChangeErrorKey, addOnSubmitErrorKey, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useCustomValidator, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate, weekOfMonth };