npm - @spscommerce/ds-react - Versions diffs - 5.2.5 → 5.5.0 - Mend

@spscommerce/ds-react 5.2.5 → 5.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/lib/datepicker-v2/utils.d.ts +2 -1
package/lib/index.cjs.js +158 -91
package/lib/index.es.js +822 -688
package/lib/list-toolbar/SpsListToolbarSearchInfo.d.ts +10 -0
package/lib/list-toolbar/index.d.ts +1 -0
package/lib/stepped-progress-bar/SpsSteppedProgressBar.d.ts +3 -1
package/lib/stepped-progress-bar/{SpsStepepdProgressBar.examples.d.ts → SpsSteppedProgressBar.examples.d.ts} +4 -0
package/lib/stepped-progress-bar/index.d.ts +1 -1
package/lib/test-util.d.ts +1 -0
package/package.json +9 -9

package/lib/index.es.js CHANGED Viewed

@@ -31,13 +31,13 @@ var __objRest = (source, exclude) => {
 };
 import * as React from "react";
 import React__default, { useRef, useEffect, createContext, useMemo as useMemo$1, useContext, useReducer, useState, useCallback as useCallback$1, useLayoutEffect as useLayoutEffect$1 } from "react";
-import { noI18nI18n, ButtonKind, ButtonType, SpsIcon, SpinnerSize, Position, ZStratum, SpsOptionListOption, DropdownKind, SPS_ACTION_DEFAULTS, ClickableTagKind, TagKind, SpsIconSize, SelectMode, TooltipKind, TooltipShowTrigger, TOOLTIP_HIDE_DELAY_MS_DEFAULT, FeedbackBlockKind, FeedbackBlockIcons, GrowlerKind, GrowlerIcon, GROWLER_VISIBLE_DURATION_MS, GROWLER_FADEOUT_DURATION_MS, SpsInsightTileKind, SpsInsightTileIcons, KeyValueListTitleColor, SortDirection, ModalKind, ModalSize, DEFAULT_PAGE_SIZE_OPTIONS, StdButtonKind, SpsTaskStatus, TASK_QUEUE_NOTIFICATION_DURATION_MS, SpsTaskStatusIcons, SpsFilterTileKind, RingSize, WizardSubstepConditions } from "@spscommerce/ds-shared";
+import { noI18nI18n, ButtonKind, ButtonType, SpsIcon, SpinnerSize, Position, ZStratum, SpsOptionListOption, DropdownKind, SPS_ACTION_DEFAULTS, ClickableTagKind, TagKind, SpsIconSize, SelectMode, TooltipKind, TooltipShowTrigger, TOOLTIP_HIDE_DELAY_MS_DEFAULT, FeedbackBlockKind, FeedbackBlockIcons, GrowlerKind, GrowlerIcon, GROWLER_VISIBLE_DURATION_MS, GROWLER_FADEOUT_DURATION_MS, SpsInsightTileKind, SpsInsightTileIcons, KeyValueListTitleColor, SortDirection, ModalKind, ModalSize, DEFAULT_PAGE_SIZE_OPTIONS, SteppedProgressBarColor, StdButtonKind, SpsTaskStatus, TASK_QUEUE_NOTIFICATION_DURATION_MS, SpsTaskStatusIcons, SpsFilterTileKind, RingSize, WizardSubstepConditions } from "@spscommerce/ds-shared";
 import { values as values$3, code, debounce, flatten, deepFreeze, setPath, diff, DiffChange, getPath, crumblePath, traversePath, forEachNestedObject, lockToAnimationFrames, constrain } from "@spscommerce/utils";
 import * as ReactDOM from "react-dom";
 import { createPortal, unstable_batchedUpdates } from "react-dom";
 import { useCollection } from "@react-stately/collections";
 import { PositioningService, Position as Position$1 } from "@spscommerce/positioning";
-import * as moment$7 from "moment-timezone";
+import * as moment$6 from "moment-timezone";
 import moment__default from "moment-timezone";
 import { colors } from "@spscommerce/ds-colors";
 function toVal(mix) {
@@ -81,7 +81,7 @@ var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof win
 function commonjsRequire(path) {
   throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }
-var propTypes$1L = { exports: {} };
+var propTypes$1M = { exports: {} };
 var ReactPropTypesSecret$1 = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
 var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
 var ReactPropTypesSecret = ReactPropTypesSecret_1;
@@ -129,32 +129,32 @@ var factoryWithThrowingShims = function() {
   return ReactPropTypes;
 };
 {
-  propTypes$1L.exports = factoryWithThrowingShims();
+  propTypes$1M.exports = factoryWithThrowingShims();
 }
 function deprecated(type) {
   return type;
 }
 function enumValue(e2) {
-  return propTypes$1L.exports.oneOf(values$3(e2));
+  return propTypes$1M.exports.oneOf(values$3(e2));
 }
 function fun() {
-  return propTypes$1L.exports.func;
+  return propTypes$1M.exports.func;
 }
 function impl() {
-  return propTypes$1L.exports.object;
+  return propTypes$1M.exports.object;
 }
 function ref() {
-  return propTypes$1L.exports.object;
+  return propTypes$1M.exports.object;
 }
-const nodeOrRenderFn = propTypes$1L.exports.oneOfType([propTypes$1L.exports.node, propTypes$1L.exports.func]);
+const nodeOrRenderFn = propTypes$1M.exports.oneOfType([propTypes$1M.exports.node, propTypes$1M.exports.func]);
 const spsGlobalPropTypes = {
-  children: propTypes$1L.exports.oneOfType([propTypes$1L.exports.arrayOf(propTypes$1L.exports.node), propTypes$1L.exports.node]),
-  className: propTypes$1L.exports.string,
-  "data-testid": propTypes$1L.exports.string,
-  unsafelyReplaceClassName: propTypes$1L.exports.string
+  children: propTypes$1M.exports.oneOfType([propTypes$1M.exports.arrayOf(propTypes$1M.exports.node), propTypes$1M.exports.node]),
+  className: propTypes$1M.exports.string,
+  "data-testid": propTypes$1M.exports.string,
+  unsafelyReplaceClassName: propTypes$1M.exports.string
 };
 const I18nContext = React.createContext(noI18nI18n);
-const propsDoc$1G = {
+const propsDoc$1H = {
   disabled: "boolean",
   href: "string",
   icon: "SpsIcon",
@@ -163,13 +163,13 @@ const propsDoc$1G = {
   spinningTitle: "string",
   type: "ButtonType"
 };
-const propTypes$1K = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1L.exports.bool,
-  href: propTypes$1L.exports.string,
+const propTypes$1L = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  disabled: propTypes$1M.exports.bool,
+  href: propTypes$1M.exports.string,
   icon: enumValue(SpsIcon),
   kind: enumValue(ButtonKind),
-  spinning: propTypes$1L.exports.bool,
-  spinningTitle: propTypes$1L.exports.string,
+  spinning: propTypes$1M.exports.bool,
+  spinningTitle: propTypes$1M.exports.string,
   type: enumValue(ButtonType)
 });
 function SpsButton(props2) {
@@ -219,8 +219,8 @@ function SpsButton(props2) {
   }), iconElement, children, spinner));
 }
 Object.assign(SpsButton, {
-  props: propsDoc$1G,
-  propTypes: propTypes$1K,
+  props: propsDoc$1H,
+  propTypes: propTypes$1L,
   displayName: "SpsButton"
 });
 const spsFormProps = {
@@ -272,7 +272,7 @@ Object.assign(SpsForm, {
 function contentOf(nodeOrRenderFn2) {
   return typeof nodeOrRenderFn2 === "function" ? nodeOrRenderFn2() : nodeOrRenderFn2;
 }
-const propsDoc$1F = __spreadProps(__spreadValues({}, spsFormProps), {
+const propsDoc$1G = __spreadProps(__spreadValues({}, spsFormProps), {
   controlsDisabled: "boolean",
   footerLinks: "ReactNodeOrRenderFn",
   formMeta: "SpsFormArrayMeta<any> | SpsFormGroupMeta<any>",
@@ -280,16 +280,16 @@ const propsDoc$1F = __spreadProps(__spreadValues({}, spsFormProps), {
   onClear: "() => void",
   onSubmit: "React.FormEventHandler"
 });
-const propTypes$1J = __spreadProps(__spreadValues(__spreadValues({}, spsGlobalPropTypes), spsFormPropTypes), {
-  controlsDisabled: propTypes$1L.exports.bool,
+const propTypes$1K = __spreadProps(__spreadValues(__spreadValues({}, spsGlobalPropTypes), spsFormPropTypes), {
+  controlsDisabled: propTypes$1M.exports.bool,
   footerLinks: nodeOrRenderFn,
   formArray: impl(),
   formGroup: impl(),
-  formMeta: propTypes$1L.exports.oneOfType([
+  formMeta: propTypes$1M.exports.oneOfType([
     impl(),
     impl()
   ]),
-  isOpen: propTypes$1L.exports.bool,
+  isOpen: propTypes$1M.exports.bool,
   onClear: fun(),
   onSubmit: fun()
 });
@@ -354,8 +354,8 @@ function SpsAdvancedSearch(props2) {
   }, t2("design-system:advancedSearch.search"))))));
 }
 Object.assign(SpsAdvancedSearch, {
-  props: propsDoc$1F,
-  propTypes: propTypes$1J,
+  props: propsDoc$1G,
+  propTypes: propTypes$1K,
   displayName: "SpsAdvancedSearch"
 });
 const SpsAdvancedSearchExamples = {
@@ -598,7 +598,7 @@ function useFormControlId(id2, formControl2) {
   };
 }
 const spsFormComponentWrapperPropTypes = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  focusInputOnClick: propTypes$1L.exports.bool,
+  focusInputOnClick: propTypes$1M.exports.bool,
   formMeta: impl(),
   formControl: impl(),
   inputRef: ref()
@@ -748,15 +748,15 @@ var scrollIntoViewImport = /* @__PURE__ */ Object.freeze({
   [Symbol.toStringTag]: "Module",
   "default": scrollIntoView$1
 });
-const propsDoc$1E = {
+const propsDoc$1F = {
   alt: "string",
   size: "SpinnerSize",
   title: "string"
 };
-const propTypes$1I = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  alt: propTypes$1L.exports.string,
+const propTypes$1J = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  alt: propTypes$1M.exports.string,
   size: enumValue(SpinnerSize),
-  title: propTypes$1L.exports.string
+  title: propTypes$1M.exports.string
 });
 function SpsSpinner(props2) {
   const _a = props2, {
@@ -784,8 +784,8 @@ function SpsSpinner(props2) {
   }, rest));
 }
 Object.assign(SpsSpinner, {
-  props: propsDoc$1E,
-  propTypes: propTypes$1I,
+  props: propsDoc$1F,
+  propTypes: propTypes$1J,
   displayName: "SpsSpinner"
 });
 const NAVBAR_HEIGHT = 60;
@@ -973,48 +973,48 @@ const spsOptionListPassthroughProps = {
     zeroState: "string"
   },
   propTypes: {
-    captionKey: propTypes$1L.exports.string,
-    comparisonKey: propTypes$1L.exports.string,
-    disabledOptions: propTypes$1L.exports.arrayOf(propTypes$1L.exports.any),
-    options: propTypes$1L.exports.oneOfType([
-      propTypes$1L.exports.array,
-      propTypes$1L.exports.instanceOf(Promise),
+    captionKey: propTypes$1M.exports.string,
+    comparisonKey: propTypes$1M.exports.string,
+    disabledOptions: propTypes$1M.exports.arrayOf(propTypes$1M.exports.any),
+    options: propTypes$1M.exports.oneOfType([
+      propTypes$1M.exports.array,
+      propTypes$1M.exports.instanceOf(Promise),
       fun()
     ]).isRequired,
-    tall: propTypes$1L.exports.bool,
-    textKey: propTypes$1L.exports.string,
-    valueKey: propTypes$1L.exports.string,
-    zeroState: propTypes$1L.exports.string
+    tall: propTypes$1M.exports.bool,
+    textKey: propTypes$1M.exports.string,
+    valueKey: propTypes$1M.exports.string,
+    zeroState: propTypes$1M.exports.string
   }
 };
 const searchableOptionListProps = {
-  hideInlineSearch: propTypes$1L.exports.bool,
+  hideInlineSearch: propTypes$1M.exports.bool,
   onSearchChange: fun(),
-  search: propTypes$1L.exports.string,
-  searchDebounce: propTypes$1L.exports.number,
-  searchPlaceholder: propTypes$1L.exports.string,
+  search: propTypes$1M.exports.string,
+  searchDebounce: propTypes$1M.exports.number,
+  searchPlaceholder: propTypes$1M.exports.string,
   searchInputRef: ref()
 };
-const propTypes$1H = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, spsGlobalPropTypes), spsOptionListPassthroughProps.propTypes), searchableOptionListProps), {
+const propTypes$1I = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, spsGlobalPropTypes), spsOptionListPassthroughProps.propTypes), searchableOptionListProps), {
   attachTo: ref().isRequired,
-  conformWidth: propTypes$1L.exports.bool,
-  id: propTypes$1L.exports.string.isRequired,
-  isOpen: propTypes$1L.exports.bool,
-  keepOpen: propTypes$1L.exports.bool,
+  conformWidth: propTypes$1M.exports.bool,
+  id: propTypes$1M.exports.string.isRequired,
+  isOpen: propTypes$1M.exports.bool,
+  keepOpen: propTypes$1M.exports.bool,
   keyDown: impl(),
-  nullOption: propTypes$1L.exports.string,
-  offsets: propTypes$1L.exports.arrayOf(propTypes$1L.exports.number),
+  nullOption: propTypes$1M.exports.string,
+  offsets: propTypes$1M.exports.arrayOf(propTypes$1M.exports.number),
   onOptionListChanged: fun(),
   onOptionSelected: fun(),
   onPositionFlip: fun(),
   onSelfToggle: fun(),
-  optionRole: propTypes$1L.exports.string,
-  positionOverride: propTypes$1L.exports.arrayOf(enumValue(Position)),
-  selectedOption: propTypes$1L.exports.any,
+  optionRole: propTypes$1M.exports.string,
+  positionOverride: propTypes$1M.exports.arrayOf(enumValue(Position)),
+  selectedOption: propTypes$1M.exports.any,
   specialAction: fun(),
-  ignoreWidthStyles: propTypes$1L.exports.bool,
-  loading: propTypes$1L.exports.bool,
-  filterByTextAndCaptionKey: propTypes$1L.exports.bool
+  ignoreWidthStyles: propTypes$1M.exports.bool,
+  loading: propTypes$1M.exports.bool,
+  filterByTextAndCaptionKey: propTypes$1M.exports.bool
 });
 async function updateOptions(props2, searchState, searchStatePatch, setOptionList, setAnyOptionHasIcon, promiseRef) {
   const options = typeof props2.options === "function" ? props2.options(searchState.value) : props2.options || [];
@@ -1317,7 +1317,8 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     specialAction,
     unsafelyReplaceClassName,
     loading,
-    filterByTextAndCaptionKey
+    filterByTextAndCaptionKey,
+    "data-testid": testId
   } = _a, rest = __objRest(_a, [
     "captionKey",
     "comparisonKey",
@@ -1351,7 +1352,8 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     "specialAction",
     "unsafelyReplaceClassName",
     "loading",
-    "filterByTextAndCaptionKey"
+    "filterByTextAndCaptionKey",
+    "data-testid"
   ]);
   const specialActionOption = React.useMemo(() => specialAction ? new SpsOptionListOption(specialAction, {
     textKey: "label",
@@ -1573,10 +1575,12 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     tabIndex: -1,
     ref: rootRef,
     style: posStyle,
-    onMouseLeave: () => setHighlightedOptionIndex(-1)
+    onMouseLeave: () => setHighlightedOptionIndex(-1),
+    "data-testid": testId
   }, rest), searchElement, /* @__PURE__ */ React.createElement("div", {
     className: optionsClasses,
-    ref: optionsRef
+    ref: optionsRef,
+    "data-testid": `${testId}-options`
   }, !loading && !searchState.pending && zeroState && (searchState.value || !searchState.isAsync) && optionList.length === 0 && /* @__PURE__ */ React.createElement("div", {
     className: "sps-option-list__zero-state"
   }, zeroState), (loading || searchState.pending) && /* @__PURE__ */ React.createElement("div", {
@@ -1593,7 +1597,8 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
       onClick: (event) => handleOptionClick(event, option),
       onMouseOver: () => setHighlightedOptionIndex(i2),
       tabIndex: -1,
-      ref: highlightedOptionIndex === i2 ? highlightedOptionRef : null
+      ref: highlightedOptionIndex === i2 ? highlightedOptionRef : null,
+      "data-testid": `${testId}-option-${i2}`
     }, option.value && option.value.icon && /* @__PURE__ */ React.createElement("i", {
       className: clsx("sps-icon", "sps-option-list__option-icon", `sps-icon-${String(option.value.icon)}`)
     }), (!option.value || !option.value.icon && anyOptionHasIcon) && /* @__PURE__ */ React.createElement("span", {
@@ -1621,7 +1626,7 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
   }), /* @__PURE__ */ React.createElement("span", null, specialAction.label))));
 });
 Object.assign(SpsOptionList, {
-  propTypes: propTypes$1H,
+  propTypes: propTypes$1I,
   displayName: "SpsOptionList"
 });
 function selectChildren(children = [], groups = []) {
@@ -1710,7 +1715,7 @@ function useInputPopup(rootRef, popupRef) {
     doHidePopup
   };
 }
-const propsDoc$1D = {
+const propsDoc$1E = {
   debounce: "number",
   disabled: "boolean",
   formMeta: "SpsFormFieldMeta<string>",
@@ -1729,23 +1734,23 @@ const propsDoc$1D = {
   zeroState: "string",
   loading: "boolean"
 };
-const propTypes$1G = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  debounce: propTypes$1L.exports.number,
-  disabled: propTypes$1L.exports.bool,
+const propTypes$1H = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  debounce: propTypes$1M.exports.number,
+  disabled: propTypes$1M.exports.bool,
   formControl: impl(),
   formMeta: impl(),
   icon: enumValue(SpsIcon),
   onChange: fun(),
-  placeholder: propTypes$1L.exports.string,
-  suggestions: propTypes$1L.exports.oneOfType([
-    propTypes$1L.exports.arrayOf(propTypes$1L.exports.string),
-    propTypes$1L.exports.instanceOf(Promise),
+  placeholder: propTypes$1M.exports.string,
+  suggestions: propTypes$1M.exports.oneOfType([
+    propTypes$1M.exports.arrayOf(propTypes$1M.exports.string),
+    propTypes$1M.exports.instanceOf(Promise),
     fun()
   ]).isRequired,
-  tallOptionList: propTypes$1L.exports.bool,
-  value: propTypes$1L.exports.string,
-  zeroState: propTypes$1L.exports.string,
-  loading: propTypes$1L.exports.bool
+  tallOptionList: propTypes$1M.exports.bool,
+  value: propTypes$1M.exports.string,
+  zeroState: propTypes$1M.exports.string,
+  loading: propTypes$1M.exports.bool
 });
 function SpsAutocomplete(_a) {
   var _b = _a, {
@@ -1892,8 +1897,8 @@ function SpsAutocomplete(_a) {
   }));
 }
 Object.assign(SpsAutocomplete, {
-  props: propsDoc$1D,
-  propTypes: propTypes$1G,
+  props: propsDoc$1E,
+  propTypes: propTypes$1H,
   displayName: "SpsAutocomplete"
 });
 const SpsAutocompleteExamples = {
@@ -2016,7 +2021,7 @@ const SpsAutocompleteExamples = {
     }
   }
 };
-const propsDoc$1C = {
+const propsDoc$1D = {
   alignLeft: "boolean",
   disabled: "boolean",
   icon: "SpsIcon",
@@ -2030,19 +2035,19 @@ const propsDoc$1C = {
   onClose: "() => void",
   loading: "boolean"
 };
-const propTypes$1F = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  alignLeft: propTypes$1L.exports.bool,
-  disabled: propTypes$1L.exports.bool,
+const propTypes$1G = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  alignLeft: propTypes$1M.exports.bool,
+  disabled: propTypes$1M.exports.bool,
   icon: enumValue(SpsIcon),
   kind: enumValue(DropdownKind),
-  label: propTypes$1L.exports.string,
-  options: propTypes$1L.exports.arrayOf(propTypes$1L.exports.oneOfType([propTypes$1L.exports.func, propTypes$1L.exports.any])).isRequired,
-  spinning: propTypes$1L.exports.bool,
-  spinningTitle: propTypes$1L.exports.string,
-  tallOptionList: propTypes$1L.exports.bool,
+  label: propTypes$1M.exports.string,
+  options: propTypes$1M.exports.arrayOf(propTypes$1M.exports.oneOfType([propTypes$1M.exports.func, propTypes$1M.exports.any])).isRequired,
+  spinning: propTypes$1M.exports.bool,
+  spinningTitle: propTypes$1M.exports.string,
+  tallOptionList: propTypes$1M.exports.bool,
   onOpen: fun(),
   onClose: fun(),
-  loading: propTypes$1L.exports.bool
+  loading: propTypes$1M.exports.bool
 });
 function SpsDropdown(props2) {
   const _a = props2, {
@@ -2199,12 +2204,12 @@ function SpsDropdown(props2) {
   }, spinningTitle || t2("design-system:button.spinningTitle")))));
 }
 Object.assign(SpsDropdown, {
-  props: propsDoc$1C,
-  propTypes: propTypes$1F,
+  props: propsDoc$1D,
+  propTypes: propTypes$1G,
   displayName: "SpsDropdown"
 });
-const propsDoc$1B = {};
-const propTypes$1E = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$1C = {};
+const propTypes$1F = __spreadValues({}, spsGlobalPropTypes);
 function SpsButtonGroup(props2) {
   const _a = props2, {
     children,
@@ -2235,8 +2240,8 @@ function SpsButtonGroup(props2) {
   }), others.length > 0 && others);
 }
 Object.assign(SpsButtonGroup, {
-  props: propsDoc$1B,
-  propTypes: propTypes$1E,
+  props: propsDoc$1C,
+  propTypes: propTypes$1F,
   displayName: "SpsButtonGroup"
 });
 const SpsButtonExamples = {
@@ -4968,8 +4973,8 @@ function SpsTabPanel(_c) {
     className: "sps-card__body"
   }), state.selectedItem ? state.selectedItem.props.children : null);
 }
-const propsDoc$1A = {};
-const propTypes$1D = {};
+const propsDoc$1B = {};
+const propTypes$1E = {};
 function SpsTabsV2(props2) {
   const state = useTabListState(props2);
   const ref2 = React.useRef();
@@ -4987,12 +4992,12 @@ function SpsTabsV2(props2) {
   }));
 }
 Object.assign(SpsTabsV2, {
-  props: propsDoc$1A,
-  propTypes: propTypes$1D,
+  props: propsDoc$1B,
+  propTypes: propTypes$1E,
   displayName: "SpsTabsV2"
 });
-const propsDoc$1z = {};
-const propTypes$1C = {};
+const propsDoc$1A = {};
+const propTypes$1D = {};
 function SpsCardV2Footer(_e) {
   var _f = _e, {
     children,
@@ -5006,12 +5011,12 @@ function SpsCardV2Footer(_e) {
   }, rest), children);
 }
 Object.assign(SpsCardV2Footer, {
-  props: propsDoc$1z,
-  propTypes: propTypes$1C,
+  props: propsDoc$1A,
+  propTypes: propTypes$1D,
   displayName: "SpsCardV2Footer"
 });
-const propsDoc$1y = {};
-const propTypes$1B = {};
+const propsDoc$1z = {};
+const propTypes$1C = {};
 function SpsCardV2Header(_g) {
   var _h = _g, {
     children,
@@ -5025,12 +5030,12 @@ function SpsCardV2Header(_g) {
   }, rest), children);
 }
 Object.assign(SpsCardV2Header, {
-  props: propsDoc$1y,
-  propTypes: propTypes$1B,
+  props: propsDoc$1z,
+  propTypes: propTypes$1C,
   displayName: "SpsCardV2Header"
 });
-const propsDoc$1x = {};
-const propTypes$1A = {};
+const propsDoc$1y = {};
+const propTypes$1B = {};
 function SpsCardV2(_i) {
   var _j = _i, {
     children,
@@ -5056,12 +5061,12 @@ function SpsCardV2(_i) {
   }, bodyContent), footer);
 }
 Object.assign(SpsCardV2, {
-  props: propsDoc$1x,
-  propTypes: propTypes$1A,
+  props: propsDoc$1y,
+  propTypes: propTypes$1B,
   displayName: "SpsCardV2"
 });
-const propsDoc$1w = {};
-const propTypes$1z = {};
+const propsDoc$1x = {};
+const propTypes$1A = {};
 function SpsCardV2Title(_k) {
   var _l = _k, {
     children,
@@ -5075,8 +5080,8 @@ function SpsCardV2Title(_k) {
   }, rest), children);
 }
 Object.assign(SpsCardV2Title, {
-  props: propsDoc$1w,
-  propTypes: propTypes$1z,
+  props: propsDoc$1x,
+  propTypes: propTypes$1A,
   displayName: "SpsCardV2Title"
 });
 const SpsCardExamples = {
@@ -5384,7 +5389,7 @@ const SpsCardExamples = {
     }
   }
 };
-const propsDoc$1v = {
+const propsDoc$1w = {
   checked: "boolean",
   disabled: "boolean",
   formMeta: "SpsFormFieldMeta<boolean>",
@@ -5393,14 +5398,14 @@ const propsDoc$1v = {
   label: "string",
   onChange: "ChangeEventHandler"
 };
-const propTypes$1y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  checked: propTypes$1L.exports.bool,
-  disabled: propTypes$1L.exports.bool,
+const propTypes$1z = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  checked: propTypes$1M.exports.bool,
+  disabled: propTypes$1M.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  indeterminate: propTypes$1L.exports.bool,
-  inline: propTypes$1L.exports.bool,
-  label: propTypes$1L.exports.string,
+  indeterminate: propTypes$1M.exports.bool,
+  inline: propTypes$1M.exports.bool,
+  label: propTypes$1M.exports.string,
   onChange: fun()
 });
 function SpsCheckbox(_m) {
@@ -5475,8 +5480,8 @@ function SpsCheckbox(_m) {
   }, label || ""));
 }
 Object.assign(SpsCheckbox, {
-  props: propsDoc$1v,
-  propTypes: propTypes$1y,
+  props: propsDoc$1w,
+  propTypes: propTypes$1z,
   displayName: "SpsCheckbox"
 });
 const SpsCheckboxExamples = {
@@ -5604,16 +5609,16 @@ const SpsCheckboxExamples = {
     }
   }
 };
-const propsDoc$1u = {
+const propsDoc$1v = {
   disabled: "boolean",
   href: "string",
   kind: "ClickableTagKind",
   onAdd: "() => void",
   onRemove: "() => void"
 };
-const propTypes$1x = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1L.exports.bool,
-  href: propTypes$1L.exports.string,
+const propTypes$1y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  disabled: propTypes$1M.exports.bool,
+  href: propTypes$1M.exports.string,
   kind: enumValue(ClickableTagKind),
   onAdd: fun(),
   onRemove: fun()
@@ -5684,8 +5689,8 @@ function SpsClickableTag(props2) {
   })));
 }
 Object.assign(SpsClickableTag, {
-  props: propsDoc$1u,
-  propTypes: propTypes$1x,
+  props: propsDoc$1v,
+  propTypes: propTypes$1y,
   displayName: "SpsClickableTag"
 });
 const SpsClickableTagExamples = {
@@ -13913,15 +13918,15 @@ var ConnectedDraggable = connect(makeMapStateToProps$1, mapDispatchToProps$1, nu
   areStatePropsEqual: isStrictEqual
 })(Draggable);
 ConnectedDraggable.defaultProps = defaultProps$1;
-const propsDoc$1t = {
+const propsDoc$1u = {
   content: "ReactNodeLike",
   icon: "SpsIcon",
   title: "string"
 };
-const propTypes$1w = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  content: propTypes$1L.exports.node,
+const propTypes$1x = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  content: propTypes$1M.exports.node,
   icon: enumValue(SpsIcon),
-  title: propTypes$1L.exports.string
+  title: propTypes$1M.exports.string
 });
 function SpsCardHeader(props2) {
   const _a = props2, {
@@ -13953,15 +13958,15 @@ function SpsCardHeader(props2) {
   }, content));
 }
 Object.assign(SpsCardHeader, {
-  props: propsDoc$1t,
-  propTypes: propTypes$1w,
+  props: propsDoc$1u,
+  propTypes: propTypes$1x,
   displayName: "SpsCardHeader"
 });
-const propsDoc$1s = {
+const propsDoc$1t = {
   icon: "SpsIcon",
   kind: "TagKind"
 };
-const propTypes$1v = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$1w = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   icon: enumValue(SpsIcon),
   kind: enumValue(TagKind)
 });
@@ -13994,11 +13999,11 @@ function SpsTag(props2) {
   }), children);
 }
 Object.assign(SpsTag, {
-  props: propsDoc$1s,
-  propTypes: propTypes$1v,
+  props: propsDoc$1t,
+  propTypes: propTypes$1w,
   displayName: "SpsTag"
 });
-const propsDoc$1r = {
+const propsDoc$1s = {
   activateTab: "Function",
   active: "boolean",
   icon: "SpsIcon",
@@ -14008,13 +14013,13 @@ const propsDoc$1r = {
   tagKind: "TagKind",
   tagIcon: "SpsIcon"
 };
-const propTypes$1u = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  activateTab: propTypes$1L.exports.func,
-  active: propTypes$1L.exports.bool,
+const propTypes$1v = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  activateTab: propTypes$1M.exports.func,
+  active: propTypes$1M.exports.bool,
   icon: enumValue(SpsIcon),
-  label: propTypes$1L.exports.string,
-  index: propTypes$1L.exports.number,
-  tag: propTypes$1L.exports.string,
+  label: propTypes$1M.exports.string,
+  index: propTypes$1M.exports.number,
+  tag: propTypes$1M.exports.string,
   tagKind: enumValue(TagKind),
   tagIcon: enumValue(SpsIcon)
 });
@@ -14077,8 +14082,8 @@ function SpsCardTabbedPane(props2) {
   }, tag));
 }
 Object.assign(SpsCardTabbedPane, {
-  props: propsDoc$1r,
-  propTypes: propTypes$1u,
+  props: propsDoc$1s,
+  propTypes: propTypes$1v,
   displayName: "SpsCardTabbedPane"
 });
 function useTab(children, activeTab, isTabbedCard) {
@@ -14120,19 +14125,19 @@ function useTab(children, activeTab, isTabbedCard) {
   }, [activeTab, children]);
   return [currentlyActiveTab, activateTab];
 }
-const propsDoc$1q = {
+const propsDoc$1r = {
   activeTab: "string",
   footer: "ReactNodeOrRenderFn",
   headerContent: "ReactNodeOrRenderFn",
   headerIcon: "SpsIcon",
   headerTitle: "string"
 };
-const propTypes$1t = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  activeTab: propTypes$1L.exports.string,
+const propTypes$1u = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  activeTab: propTypes$1M.exports.string,
   footer: nodeOrRenderFn,
   headerContent: nodeOrRenderFn,
   headerIcon: enumValue(SpsIcon),
-  headerTitle: propTypes$1L.exports.string
+  headerTitle: propTypes$1M.exports.string
 });
 function SpsCard(props2) {
   React.useEffect(() => {
@@ -14199,11 +14204,11 @@ function SpsCard(props2) {
   }, contentOf(footer)));
 }
 Object.assign(SpsCard, {
-  props: propsDoc$1q,
-  propTypes: propTypes$1t,
+  props: propsDoc$1r,
+  propTypes: propTypes$1u,
   displayName: "SpsCard"
 });
-const propsDoc$1p = {
+const propsDoc$1q = {
   index: "number",
   key: "string",
   columnId: "string",
@@ -14212,14 +14217,14 @@ const propsDoc$1p = {
   onDelete: "(columnValue: string) => void",
   mandatory: "boolean"
 };
-const propTypes$1s = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  index: propTypes$1L.exports.number,
-  key: propTypes$1L.exports.string,
-  columnId: propTypes$1L.exports.string,
-  name: propTypes$1L.exports.string,
-  value: propTypes$1L.exports.string,
+const propTypes$1t = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  index: propTypes$1M.exports.number,
+  key: propTypes$1M.exports.string,
+  columnId: propTypes$1M.exports.string,
+  name: propTypes$1M.exports.string,
+  value: propTypes$1M.exports.string,
   onDelete: fun(),
-  mandatory: propTypes$1L.exports.bool
+  mandatory: propTypes$1M.exports.bool
 });
 function SpsColumnChooserColumn(props2) {
   const _a = props2, {
@@ -14275,20 +14280,20 @@ function SpsColumnChooserColumn(props2) {
   })))));
 }
 Object.assign(SpsColumnChooserColumn, {
-  props: propsDoc$1p,
-  propTypes: propTypes$1s,
+  props: propsDoc$1q,
+  propTypes: propTypes$1t,
   displayName: "SpsColumnChooserColumn"
 });
-const propsDoc$1o = {
+const propsDoc$1p = {
   maxSelectedColumns: "number",
   unselectedColumns: "ColumnProps[]",
   selectedColumns: "ColumnProps[]",
   onApplyChanges: "(selectedColumns: ColumnProps[]) => void"
 };
-const propTypes$1r = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  maxSelectedColumns: propTypes$1L.exports.number,
-  unselectedColumns: propTypes$1L.exports.array,
-  selectedColumns: propTypes$1L.exports.array,
+const propTypes$1s = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  maxSelectedColumns: propTypes$1M.exports.number,
+  unselectedColumns: propTypes$1M.exports.array,
+  selectedColumns: propTypes$1M.exports.array,
   onApplyChanges: fun()
 });
 function SpsColumnChooser(props2) {
@@ -14428,8 +14433,8 @@ function SpsColumnChooser(props2) {
   })), provided.placeholder)))));
 }
 Object.assign(SpsColumnChooser, {
-  props: propsDoc$1o,
-  propTypes: propTypes$1r,
+  props: propsDoc$1p,
+  propTypes: propTypes$1s,
   displayName: "SpsColumnChooser"
 });
 const SpsColumnChooserExamples = {
@@ -14461,11 +14466,11 @@ const SpsColumnChooserExamples = {
     }
   }
 };
-const propsDoc$1n = {
+const propsDoc$1o = {
   icon: { type: "SpsIcon", required: true },
   size: "SpsIconSize"
 };
-const propTypes$1q = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$1r = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   icon: enumValue(SpsIcon).isRequired,
   size: enumValue(SpsIconSize)
 });
@@ -14491,28 +14496,28 @@ function SpsI(props2) {
   }, rest));
 }
 Object.assign(SpsI, {
-  props: propsDoc$1n,
-  propTypes: propTypes$1q,
+  props: propsDoc$1o,
+  propTypes: propTypes$1r,
   displayName: "SpsI"
 });
 Object.assign(SpsI, {
-  props: propsDoc$1n,
-  propTypes: propTypes$1q,
+  props: propsDoc$1o,
+  propTypes: propTypes$1r,
   displayName: "SpsI"
 });
-const propsDoc$1m = {
+const propsDoc$1n = {
   borderless: "boolean",
   lean: "boolean",
   leaner: { type: "boolean", deprecated: true },
   widthPx: "number",
   widthRem: "number"
 };
-const propTypes$1p = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  borderless: propTypes$1L.exports.bool,
-  lean: propTypes$1L.exports.bool,
-  leaner: propTypes$1L.exports.bool,
-  widthPx: propTypes$1L.exports.number,
-  widthRem: propTypes$1L.exports.number
+const propTypes$1q = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  borderless: propTypes$1M.exports.bool,
+  lean: propTypes$1M.exports.bool,
+  leaner: propTypes$1M.exports.bool,
+  widthPx: propTypes$1M.exports.number,
+  widthRem: propTypes$1M.exports.number
 });
 function SpsContentRowCol(props2) {
   const _a = props2, {
@@ -14557,12 +14562,12 @@ function SpsContentRowCol(props2) {
   }), children);
 }
 Object.assign(SpsContentRowCol, {
-  props: propsDoc$1m,
-  propTypes: propTypes$1p,
+  props: propsDoc$1n,
+  propTypes: propTypes$1q,
   displayName: "SpsContentRowCol"
 });
-const propsDoc$1l = {};
-const propTypes$1o = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$1m = {};
+const propTypes$1p = __spreadValues({}, spsGlobalPropTypes);
 function SpsContentRowExpansion(props2) {
   const _a = props2, {
     children,
@@ -14583,11 +14588,11 @@ function SpsContentRowExpansion(props2) {
   }), children);
 }
 Object.assign(SpsContentRowExpansion, {
-  props: propsDoc$1l,
-  propTypes: propTypes$1o,
+  props: propsDoc$1m,
+  propTypes: propTypes$1p,
   displayName: "SpsContentRowExpansion"
 });
-const propsDoc$1k = {
+const propsDoc$1l = {
   alternateLayout: "boolean",
   initiallyExpanded: "boolean",
   cardSpacing: "boolean",
@@ -14600,18 +14605,18 @@ const propsDoc$1k = {
   selectable: "boolean",
   selected: "boolean"
 };
-const propTypes$1n = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  alternateLayout: propTypes$1L.exports.bool,
-  cardSpacing: propTypes$1L.exports.bool,
-  expanded: propTypes$1L.exports.bool,
-  initiallyExpanded: propTypes$1L.exports.bool,
+const propTypes$1o = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  alternateLayout: propTypes$1M.exports.bool,
+  cardSpacing: propTypes$1M.exports.bool,
+  expanded: propTypes$1M.exports.bool,
+  initiallyExpanded: propTypes$1M.exports.bool,
   onBeforeCollapsed: fun(),
   onBeforeExpanded: fun(),
   onSelectionChange: fun(),
   onCollapsed: fun(),
   onExpanded: fun(),
-  selectable: propTypes$1L.exports.bool,
-  selected: propTypes$1L.exports.bool
+  selectable: propTypes$1M.exports.bool,
+  selected: propTypes$1M.exports.bool
 });
 function SpsContentRow(props2) {
   const _a = props2, {
@@ -14692,8 +14697,8 @@ function SpsContentRow(props2) {
   }, /* @__PURE__ */ React.createElement("section", null, ContentRowCheckBox()), /* @__PURE__ */ React.createElement("section", null, ExpandoThingy())), columns), expansion);
 }
 Object.assign(SpsContentRow, {
-  props: propsDoc$1k,
-  propTypes: propTypes$1n,
+  props: propsDoc$1l,
+  propTypes: propTypes$1o,
   displayName: "SpsContentRow"
 });
 const SpsContentRowExamples = {
@@ -15132,7 +15137,7 @@ const SpsContentRowExamples = {
     }
   }
 };
-const moment$6 = moment$7.default || moment$7;
+const moment$5 = moment$6.default || moment$6;
 function newWeekArray$1() {
   return new Array(7);
 }
@@ -15157,12 +15162,12 @@ function generateWeeks$1(date2) {
   return newWeeks;
 }
 function parse2(value) {
-  return moment$6(`${value} 00:00:00`);
+  return moment$5(`${value} 00:00:00`);
 }
 function weekOfMonth$1(date2) {
   return Math.floor((date2.clone().date(1).day() + date2.date() - 1) / 7);
 }
-const propsDoc$1j = {
+const propsDoc$1k = {
   disabled: "boolean",
   format: "string",
   maxDate: "string",
@@ -15172,21 +15177,21 @@ const propsDoc$1j = {
   placeholder: "string",
   value: "string"
 };
-const propTypes$1m = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1L.exports.bool,
-  format: propTypes$1L.exports.string,
-  maxDate: propTypes$1L.exports.string,
-  minDate: propTypes$1L.exports.string,
+const propTypes$1n = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  disabled: propTypes$1M.exports.bool,
+  format: propTypes$1M.exports.string,
+  maxDate: propTypes$1M.exports.string,
+  minDate: propTypes$1M.exports.string,
   onChange: fun(),
   onClickOutside: fun(),
-  placeholder: propTypes$1L.exports.string,
-  value: propTypes$1L.exports.string
+  placeholder: propTypes$1M.exports.string,
+  value: propTypes$1M.exports.string
 });
 function SpsDatepicker(props2) {
   const _a = props2, {
     className,
     disabled,
-    format = moment$6.localeData().longDateFormat("MM/DD/YYYY") || "MM/DD/YYYY",
+    format = moment$5.localeData().longDateFormat("MM/DD/YYYY") || "MM/DD/YYYY",
     maxDate,
     minDate,
     onChange,
@@ -15221,20 +15226,20 @@ function SpsDatepicker(props2) {
     isInitialValue: true,
     keyboardFocusDay: null,
     text: "",
-    minDateMoment: minDate ? moment$6(minDate) : {},
-    maxDateMoment: maxDate ? moment$6(maxDate) : {}
+    minDateMoment: minDate ? moment$5(minDate) : {},
+    maxDateMoment: maxDate ? moment$5(maxDate) : {}
   });
   function setCalendarView(displayMoment) {
     let theMoment = displayMoment;
     if (!displayMoment || !displayMoment.isValid()) {
-      if (moment$6.isMoment(state.currentValue) && state.currentValue.isValid()) {
+      if (moment$5.isMoment(state.currentValue) && state.currentValue.isValid()) {
         theMoment = state.currentValue.clone();
       } else if (minDate) {
         theMoment = state.minDateMoment.clone();
       } else if (maxDate) {
         theMoment = state.maxDateMoment.clone();
       } else {
-        theMoment = moment$6();
+        theMoment = moment$5();
       }
     }
     const newView = theMoment.set({
@@ -15262,7 +15267,7 @@ function SpsDatepicker(props2) {
   }
   React.useEffect(() => {
     document.addEventListener("mousedown", handleClickOutside);
-    patchState({ weekdayNames: Object.freeze(moment$6.weekdaysShort()) });
+    patchState({ weekdayNames: Object.freeze(moment$5.weekdaysShort()) });
     setCalendarView(null);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
@@ -15280,7 +15285,7 @@ function SpsDatepicker(props2) {
     }
   }, [value]);
   React.useEffect(() => {
-    if (moment$6.isMoment(state.view)) {
+    if (moment$5.isMoment(state.view)) {
       patchState({ weeks: generateWeeks$1(state.view) });
     }
   }, [state.view]);
@@ -15291,7 +15296,7 @@ function SpsDatepicker(props2) {
     setCalendarView(state.view.add(1, "month"));
   }
   React.useEffect(() => {
-    if (moment$6.isMoment(state.keyboardFocusDay)) {
+    if (moment$5.isMoment(state.keyboardFocusDay)) {
       if (state.keyboardFocusDay.isBefore(state.view, "month")) {
         viewPreviousMonth();
       } else if (state.keyboardFocusDay.isAfter(state.view, "month")) {
@@ -15305,7 +15310,7 @@ function SpsDatepicker(props2) {
     }
   }, [state.isOpen]);
   React.useEffect(() => {
-    if (moment$6.isMoment(state.currentValue)) {
+    if (moment$5.isMoment(state.currentValue)) {
       setCalendarView(null);
     }
     if (onChange && typeof onChange === "function" && !state.isInitialValue) {
@@ -15341,7 +15346,7 @@ function SpsDatepicker(props2) {
       currentValue: null,
       isInitialValue: false
     });
-    setCalendarView(moment$6());
+    setCalendarView(moment$5());
     inputRef.current.value = "";
     show();
     inputRef.current.focus();
@@ -15350,17 +15355,17 @@ function SpsDatepicker(props2) {
     return date2 && (minDate && state.minDateMoment.isAfter(date2, "day")) || maxDate && state.maxDateMoment.isBefore(date2, "day");
   }
   function updateText(newValue) {
-    inputRef.current.value = moment$6.isMoment(newValue) ? newValue.format(format) : "";
+    inputRef.current.value = moment$5.isMoment(newValue) ? newValue.format(format) : "";
   }
   function selectDate(date2) {
     if (date2 && !dateIsDisabled(date2)) {
       let val;
-      if (state.currentValue && moment$6.isMoment(date2)) {
+      if (state.currentValue && moment$5.isMoment(date2)) {
         val = date2.clone();
-      } else if (state.currentValue && moment$6.isMoment(state.currentValue)) {
+      } else if (state.currentValue && moment$5.isMoment(state.currentValue)) {
         val = state.currentValue.clone().set(date2);
       } else {
-        val = moment$6(date2);
+        val = moment$5(date2);
       }
       updateText(val);
       patchState({
@@ -15373,10 +15378,10 @@ function SpsDatepicker(props2) {
     }
   }
   function dateIsSelected(date2) {
-    return date2 && moment$6.isMoment(state.currentValue) && state.currentValue.isValid() && state.currentValue.isSame(date2, "day");
+    return date2 && moment$5.isMoment(state.currentValue) && state.currentValue.isValid() && state.currentValue.isSame(date2, "day");
   }
   function dateIsFocused(date2) {
-    return date2 && moment$6.isMoment(state.keyboardFocusDay) && state.keyboardFocusDay.isSame(date2, "day");
+    return date2 && moment$5.isMoment(state.keyboardFocusDay) && state.keyboardFocusDay.isSame(date2, "day");
   }
   function onKeyDown(event) {
     switch (event.key) {
@@ -15384,7 +15389,7 @@ function SpsDatepicker(props2) {
       case "ArrowUp":
         if (state.keyboardFocusDay) {
           event.preventDefault();
-          const newFocusDay = weekOfMonth$1(state.keyboardFocusDay) === 0 ? null : moment$6.max(state.keyboardFocusDay.clone().subtract(1, "week"), state.keyboardFocusDay.date(1));
+          const newFocusDay = weekOfMonth$1(state.keyboardFocusDay) === 0 ? null : moment$5.max(state.keyboardFocusDay.clone().subtract(1, "week"), state.keyboardFocusDay.date(1));
           patchState({ keyboardFocusDay: newFocusDay });
           if (!newFocusDay) {
             inputRef.current.focus();
@@ -15397,10 +15402,10 @@ function SpsDatepicker(props2) {
         if (!state.isOpen) {
           show();
         }
-        if (moment$6.isMoment(state.keyboardFocusDay)) {
-          const newFocusDay = moment$6.min(state.keyboardFocusDay.clone().add(1, "week"), state.keyboardFocusDay.date(state.keyboardFocusDay.daysInMonth()));
+        if (moment$5.isMoment(state.keyboardFocusDay)) {
+          const newFocusDay = moment$5.min(state.keyboardFocusDay.clone().add(1, "week"), state.keyboardFocusDay.date(state.keyboardFocusDay.daysInMonth()));
           patchState({ keyboardFocusDay: newFocusDay });
-        } else if (moment$6.isMoment(state.view)) {
+        } else if (moment$5.isMoment(state.view)) {
           patchState({ keyboardFocusDay: state.view.clone() });
         }
         break;
@@ -15411,7 +15416,7 @@ function SpsDatepicker(props2) {
           let newFocusDay;
           if (state.keyboardFocusDay.day() === 0 || state.keyboardFocusDay.date() === 1) {
             const week = weekOfMonth$1(state.keyboardFocusDay);
-            newFocusDay = week ? moment$6.min(state.keyboardFocusDay.clone().add(week, "weeks"), state.keyboardFocusDay.date(state.keyboardFocusDay.daysInMonth())) : state.keyboardFocusDay.subtract(1, "month").date(1).day(6);
+            newFocusDay = week ? moment$5.min(state.keyboardFocusDay.clone().add(week, "weeks"), state.keyboardFocusDay.date(state.keyboardFocusDay.daysInMonth())) : state.keyboardFocusDay.subtract(1, "month").date(1).day(6);
           } else {
             newFocusDay = state.keyboardFocusDay.clone().subtract(1, "day");
           }
@@ -15425,7 +15430,7 @@ function SpsDatepicker(props2) {
           let newFocusDay;
           if (state.keyboardFocusDay.day() === 6 || state.keyboardFocusDay.date() === state.keyboardFocusDay.daysInMonth()) {
             const week = weekOfMonth$1(state.keyboardFocusDay);
-            newFocusDay = week ? moment$6.min(state.keyboardFocusDay.clone().add(week, "weeks").day(0), state.keyboardFocusDay.date(state.keyboardFocusDay.daysInMonth()).day(0)) : state.keyboardFocusDay.add(1, "month").date(1);
+            newFocusDay = week ? moment$5.min(state.keyboardFocusDay.clone().add(week, "weeks").day(0), state.keyboardFocusDay.date(state.keyboardFocusDay.daysInMonth()).day(0)) : state.keyboardFocusDay.add(1, "month").date(1);
           } else {
             newFocusDay = state.keyboardFocusDay.clone().add(1, "day");
           }
@@ -15508,9 +15513,9 @@ function SpsDatepicker(props2) {
     className: "sps-datepicker__calendar-head-label"
   }, /* @__PURE__ */ React.createElement("span", {
     className: "sps-datepicker__calendar-head-label-month"
-  }, moment$6.isMoment(state.view) ? state.view.format("MMMM") : ""), /* @__PURE__ */ React.createElement("span", {
+  }, moment$5.isMoment(state.view) ? state.view.format("MMMM") : ""), /* @__PURE__ */ React.createElement("span", {
     className: "sps-datepicker__calendar-head-label-year"
-  }, moment$6.isMoment(state.view) ? state.view.year() : "")), /* @__PURE__ */ React.createElement("a", {
+  }, moment$5.isMoment(state.view) ? state.view.year() : "")), /* @__PURE__ */ React.createElement("a", {
     className: "sps-datepicker__button sps-datepicker__button-next-month",
     onClick: viewNextMonth
   }, /* @__PURE__ */ React.createElement("i", {
@@ -15543,8 +15548,8 @@ function SpsDatepicker(props2) {
   }))));
 }
 Object.assign(SpsDatepicker, {
-  props: propsDoc$1j,
-  propTypes: propTypes$1m,
+  props: propsDoc$1k,
+  propTypes: propTypes$1n,
   displayName: "SpsDatepicker"
 });
 const SpsDatepickerExamples = {
@@ -15639,7 +15644,7 @@ const SpsDatepickerExamples = {
     }
   }
 };
-const propsDoc$1i = {
+const propsDoc$1j = {
   placeholder: "string",
   disabled: "boolean",
   format: "string",
@@ -15650,13 +15655,13 @@ const propsDoc$1i = {
   value: "MomentRange",
   preset: "Duration"
 };
-const propTypes$1l = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  placeholder: propTypes$1L.exports.string,
-  disabled: propTypes$1L.exports.bool,
-  format: propTypes$1L.exports.string,
-  minDate: propTypes$1L.exports.string,
-  maxDate: propTypes$1L.exports.string,
-  availablePresets: propTypes$1L.exports.array,
+const propTypes$1m = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  placeholder: propTypes$1M.exports.string,
+  disabled: propTypes$1M.exports.bool,
+  format: propTypes$1M.exports.string,
+  minDate: propTypes$1M.exports.string,
+  maxDate: propTypes$1M.exports.string,
+  availablePresets: propTypes$1M.exports.array,
   onChange: fun(),
   value: impl(),
   preset: impl()
@@ -15664,7 +15669,7 @@ const propTypes$1l = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
 function weekOfMonth(mmt) {
   return Math.floor((mmt.clone().date(1).day() + mmt.date() - 1) / 7);
 }
-const moment$5 = moment$7.default || moment$7;
+const moment$4 = moment$6.default || moment$6;
 const defaultPresets = [
   { days: 1 },
   { days: 7 },
@@ -15672,7 +15677,7 @@ const defaultPresets = [
   { days: 60 },
   { days: 90 },
   { years: 1 }
-].map(moment$5.duration);
+].map(moment$4.duration);
 const _positioningService = new PositioningService();
 let idNum = 0;
 function SpsDateRangePicker(props2) {
@@ -15680,7 +15685,7 @@ function SpsDateRangePicker(props2) {
     className,
     placeholder = "MM/DD/YYYY - MM/DD/YYYY",
     disabled,
-    format = moment$5.localeData().longDateFormat("MM/DD/YYYY") || "MM/DD/YYYY",
+    format = moment$4.localeData().longDateFormat("MM/DD/YYYY") || "MM/DD/YYYY",
     maxDate,
     minDate,
     availablePresets,
@@ -15712,14 +15717,14 @@ function SpsDateRangePicker(props2) {
   const [mouseoverRange, setMouseoverRange] = React.useState(null);
   const [selectMode, setSelectMode] = React.useState(SelectMode.START);
   const [keyboardFocusDay, setKeyboardFocusDay] = React.useState();
-  const [minDateMoment, setMinDateMoment] = React.useState(minDate ? moment$5(minDate) : {});
-  const [maxDateMoment, setMaxDateMoment] = React.useState(maxDate ? moment$5(maxDate) : {});
+  const [minDateMoment, setMinDateMoment] = React.useState(minDate ? moment$4(minDate) : {});
+  const [maxDateMoment, setMaxDateMoment] = React.useState(maxDate ? moment$4(maxDate) : {});
   const [isInitialValue, setIsInitialValue] = React.useState(true);
   const [months, setMonths] = React.useState(null);
   const inputElement = React.useRef(null);
   const calendar = React.useRef(null);
   const dateRange2 = React.useRef(null);
-  const weekDayNames = Object.freeze(moment$5.weekdaysShort());
+  const weekDayNames = Object.freeze(moment$4.weekdaysShort());
   let leftAligned = false;
   const _idNum = idNum++;
   const textRef = React.useRef();
@@ -15798,7 +15803,7 @@ function SpsDateRangePicker(props2) {
     } else if (maxDate) {
       displayMoment = maxDateMoment.clone();
     } else {
-      displayMoment = moment$5();
+      displayMoment = moment$4();
     }
     displayMoment.startOf("month");
     const viewStart = displayMoment.clone().subtract(1, "month");
@@ -15818,7 +15823,7 @@ function SpsDateRangePicker(props2) {
   const updatePresets = () => {
     if (availablePresets) {
       const psts = availablePresets;
-      const today = moment$5();
+      const today = moment$4();
       const todayIsAllowed = !dateIsDisabled(today);
       const t2 = psts.filter((pst) => todayIsAllowed && !dateIsDisabled(today.subtract(pst)));
       setPreset(t2);
@@ -15837,7 +15842,7 @@ function SpsDateRangePicker(props2) {
   }, []);
   const matchPreset = (newPreset) => {
     if (presets && newPreset) {
-      const match2 = presets.find((pst) => pst.asMilliseconds() === moment$5.duration(newPreset).asMilliseconds());
+      const match2 = presets.find((pst) => pst.asMilliseconds() === moment$4.duration(newPreset).asMilliseconds());
       return match2;
     }
     return void 0;
@@ -15847,7 +15852,7 @@ function SpsDateRangePicker(props2) {
     let newValue;
     if (matchedPreset) {
       setSelectedPreset(matchedPreset);
-      const today = moment$5();
+      const today = moment$4();
       newValue = {
         preset: matchedPreset,
         start: today.clone().subtract(matchedPreset).add(1, "day").startOf("day"),
@@ -15879,13 +15884,13 @@ function SpsDateRangePicker(props2) {
     }
   }, [currentValue]);
   React.useEffect(() => {
-    setMinDateMoment(moment$5(minDate).add(1, "day"));
+    setMinDateMoment(moment$4(minDate).add(1, "day"));
   }, [minDate]);
   React.useEffect(() => {
     updatePresets();
   }, [minDate, maxDate]);
   React.useEffect(() => {
-    setMaxDateMoment(moment$5(maxDate).add(1, "day"));
+    setMaxDateMoment(moment$4(maxDate).add(1, "day"));
   }, [maxDate]);
   React.useEffect(() => {
     setTimeout(() => {
@@ -15893,8 +15898,8 @@ function SpsDateRangePicker(props2) {
         updateFromPreset(selectedPreset);
       }
       if (preset2) {
-        setSelectedPreset(moment$5.duration(preset2));
-        updateFromPreset(moment$5.duration(preset2));
+        setSelectedPreset(moment$4.duration(preset2));
+        updateFromPreset(moment$4.duration(preset2));
       }
     }, 0);
   }, [presets]);
@@ -15932,9 +15937,9 @@ function SpsDateRangePicker(props2) {
       } else {
         [startStr, endStr] = split;
         const startDateStr = startStr ? startStr.trim().split("/") : [];
-        start = moment$5({ year: parseInt(startDateStr[2], 10), month: parseInt(startDateStr[0], 10) - 1, day: parseInt(startDateStr[1], 10) });
+        start = moment$4({ year: parseInt(startDateStr[2], 10), month: parseInt(startDateStr[0], 10) - 1, day: parseInt(startDateStr[1], 10) });
         const endDateStr = endStr ? endStr.trim().split("/") : [];
-        end2 = moment$5({ year: parseInt(endDateStr[2], 10), month: parseInt(endDateStr[0], 10) - 1, day: parseInt(endDateStr[1], 10) });
+        end2 = moment$4({ year: parseInt(endDateStr[2], 10), month: parseInt(endDateStr[0], 10) - 1, day: parseInt(endDateStr[1], 10) });
       }
       return {
         start,
@@ -15958,7 +15963,7 @@ function SpsDateRangePicker(props2) {
     return `Last ${pst.humanize().replace("a ", "")}`;
   };
   const dateIsSelected = (date2) => date2 && currentValue && (currentValue.start && currentValue.start.isSame(date2, "day") || currentValue.end && currentValue.end.isSame(date2, "day") || currentValue.start && currentValue.end && currentValue.start.isBefore(date2, "day") && currentValue.end.isAfter(date2, "day"));
-  const dateIsFocused = (date2) => date2 && keyboardFocusDay && moment$5.isMoment(keyboardFocusDay) && keyboardFocusDay.isSame(date2, "day");
+  const dateIsFocused = (date2) => date2 && keyboardFocusDay && moment$4.isMoment(keyboardFocusDay) && keyboardFocusDay.isSame(date2, "day");
   const dateIsSelectionStart = (date2) => date2 && currentValue && currentValue.start && currentValue.start.isSame(date2, "day") && currentValue.end && !currentValue.end.isSame(date2, "day");
   const dateIsSelectionMiddle = (date2) => date2 && currentValue && currentValue.start && currentValue.start.isBefore(date2, "day") && currentValue.end && currentValue.end.isAfter(date2, "day");
   const dateIsSelectionEnd = (date2) => date2 && currentValue && currentValue.start && !currentValue.start.isSame(date2, "day") && currentValue.end && currentValue.end.isSame(date2, "day");
@@ -16007,7 +16012,7 @@ function SpsDateRangePicker(props2) {
     if (event && event.target) {
       try {
         const date2 = JSON.parse(event.target.getAttribute("data-date"));
-        selectDate(moment$5(date2));
+        selectDate(moment$4(date2));
       } catch (ignore) {
       }
     }
@@ -16027,7 +16032,7 @@ function SpsDateRangePicker(props2) {
   const onCalendarMouseover = (event) => {
     try {
       const date2 = JSON.parse(event.target.getAttribute("data-date"));
-      updateMouseoverRange(moment$5(date2));
+      updateMouseoverRange(moment$4(date2));
     } catch (ignore) {
     }
   };
@@ -16100,7 +16105,7 @@ function SpsDateRangePicker(props2) {
           open();
         }
         if (keyboardFocusDay) {
-          newKeyboardFocusDay = moment$5.min(keyboardFocusDay.clone().add(1, "week"), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()));
+          newKeyboardFocusDay = moment$4.min(keyboardFocusDay.clone().add(1, "week"), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()));
           setKeyboardFocusDay(newKeyboardFocusDay);
         } else {
           focusCalendar();
@@ -16116,7 +16121,7 @@ function SpsDateRangePicker(props2) {
             setKeyboardFocusDay(null);
             inputElement.current.focus();
           } else {
-            newKeyboardFocusDay = moment$5.max(keyboardFocusDay.clone().subtract(1, "week"), keyboardFocusDay.date(1));
+            newKeyboardFocusDay = moment$4.max(keyboardFocusDay.clone().subtract(1, "week"), keyboardFocusDay.date(1));
             setKeyboardFocusDay(newKeyboardFocusDay);
           }
         }
@@ -16130,7 +16135,7 @@ function SpsDateRangePicker(props2) {
             const week = weekOfMonth(keyboardFocusDay);
             keyboardFocusDay.subtract(1, "month").date(1).day(6);
             if (week) {
-              newKeyboardFocusDay = moment$5.min(keyboardFocusDay.clone().add(week, "weeks"), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()));
+              newKeyboardFocusDay = moment$4.min(keyboardFocusDay.clone().add(week, "weeks"), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()));
               setKeyboardFocusDay(newKeyboardFocusDay);
             }
           } else {
@@ -16148,7 +16153,7 @@ function SpsDateRangePicker(props2) {
             const week = weekOfMonth(keyboardFocusDay);
             keyboardFocusDay.add(1, "month").date(1);
             if (week) {
-              newKeyboardFocusDay = moment$5.min(keyboardFocusDay.clone().add(week, "weeks").day(0), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()).day(0));
+              newKeyboardFocusDay = moment$4.min(keyboardFocusDay.clone().add(week, "weeks").day(0), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()).day(0));
               setKeyboardFocusDay(newKeyboardFocusDay);
             }
           } else {
@@ -16165,7 +16170,7 @@ function SpsDateRangePicker(props2) {
         break;
       case "Esc":
       case "Escape":
-        if (keyboardFocusDay && moment$5.isMoment(keyboardFocusDay)) {
+        if (keyboardFocusDay && moment$4.isMoment(keyboardFocusDay)) {
           setKeyboardFocusDay(null);
           inputElement.current.focus();
         } else {
@@ -16176,7 +16181,7 @@ function SpsDateRangePicker(props2) {
         }
         break;
     }
-    if (keyboardFocusDay && moment$5.isMoment(keyboardFocusDay)) {
+    if (keyboardFocusDay && moment$4.isMoment(keyboardFocusDay)) {
       if (keyboardFocusDay.isBefore(view.start, "month")) {
         viewPreviousMonth();
       } else if (keyboardFocusDay.isAfter(view.end, "month")) {
@@ -16304,8 +16309,8 @@ function SpsDateRangePicker(props2) {
   }) : "")));
 }
 Object.assign(SpsDateRangePicker, {
-  props: propsDoc$1i,
-  propTypes: propTypes$1l,
+  props: propsDoc$1j,
+  propTypes: propTypes$1m,
   displayName: "SpsDateRangePicker"
 });
 const SpsDateRangePickerExamples = {
@@ -16429,7 +16434,7 @@ const SpsDateRangePickerExamples = {
                         ])
                         const { formValue, formMeta, updateForm } = useSpsForm(
                           {
-                            dateRange: presets.current[0],
+                            dateRange: SimpleDateUtils.createRangeFromPreset(presets.current[0]),
                           },
                           {
                             dateRange: [SpsValidators.dateRange],
@@ -16454,7 +16459,7 @@ const SpsDateRangePickerExamples = {
     }
   }
 };
-var moment$4 = { exports: {} };
+var moment$3 = { exports: {} };
 (function(module, exports) {
   (function(global2, factory) {
     module.exports = factory();
@@ -20144,10 +20149,10 @@ var moment$4 = { exports: {} };
     };
     return hooks;
   });
-})(moment$4);
+})(moment$3);
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var enAu = moment2.defineLocale("en-au", {
@@ -20203,7 +20208,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var enCa = moment2.defineLocale("en-ca", {
@@ -20255,7 +20260,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var enIe = moment2.defineLocale("en-ie", {
@@ -20311,7 +20316,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var enGb = moment2.defineLocale("en-gb", {
@@ -20367,7 +20372,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var frCa = moment2.defineLocale("fr-ca", {
@@ -20431,7 +20436,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var monthsStrictRegex = /^(janvier|février|mars|avril|mai|juin|juillet|août|septembre|octobre|novembre|décembre)/i, monthsShortStrictRegex = /(janv\.?|févr\.?|mars|avr\.?|mai|juin|juil\.?|août|sept\.?|oct\.?|nov\.?|déc\.?)/i, monthsRegex = /(janv\.?|févr\.?|mars|avr\.?|mai|juin|juil\.?|août|sept\.?|oct\.?|nov\.?|déc\.?|janvier|février|mars|avril|mai|juin|juillet|août|septembre|octobre|novembre|décembre)/i, monthsParse = [
@@ -20522,7 +20527,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var monthsShortDot = "ene._feb._mar._abr._may._jun._jul._ago._sep._oct._nov._dic.".split("_"), monthsShort = "ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_"), monthsParse = [
@@ -20618,7 +20623,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var zhCn = moment2.defineLocale("zh-cn", {
@@ -20732,7 +20737,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var zhTw = moment2.defineLocale("zh-tw", {
@@ -20908,7 +20913,7 @@ const formatMaps = {
   LONG_FULLDATETIME: "LLLL",
   LONG_FULLDATETIME_ZONE: "LLLL z"
 };
-const propsDoc$1h = {
+const propsDoc$1i = {
   currentUser: "any",
   dateToFormat: "string | Date",
   format: "string",
@@ -20917,17 +20922,17 @@ const propsDoc$1h = {
   relativeHrs: "number",
   tz: "string"
 };
-const propTypes$1k = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  currentUser: propTypes$1L.exports.any,
-  dateToFormat: propTypes$1L.exports.oneOfType([
-    propTypes$1L.exports.string,
-    propTypes$1L.exports.instanceOf(Date)
+const propTypes$1l = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  currentUser: propTypes$1M.exports.any,
+  dateToFormat: propTypes$1M.exports.oneOfType([
+    propTypes$1M.exports.string,
+    propTypes$1M.exports.instanceOf(Date)
   ]),
-  format: propTypes$1L.exports.string,
-  locale: propTypes$1L.exports.string,
-  relative: propTypes$1L.exports.bool,
-  relativeHrs: propTypes$1L.exports.number,
-  tz: propTypes$1L.exports.string
+  format: propTypes$1M.exports.string,
+  locale: propTypes$1M.exports.string,
+  relative: propTypes$1M.exports.bool,
+  relativeHrs: propTypes$1M.exports.number,
+  tz: propTypes$1M.exports.string
 });
 function showRelative(dateToCheck, relative, relativeHrs) {
   if (!relativeHrs && !relative) {
@@ -21003,8 +21008,8 @@ function SpsDateTime(props2) {
   }));
 }
 Object.assign(SpsDateTime, {
-  props: propsDoc$1h,
-  propTypes: propTypes$1k,
+  props: propsDoc$1i,
+  propTypes: propTypes$1l,
   displayName: "SpsDateTime"
 });
 const SpsDatetimeExamples = {
@@ -21025,15 +21030,15 @@ const SpsDatetimeExamples = {
     }
   }
 };
-const propsDoc$1g = {
+const propsDoc$1h = {
   compact: "boolean",
   wideTerms: "boolean",
   widerTerms: "boolean"
 };
-const propTypes$1j = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  compact: propTypes$1L.exports.bool,
-  wideTerms: propTypes$1L.exports.bool,
-  widerTerms: propTypes$1L.exports.bool
+const propTypes$1k = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  compact: propTypes$1M.exports.bool,
+  wideTerms: propTypes$1M.exports.bool,
+  widerTerms: propTypes$1M.exports.bool
 });
 function SpsDescriptionList(props2) {
   const _a = props2, {
@@ -21073,20 +21078,20 @@ function SpsDescriptionList(props2) {
   }, rest), childrenWithProps);
 }
 Object.assign(SpsDescriptionList, {
-  props: propsDoc$1g,
-  propTypes: propTypes$1j,
+  props: propsDoc$1h,
+  propTypes: propTypes$1k,
   displayName: "SpsDescriptionList / SpsDl"
 });
 function SpsDl(p2) {
   return SpsDescriptionList(p2);
 }
 Object.assign(SpsDl, {
-  props: propsDoc$1g,
-  propTypes: propTypes$1j,
+  props: propsDoc$1h,
+  propTypes: propTypes$1k,
   displayName: "SpsDescriptionList / SpsDl"
 });
-const propsDoc$1f = {};
-const propTypes$1i = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$1g = {};
+const propTypes$1j = __spreadValues({}, spsGlobalPropTypes);
 function SpsDescriptionListDefinition(props2) {
   const _a = props2, {
     children,
@@ -21106,16 +21111,16 @@ function SpsDescriptionListDefinition(props2) {
   }, rest), children);
 }
 Object.assign(SpsDescriptionListDefinition, {
-  props: propsDoc$1f,
-  propTypes: propTypes$1i,
+  props: propsDoc$1g,
+  propTypes: propTypes$1j,
   displayName: "SpsDescriptionListDefinition / SpsDd"
 });
 function SpsDd(p2) {
   return SpsDescriptionListDefinition(p2);
 }
 Object.assign(SpsDd, {
-  props: propsDoc$1f,
-  propTypes: propTypes$1i,
+  props: propsDoc$1g,
+  propTypes: propTypes$1j,
   displayName: "SpsDescriptionListDefinition / SpsDd"
 });
 var TooltipVisibility;
@@ -21130,7 +21135,7 @@ function toggleTooltipState(state) {
 }
 const CARET_SPACING_PX = 13;
 const openTips = new Map();
-const propsDoc$1e = {
+const propsDoc$1f = {
   for: { type: "React.MutableRefObject<any> | string", required: true },
   hideDelay: "number",
   isShown: "TooltipVisibility",
@@ -21142,17 +21147,17 @@ const propsDoc$1e = {
   showOn: "TooltipShowTrigger",
   title: "string | ReactNode"
 };
-const propTypes$1h = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  for: propTypes$1L.exports.oneOfType([ref(), propTypes$1L.exports.string]).isRequired,
-  hideDelay: propTypes$1L.exports.number,
+const propTypes$1i = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  for: propTypes$1M.exports.oneOfType([ref(), propTypes$1M.exports.string]).isRequired,
+  hideDelay: propTypes$1M.exports.number,
   isShown: enumValue(TooltipVisibility),
   kind: enumValue(TooltipKind),
-  offsets: propTypes$1L.exports.arrayOf(propTypes$1L.exports.number),
+  offsets: propTypes$1M.exports.arrayOf(propTypes$1M.exports.number),
   onDeferred: fun(),
   position: enumValue(Position),
   altPosition: enumValue(Position),
   showOn: enumValue(TooltipShowTrigger),
-  title: propTypes$1L.exports.string || propTypes$1L.exports.node
+  title: propTypes$1M.exports.string || propTypes$1M.exports.node
 });
 function SpsTooltip({
   children,
@@ -21318,26 +21323,26 @@ function SpsTooltip({
   })));
 }
 Object.assign(SpsTooltip, {
-  props: propsDoc$1e,
-  propTypes: propTypes$1h,
+  props: propsDoc$1f,
+  propTypes: propTypes$1i,
   displayName: "SpsTooltip"
 });
-const propsDoc$1d = {
+const propsDoc$1e = {
   error: "boolean",
   errors: "ReactNodeOrRenderFn",
   help: "ReactNodeOrRenderFn",
   labelFor: "SpsFormFieldMeta<any>",
   required: "boolean"
 };
-const propTypes$1g = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  error: propTypes$1L.exports.bool,
+const propTypes$1h = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  error: propTypes$1M.exports.bool,
   errors: nodeOrRenderFn,
   help: nodeOrRenderFn,
-  labelFor: propTypes$1L.exports.oneOfType([
+  labelFor: propTypes$1M.exports.oneOfType([
     impl(),
     impl()
   ]),
-  required: propTypes$1L.exports.bool
+  required: propTypes$1M.exports.bool
 });
 function SpsDescriptionListTerm(props2) {
   const _a = props2, {
@@ -21393,16 +21398,16 @@ function SpsDescriptionListTerm(props2) {
   }, contentOf(tipKind === TooltipKind.ERROR ? errors : help)));
 }
 Object.assign(SpsDescriptionListTerm, {
-  props: propsDoc$1d,
-  propTypes: propTypes$1g,
+  props: propsDoc$1e,
+  propTypes: propTypes$1h,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
 function SpsDt(p2) {
   return SpsDescriptionListTerm(p2);
 }
 Object.assign(SpsDt, {
-  props: propsDoc$1d,
-  propTypes: propTypes$1g,
+  props: propsDoc$1e,
+  propTypes: propTypes$1h,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
 const SpsDescriptionListExamples = {
@@ -21880,19 +21885,19 @@ const SpsDropdownExamples = {
     }
   }
 };
-const propsDoc$1c = {
+const propsDoc$1d = {
   checked: "boolean",
   onChange: "ChangeEventHandler",
   indeterminate: "boolean",
   disabled: "boolean",
   options: "Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"
 };
-const propTypes$1f = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  checked: propTypes$1L.exports.bool,
+const propTypes$1g = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  checked: propTypes$1M.exports.bool,
   onChange: fun(),
-  indeterminate: propTypes$1L.exports.bool,
-  options: propTypes$1L.exports.arrayOf(propTypes$1L.exports.oneOfType([propTypes$1L.exports.func, propTypes$1L.exports.any])).isRequired,
-  disabled: propTypes$1L.exports.bool
+  indeterminate: propTypes$1M.exports.bool,
+  options: propTypes$1M.exports.arrayOf(propTypes$1M.exports.oneOfType([propTypes$1M.exports.func, propTypes$1M.exports.any])).isRequired,
+  disabled: propTypes$1M.exports.bool
 });
 function SpsCheckboxDropdown(props2) {
   const _a = props2, {
@@ -21926,14 +21931,14 @@ function SpsCheckboxDropdown(props2) {
   }));
 }
 Object.assign(SpsCheckboxDropdown, {
-  props: propsDoc$1c,
-  propTypes: propTypes$1f,
+  props: propsDoc$1d,
+  propTypes: propTypes$1g,
   displayName: "SpsCheckboxDropdown"
 });
-const propsDoc$1b = {
+const propsDoc$1c = {
   kind: "FeedbackBlockKind"
 };
-const propTypes$1e = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$1f = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   kind: enumValue(FeedbackBlockKind)
 });
 function SpsFeedbackBlock(props2) {
@@ -21964,8 +21969,8 @@ function SpsFeedbackBlock(props2) {
   }, children));
 }
 Object.assign(SpsFeedbackBlock, {
-  props: propsDoc$1b,
-  propTypes: propTypes$1e,
+  props: propsDoc$1c,
+  propTypes: propTypes$1f,
   displayName: "SpsFeedbackBlock"
 });
 const SpsFeedbackBlockExamples = {
@@ -22067,7 +22072,7 @@ const SpsFeedbackBlockExamples = {
     }
   }
 };
-const propsDoc$1a = {
+const propsDoc$1b = {
   errors: "ReactNodeOrRenderFn",
   formMeta: "SpsFormSetMeta<any>",
   legend: "string",
@@ -22076,16 +22081,16 @@ const propsDoc$1a = {
   onToggled: "(isEnabled: boolean) => void",
   tooltip: "string"
 };
-const propTypes$1d = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$1e = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   errors: nodeOrRenderFn,
   formArray: impl(),
   formGroup: impl(),
   formMeta: impl(),
-  legend: propTypes$1L.exports.string,
-  optional: propTypes$1L.exports.bool,
-  enabled: propTypes$1L.exports.bool,
+  legend: propTypes$1M.exports.string,
+  optional: propTypes$1M.exports.bool,
+  enabled: propTypes$1M.exports.bool,
   onToggled: fun(),
-  tooltip: propTypes$1L.exports.string
+  tooltip: propTypes$1M.exports.string
 });
 function SpsFieldset({
   children,
@@ -22161,8 +22166,8 @@ function SpsFieldset({
   }, contentOf(errors)), children));
 }
 Object.assign(SpsFieldset, {
-  props: propsDoc$1a,
-  propTypes: propTypes$1d,
+  props: propsDoc$1b,
+  propTypes: propTypes$1e,
   displayName: "SpsFieldset"
 });
 const SpsFieldsetExamples = {
@@ -22448,8 +22453,8 @@ const SpsFieldsetExamples = {
     }
   }
 };
-const propsDoc$19 = {};
-const propTypes$1c = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$1a = {};
+const propTypes$1d = __spreadValues({}, spsGlobalPropTypes);
 function SpsFocusedTaskActions(props2) {
   const _a = props2, {
     children,
@@ -22470,18 +22475,18 @@ function SpsFocusedTaskActions(props2) {
   }, children)));
 }
 Object.assign(SpsFocusedTaskActions, {
-  props: propsDoc$19,
-  propTypes: propTypes$1c,
+  props: propsDoc$1a,
+  propTypes: propTypes$1d,
   displayName: "SpsFocusedTaskActions"
 });
-const propsDoc$18 = {
+const propsDoc$19 = {
   fullWidth: "boolean",
   isOpen: "boolean",
   onClose: "() => void"
 };
-const propTypes$1b = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  fullWidth: propTypes$1L.exports.bool,
-  isOpen: propTypes$1L.exports.bool,
+const propTypes$1c = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  fullWidth: propTypes$1M.exports.bool,
+  isOpen: propTypes$1M.exports.bool,
   onClose: fun()
 });
 function SpsFocusedTask(props2) {
@@ -22538,8 +22543,8 @@ function SpsFocusedTask(props2) {
   }, isOpen && content)), actions);
 }
 Object.assign(SpsFocusedTask, {
-  props: propsDoc$18,
-  propTypes: propTypes$1b,
+  props: propsDoc$19,
+  propTypes: propTypes$1c,
   displayName: "SpsFocusedTask"
 });
 const SpsFocusedTaskExamples = {
@@ -22669,7 +22674,7 @@ function isPlainObject(value) {
 var lodash_isplainobject = isPlainObject;
 const OnBlurErrorKeys = new Set();
 const AsTypingErrorKeys = new Set();
-const moment$3 = moment$7.default || moment$7;
+const moment$2 = moment$6.default || moment$6;
 const FORMAT = "MM/DD/YYYY";
 const FORMAT_PATTERN = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
 const SYMBOL_DATE_PARSE_ERROR = Symbol("Date Parse Error");
@@ -22725,7 +22730,7 @@ const SimpleDateUtils = Object.freeze({
     if (!date2) {
       return null;
     }
-    return moment$3(__spreadProps(__spreadValues({}, date2), {
+    return moment$2(__spreadProps(__spreadValues({}, date2), {
       month: date2.month - 1
     }));
   },
@@ -22786,6 +22791,14 @@ const SimpleDateUtils = Object.freeze({
       month: date2.month + 1 > 12 ? 1 : date2.month + 1,
       date: date2.date
     });
+  },
+  createRangeFromPreset(preset2) {
+    if (typeof preset2.definition === "function") {
+      return preset2.definition();
+    }
+    const end2 = moment$2();
+    const start = end2.clone().subtract(moment$2.duration(preset2.definition));
+    return [SimpleDateUtils.createFrom(start), SimpleDateUtils.createFrom(end2)];
   }
 });
 const date = function dateValidator(value) {
@@ -24022,19 +24035,19 @@ const SpsAddRemoveFormRowExamples = {
     }
   }
 };
-const propsDoc$17 = {
+const propsDoc$18 = {
   imgSrc: "string",
   kind: "GrowlerKind",
   onClose: "() => void",
   persist: "boolean",
   title: "string"
 };
-const propTypes$1a = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  imgSrc: propTypes$1L.exports.string,
+const propTypes$1b = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  imgSrc: propTypes$1M.exports.string,
   kind: enumValue(GrowlerKind),
   onClose: fun(),
-  persist: propTypes$1L.exports.bool,
-  title: propTypes$1L.exports.string
+  persist: propTypes$1M.exports.bool,
+  title: propTypes$1M.exports.string
 });
 function SpsGrowler(props2) {
   const _a = props2, {
@@ -24140,8 +24153,8 @@ function SpsGrowler(props2) {
   })))));
 }
 Object.assign(SpsGrowler, {
-  props: propsDoc$17,
-  propTypes: propTypes$1a,
+  props: propsDoc$18,
+  propTypes: propTypes$1b,
   displayName: "SpsGrowler"
 });
 const SpsGrowlerExamples = {
@@ -24516,18 +24529,18 @@ const SpsGrowlerExamples = {
     }
   }
 };
-const propsDoc$16 = {
+const propsDoc$17 = {
   disabled: "boolean",
   min: "number",
   max: "number",
   step: "number",
   onValueChange: "(newValue: number) => void"
 };
-const propTypes$19 = __spreadValues({
-  disabled: propTypes$1L.exports.bool,
-  min: propTypes$1L.exports.number,
-  max: propTypes$1L.exports.number,
-  step: propTypes$1L.exports.number,
+const propTypes$1a = __spreadValues({
+  disabled: propTypes$1M.exports.bool,
+  min: propTypes$1M.exports.number,
+  max: propTypes$1M.exports.number,
+  step: propTypes$1M.exports.number,
   onValueChange: fun()
 }, spsGlobalPropTypes);
 function SpsIncrementor(props2) {
@@ -24630,8 +24643,8 @@ function SpsIncrementor(props2) {
   }))));
 }
 Object.assign(SpsIncrementor, {
-  props: propsDoc$16,
-  propTypes: propTypes$19,
+  props: propsDoc$17,
+  propTypes: propTypes$1a,
   displayName: "SpsIncrementor"
 });
 const SpsIncrementorExamples = {
@@ -24670,7 +24683,7 @@ function SpsInsights(props2) {
     className: "insight-tile-wrapper"
   }, children);
 }
-const propsDoc$15 = {
+const propsDoc$16 = {
   horizontal: "boolean",
   icon: "SpsIcon",
   kind: "SpsInsightTileKind",
@@ -24679,14 +24692,14 @@ const propsDoc$15 = {
   partnerCount: "number",
   totalPartners: "number"
 };
-const propTypes$18 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  horizontal: propTypes$1L.exports.bool,
+const propTypes$19 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  horizontal: propTypes$1M.exports.bool,
   icon: enumValue(SpsIcon),
   kind: enumValue(SpsInsightTileKind),
-  title: propTypes$1L.exports.string,
-  metric: propTypes$1L.exports.number || propTypes$1L.exports.string,
-  partnerCount: propTypes$1L.exports.number,
-  totalPartners: propTypes$1L.exports.number
+  title: propTypes$1M.exports.string,
+  metric: propTypes$1M.exports.number || propTypes$1M.exports.string,
+  partnerCount: propTypes$1M.exports.number,
+  totalPartners: propTypes$1M.exports.number
 });
 function SpsInsightTile(props2) {
   const _a = props2, {
@@ -24746,8 +24759,8 @@ function SpsInsightTile(props2) {
   }, t2("design-system:insightTile.partners")))));
 }
 Object.assign(SpsInsightTile, {
-  props: propsDoc$15,
-  propTypes: propTypes$18,
+  props: propsDoc$16,
+  propTypes: propTypes$19,
   displayName: "SpsInsightTile"
 });
 const SpsInsightTileExamples = {
@@ -25021,11 +25034,11 @@ const SpsInsightTileExamples = {
     }
   }
 };
-const propsDoc$14 = {
+const propsDoc$15 = {
   inline: "boolean"
 };
-const propTypes$17 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  inline: propTypes$1L.exports.bool
+const propTypes$18 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  inline: propTypes$1M.exports.bool
 });
 function SpsKeyValueList(props2) {
   const _a = props2, {
@@ -25048,16 +25061,16 @@ function SpsKeyValueList(props2) {
   }, rest), children);
 }
 Object.assign(SpsKeyValueList, {
-  props: propsDoc$14,
-  propTypes: propTypes$17,
+  props: propsDoc$15,
+  propTypes: propTypes$18,
   displayName: "SpsKeyValueList"
 });
-const propsDoc$13 = {
+const propsDoc$14 = {
   itemKey: { type: "string | nodeOrRenderFn", required: true },
   titleColor: "KeyValueListTitleColor"
 };
-const propTypes$16 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  itemKey: propTypes$1L.exports.string.isRequired || nodeOrRenderFn.isRequired,
+const propTypes$17 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  itemKey: propTypes$1M.exports.string.isRequired || nodeOrRenderFn.isRequired,
   titleColor: enumValue(KeyValueListTitleColor)
 });
 function SpsKeyValueListItem(props2) {
@@ -25089,8 +25102,8 @@ function SpsKeyValueListItem(props2) {
   }, children));
 }
 Object.assign(SpsKeyValueListItem, {
-  props: propsDoc$13,
-  propTypes: propTypes$16,
+  props: propsDoc$14,
+  propTypes: propTypes$17,
   displayName: "SpsKeyValueListItem"
 });
 const SpsKeyValueListExamples = {
@@ -25133,7 +25146,7 @@ const SpsKeyValueListExamples = {
     }
   }
 };
-const propsDoc$12 = {
+const propsDoc$13 = {
   for: { type: "SpsFormMetaBase<any>", required: true },
   description: "string",
   stronglySuggested: "boolean",
@@ -25142,16 +25155,16 @@ const propsDoc$12 = {
   helpIconColor: "string",
   errors: "ReactNodeOrRenderFn"
 };
-const propTypes$15 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  description: propTypes$1L.exports.string,
-  for: propTypes$1L.exports.oneOfType([
+const propTypes$16 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  description: propTypes$1M.exports.string,
+  for: propTypes$1M.exports.oneOfType([
     impl(),
     impl()
   ]).isRequired,
-  stronglySuggested: propTypes$1L.exports.bool,
+  stronglySuggested: propTypes$1M.exports.bool,
   help: nodeOrRenderFn,
   helpIcon: enumValue(SpsIcon),
-  helpIconColor: propTypes$1L.exports.string,
+  helpIconColor: propTypes$1M.exports.string,
   errors: nodeOrRenderFn
 });
 function SpsLabel(_o) {
@@ -25312,8 +25325,8 @@ function SpsLabel(_o) {
   }, description));
 }
 Object.assign(SpsLabel, {
-  props: propsDoc$12,
-  propTypes: propTypes$15,
+  props: propsDoc$13,
+  propTypes: propTypes$16,
   displayName: "SpsLabel"
 });
 const SpsLabelExamples = {
@@ -25531,13 +25544,13 @@ const SpsLabelExamples = {
     }
   }
 };
-const propsDoc$11 = {
+const propsDoc$12 = {
   clearSelected: { type: "() => void", required: true },
   itemsSelected: { type: "string | number", required: true }
 };
-const propTypes$14 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$15 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   clearSelected: fun().isRequired,
-  itemsSelected: propTypes$1L.exports.oneOfType([propTypes$1L.exports.string, propTypes$1L.exports.number])
+  itemsSelected: propTypes$1M.exports.oneOfType([propTypes$1M.exports.string, propTypes$1M.exports.number])
 });
 function SpsListActionBar(props2) {
   const _a = props2, {
@@ -25587,8 +25600,8 @@ function SpsListActionBar(props2) {
   }, t2("design-system:listActionBar.clearSelected")))));
 }
 Object.assign(SpsListActionBar, {
-  props: propsDoc$11,
-  propTypes: propTypes$14,
+  props: propsDoc$12,
+  propTypes: propTypes$15,
   displayName: "SpsListActionBar"
 });
 const getScrollParent = (node) => {
@@ -25784,18 +25797,18 @@ const usePinnedTableHeadStyle = (containerRef) => {
     };
   });
 };
-const propsDoc$10 = {
+const propsDoc$11 = {
   controlCell: "boolean",
   currentSort: "Array<SortedColumn>",
   onSortChange: "SortChangeHandler",
   sortKey: "string"
 };
-const propTypes$13 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  controlCell: propTypes$1L.exports.bool,
-  currentSort: propTypes$1L.exports.arrayOf(impl()),
+const propTypes$14 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  controlCell: propTypes$1M.exports.bool,
+  currentSort: propTypes$1M.exports.arrayOf(impl()),
   onSortChange: fun(),
-  sortKey: propTypes$1L.exports.string,
-  pinned: propTypes$1L.exports.bool
+  sortKey: propTypes$1M.exports.string,
+  pinned: propTypes$1M.exports.bool
 });
 function SpsTableHeader(props2) {
   const _a = props2, {
@@ -25854,24 +25867,24 @@ function SpsTableHeader(props2) {
   }, children));
 }
 Object.assign(SpsTableHeader, {
-  props: propsDoc$10,
-  propTypes: propTypes$13,
+  props: propsDoc$11,
+  propTypes: propTypes$14,
   displayName: "SpsTableHeader"
 });
 function SpsTh(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableHeader, __spreadValues({}, props2));
 }
 Object.assign(SpsTh, {
-  props: propsDoc$10,
-  propTypes: propTypes$13,
+  props: propsDoc$11,
+  propTypes: propTypes$14,
   displayName: "SpsTh"
 });
-const propsDoc$$ = {
+const propsDoc$10 = {
   currentSort: "Array<SortedColumn>",
   onSortChange: "SortChangeHandler"
 };
-const propTypes$12 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  currentSort: propTypes$1L.exports.arrayOf(impl()),
+const propTypes$13 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  currentSort: propTypes$1M.exports.arrayOf(impl()),
   onSortChange: fun()
 });
 function SpsTableRow(props2) {
@@ -25907,26 +25920,26 @@ function SpsTableRow(props2) {
   }));
 }
 Object.assign(SpsTableRow, {
-  props: propsDoc$$,
-  propTypes: propTypes$12,
+  props: propsDoc$10,
+  propTypes: propTypes$13,
   displayName: "SpsTableRow"
 });
 function SpsTr(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableRow, __spreadValues({}, props2));
 }
 Object.assign(SpsTr, {
-  props: propsDoc$$,
-  propTypes: propTypes$12,
+  props: propsDoc$10,
+  propTypes: propTypes$13,
   displayName: "SpsTr"
 });
-const propsDoc$_ = {
+const propsDoc$$ = {
   currentSort: "Array<SortedColumn>",
   onSortChange: "SortChangeHandler"
 };
-const propTypes$11 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$12 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onSortChange: fun(),
-  currentSort: propTypes$1L.exports.arrayOf(impl()),
-  pinned: propTypes$1L.exports.bool
+  currentSort: propTypes$1M.exports.arrayOf(impl()),
+  pinned: propTypes$1M.exports.bool
 });
 function SpsTableHead(props2) {
   const _a = props2, {
@@ -25962,27 +25975,27 @@ function SpsTableHead(props2) {
   }));
 }
 Object.assign(SpsTableHead, {
-  props: propsDoc$_,
-  propTypes: propTypes$11,
+  props: propsDoc$$,
+  propTypes: propTypes$12,
   displayName: "SpsTableHead"
 });
 function SpsThead(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableHead, __spreadValues({}, props2));
 }
 Object.assign(SpsThead, {
-  props: propsDoc$_,
-  propTypes: propTypes$11,
+  props: propsDoc$$,
+  propTypes: propTypes$12,
   displayName: "SpsThead"
 });
-const propsDoc$Z = {
+const propsDoc$_ = {
   sort: "SortedColumn",
   onSortChange: "SortChangeHandler",
   selectable: "boolean"
 };
-const propTypes$10 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$11 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onSortChange: fun(),
-  sort: propTypes$1L.exports.arrayOf(impl()),
-  selectable: propTypes$1L.exports.bool
+  sort: propTypes$1M.exports.arrayOf(impl()),
+  selectable: propTypes$1M.exports.bool
 });
 function SpsTable(props2) {
   const _a = props2, {
@@ -26037,12 +26050,12 @@ function SpsTable(props2) {
   })));
 }
 Object.assign(SpsTable, {
-  props: propsDoc$Z,
-  propTypes: propTypes$10,
+  props: propsDoc$_,
+  propTypes: propTypes$11,
   displayName: "SpsTable"
 });
-const propsDoc$Y = {};
-const propTypes$$ = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$Z = {};
+const propTypes$10 = __spreadValues({}, spsGlobalPropTypes);
 function SpsTableBody(props2) {
   const _a = props2, {
     children,
@@ -26062,34 +26075,34 @@ function SpsTableBody(props2) {
   }, rest), children);
 }
 Object.assign(SpsTableBody, {
-  props: propsDoc$Y,
-  propTypes: propTypes$$,
+  props: propsDoc$Z,
+  propTypes: propTypes$10,
   displayName: "SpsTableBody"
 });
 function SpsTbody(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableBody, __spreadValues({}, props2));
 }
 Object.assign(SpsTbody, {
-  props: propsDoc$Y,
-  propTypes: propTypes$$,
+  props: propsDoc$Z,
+  propTypes: propTypes$10,
   displayName: "SpsTbody"
 });
-const propsDoc$X = {
+const propsDoc$Y = {
   buttonCell: "boolean",
   controlCell: "boolean",
   wrap: "SpsTableCellWrapWidth"
 };
-const propTypes$_ = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  buttonCell: propTypes$1L.exports.bool,
-  controlCell: propTypes$1L.exports.bool,
-  wrap: propTypes$1L.exports.oneOf([
+const propTypes$$ = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  buttonCell: propTypes$1M.exports.bool,
+  controlCell: propTypes$1M.exports.bool,
+  wrap: propTypes$1M.exports.oneOf([
     200,
     300,
     400,
     500,
     600
   ]),
-  pinned: propTypes$1L.exports.bool
+  pinned: propTypes$1M.exports.bool
 });
 function SpsTableCell(props2) {
   const _a = props2, {
@@ -26122,20 +26135,20 @@ function SpsTableCell(props2) {
   }, rest), children);
 }
 Object.assign(SpsTableCell, {
-  props: propsDoc$X,
-  propTypes: propTypes$_,
+  props: propsDoc$Y,
+  propTypes: propTypes$$,
   displayName: "SpsTableCell"
 });
 function SpsTd(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableCell, __spreadValues({}, props2));
 }
 Object.assign(SpsTd, {
-  props: propsDoc$X,
-  propTypes: propTypes$_,
+  props: propsDoc$Y,
+  propTypes: propTypes$$,
   displayName: "SpsTd"
 });
-const propsDoc$W = {};
-const propTypes$Z = __spreadValues({}, spsGlobalPropTypes);
+const propsDoc$X = {};
+const propTypes$_ = __spreadValues({}, spsGlobalPropTypes);
 const CSS_BLOCK$3 = "sps-icon-button-panel";
 function SpsIconButtonPanel(_q) {
   var _r = _q, {
@@ -26154,8 +26167,8 @@ function SpsIconButtonPanel(_q) {
   }, rest), iconButtons);
 }
 Object.assign(SpsIconButtonPanel, {
-  props: propsDoc$W,
-  propTypes: propTypes$Z,
+  props: propsDoc$X,
+  propTypes: propTypes$_,
   displayName: "SpsIconButtonPanel"
 });
 const SpsTableExamples = {
@@ -27339,8 +27352,8 @@ const SpsListActionBarExamples = {
     }
   }
 };
-const propTypes$Y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  tabs: propTypes$1L.exports.arrayOf(impl()).isRequired,
+const propTypes$Z = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  tabs: propTypes$1M.exports.arrayOf(impl()).isRequired,
   activeTab: impl(),
   onTabChange: fun()
 });
@@ -27404,18 +27417,18 @@ function SpsTabs(props2) {
   }, tab2.tag)))));
 }
 Object.assign(SpsTabs, {
-  propTypes: propTypes$Y,
+  propTypes: propTypes$Z,
   displayName: "SpsTabs"
 });
-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$1L.exports.bool
+  stacked: propTypes$1M.exports.bool
 });
 function SpsInputGroup(_s) {
   var _t = _s, {
@@ -27460,14 +27473,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) {
@@ -27490,9 +27503,22 @@ function SpsListToolbarSearch(props2) {
   }, children));
 }
 Object.assign(SpsListToolbarSearch, {
+  props: propsDoc$V,
+  propTypes: propTypes$X,
+  displayName: "SpsListToolbarSearch"
+});
+const propsDoc$U = {};
+const propTypes$W = __spreadValues({}, spsGlobalPropTypes);
+function SpsListToolbarSearchInfo(props2) {
+  const {
+    children
+  } = props2;
+  return /* @__PURE__ */ React.createElement("div", null, children);
+}
+Object.assign(SpsListToolbarSearchInfo, {
   props: propsDoc$U,
   propTypes: propTypes$W,
-  displayName: "SpsListToolbarSearch"
+  displayName: "SpsListToolbarSearchInfo"
 });
 const propsDoc$T = {
   activeTab: "SpsTab",
@@ -27509,18 +27535,18 @@ const propsDoc$T = {
 };
 const propTypes$V = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   activeTab: impl(),
-  advancedSearch: propTypes$1L.exports.shape({
-    isOpen: propTypes$1L.exports.bool,
-    enteredFields: propTypes$1L.exports.number
+  advancedSearch: propTypes$1M.exports.shape({
+    isOpen: propTypes$1M.exports.bool,
+    enteredFields: propTypes$1M.exports.number
   }),
   onToggleAdvancedSearch: fun(),
   onTabChange: fun(),
-  title: propTypes$1L.exports.string,
-  tabs: propTypes$1L.exports.arrayOf(impl()),
+  title: propTypes$1M.exports.string,
+  tabs: propTypes$1M.exports.arrayOf(impl()),
   onToolbarPinned: fun(),
-  selectable: propTypes$1L.exports.bool,
-  isSelected: propTypes$1L.exports.bool,
-  isIndeterminate: propTypes$1L.exports.bool,
+  selectable: propTypes$1M.exports.bool,
+  isSelected: propTypes$1M.exports.bool,
+  isIndeterminate: propTypes$1M.exports.bool,
   onSelectionChange: fun()
 });
 function SpsListToolbar(props2) {
@@ -27624,8 +27650,13 @@ function SpsListToolbar(props2) {
     emitToolbarPinned(isPinned);
   }, [isPinned]);
   const classes = clsx(unsafelyReplaceClassName || "sps-list-toolbar", isPinned && "sps-list-toolbar--pinned", isPinned && "z-stratum-bar", advancedSearch && advancedSearch.isOpen && "sps-list-toolbar--advanced-search-open", className);
-  const [listToolbarSearch, otherChildren] = selectChildren(children, [
-    { type: SpsListToolbarSearch }
+  const [
+    listToolbarSearch,
+    listToolbarSearchInfo,
+    otherChildren
+  ] = selectChildren(children, [
+    { type: SpsListToolbarSearch },
+    { type: SpsListToolbarSearchInfo }
   ]);
   return /* @__PURE__ */ React.createElement("div", {
     className: "sps-list-toolbar__wrapper",
@@ -27649,7 +27680,7 @@ function SpsListToolbar(props2) {
     "data-testid": `${testId}__tabs`
   }), /* @__PURE__ */ React.createElement("div", {
     className: "sps-list-toolbar__search-controls"
-  }, !title && listToolbarSearch, listToolbarSearch.length > 0 && advancedSearch && /* @__PURE__ */ React.createElement("div", {
+  }, !title && listToolbarSearch, !title && listToolbarSearchInfo, listToolbarSearch.length > 0 && advancedSearch && /* @__PURE__ */ React.createElement("div", {
     className: "sps-list-toolbar__advanced-search-toggle",
     "data-testid": `${testId}__advanced-search`
   }, /* @__PURE__ */ React.createElement("div", {
@@ -27924,6 +27955,50 @@ const SpsListToolbarExamples = {
                         )
                     }
                 `
+      },
+      searchInfo: {
+        description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h5", null, "Search Info"), /* @__PURE__ */ React.createElement("p", null, "Use SpsListToolbarSearchInfo component to add additional information about your search.")),
+        react: code`
+                    function Component() {
+                        const filterKeys = ["Key Item ID", "Document Type", "Sender Name", "Receiver Name"];
+                        const { formValue, formMeta, updateForm } = useSpsForm({
+                            searchText: "",
+                            filterOption: filterKeys[0],
+                        });
+                        function handleSearch(event) {
+                            console.log(event, formValue.searchText)
+                        }
+                        return (
+                            <SpsListToolbar>
+                                <SpsListToolbarSearch onSubmit={handleSearch}>
+                                    <SpsSelect
+                                        options={filterKeys}
+                                        formMeta={formMeta.fields.filterOption}
+                                        value={formValue.filterOption}
+                                        notClearable
+                                    />
+                                    <SpsTextInput
+                                        value={formValue.searchText}
+                                        formMeta={formMeta.fields.searchText}
+                                        icon={SpsIcon.FILTER}
+                                        placeholder="Filter fields"
+                                    />
+                                </SpsListToolbarSearch>
+                                <SpsListToolbarSearchInfo>
+                                  <div style={{ display: 'flex', alignItems: 'center'}}>
+                                    <span  style={{ marginRight: 5 }} >
+                                      Key Item ID = Vendor Part Number
+                                    </span>
+                                    <SpsI icon={SpsIcon.INFO_CIRCLE} className="blue200"/>
+                                  </div>
+                                </SpsListToolbarSearchInfo>
+                            </SpsListToolbar>
+                        )
+                    }
+                `
       }
     }
   },
@@ -28139,7 +28214,7 @@ const propsDoc$S = {
 };
 const propTypes$U = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   kind: enumValue(FeedbackBlockKind),
-  message: propTypes$1L.exports.node.isRequired
+  message: propTypes$1M.exports.node.isRequired
 });
 function SpsMicroBlock(props2) {
   const _a = props2, {
@@ -28232,7 +28307,7 @@ const propsDoc$R = {
 const propTypes$T = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   kind: enumValue(ModalKind),
   size: enumValue(ModalSize),
-  title: propTypes$1L.exports.string,
+  title: propTypes$1M.exports.string,
   onClose: fun(),
   focusElementOnOpen: ref()
 });
@@ -28826,27 +28901,27 @@ const propsDoc$Q = {
 };
 const propTypes$S = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   action: fun(),
-  captionKey: propTypes$1L.exports.string,
-  debounce: propTypes$1L.exports.number,
-  disabled: propTypes$1L.exports.bool,
-  disableSelected: propTypes$1L.exports.bool,
-  comparisonKey: propTypes$1L.exports.string,
+  captionKey: propTypes$1M.exports.string,
+  debounce: propTypes$1M.exports.number,
+  disabled: propTypes$1M.exports.bool,
+  disableSelected: propTypes$1M.exports.bool,
+  comparisonKey: propTypes$1M.exports.string,
   formControl: impl(),
   formMeta: impl(),
-  hideSelected: propTypes$1L.exports.bool,
+  hideSelected: propTypes$1M.exports.bool,
   icon: enumValue(SpsIcon),
   onChange: fun(),
-  options: propTypes$1L.exports.oneOfType([
-    propTypes$1L.exports.array,
-    propTypes$1L.exports.instanceOf(Promise),
+  options: propTypes$1M.exports.oneOfType([
+    propTypes$1M.exports.array,
+    propTypes$1M.exports.instanceOf(Promise),
     fun()
   ]).isRequired,
-  placeholder: propTypes$1L.exports.string,
-  tallOptionList: propTypes$1L.exports.bool,
-  textKey: propTypes$1L.exports.string,
-  value: propTypes$1L.exports.any,
-  zeroState: propTypes$1L.exports.string,
-  loading: propTypes$1L.exports.bool
+  placeholder: propTypes$1M.exports.string,
+  tallOptionList: propTypes$1M.exports.bool,
+  textKey: propTypes$1M.exports.string,
+  value: propTypes$1M.exports.any,
+  zeroState: propTypes$1M.exports.string,
+  loading: propTypes$1M.exports.bool
 });
 function SpsMultiSelect(_w) {
   var _x = _w, {
@@ -29402,29 +29477,29 @@ const propsDoc$N = {
 };
 const propTypes$P = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   action: fun(),
-  captionKey: propTypes$1L.exports.string,
-  comparisonKey: propTypes$1L.exports.string,
-  disabled: propTypes$1L.exports.bool,
+  captionKey: propTypes$1M.exports.string,
+  comparisonKey: propTypes$1M.exports.string,
+  disabled: propTypes$1M.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  notClearable: propTypes$1L.exports.bool,
-  options: propTypes$1L.exports.oneOfType([
-    propTypes$1L.exports.array,
-    propTypes$1L.exports.instanceOf(Promise),
+  notClearable: propTypes$1M.exports.bool,
+  options: propTypes$1M.exports.oneOfType([
+    propTypes$1M.exports.array,
+    propTypes$1M.exports.instanceOf(Promise),
     fun()
   ]).isRequired,
   onChange: fun(),
-  placeholder: propTypes$1L.exports.string,
-  searchDebounce: propTypes$1L.exports.number,
-  searchPlaceholder: propTypes$1L.exports.string,
-  tallOptionList: propTypes$1L.exports.bool,
-  textKey: propTypes$1L.exports.string,
-  valueKey: propTypes$1L.exports.string,
-  value: propTypes$1L.exports.any,
-  zeroState: propTypes$1L.exports.string,
-  autoFixWidth: propTypes$1L.exports.bool,
-  loading: propTypes$1L.exports.bool,
-  filterByTextAndCaptionKey: propTypes$1L.exports.bool
+  placeholder: propTypes$1M.exports.string,
+  searchDebounce: propTypes$1M.exports.number,
+  searchPlaceholder: propTypes$1M.exports.string,
+  tallOptionList: propTypes$1M.exports.bool,
+  textKey: propTypes$1M.exports.string,
+  valueKey: propTypes$1M.exports.string,
+  value: propTypes$1M.exports.any,
+  zeroState: propTypes$1M.exports.string,
+  autoFixWidth: propTypes$1M.exports.bool,
+  loading: propTypes$1M.exports.bool,
+  filterByTextAndCaptionKey: propTypes$1M.exports.bool
 });
 const SpsSelect = React.forwardRef((props2, ref2) => {
   const _a = props2, {
@@ -29450,7 +29525,8 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     value: valueProp,
     zeroState,
     loading,
-    filterByTextAndCaptionKey
+    filterByTextAndCaptionKey,
+    "data-testid": testId
   } = _a, rest = __objRest(_a, [
     "action",
     "autoFixWidth",
@@ -29474,7 +29550,8 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     "value",
     "zeroState",
     "loading",
-    "filterByTextAndCaptionKey"
+    "filterByTextAndCaptionKey",
+    "data-testid"
   ]);
   const meta = formMeta || formControl2;
   const { wrapperId, controlId } = useFormControlId(id2, meta);
@@ -29596,21 +29673,25 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     formMeta,
     ref: rootElement,
     role: "listbox",
-    "aria-owns": state.optionIds
+    "aria-owns": state.optionIds,
+    "data-testid": testId
   }, rest), /* @__PURE__ */ React.createElement("div", {
     className: clsx("sps-select__dropctrl", disabled && "disabled"),
     id: controlId,
     tabIndex: 0,
     onClick: handleControlButtonClick,
     ref: controlButton,
-    title: valueText
+    title: valueText,
+    "data-testid": `${testId}-dropctrl`
   }, /* @__PURE__ */ React.createElement("div", {
     className: "sps-select__dropctrl-content"
   }, /* @__PURE__ */ React.createElement("span", {
-    className: clsx("sps-select__value", !state.text && "sps-select__value--placeholder")
+    className: clsx("sps-select__value", !state.text && "sps-select__value--placeholder"),
+    "data-testid": `${testId}-value`
   }, valueText), state.value && !notClearable && !disabled && /* @__PURE__ */ React.createElement("i", {
     className: "sps-icon sps-icon-x-circle sps-select__clear-btn",
-    onClick: handleClearIconClick
+    onClick: handleClearIconClick,
+    "data-testid": `${testId}-clear-value`
   }), /* @__PURE__ */ React.createElement("i", {
     className: "sps-icon sps-icon-chevron-down"
   }))), /* @__PURE__ */ React.createElement(SpsOptionList, {
@@ -29638,7 +29719,8 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     onOptionListChanged: handleOptionListChanged,
     zeroState,
     ignoreWidthStyles: autoFixWidth,
-    loading
+    loading,
+    "data-testid": `${testId}-option-list`
   }));
 });
 Object.assign(SpsSelect, {
@@ -29653,10 +29735,10 @@ const propsDoc$M = {
   disabled: "boolean"
 };
 const propTypes$O = __spreadValues({
-  numPages: propTypes$1L.exports.number,
+  numPages: propTypes$1M.exports.number,
   onPageChange: fun(),
-  page: propTypes$1L.exports.number,
-  disabled: propTypes$1L.exports.bool
+  page: propTypes$1M.exports.number,
+  disabled: propTypes$1M.exports.bool
 }, spsGlobalPropTypes);
 function SpsPageSelector(props2) {
   const _a = props2, {
@@ -29763,11 +29845,11 @@ const propsDoc$L = {
 };
 const propTypes$N = __spreadValues({
   onPageChange: fun().isRequired,
-  page: propTypes$1L.exports.number,
-  pageSize: propTypes$1L.exports.number,
-  pageSizeOptions: propTypes$1L.exports.arrayOf(propTypes$1L.exports.number),
-  totalResults: propTypes$1L.exports.number,
-  disabled: propTypes$1L.exports.bool
+  page: propTypes$1M.exports.number,
+  pageSize: propTypes$1M.exports.number,
+  pageSizeOptions: propTypes$1M.exports.arrayOf(propTypes$1M.exports.number),
+  totalResults: propTypes$1M.exports.number,
+  disabled: propTypes$1M.exports.bool
 }, spsGlobalPropTypes);
 function SpsPagination(props2) {
   const _a = props2, {
@@ -30012,14 +30094,14 @@ const propsDoc$J = {
   tabs: "Array<string>"
 };
 const propTypes$M = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  activeTab: propTypes$1L.exports.string,
-  fullWidth: propTypes$1L.exports.bool,
+  activeTab: propTypes$1M.exports.string,
+  fullWidth: propTypes$1M.exports.bool,
   onTabChange: fun(),
   onProductNameClick: fun(),
-  productLogoSrc: propTypes$1L.exports.string,
-  productName: propTypes$1L.exports.string.isRequired,
-  productNameHref: propTypes$1L.exports.string,
-  tabs: propTypes$1L.exports.arrayOf(propTypes$1L.exports.string)
+  productLogoSrc: propTypes$1M.exports.string,
+  productName: propTypes$1M.exports.string.isRequired,
+  productNameHref: propTypes$1M.exports.string,
+  tabs: propTypes$1M.exports.arrayOf(propTypes$1M.exports.string)
 });
 function SpsProductBar(props2) {
   const _a = props2, {
@@ -30242,10 +30324,10 @@ const propsDoc$I = {
   onClose: "() => void"
 };
 const propTypes$L = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  percentComplete: propTypes$1L.exports.number,
-  title: propTypes$1L.exports.string,
-  detail: propTypes$1L.exports.string,
-  disabled: propTypes$1L.exports.bool,
+  percentComplete: propTypes$1M.exports.number,
+  title: propTypes$1M.exports.string,
+  detail: propTypes$1M.exports.string,
+  disabled: propTypes$1M.exports.bool,
   onClose: fun()
 });
 function SpsProgressBar(props2) {
@@ -30362,6 +30444,37 @@ const SpsSteppedProgressBarExamples = {
                     }
                 `
       },
+      color: {
+        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'},
+                            {index: 11, title: 'Title 12', description: 'Description'},
+                        ]
+                        return (
+                            <SpsCard>
+                                <SpsSteppedProgressBar
+                                    title="Process Name"
+                                    showStepsCounter={true}
+                                    stepsCount={12}
+                                    completedStepsCount={4}
+                                    icons={iconsData}
+                                    tooltipsData={tooltipsData}
+                                    color={SteppedProgressBarColor.GRAY}
+                                />
+                            </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`
@@ -30951,16 +31064,18 @@ const propsDoc$G = {
   disabled: "boolean",
   showStepsCounter: "boolean",
   icons: "IconsProps[]",
-  tooltipsData: "TooltipsProps[]"
+  tooltipsData: "TooltipsProps[]",
+  color: "SteppedProgressBarColor"
 };
 const propTypes$J = {
-  title: propTypes$1L.exports.string,
-  stepsCount: propTypes$1L.exports.number,
-  completedStepsCount: propTypes$1L.exports.number,
-  disabled: propTypes$1L.exports.bool,
-  showStepsCounter: propTypes$1L.exports.bool,
-  icons: propTypes$1L.exports.arrayOf(impl()),
-  tooltipsData: propTypes$1L.exports.arrayOf(impl())
+  title: propTypes$1M.exports.string,
+  stepsCount: propTypes$1M.exports.number,
+  completedStepsCount: propTypes$1M.exports.number,
+  disabled: propTypes$1M.exports.bool,
+  showStepsCounter: propTypes$1M.exports.bool,
+  icons: propTypes$1M.exports.arrayOf(impl()),
+  tooltipsData: propTypes$1M.exports.arrayOf(impl()),
+  color: enumValue(SteppedProgressBarColor)
 };
 function SpsSteppedProgressBar(props2) {
   const {
@@ -30971,7 +31086,8 @@ function SpsSteppedProgressBar(props2) {
     showStepsCounter,
     icons,
     tooltipsData,
-    className
+    className,
+    color = SteppedProgressBarColor.PURPLE
   } = props2;
   function findIcon(idx) {
     return icons && icons.find((i2) => i2.index === idx);
@@ -30980,7 +31096,7 @@ function SpsSteppedProgressBar(props2) {
     return tooltipsData && tooltipsData.find((i2) => i2.index === idx);
   }
   const data = Array.from(Array(stepsCount)).map(() => useElementId(null).current);
-  const classes = clsx("sps-stepped-progress-bar", completedStepsCount === stepsCount && "sps-stepped-progress-bar--complete", disabled && "sps-stepped-progress-bar--disabled", className);
+  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
   }, /* @__PURE__ */ React.createElement("div", {
@@ -31117,16 +31233,16 @@ const propsDoc$F = {
   value: "any"
 };
 const propTypes$I = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  checked: propTypes$1L.exports.bool,
-  disabled: propTypes$1L.exports.bool,
+  checked: propTypes$1M.exports.bool,
+  disabled: propTypes$1M.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  inline: propTypes$1L.exports.bool,
-  label: propTypes$1L.exports.string,
-  name: propTypes$1L.exports.string.isRequired,
+  inline: propTypes$1M.exports.bool,
+  label: propTypes$1M.exports.string,
+  name: propTypes$1M.exports.string.isRequired,
   onChange: fun(),
   ref: ref(),
-  value: propTypes$1L.exports.any
+  value: propTypes$1M.exports.any
 });
 function SpsRadioButton(_y) {
   var _z = _y, {
@@ -31291,7 +31407,7 @@ const propsDoc$E = {
   maxHeight: "string"
 };
 const propTypes$H = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  maxHeight: propTypes$1L.exports.string
+  maxHeight: propTypes$1M.exports.string
 });
 function SpsScrollableContainer(props2) {
   const {
@@ -31391,8 +31507,8 @@ const propsDoc$D = {
   onClear: "() => void"
 };
 const propTypes$G = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  resultsCount: propTypes$1L.exports.number,
-  totalResults: propTypes$1L.exports.number,
+  resultsCount: propTypes$1M.exports.number,
+  totalResults: propTypes$1M.exports.number,
   onClear: fun()
 });
 function SpsSearchResultsBar(props2) {
@@ -32252,12 +32368,12 @@ const propsDoc$C = {
   widthRem: "number"
 };
 const propTypes$F = __spreadValues({
-  sortKey: propTypes$1L.exports.string,
-  sortDisabled: propTypes$1L.exports.bool,
-  sort: propTypes$1L.exports.arrayOf(impl()),
+  sortKey: propTypes$1M.exports.string,
+  sortDisabled: propTypes$1M.exports.bool,
+  sort: propTypes$1M.exports.arrayOf(impl()),
   onSortChange: fun(),
-  widthPx: propTypes$1L.exports.number,
-  widthRem: propTypes$1L.exports.number
+  widthPx: propTypes$1M.exports.number,
+  widthRem: propTypes$1M.exports.number
 }, spsGlobalPropTypes);
 function SpsSortingHeaderCell(_A) {
   var _B = _A, {
@@ -32327,7 +32443,7 @@ const propsDoc$B = {
   onSortChange: "SortChangeHandler"
 };
 const propTypes$E = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  sort: propTypes$1L.exports.arrayOf(impl()),
+  sort: propTypes$1M.exports.arrayOf(impl()),
   onSortChange: fun()
 });
 function SpsSortingHeader(_C) {
@@ -32405,12 +32521,12 @@ const propsDoc$A = {
   options: "Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"
 };
 const propTypes$D = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1L.exports.bool,
-  href: propTypes$1L.exports.string,
-  label: propTypes$1L.exports.string,
+  disabled: propTypes$1M.exports.bool,
+  href: propTypes$1M.exports.string,
+  label: propTypes$1M.exports.string,
   icon: enumValue(SpsIcon),
   kind: enumValue(StdButtonKind),
-  options: propTypes$1L.exports.arrayOf(propTypes$1L.exports.oneOfType([propTypes$1L.exports.func, propTypes$1L.exports.any]))
+  options: propTypes$1M.exports.arrayOf(propTypes$1M.exports.oneOfType([propTypes$1M.exports.func, propTypes$1M.exports.any]))
 });
 function SpsSplitButton(props2) {
   const _a = props2, {
@@ -32567,7 +32683,7 @@ const propsDoc$z = {
   channelId: { type: "string", required: true }
 };
 const propTypes$C = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  channelId: propTypes$1L.exports.string.isRequired
+  channelId: propTypes$1M.exports.string.isRequired
 });
 function SpsSlackLink(props2) {
   const _a = props2, {
@@ -32649,8 +32765,8 @@ const propsDoc$x = {
   onToggle: "(isExpanded: boolean) => void"
 };
 const propTypes$A = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  expanded: propTypes$1L.exports.bool,
-  selected: propTypes$1L.exports.bool,
+  expanded: propTypes$1M.exports.bool,
+  selected: propTypes$1M.exports.bool,
   onToggle: fun()
 });
 function SpsSummaryListRow(props2) {
@@ -32732,10 +32848,10 @@ const propsDoc$w = {
   width: "string"
 };
 const propTypes$z = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  borderless: propTypes$1L.exports.bool,
-  lean: propTypes$1L.exports.bool,
-  leaner: propTypes$1L.exports.bool,
-  width: propTypes$1L.exports.string
+  borderless: propTypes$1M.exports.bool,
+  lean: propTypes$1M.exports.bool,
+  leaner: propTypes$1M.exports.bool,
+  width: propTypes$1M.exports.string
 });
 function SpsSummaryListColumn(props2) {
   const _a = props2, {
@@ -33068,17 +33184,17 @@ const props = {
   suppressTooltips: "boolean"
 };
 const propTypes$y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  tasks: propTypes$1L.exports.arrayOf(propTypes$1L.exports.any),
+  tasks: propTypes$1M.exports.arrayOf(propTypes$1M.exports.any),
   taskQueuePosition: enumValue(Position),
-  notificationText: propTypes$1L.exports.string,
-  tooltipConfig: propTypes$1L.exports.shape({
+  notificationText: propTypes$1M.exports.string,
+  tooltipConfig: propTypes$1M.exports.shape({
     position: enumValue(Position),
     kind: enumValue(TooltipKind)
   }),
   onClose: fun(),
   onOpen: fun(),
   onClearCompleted: fun(),
-  suppressTooltips: propTypes$1L.exports.bool
+  suppressTooltips: propTypes$1M.exports.bool
 });
 function SpsTaskQueue(_E) {
   var _F = _E, {
@@ -33614,14 +33730,14 @@ const propsDoc$v = {
   value: "string"
 };
 const propTypes$x = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1L.exports.bool,
+  disabled: propTypes$1M.exports.bool,
   formControl: impl(),
   formMeta: impl(),
   icon: enumValue(SpsIcon),
-  name: propTypes$1L.exports.string,
+  name: propTypes$1M.exports.string,
   onChange: fun(),
-  placeholder: propTypes$1L.exports.string,
-  value: propTypes$1L.exports.string
+  placeholder: propTypes$1M.exports.string,
+  value: propTypes$1M.exports.string
 });
 const SpsTextInput = React.forwardRef((_G, ref2) => {
   var _H = _G, {
@@ -33699,6 +33815,7 @@ const SpsTextInput = React.forwardRef((_G, ref2) => {
     value,
     disabled
   }, rest)), value && !disabled && /* @__PURE__ */ React.createElement("i", {
+    "data-testid": `${testId}__input_clear`,
     className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn",
     onClick: clear
   })));
@@ -33810,15 +33927,15 @@ const propsDoc$u = {
   value: "string"
 };
 const propTypes$w = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1L.exports.bool,
+  disabled: propTypes$1M.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  name: propTypes$1L.exports.string,
+  name: propTypes$1M.exports.string,
   onChange: fun(),
-  placeholder: propTypes$1L.exports.string,
+  placeholder: propTypes$1M.exports.string,
   ref: ref(),
-  rows: propTypes$1L.exports.number,
-  value: propTypes$1L.exports.string
+  rows: propTypes$1M.exports.number,
+  value: propTypes$1M.exports.string
 });
 function SpsTextarea(_I) {
   var _J = _I, {
@@ -34012,12 +34129,12 @@ const propsDoc$t = {
   warning: "boolean"
 };
 const propTypes$v = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  href: propTypes$1L.exports.string,
-  target: propTypes$1L.exports.string,
+  href: propTypes$1M.exports.string,
+  target: propTypes$1M.exports.string,
   icon: nodeOrRenderFn.isRequired,
-  error: propTypes$1L.exports.bool,
-  title: propTypes$1L.exports.string.isRequired,
-  warning: propTypes$1L.exports.bool
+  error: propTypes$1M.exports.bool,
+  title: propTypes$1M.exports.string.isRequired,
+  warning: propTypes$1M.exports.bool
 });
 function SpsTile(props2) {
   const _a = props2, {
@@ -34336,10 +34453,10 @@ const propsDoc$r = {
   active: "boolean"
 };
 const propTypes$t = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  value: propTypes$1L.exports.number.isRequired,
-  title: propTypes$1L.exports.string.isRequired,
+  value: propTypes$1M.exports.number.isRequired,
+  title: propTypes$1M.exports.string.isRequired,
   kind: enumValue(SpsFilterTileKind),
-  active: propTypes$1L.exports.bool
+  active: propTypes$1M.exports.bool
 });
 function SpsFilterTile(props2) {
   const _a = props2, {
@@ -34477,18 +34594,18 @@ const propsDoc$p = {
   onChange: "(isActive: boolean) => void"
 };
 const propTypes$r = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  active: propTypes$1L.exports.bool,
-  activeDescription: deprecated(propTypes$1L.exports.string),
-  activeLabel: deprecated(propTypes$1L.exports.string),
-  description: propTypes$1L.exports.string,
-  disabled: propTypes$1L.exports.bool,
+  active: propTypes$1M.exports.bool,
+  activeDescription: deprecated(propTypes$1M.exports.string),
+  activeLabel: deprecated(propTypes$1M.exports.string),
+  description: propTypes$1M.exports.string,
+  disabled: propTypes$1M.exports.bool,
   formControl: impl(),
   formMeta: impl(),
-  id: propTypes$1L.exports.string,
-  inactiveDescription: deprecated(propTypes$1L.exports.string),
-  inactiveLabel: deprecated(propTypes$1L.exports.string),
-  label: propTypes$1L.exports.string,
-  large: propTypes$1L.exports.bool,
+  id: propTypes$1M.exports.string,
+  inactiveDescription: deprecated(propTypes$1M.exports.string),
+  inactiveLabel: deprecated(propTypes$1M.exports.string),
+  label: propTypes$1M.exports.string,
+  large: propTypes$1M.exports.bool,
   onChange: fun(),
   ref: ref()
 });
@@ -34673,7 +34790,7 @@ const propsDoc$o = {
   icon: "SpsIcon"
 };
 const propTypes$q = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  heading: propTypes$1L.exports.string,
+  heading: propTypes$1M.exports.string,
   icon: enumValue(SpsIcon)
 });
 function SpsWorkflow(props2) {
@@ -34725,7 +34842,7 @@ const propsDoc$n = {
   progress: "number"
 };
 const propTypes$p = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  progress: propTypes$1L.exports.number,
+  progress: propTypes$1M.exports.number,
   size: enumValue(RingSize)
 });
 function SpsProgressRing({
@@ -34770,7 +34887,7 @@ const propsDoc$m = {
   phases: "WizardPhase[]"
 };
 const propTypes$o = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  phases: propTypes$1L.exports.arrayOf(impl())
+  phases: propTypes$1M.exports.arrayOf(impl())
 });
 const CSS_BLOCK$2 = "sps-wizard-sidebar";
 function SpsWizardSidebar({
@@ -34821,10 +34938,10 @@ const propsDoc$l = {
 };
 const propTypes$n = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   condition: enumValue(WizardSubstepConditions).isRequired,
-  display: propTypes$1L.exports.string.isRequired,
-  orderPosition: propTypes$1L.exports.oneOfType([
-    propTypes$1L.exports.string,
-    propTypes$1L.exports.number
+  display: propTypes$1M.exports.string.isRequired,
+  orderPosition: propTypes$1M.exports.oneOfType([
+    propTypes$1M.exports.string,
+    propTypes$1M.exports.number
   ]).isRequired
 });
 function SpsWizardSubstep(props2) {
@@ -35025,7 +35142,7 @@ const propsDoc$i = {
 };
 const propTypes$k = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   icon: enumValue(SpsIcon).isRequired,
-  title: propTypes$1L.exports.string.isRequired
+  title: propTypes$1M.exports.string.isRequired
 });
 function SpsWorkflowStep(props2) {
   const _a = props2, {
@@ -35136,9 +35253,9 @@ const propsDoc$h = {
   subHeading: "string"
 };
 const propTypes$j = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  artwork: propTypes$1L.exports.string.isRequired,
-  heading: propTypes$1L.exports.string.isRequired,
-  subHeading: propTypes$1L.exports.string
+  artwork: propTypes$1M.exports.string.isRequired,
+  heading: propTypes$1M.exports.string.isRequired,
+  subHeading: propTypes$1M.exports.string
 });
 function SpsZeroState(props2) {
   const _a = props2, {
@@ -35414,10 +35531,10 @@ const propsDoc$e = {
   onCollapse: "() => void"
 };
 const propTypes$g = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  title: propTypes$1L.exports.string,
-  expanded: propTypes$1L.exports.bool,
-  heightPx: propTypes$1L.exports.number,
-  heightRem: propTypes$1L.exports.number,
+  title: propTypes$1M.exports.string,
+  expanded: propTypes$1M.exports.bool,
+  heightPx: propTypes$1M.exports.number,
+  heightRem: propTypes$1M.exports.number,
   onExpand: fun(),
   onCollapse: fun()
 });
@@ -35843,9 +35960,9 @@ const propsDoc$c = {
   onFilterChange: "ChangeEventHandler<HTMLInputElement>"
 };
 const propTypes$e = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  value: propTypes$1L.exports.string,
-  placeholder: propTypes$1L.exports.string,
-  formMeta: propTypes$1L.exports.oneOfType([
+  value: propTypes$1M.exports.string,
+  placeholder: propTypes$1M.exports.string,
+  formMeta: propTypes$1M.exports.oneOfType([
     impl(),
     impl()
   ]),
@@ -35885,7 +36002,7 @@ const propsDoc$b = {
   showCondition: "boolean"
 };
 const propTypes$d = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  showCondition: propTypes$1L.exports.bool
+  showCondition: propTypes$1M.exports.bool
 });
 function SpsConditionalField(_S) {
   var _T = _S, {
@@ -36217,7 +36334,11 @@ const MANIFEST = {
   },
   "List Toolbar": {
     description: () => /* @__PURE__ */ React.createElement("p", null, "The List Toolbar provides the ability to interact with elements in a list or table. It can contain elements to search, filter, sort, or perform other actions."),
-    components: [SpsListToolbar, SpsListToolbarSearch],
+    components: [
+      SpsListToolbar,
+      SpsListToolbarSearch,
+      SpsListToolbarSearchInfo
+    ],
     examples: SpsListToolbarExamples
   },
   "Micro Block": {
@@ -36359,12 +36480,12 @@ const MANIFEST = {
     examples: SpsZeroStateExamples
   }
 };
-const moment$2 = moment$7.default || moment$7;
+const moment$1 = moment$6.default || moment$6;
 function newWeekArray() {
   return new Array(7).fill(null);
 }
 function generateWeeks(date2) {
-  const dateAsMoment = moment$2({
+  const dateAsMoment = moment$1({
     year: date2.year,
     month: date2.month - 1,
     date: 1
@@ -36402,13 +36523,13 @@ function useMoment(date2) {
   React.useEffect(() => setMomentValue(SimpleDateUtils.toMoment(date2)), [date2]);
   return momentValue;
 }
-const moment$1 = moment$7.default || moment$7;
+const moment = moment$6.default || moment$6;
 const propTypes$c = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   maxDate: impl(),
   minDate: impl(),
   onNewSelection: fun().isRequired,
   selectedDate: impl(),
-  selectedRange: propTypes$1L.exports.arrayOf(impl())
+  selectedRange: propTypes$1M.exports.arrayOf(impl())
 });
 const CSS_ELEMENT$1 = "sps-datepicker__calendar";
 function determineViewMonth({
@@ -36509,7 +36630,7 @@ function SpsDatepickerCalendar(props2) {
     className: `${CSS_ELEMENT$1}-body`
   }, /* @__PURE__ */ React.createElement("div", {
     className: "sps-datepicker__calendar-row"
-  }, moment$1.weekdaysShort().map((dayName) => /* @__PURE__ */ React.createElement("div", {
+  }, moment.weekdaysShort().map((dayName) => /* @__PURE__ */ React.createElement("div", {
     key: dayName,
     className: "sps-datepicker__calendar-header-cell"
   }, dayName))), cal.map((week, i2) => /* @__PURE__ */ React.createElement("div", {
@@ -36528,7 +36649,7 @@ Object.assign(SpsDatepickerCalendar, {
 const CSS_ELEMENT = "sps-datepicker__popup";
 const propTypes$b = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   attachTo: ref().isRequired,
-  isOpen: propTypes$1L.exports.bool.isRequired
+  isOpen: propTypes$1M.exports.bool.isRequired
 });
 const SpsDatepickerPopup = React.forwardRef((_U, ref2) => {
   var _V = _U, {
@@ -36566,7 +36687,7 @@ const propsDoc$a = {
   value: "SimpleDate"
 };
 const propTypes$a = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1L.exports.bool,
+  disabled: propTypes$1M.exports.bool,
   formMeta: impl(),
   maxDate: impl(),
   minDate: impl(),
@@ -36677,7 +36798,6 @@ Object.assign(SpsDatepickerV2, {
   propTypes: propTypes$a,
   displayName: "SpsDatepickerV2"
 });
-const moment = moment$7.default || moment$7;
 const propsDoc$9 = {
   disabled: "boolean",
   formMeta: "SpsFormFieldMeta<SimpleDateRange | DatePreset>",
@@ -36688,12 +36808,12 @@ const propsDoc$9 = {
   value: "SimpleDateRange | DatePreset"
 };
 const propTypes$9 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1L.exports.bool,
+  disabled: propTypes$1M.exports.bool,
   formMeta: impl(),
   maxDate: impl(),
   minDate: impl(),
   onChange: fun(),
-  presets: propTypes$1L.exports.arrayOf(impl())
+  presets: propTypes$1M.exports.arrayOf(impl())
 });
 const CSS_BLOCK = "sps-datepicker";
 const DEFAULT_PRESETS = [
@@ -36734,6 +36854,7 @@ function SpsDateRangePickerV2(_Y) {
   const textInput = React.useRef();
   const popupRef = React.useRef();
   const [stringValue, setStringValue] = React.useState(Array.isArray(value) ? SimpleDateUtils.toStringRange(value) : "");
+  const [selectedPreset, setSelectedPreset] = React.useState(null);
   const [displayRange, setDisplayRange] = React.useState();
   const {
     showPopup,
@@ -36764,6 +36885,7 @@ function SpsDateRangePickerV2(_Y) {
     updateValue(newValue);
     setStringValue(SimpleDateUtils.toStringRange(newValue));
     setDisplayRange(null);
+    setSelectedPreset(null);
   }
   function handleTextInputChange(event) {
     setStringValue(event.target.value);
@@ -36775,6 +36897,7 @@ function SpsDateRangePickerV2(_Y) {
     setStringValue("");
     updateValue();
     setDisplayRange(null);
+    setSelectedPreset(null);
   }
   function handleTextInputKeyDown(event) {
     switch (event.key) {
@@ -36789,28 +36912,39 @@ function SpsDateRangePickerV2(_Y) {
     }
   }
   function selectPreset(newPreset) {
+    if (!newPreset) {
+      setSelectedPreset(null);
+      updateValue(null);
+      return;
+    }
     setStringValue("");
-    updateValue(newPreset);
+    setSelectedPreset(newPreset);
+    updateValue(SimpleDateUtils.createRangeFromPreset(newPreset));
   }
+  React.useEffect(() => {
+    if (!value) {
+      return;
+    }
+    if (presets !== DEFAULT_PRESETS && Array.isArray(value)) {
+      const preselectedRange = SimpleDateUtils.toStringRange(value);
+      const preselectedPreset = presets.find((preset2) => preselectedRange === SimpleDateUtils.toStringRange(SimpleDateUtils.createRangeFromPreset(preset2)));
+      if (preselectedPreset) {
+        selectPreset(preselectedPreset);
+      }
+    }
+  }, []);
   React.useEffect(() => {
     if (!value) {
       clear();
-    } else if (Array.isArray(value)) {
+    } else if (Array.isArray(value) && !selectedPreset) {
       if (value.every((v2) => SimpleDateUtils.isValid(v2))) {
         setStringValue(SimpleDateUtils.toStringRange(value));
       }
       setDisplayRange(null);
-    } else if (typeof value.definition === "function") {
-      setDisplayRange(value.definition());
-    } else {
-      const end2 = moment();
-      const start = end2.clone().subtract(moment.duration(value.definition));
-      setDisplayRange([
-        SimpleDateUtils.createFrom(start),
-        SimpleDateUtils.createFrom(end2)
-      ]);
+    } else if (Array.isArray(value) && selectedPreset) {
+      setStringValue("");
     }
-  }, [value]);
+  }, [value, selectedPreset]);
   function getPresetText(preset2) {
     return preset2 && /^design-system:/.test(preset2.label) ? t2(preset2.label) : preset2.label;
   }
@@ -36826,16 +36960,16 @@ function SpsDateRangePickerV2(_Y) {
     className: clsx("sps-form-control", disabled && "disabled")
   }, /* @__PURE__ */ React.createElement("i", {
     className: clsx("sps-text-input__icon", "sps-icon", "sps-icon-calendar")
-  }), value && !Array.isArray(value) && /* @__PURE__ */ React.createElement("div", {
+  }), selectedPreset && /* @__PURE__ */ React.createElement("div", {
     className: "sps-datepicker__selected-preset"
   }, /* @__PURE__ */ React.createElement("span", {
     className: "sps-tag sps-tag--info"
-  }, getPresetText(value))), /* @__PURE__ */ React.createElement("input", __spreadValues({
+  }, getPresetText(selectedPreset))), /* @__PURE__ */ React.createElement("input", __spreadValues({
     type: "text",
     ref: textInput,
     className: "sps-text-input__input",
     id: controlId,
-    placeholder: !value || Array.isArray(value) ? FORMAT : void 0,
+    placeholder: !stringValue && !selectedPreset ? FORMAT : void 0,
     onChange: handleTextInputChange,
     onClick: doShowPopup,
     onFocus: doShowPopup,
@@ -36859,7 +36993,7 @@ function SpsDateRangePickerV2(_Y) {
     type: "radio",
     id: `sps-date-range-picker-${wrapperId}__range-custom`,
     className: "sps-custom-control__input",
-    checked: !value || Array.isArray(value),
+    checked: !selectedPreset,
     name: `sps-date-range-picker-${wrapperId}__range`,
     onChange: () => selectPreset(null)
   }), /* @__PURE__ */ React.createElement("label", {
@@ -36873,7 +37007,7 @@ function SpsDateRangePickerV2(_Y) {
     id: `sps-date-range-picker-${wrapperId}__range-${i2}`,
     name: `sps-date-range-picker-${wrapperId}__range`,
     onChange: () => selectPreset(preset2),
-    checked: value === preset2,
+    checked: (selectedPreset == null ? void 0 : selectedPreset.definition) ? selectedPreset.definition === preset2.definition : false,
     className: "sps-custom-control__input"
   }), /* @__PURE__ */ React.createElement("label", {
     className: "sps-custom-control__label",
@@ -36898,12 +37032,12 @@ const propsDoc$8 = {
   value: "number"
 };
 const propTypes$8 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1L.exports.bool,
+  disabled: propTypes$1M.exports.bool,
   formMeta: impl(),
-  name: propTypes$1L.exports.string,
+  name: propTypes$1M.exports.string,
   onChange: fun(),
   ref: ref(),
-  value: propTypes$1L.exports.number
+  value: propTypes$1M.exports.number
 });
 function strToDollars(str) {
   return str ? Number.parseInt(str.replace(/[^\d]/g, ""), 10) / 100 : null;
@@ -37078,10 +37212,10 @@ const propsDoc$7 = {
 };
 const propTypes$7 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   color: enumValue(TagKind),
-  href: propTypes$1L.exports.string,
+  href: propTypes$1M.exports.string,
   icon: enumValue(SpsIcon),
-  tagKey: propTypes$1L.exports.string.isRequired,
-  value: propTypes$1L.exports.string.isRequired
+  tagKey: propTypes$1M.exports.string.isRequired,
+  value: propTypes$1M.exports.string.isRequired
 });
 function SpsKeyValueTag(props2) {
   const _a = props2, {
@@ -37174,8 +37308,8 @@ const propsDoc$6 = {
   header: "string | () => string"
 };
 const propTypes$6 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  header: propTypes$1L.exports.oneOfType([
-    propTypes$1L.exports.string,
+  header: propTypes$1M.exports.oneOfType([
+    propTypes$1M.exports.string,
     fun()
   ])
 });
@@ -37207,8 +37341,8 @@ const propsDoc$5 = {
   backdrop: "string"
 };
 const propTypes$5 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  onOverlayClick: propTypes$1L.exports.func,
-  backdrop: propTypes$1L.exports.string
+  onOverlayClick: propTypes$1M.exports.func,
+  backdrop: propTypes$1M.exports.string
 });
 function SpsModalOverlay(props2) {
   const _a = props2, {
@@ -37278,12 +37412,12 @@ const propsDoc$3 = {
   closeModal: "() => void"
 };
 const propTypes$3 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  handleAsync: propTypes$1L.exports.shape({
-    turnAsyncOn: propTypes$1L.exports.func,
-    turnAsyncOff: propTypes$1L.exports.func,
-    isAsyncOn: propTypes$1L.exports.bool
+  handleAsync: propTypes$1M.exports.shape({
+    turnAsyncOn: propTypes$1M.exports.func,
+    turnAsyncOff: propTypes$1M.exports.func,
+    isAsyncOn: propTypes$1M.exports.bool
   }),
-  closeModal: propTypes$1L.exports.func
+  closeModal: propTypes$1M.exports.func
 });
 function SpsModalFooter(props2) {
   const {
@@ -37325,10 +37459,10 @@ const propsDoc$2 = {
 const propTypes$2 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   kind: enumValue(ButtonKind),
   closeModal: fun(),
-  handleAsync: propTypes$1L.exports.shape({
-    turnAsyncOn: propTypes$1L.exports.func,
-    turnAsyncOff: propTypes$1L.exports.func,
-    isAsyncOn: propTypes$1L.exports.bool
+  handleAsync: propTypes$1M.exports.shape({
+    turnAsyncOn: propTypes$1M.exports.func,
+    turnAsyncOff: propTypes$1M.exports.func,
+    isAsyncOn: propTypes$1M.exports.bool
   })
 });
 function SpsModalAction(props2) {
@@ -37383,18 +37517,18 @@ const propsDoc$1 = {
   onClose: "Function"
 };
 const propTypes$1 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  kind: propTypes$1L.exports.string,
-  id: propTypes$1L.exports.string,
-  isOpen: propTypes$1L.exports.bool,
-  header: propTypes$1L.exports.oneOfType([
-    propTypes$1L.exports.string,
+  kind: propTypes$1M.exports.string,
+  id: propTypes$1M.exports.string,
+  isOpen: propTypes$1M.exports.bool,
+  header: propTypes$1M.exports.oneOfType([
+    propTypes$1M.exports.string,
     fun()
   ]),
-  onClose: propTypes$1L.exports.func,
-  onOpen: propTypes$1L.exports.func,
-  size: propTypes$1L.exports.string,
-  backdrop: propTypes$1L.exports.string,
-  actionRequired: propTypes$1L.exports.bool
+  onClose: propTypes$1M.exports.func,
+  onOpen: propTypes$1M.exports.func,
+  size: propTypes$1M.exports.string,
+  backdrop: propTypes$1M.exports.string,
+  actionRequired: propTypes$1M.exports.bool
 });
 function SpsModal(modalProps) {
   let lastFocusable;
@@ -37648,4 +37782,4 @@ Object.assign(SpsVr, {
   propTypes,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
-export { AsTypingErrorKeys, ContentOrderExample, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, PortalContext, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsAutocomplete, SpsAutocompleteExamples, SpsButton, SpsButtonExamples, SpsButtonGroup, SpsCard, SpsCardExamples, SpsCardTabbedPane, SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsCheckbox, SpsCheckboxDropdown, SpsCheckboxExamples, SpsClickableTag, SpsClickableTagExamples, SpsColumnChooser, SpsColumnChooserColumn, SpsColumnChooserExamples, 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, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalAction, SpsModalBody, SpsModalExamples, SpsModalFooter, SpsModalHeader, SpsModalOverlay, SpsModalV2, SpsModalV2Footer, SpsMultiSelect, SpsMultiSelectExamples, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, SpsSortingHeader, SpsSortingHeaderCell, SpsSortingHeaderExamples, SpsSpinner, SpsSpinnerExamples, SpsSplitButton, SpsSplitButtonExamples, SpsSteppedProgressBar, SpsSteppedProgressBarExamples, SpsSummaryListColumn, SpsSummaryListExamples, SpsSummaryListExpansion, SpsSummaryListRow, SpsTab, SpsTabPanel, SpsTable, SpsTableBody, SpsTableCell, SpsTableExamples, SpsTableHead, SpsTableHeader, SpsTableRow, SpsTabsV2, SpsTag, SpsTagExamples, SpsTaskQueue, SpsTaskQueueExamples, SpsTbody, SpsTd, SpsTextInput, SpsTextInputExamples, SpsTextarea, SpsTextareaExamples, SpsTh, SpsThead, SpsTile, SpsTileList, SpsTileListExamples, SpsToggle, SpsToggleExamples, SpsTooltip, SpsTooltipExamples, SpsTooltipTitle, SpsTr, SpsValidators, SpsVerticalRule, SpsVr, SpsWf, SpsWfDoc, SpsWfDs, SpsWfStep, SpsWizardExamples, SpsWizardSidebar, SpsWizardSubstep, SpsWorkflow, SpsWorkflowDocument, SpsWorkflowDocumentStatus, SpsWorkflowExamples, SpsWorkflowStep, SpsZeroState, SpsZeroStateExamples, TooltipVisibility, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate, weekOfMonth };
+export { AsTypingErrorKeys, ContentOrderExample, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, PortalContext, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsAutocomplete, SpsAutocompleteExamples, SpsButton, SpsButtonExamples, SpsButtonGroup, SpsCard, SpsCardExamples, SpsCardTabbedPane, SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsCheckbox, SpsCheckboxDropdown, SpsCheckboxExamples, SpsClickableTag, SpsClickableTagExamples, SpsColumnChooser, SpsColumnChooserColumn, SpsColumnChooserExamples, SpsConditionalField, SpsConditionalFieldExamples, SpsContentRow, SpsContentRowCol, SpsContentRowExamples, SpsContentRowExpansion, SpsCurrencyInput, SpsCurrencyInputExamples, SpsDateRangePicker, SpsDateRangePickerExamples, SpsDateRangePickerV2, SpsDateTime, SpsDatepicker, SpsDatepickerExamples, SpsDatepickerV2, SpsDatetimeExamples, SpsDd, SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListExamples, SpsDescriptionListTerm, SpsDl, SpsDropdown, SpsDropdownExamples, SpsDt, SpsFeedbackBlock, SpsFeedbackBlockExamples, SpsFieldset, SpsFieldsetExamples, SpsFilterPanel, SpsFilterPanelCap, SpsFilterPanelExamples, SpsFilterPanelFilterBox, SpsFilterPanelSection, SpsFilterTile, SpsFilterTileList, SpsFilterTileListExamples, SpsFocusedTask, SpsFocusedTaskActions, SpsFocusedTaskExamples, SpsForm, SpsFormArrayMeta, SpsFormComponentWrapper, SpsFormExamples, SpsFormFieldMeta, SpsFormGroupMeta, SpsFormMetaBase, SpsFormSetMeta, SpsGrowler, SpsGrowlerExamples, SpsI, SpsIconButtonPanel, SpsIncrementor, SpsIncrementorExamples, SpsInputGroup, SpsInsightTile, SpsInsights, SpsKeyValueList, SpsKeyValueListExamples, SpsKeyValueListItem, SpsKeyValueTag, SpsKeyValueTagExamples, SpsLabel, SpsLabelExamples, SpsListActionBar, SpsListActionBarExamples, SpsListToolbar, SpsListToolbarExamples, SpsListToolbarSearch, SpsListToolbarSearchInfo, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalAction, SpsModalBody, SpsModalExamples, SpsModalFooter, SpsModalHeader, SpsModalOverlay, SpsModalV2, SpsModalV2Footer, SpsMultiSelect, SpsMultiSelectExamples, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, SpsSortingHeader, SpsSortingHeaderCell, SpsSortingHeaderExamples, SpsSpinner, SpsSpinnerExamples, SpsSplitButton, SpsSplitButtonExamples, SpsSteppedProgressBar, SpsSteppedProgressBarExamples, SpsSummaryListColumn, SpsSummaryListExamples, SpsSummaryListExpansion, SpsSummaryListRow, SpsTab, SpsTabPanel, SpsTable, SpsTableBody, SpsTableCell, SpsTableExamples, SpsTableHead, SpsTableHeader, SpsTableRow, SpsTabsV2, SpsTag, SpsTagExamples, SpsTaskQueue, SpsTaskQueueExamples, SpsTbody, SpsTd, SpsTextInput, SpsTextInputExamples, SpsTextarea, SpsTextareaExamples, SpsTh, SpsThead, SpsTile, SpsTileList, SpsTileListExamples, SpsToggle, SpsToggleExamples, SpsTooltip, SpsTooltipExamples, SpsTooltipTitle, SpsTr, SpsValidators, SpsVerticalRule, SpsVr, SpsWf, SpsWfDoc, SpsWfDs, SpsWfStep, SpsWizardExamples, SpsWizardSidebar, SpsWizardSubstep, SpsWorkflow, SpsWorkflowDocument, SpsWorkflowDocumentStatus, SpsWorkflowExamples, SpsWorkflowStep, SpsZeroState, SpsZeroStateExamples, TooltipVisibility, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate, weekOfMonth };