@spscommerce/ds-react 6.0.0-rc1 → 6.1.1

package/lib/index.es.js

@@ -1414,6 +1414,17 @@ const SpsFormComponentWrapper = React.forwardRef((props2, ref2) => {
       onClick(event);
     }
   }
+  React.useEffect(() => {
+    function handleMouseDown(e2) {
+      if (e2.target.classList.contains("sps-form-control__clear-btn")) {
+        e2.preventDefault();
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, []);
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classes,
     ref: ref2,
@@ -1759,7 +1770,8 @@ const spsOptionListPassthroughProps = {
     valueKey: "string",
     zeroState: "string",
     maxHeightPx: "number",
-    maxHeightRem: "number"
+    maxHeightRem: "number",
+    disableOptionsMemoization: "boolean"
   },
   propTypes: {
     captionKey: propTypes$1G.exports.string,
@@ -1805,11 +1817,13 @@ const propTypes$1C = __spreadProps(__spreadValues(__spreadValues(__spreadValues(
   specialAction: fun(),
   ignoreWidthStyles: propTypes$1G.exports.bool,
   loading: propTypes$1G.exports.bool,
-  filterByTextAndCaptionKey: propTypes$1G.exports.bool
+  filterByTextAndCaptionKey: propTypes$1G.exports.bool,
+  disableOptionsMemoization: propTypes$1G.exports.bool
 });
 async function updateOptions(props2, searchState, searchStatePatch, setOptionList, setAnyOptionHasIcon, promiseRef) {
   const options = typeof props2.options === "function" ? props2.options(searchState.value) : props2.options || [];
   const areOptionsPromise = options instanceof Promise;
+  const removeSpecialSymbols = (value) => value.replace(/([.?*+^$[\]\\(){}|-])/g, "");
   searchStatePatch({ pending: areOptionsPromise });
   promiseRef.current = areOptionsPromise ? options : null;
   const result = areOptionsPromise ? await options || [] : options || [];
@@ -1827,13 +1841,15 @@ async function updateOptions(props2, searchState, searchStatePatch, setOptionLis
     newOpts.unshift(new SpsOptionListOption(null, { text: props2.nullOption }));
   }
   if (searchState.value) {
-    searchStatePatch({ replacementPattern: new RegExp(searchState.value, "ig") });
+    const searchValue = removeSpecialSymbols(searchState.value);
+    searchStatePatch({ replacementPattern: new RegExp(searchValue, "ig") });
     newOpts = newOpts.filter((o) => {
-      const regEx = new RegExp(searchState.value, "i");
+      const regEx = new RegExp(searchValue, "i");
+      const optionText = removeSpecialSymbols(o.text);
       if (props2.filterByTextAndCaptionKey) {
-        return regEx.test(o.text) || regEx.test(o.caption);
+        return regEx.test(optionText) || regEx.test(removeSpecialSymbols(o.caption));
       }
-      return regEx.test(o.text);
+      return regEx.test(optionText);
     });
   } else {
     searchStatePatch({ replacementPattern: null });
@@ -1857,7 +1873,7 @@ function useOptionListOptions(props2, searchState, searchStatePatch) {
   const [anyOptionHasIcon, setAnyOptionHasIcon] = React.useState(false);
   const promiseRef = React.useRef(null);
   const optionsRef = React.useRef(props2.options);
-  if (typeof props2.options !== "function") {
+  if (typeof props2.options !== "function" || props2.disableOptionsMemoization) {
     optionsRef.current = props2.options;
   }
   const update2 = React.useMemo(() => typeof optionsRef.current === "function" ? debounce(updateOptions, typeof props2.searchDebounce !== "undefined" ? props2.searchDebounce : 500) : updateOptions, [optionsRef.current, props2.disabledOptions]);
@@ -2118,6 +2134,7 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     filterByTextAndCaptionKey,
     maxHeightPx,
     maxHeightRem,
+    disableOptionsMemoization,
     "data-testid": testId
   } = _a, rest = __objRest(_a, [
     "captionKey",
@@ -2155,6 +2172,7 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     "filterByTextAndCaptionKey",
     "maxHeightPx",
     "maxHeightRem",
+    "disableOptionsMemoization",
     "data-testid"
   ]);
   const specialActionOption = React.useMemo(() => specialAction ? new SpsOptionListOption(specialAction, {
@@ -2392,7 +2410,7 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     ref: optionsRef,
     "data-testid": `${testId}-options`,
     style: optionsInlineStyles
-  }, !loading && !searchState.pending && zeroState && (searchState.value || !searchState.isAsync) && optionList.length === 0 && /* @__PURE__ */ React.createElement("div", {
+  }, !loading && !searchState.pending && zeroState && optionList.length === 0 && /* @__PURE__ */ React.createElement("div", {
     className: "sps-option-list__zero-state"
   }, zeroState), (loading || searchState.pending) && /* @__PURE__ */ React.createElement("div", {
     className: "sps-option-list__loading"
@@ -2444,6 +2462,48 @@ Object.assign(SpsOptionList, {
   propTypes: propTypes$1C,
   displayName: "SpsOptionList"
 });
+function bindProps(E, boundProps, deps = []) {
+  return React.useMemo(() => {
+    const EWithBoundProps = (props2) => /* @__PURE__ */ React.createElement(E, __spreadValues({}, __spreadValues(__spreadValues({}, props2), boundProps)), props2.children);
+    return EWithBoundProps;
+  }, deps);
+}
+const Nested = function({
+  children,
+  elements
+}) {
+  if (elements.length === 0) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  }
+  const [E, p2] = Array.isArray(elements[0]) ? elements[0] : [elements[0]];
+  return /* @__PURE__ */ React.createElement(E, __spreadValues({}, p2 != null ? p2 : {}), /* @__PURE__ */ React.createElement(Nested, {
+    elements: elements.slice(1)
+  }, children));
+};
+const Provide = function(_a) {
+  var _b = _a, {
+    children,
+    providers = []
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "providers"
+  ]);
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({}, rest), /* @__PURE__ */ React.createElement(Nested, {
+    elements: providers
+  }, children));
+};
+const SpsApp = function(_c) {
+  var _d = _c, {
+    children,
+    className
+  } = _d, rest = __objRest(_d, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ React.createElement(Provide, __spreadValues({
+    className: `sps-app ${className}`
+  }, rest), children);
+};
 function selectChildren(children = [], groups = []) {
   const childrenArray = Array.isArray(children) ? flatten(children) : [children];
   const normGroups = groups.map((s) => Array.isArray(s) ? s : [s]);
@@ -2553,7 +2613,8 @@ const propsDoc$1y = {
   zeroState: "string",
   loading: "boolean",
   maxHeightOptionListPx: "number",
-  maxHeightOptionListRem: "number"
+  maxHeightOptionListRem: "number",
+  disableOptionsMemoization: "boolean"
 };
 const propTypes$1B = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   debounce: propTypes$1G.exports.number,
@@ -2573,10 +2634,11 @@ const propTypes$1B = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   zeroState: propTypes$1G.exports.string,
   loading: propTypes$1G.exports.bool,
   maxHeightOptionListPx: propTypes$1G.exports.number,
-  maxHeightOptionListRem: propTypes$1G.exports.number
+  maxHeightOptionListRem: propTypes$1G.exports.number,
+  disableOptionsMemoization: propTypes$1G.exports.bool
 });
-function SpsAutocomplete(_a) {
-  var _b = _a, {
+function SpsAutocomplete(_e) {
+  var _f = _e, {
     className,
     debounce: debounce2 = 0,
     disabled,
@@ -2594,8 +2656,9 @@ function SpsAutocomplete(_a) {
     loading,
     maxHeightOptionListPx,
     maxHeightOptionListRem,
+    disableOptionsMemoization,
     "data-testid": testId
-  } = _b, rest = __objRest(_b, [
+  } = _f, rest = __objRest(_f, [
     "className",
     "debounce",
     "disabled",
@@ -2613,6 +2676,7 @@ function SpsAutocomplete(_a) {
     "loading",
     "maxHeightOptionListPx",
     "maxHeightOptionListRem",
+    "disableOptionsMemoization",
     "data-testid"
   ]);
   const meta = formMeta || formControl2;
@@ -2727,7 +2791,8 @@ function SpsAutocomplete(_a) {
     zeroState,
     loading,
     maxHeightPx: maxHeightOptionListPx,
-    maxHeightRem: maxHeightOptionListRem
+    maxHeightRem: maxHeightOptionListRem,
+    disableOptionsMemoization
   }));
 }
 Object.assign(SpsAutocomplete, {
@@ -2869,7 +2934,8 @@ const propsDoc$1x = {
   onClose: "() => void",
   loading: "boolean",
   maxHeightOptionListPx: "number",
-  maxHeightOptionListRem: "number"
+  maxHeightOptionListRem: "number",
+  disableOptionsMemoization: "boolean"
 };
 const propTypes$1A = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   alignLeft: propTypes$1G.exports.bool,
@@ -2885,7 +2951,8 @@ const propTypes$1A = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onClose: fun(),
   loading: propTypes$1G.exports.bool,
   maxHeightOptionListPx: propTypes$1G.exports.number,
-  maxHeightOptionListRem: propTypes$1G.exports.number
+  maxHeightOptionListRem: propTypes$1G.exports.number,
+  disableOptionsMemoization: propTypes$1G.exports.bool
 });
 function SpsDropdown(props2) {
   const _a = props2, {
@@ -2906,7 +2973,8 @@ function SpsDropdown(props2) {
     onClose,
     loading,
     maxHeightOptionListPx,
-    maxHeightOptionListRem
+    maxHeightOptionListRem,
+    disableOptionsMemoization
   } = _a, rest = __objRest(_a, [
     "alignLeft",
     "className",
@@ -2925,7 +2993,8 @@ function SpsDropdown(props2) {
     "onClose",
     "loading",
     "maxHeightOptionListPx",
-    "maxHeightOptionListRem"
+    "maxHeightOptionListRem",
+    "disableOptionsMemoization"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
   const id2 = useElementId(idProp);
@@ -3026,7 +3095,8 @@ function SpsDropdown(props2) {
     optionRole: "option",
     loading,
     maxHeightPx: maxHeightOptionListPx,
-    maxHeightRem: maxHeightOptionListRem
+    maxHeightRem: maxHeightOptionListRem,
+    disableOptionsMemoization
   }), /* @__PURE__ */ React.createElement("div", {
     onClick: handleButtonClick,
     className: buttonClasses,
@@ -5804,10 +5874,10 @@ function SpsTab({
     className: clsx("sps-nav__item", "sps-nav__link", isSelected && "active", isDisabled && "sps-nav__item--disabled")
   }), item.rendered);
 }
-function SpsTabPanel(_c) {
-  var _d = _c, {
+function SpsTabPanel(_g) {
+  var _h = _g, {
     state
-  } = _d, props2 = __objRest(_d, [
+  } = _h, props2 = __objRest(_h, [
     "state"
   ]);
   const ref2 = React.useRef();
@@ -5842,11 +5912,11 @@ Object.assign(SpsTabsV2, {
 });
 const propsDoc$1u = {};
 const propTypes$1x = {};
-function SpsCardV2Footer(_e) {
-  var _f = _e, {
+function SpsCardV2Footer(_i) {
+  var _j = _i, {
     children,
     className
-  } = _f, rest = __objRest(_f, [
+  } = _j, rest = __objRest(_j, [
     "children",
     "className"
   ]);
@@ -5861,11 +5931,11 @@ Object.assign(SpsCardV2Footer, {
 });
 const propsDoc$1t = {};
 const propTypes$1w = {};
-function SpsCardV2Header(_g) {
-  var _h = _g, {
+function SpsCardV2Header(_k) {
+  var _l = _k, {
     children,
     className
-  } = _h, rest = __objRest(_h, [
+  } = _l, rest = __objRest(_l, [
     "children",
     "className"
   ]);
@@ -5880,11 +5950,11 @@ Object.assign(SpsCardV2Header, {
 });
 const propsDoc$1s = {};
 const propTypes$1v = {};
-function SpsCardV2(_i) {
-  var _j = _i, {
+function SpsCardV2(_m) {
+  var _n = _m, {
     children,
     className
-  } = _j, rest = __objRest(_j, [
+  } = _n, rest = __objRest(_n, [
     "children",
     "className"
   ]);
@@ -5911,11 +5981,11 @@ Object.assign(SpsCardV2, {
 });
 const propsDoc$1r = {};
 const propTypes$1u = {};
-function SpsCardV2Title(_k) {
-  var _l = _k, {
+function SpsCardV2Title(_o) {
+  var _p = _o, {
     children,
     className
-  } = _l, rest = __objRest(_l, [
+  } = _p, rest = __objRest(_p, [
     "children",
     "className"
   ]);
@@ -6252,8 +6322,8 @@ const propTypes$1t = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   label: propTypes$1G.exports.string,
   onChange: fun()
 });
-function SpsCheckbox(_m) {
-  var _n = _m, {
+function SpsCheckbox(_q) {
+  var _r = _q, {
     checked: checkedProp,
     className,
     disabled,
@@ -6266,7 +6336,7 @@ function SpsCheckbox(_m) {
     onChange,
     "data-testid": testId,
     unsafelyReplaceClassName
-  } = _n, rest = __objRest(_n, [
+  } = _r, rest = __objRest(_r, [
     "checked",
     "className",
     "disabled",
@@ -16159,13 +16229,13 @@ const propTypes$1g = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   attachTo: ref().isRequired,
   isOpen: propTypes$1G.exports.bool.isRequired
 });
-const SpsDatepickerPopup = React.forwardRef((_o, ref2) => {
-  var _p = _o, {
+const SpsDatepickerPopup = React.forwardRef((_s, ref2) => {
+  var _t = _s, {
     attachTo,
     children,
     className,
     isOpen
-  } = _p, rest = __objRest(_p, [
+  } = _t, rest = __objRest(_t, [
     "attachTo",
     "children",
     "className",
@@ -16203,8 +16273,8 @@ const propTypes$1f = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   value: impl()
 });
 const CSS_BLOCK$3 = "sps-datepicker";
-function SpsDatepicker(_q) {
-  var _r = _q, {
+function SpsDatepicker(_u) {
+  var _v = _u, {
     children,
     className,
     disabled,
@@ -16215,7 +16285,7 @@ function SpsDatepicker(_q) {
     onChange,
     value,
     "data-testid": testId
-  } = _r, rest = __objRest(_r, [
+  } = _v, rest = __objRest(_v, [
     "children",
     "className",
     "disabled",
@@ -16428,8 +16498,8 @@ const DEFAULT_PRESETS = [
   { definition: "P90D", label: "design-system:datepicker.preset.ninetyDays" },
   { definition: "P1Y", label: "design-system:datepicker.preset.oneYear" }
 ];
-function SpsDateRangePicker(_s) {
-  var _t = _s, {
+function SpsDateRangePicker(_w) {
+  var _x = _w, {
     children,
     className,
     disabled,
@@ -16441,7 +16511,7 @@ function SpsDateRangePicker(_s) {
     presets = DEFAULT_PRESETS,
     value,
     "data-testid": testId
-  } = _t, rest = __objRest(_t, [
+  } = _x, rest = __objRest(_x, [
     "children",
     "className",
     "disabled",
@@ -22462,7 +22532,7 @@ function SpsFieldset({
   legend,
   unsafelyReplaceClassName,
   optional = false,
-  enabled,
+  enabled = false,
   onToggled,
   tooltip,
   "data-testid": testId
@@ -22472,14 +22542,9 @@ function SpsFieldset({
   const infoCircleElement = React.useRef(null);
   const [showTip, setShowTip] = React.useState(TooltipVisibility.HIDDEN);
   const [wasFocused, setWasFocused] = React.useState(false);
-  const [isChecked, setisChecked] = React.useState(false);
-  React.useEffect(() => {
-    setisChecked(enabled);
-  }, [enabled]);
-  React.useEffect(() => {
-    if (typeof onToggled === "function") {
-      onToggled(isChecked);
-    }
+  const [isChecked, setIsChecked] = React.useState(enabled);
+  useDidUpdateEffect(() => {
+    onToggled == null ? void 0 : onToggled(isChecked);
   }, [isChecked]);
   React.useEffect(() => {
     if (formControlSet || formMeta) {
@@ -22511,7 +22576,7 @@ function SpsFieldset({
     checked: isChecked,
     className: "d-inline-flex",
     onChange: () => {
-      setisChecked(!isChecked);
+      setIsChecked(!isChecked);
     },
     "data-testid": `${testId}__checkbox`
   }), legend, tooltip && /* @__PURE__ */ React.createElement("span", {
@@ -25103,8 +25168,8 @@ const propTypes$_ = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   helpIconColor: propTypes$1G.exports.string,
   errors: nodeOrRenderFn
 });
-function SpsLabel(_u) {
-  var _v = _u, {
+function SpsLabel(_y) {
+  var _z = _y, {
     children,
     className,
     description,
@@ -25116,7 +25181,7 @@ function SpsLabel(_u) {
     errors,
     unsafelyReplaceClassName,
     "data-testid": testId
-  } = _v, rest = __objRest(_v, [
+  } = _z, rest = __objRest(_z, [
     "children",
     "className",
     "description",
@@ -25575,6 +25640,68 @@ Object.assign(SpsListActionBar, {
   propTypes: propTypes$Z,
   displayName: "SpsListActionBar"
 });
+const SpsTableContext = React.createContext({
+  resizeable: false,
+  resizeState: {},
+  setResizeState: () => {
+  },
+  setSingleResizeState: () => {
+  },
+  sort: [],
+  setSort: () => {
+  }
+});
+const SpsTableContextProvider = ({
+  children,
+  resizeable = false,
+  resizeState,
+  onResizeStateChange,
+  sort,
+  onSortChange
+}) => {
+  const [currentResizeState, setCurrentResizeState] = React.useState(resizeState || {});
+  const [currentSort, setCurrentSort] = React.useState(sort || []);
+  const onSortChangeRef = React.useRef(onSortChange);
+  onSortChangeRef.current = onSortChange;
+  const onResizeStateChangeRef = React.useRef(onResizeStateChange);
+  onResizeStateChangeRef.current = onResizeStateChange;
+  const setSort = React.useCallback((newSort) => {
+    var _a;
+    setCurrentSort(newSort);
+    (_a = onSortChangeRef.current) == null ? void 0 : _a.call(onSortChangeRef, newSort);
+  }, []);
+  const setResizeState = React.useCallback((newResizeState) => {
+    var _a;
+    setCurrentResizeState(newResizeState);
+    (_a = onResizeStateChangeRef.current) == null ? void 0 : _a.call(onResizeStateChangeRef, newResizeState);
+  }, []);
+  const setSingleResizeState = React.useCallback((resizeKey, columnWidth) => {
+    setCurrentResizeState((currentState) => {
+      var _a;
+      const newState = __spreadProps(__spreadValues({}, currentState), { [resizeKey]: columnWidth });
+      (_a = onResizeStateChangeRef.current) == null ? void 0 : _a.call(onResizeStateChangeRef, newState);
+      return newState;
+    });
+  }, []);
+  const contextValue = React.useMemo(() => ({
+    resizeable,
+    resizeState: currentResizeState,
+    setResizeState,
+    setSingleResizeState,
+    sort: currentSort,
+    setSort
+  }), [
+    resizeable,
+    currentResizeState,
+    setResizeState,
+    setSingleResizeState,
+    currentSort,
+    setSort
+  ]);
+  return /* @__PURE__ */ React.createElement(SpsTableContext.Provider, {
+    value: contextValue
+  }, children);
+};
 const getScrollParent = (node) => {
   const regex = /(auto|scroll)/;
   const parents = (_node, ps) => {
@@ -25633,7 +25760,10 @@ const usePinnedCellStyle = (isPinned, elementRef) => {
 };
 const usePinnedTableBackgroundStyle = (containerRef) => {
   React.useLayoutEffect(() => {
-    if (containerRef.current) {
+    const applyBackgroundStyle = () => {
+      if (!containerRef.current) {
+        return;
+      }
       const pinnedThs = containerRef.current.querySelectorAll("table > thead > tr:first-child > .sps-table__cell--pinned");
       const verticalScrollbarWidth = containerRef.current.offsetWidth - containerRef.current.clientWidth;
       const horizontalScrollbarHeight = containerRef.current.offsetHeight - containerRef.current.clientHeight;
@@ -25666,7 +25796,18 @@ const usePinnedTableBackgroundStyle = (containerRef) => {
         containerRef.current.style.backgroundPosition = `0 0, 100% 0, 0 ${-horizontalScrollbarHeight}px, 
           calc(100% - ${verticalScrollbarWidth}px) ${-horizontalScrollbarHeight}px`;
       }
+    };
+    if (containerRef.current) {
+      applyBackgroundStyle();
+      containerRef.current.addEventListener("scroll", applyBackgroundStyle);
+      window.addEventListener("scroll", applyBackgroundStyle);
     }
+    return () => {
+      if (containerRef.current) {
+        containerRef.current.removeEventListener("scroll", applyBackgroundStyle);
+      }
+      window.removeEventListener("scroll", applyBackgroundStyle);
+    };
   });
 };
 const usePinnedTableHeadStyle = (containerRef, maxHeight) => {
@@ -25824,49 +25965,241 @@ const useMaxHeightTableStyle = (containerRef, maxHeight) => {
   });
 };
 const propsDoc$X = {
-  controlCell: "boolean",
-  currentSort: "Array<SortedColumn>",
+  sort: "SortedColumn",
   onSortChange: "SortChangeHandler",
-  sortKey: "string"
+  selectable: "boolean",
+  maxHeightPx: "number",
+  maxHeightRem: "number",
+  resizeable: "boolean",
+  resizeState: "ResizeState",
+  onResizeStateChange: "ResizeStateChangeHandler"
 };
 const propTypes$Y = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  controlCell: propTypes$1G.exports.bool,
-  currentSort: propTypes$1G.exports.arrayOf(impl()),
   onSortChange: fun(),
+  sort: propTypes$1G.exports.arrayOf(impl()),
+  selectable: propTypes$1G.exports.bool,
+  maxHeightPx: propTypes$1G.exports.number,
+  maxHeightRem: propTypes$1G.exports.number,
+  resizeable: propTypes$1G.exports.bool,
+  resizeState: impl(),
+  onResizeStateChange: fun()
+});
+function SpsTable(_A) {
+  var _B = _A, {
+    children,
+    className,
+    onSortChange,
+    sort,
+    "data-testid": testId,
+    unsafelyReplaceClassName,
+    maxHeightPx,
+    maxHeightRem,
+    resizeable,
+    resizeState,
+    onResizeStateChange
+  } = _B, rest = __objRest(_B, [
+    "children",
+    "className",
+    "onSortChange",
+    "sort",
+    "data-testid",
+    "unsafelyReplaceClassName",
+    "maxHeightPx",
+    "maxHeightRem",
+    "resizeable",
+    "resizeState",
+    "onResizeStateChange"
+  ]);
+  const classes = clsx(unsafelyReplaceClassName || "sps-table-container", className);
+  const maxHeight = maxHeightPx ? maxHeightPx / 16 : maxHeightRem;
+  const tableContainerInlineStyles = maxHeight ? { maxHeight: `${maxHeight}rem` } : {};
+  const containerRef = React.useRef(null);
+  useMaxHeightTableStyle(containerRef, maxHeight);
+  usePinnedTableBackgroundStyle(containerRef);
+  usePinnedTableHeadStyle(containerRef, maxHeight);
+  return /* @__PURE__ */ React.createElement(SpsTableContextProvider, {
+    resizeable,
+    resizeState,
+    onResizeStateChange,
+    sort,
+    onSortChange
+  }, /* @__PURE__ */ React.createElement("div", {
+    ref: containerRef,
+    className: classes,
+    style: tableContainerInlineStyles
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "sps-table__shadow shadow--top"
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "sps-table__shadow shadow--bottom"
+  }), /* @__PURE__ */ React.createElement("table", __spreadValues({
+    className: "sps-table",
+    role: "table",
+    "data-testid": `${testId}`
+  }, rest), children)));
+}
+Object.assign(SpsTable, {
+  props: propsDoc$X,
+  propTypes: propTypes$Y,
+  displayName: "SpsTable"
+});
+function findTableElementParent(element) {
+  if (!element || !element.parentElement) {
+    return null;
+  }
+  let parent = element.parentElement;
+  while (parent) {
+    if (parent.tagName.toLowerCase() === "table") {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return null;
+}
+const useColumnResizer = ({
+  tableHeaderRef,
+  resizerRef,
+  resizeKey
+}) => {
+  const { resizeable, resizeState, setSingleResizeState } = React.useContext(SpsTableContext);
+  const isResizeable = !!resizeable && !!resizeKey;
+  const initialColumnWidth = isResizeable ? resizeState == null ? void 0 : resizeState[resizeKey] : void 0;
+  React.useLayoutEffect(() => {
+    let start = null;
+    let currentColumnWidth = initialColumnWidth;
+    const table = findTableElementParent(tableHeaderRef.current);
+    function applyResize() {
+      if (tableHeaderRef.current) {
+        const width = currentColumnWidth ? `${currentColumnWidth}px` : null;
+        tableHeaderRef.current.style.width = width;
+        tableHeaderRef.current.style.maxWidth = width;
+        tableHeaderRef.current.style.minWidth = width;
+        tableHeaderRef.current.style.overflow = width ? "hidden" : null;
+        tableHeaderRef.current.style.textOverflow = width ? "ellipsis" : null;
+        if (start) {
+          const resizer = tableHeaderRef.current.querySelector(".sps-table__column-resizer");
+          if (resizer) {
+            resizer.style.backgroundColor = colors.blue200;
+          }
+        }
+        if (!tableHeaderRef.current.classList.contains("sps-table__cell--pinned")) {
+          tableHeaderRef.current.style.position = "relative";
+        }
+        if (table) {
+          const cells = table.querySelectorAll(`tbody > tr > td:nth-of-type(${tableHeaderRef.current.cellIndex + 1})`);
+          for (let i2 = 0; i2 < cells.length; i2 += 1) {
+            cells[i2].style.width = width;
+            cells[i2].style.maxWidth = width;
+            cells[i2].style.minWidth = width;
+            cells[i2].style.overflow = width ? "hidden" : null;
+            cells[i2].style.textOverflow = width ? "ellipsis" : null;
+            if (!cells[i2].title) {
+              cells[i2].title = cells[i2].textContent;
+            }
+          }
+        }
+      }
+    }
+    const dragStartListener = (event) => {
+      if (!tableHeaderRef.current) {
+        return;
+      }
+      start = event.clientX;
+      currentColumnWidth = tableHeaderRef.current.clientWidth;
+      applyResize();
+    };
+    const dragListener = (event) => {
+      if (!start || !tableHeaderRef.current) {
+        return;
+      }
+      const delta = Math.max(Math.min(start - event.clientX, 5), -5);
+      if (delta !== 0) {
+        start = event.clientX;
+        currentColumnWidth = Math.max(tableHeaderRef.current.clientWidth - delta, 40);
+        applyResize();
+      }
+    };
+    const dragEndListener = () => {
+      if (!tableHeaderRef.current) {
+        return;
+      }
+      start = null;
+      applyResize();
+      setSingleResizeState(resizeKey, currentColumnWidth);
+      const resizer = tableHeaderRef.current.querySelector(".sps-table__column-resizer");
+      if (resizer) {
+        resizer.style.backgroundColor = null;
+      }
+    };
+    const doubleClickListener = () => {
+      currentColumnWidth = null;
+      applyResize();
+      setSingleResizeState(resizeKey, currentColumnWidth);
+    };
+    if (isResizeable && resizerRef.current) {
+      resizerRef.current.addEventListener("dragstart", dragStartListener);
+      resizerRef.current.addEventListener("mousedown", dragStartListener);
+      resizerRef.current.addEventListener("dblclick", doubleClickListener);
+      window.addEventListener("mousemove", dragListener);
+      window.addEventListener("dragend", dragEndListener);
+      window.addEventListener("mouseup", dragEndListener);
+      applyResize();
+    }
+    return () => {
+      if (resizerRef.current) {
+        resizerRef.current.removeEventListener("dragstart", dragStartListener);
+        resizerRef.current.removeEventListener("mousedown", dragStartListener);
+        resizerRef.current.removeEventListener("dblclick", doubleClickListener);
+      }
+      window.removeEventListener("mousemove", dragListener);
+      window.removeEventListener("dragend", dragEndListener);
+      window.removeEventListener("mouseup", dragEndListener);
+    };
+  }, [
+    isResizeable,
+    initialColumnWidth,
+    resizeKey,
+    setSingleResizeState
+  ]);
+  return { isResizeable };
+};
+const propsDoc$W = {
+  controlCell: "boolean",
+  sortKey: "string",
+  resizeKey: "string",
+  pinned: "boolean"
+};
+const propTypes$X = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  controlCell: propTypes$1G.exports.bool,
   sortKey: propTypes$1G.exports.string,
+  resizeKey: propTypes$1G.exports.string,
   pinned: propTypes$1G.exports.bool
 });
-function SpsTableHeader(props2) {
-  const _a = props2, {
+function SpsTableHeader(_C) {
+  var _D = _C, {
     children,
     className,
     controlCell,
-    currentSort,
-    onSortChange,
     sortKey,
+    resizeKey,
     "data-testid": testId,
     unsafelyReplaceClassName,
     pinned
-  } = _a, rest = __objRest(_a, [
+  } = _D, rest = __objRest(_D, [
     "children",
     "className",
     "controlCell",
-    "currentSort",
-    "onSortChange",
     "sortKey",
+    "resizeKey",
     "data-testid",
     "unsafelyReplaceClassName",
     "pinned"
   ]);
-  const [sort, setSort] = React.useState();
-  React.useEffect(() => {
-    setSort(currentSort && currentSort[0].key === sortKey ? currentSort[0].direction : void 0);
-  }, [currentSort]);
+  const { sort, setSort } = React.useContext(SpsTableContext);
+  const currentSort = sort == null ? void 0 : sort.find((s) => s.key === sortKey);
   const flipSort = () => {
     if (sortKey && !controlCell) {
-      const curSort = sort === SortDirection.ASCENDING ? SortDirection.DESCENDING : SortDirection.ASCENDING;
-      setSort(curSort);
-      onSortChange([{ key: sortKey, direction: curSort }]);
+      const direction = (currentSort == null ? void 0 : currentSort.direction) === SortDirection.ASCENDING ? SortDirection.DESCENDING : SortDirection.ASCENDING;
+      setSort([{ key: sortKey, direction }]);
     }
   };
   const handleKeyEvent = (event) => {
@@ -25875,14 +26208,16 @@ function SpsTableHeader(props2) {
       flipSort();
     }
   };
-  const classes = clsx(unsafelyReplaceClassName || "sps-table__header", controlCell && "sps-table__header--control", !sortKey && "sps-table__header--sort-disabled", sort === SortDirection.ASCENDING && "sps-table__header--sorted-asc", sort === SortDirection.DESCENDING && "sps-table__header--sorted-desc", pinned && "sps-table__cell--pinned", className);
   const tableHeaderRef = React.useRef(null);
   usePinnedCellStyle(pinned, tableHeaderRef);
+  const resizerRef = React.useRef(null);
+  const { isResizeable } = useColumnResizer({ tableHeaderRef, resizerRef, resizeKey });
+  const classes = clsx(unsafelyReplaceClassName || "sps-table__header", controlCell && "sps-table__header--control", !sortKey && "sps-table__header--sort-disabled", (currentSort == null ? void 0 : currentSort.direction) === SortDirection.ASCENDING && "sps-table__header--sorted-asc", (currentSort == null ? void 0 : currentSort.direction) === SortDirection.DESCENDING && "sps-table__header--sorted-desc", pinned && "sps-table__cell--pinned", isResizeable && "sps-table__header--resizeable", className);
   return /* @__PURE__ */ React.createElement("th", __spreadValues({
     className: classes,
     ref: tableHeaderRef,
     role: "columnheader",
-    "aria-sort": sort || "none",
+    "aria-sort": (currentSort == null ? void 0 : currentSort.direction) || "none",
     "data-testid": `${testId}__header`
   }, rest), /* @__PURE__ */ React.createElement("span", {
     className: "sps-table__header-cell-body",
@@ -25890,115 +26225,49 @@ function SpsTableHeader(props2) {
     onClick: flipSort,
     tabIndex: sortKey ? 0 : null,
     onKeyDown: handleKeyEvent
-  }, children));
+  }, children), isResizeable && /* @__PURE__ */ React.createElement("span", {
+    ref: resizerRef,
+    className: clsx("sps-table__column-resizer")
+  }));
 }
 Object.assign(SpsTableHeader, {
-  props: propsDoc$X,
-  propTypes: propTypes$Y,
+  props: propsDoc$W,
+  propTypes: propTypes$X,
   displayName: "SpsTableHeader"
 });
 function SpsTh(props2) {
   return /* @__PURE__ */ React.createElement(SpsTableHeader, __spreadValues({}, props2));
 }
 Object.assign(SpsTh, {
-  props: propsDoc$X,
-  propTypes: propTypes$Y,
-  displayName: "SpsTh"
-});
-const propsDoc$W = {
-  currentSort: "Array<SortedColumn>",
-  onSortChange: "SortChangeHandler"
-};
-const propTypes$X = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  currentSort: propTypes$1G.exports.arrayOf(impl()),
-  onSortChange: fun()
-});
-function SpsTableRow(props2) {
-  const _a = props2, {
-    children,
-    className,
-    currentSort,
-    onSortChange,
-    "data-testid": testId,
-    unsafelyReplaceClassName
-  } = _a, rest = __objRest(_a, [
-    "children",
-    "className",
-    "currentSort",
-    "onSortChange",
-    "data-testid",
-    "unsafelyReplaceClassName"
-  ]);
-  const newProps = {
-    onSortChange,
-    currentSort
-  };
-  const classes = clsx(unsafelyReplaceClassName || "sps-table__row", className);
-  return /* @__PURE__ */ React.createElement("tr", __spreadValues({
-    className: classes,
-    role: "row",
-    "data-testid": `${testId}__row`
-  }, rest), React.Children.map(children, (child) => {
-    if (child && (child.type === SpsTableHeader || child.type === SpsTh)) {
-      return React.cloneElement(child, newProps);
-    }
-    return child;
-  }));
-}
-Object.assign(SpsTableRow, {
-  props: propsDoc$W,
-  propTypes: propTypes$X,
-  displayName: "SpsTableRow"
-});
-function SpsTr(props2) {
-  return /* @__PURE__ */ React.createElement(SpsTableRow, __spreadValues({}, props2));
-}
-Object.assign(SpsTr, {
   props: propsDoc$W,
   propTypes: propTypes$X,
-  displayName: "SpsTr"
+  displayName: "SpsTh"
 });
 const propsDoc$V = {
-  currentSort: "Array<SortedColumn>",
-  onSortChange: "SortChangeHandler"
+  pinned: "boolean"
 };
 const propTypes$W = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  onSortChange: fun(),
-  currentSort: propTypes$1G.exports.arrayOf(impl()),
   pinned: propTypes$1G.exports.bool
 });
-function SpsTableHead(props2) {
-  const _a = props2, {
+function SpsTableHead(_E) {
+  var _F = _E, {
     children,
     className,
-    currentSort,
-    onSortChange,
     "data-testid": testId,
     unsafelyReplaceClassName,
     pinned
-  } = _a, rest = __objRest(_a, [
+  } = _F, rest = __objRest(_F, [
     "children",
     "className",
-    "currentSort",
-    "onSortChange",
     "data-testid",
     "unsafelyReplaceClassName",
     "pinned"
   ]);
-  const newProps = {
-    onSortChange,
-    currentSort
-  };
   const classes = clsx(unsafelyReplaceClassName || "sps-table__head", pinned && "sps-table__head--pinned", className);
   return /* @__PURE__ */ React.createElement("thead", __spreadValues({
     className: classes,
     "data-testid": `${testId}__head`
-  }, rest), React.Children.map(children, (child) => {
-    if (child && (child.type === SpsTableRow || child.type === SpsTr)) {
-      return React.cloneElement(child, newProps);
-    }
-    return child;
-  }));
+  }, rest), children);
 }
 Object.assign(SpsTableHead, {
   props: propsDoc$V,
@@ -26013,89 +26282,39 @@ Object.assign(SpsThead, {
   propTypes: propTypes$W,
   displayName: "SpsThead"
 });
-const propsDoc$U = {
-  sort: "SortedColumn",
-  onSortChange: "SortChangeHandler",
-  selectable: "boolean",
-  maxHeightPx: "number",
-  maxHeightRem: "number"
-};
-const propTypes$V = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  onSortChange: fun(),
-  sort: propTypes$1G.exports.arrayOf(impl()),
-  selectable: propTypes$1G.exports.bool,
-  maxHeightPx: propTypes$1G.exports.number,
-  maxHeightRem: propTypes$1G.exports.number
-});
-function SpsTable(props2) {
-  const _a = props2, {
+const propsDoc$U = {};
+const propTypes$V = __spreadValues({}, spsGlobalPropTypes);
+function SpsTableRow(_G) {
+  var _H = _G, {
     children,
     className,
-    onSortChange,
-    sort,
     "data-testid": testId,
-    unsafelyReplaceClassName,
-    maxHeightPx,
-    maxHeightRem
-  } = _a, rest = __objRest(_a, [
+    unsafelyReplaceClassName
+  } = _H, rest = __objRest(_H, [
     "children",
     "className",
-    "onSortChange",
-    "sort",
     "data-testid",
-    "unsafelyReplaceClassName",
-    "maxHeightPx",
-    "maxHeightRem"
+    "unsafelyReplaceClassName"
   ]);
-  const [currentSort, setSort] = React.useState(sort);
-  const updateSortingDisplay = (newSort) => {
-    const sortedColumn = newSort && newSort[0];
-    React.Children.map(children, (child) => React.Children.map(child.props.children, (c2) => React.Children.map(c2.props.children, (c22) => {
-      var _a2, _b;
-      if (sortedColumn && (((_a2 = c22 == null ? void 0 : c22.props) == null ? void 0 : _a2.sortKey) && ((_b = c22 == null ? void 0 : c22.props) == null ? void 0 : _b.sortKey) === sortedColumn.key)) {
-        setSort([sortedColumn]);
-      }
-    })));
-  };
-  const sortChange = (newSort) => {
-    setSort(newSort);
-    onSortChange(newSort);
-    updateSortingDisplay(newSort);
-  };
-  const newProps = {
-    onSortChange: sortChange,
-    currentSort
-  };
-  const classes = clsx(unsafelyReplaceClassName || "sps-table-container", className);
-  const maxHeight = maxHeightPx ? maxHeightPx / 16 : maxHeightRem;
-  const tableContainerInlineStyles = maxHeight ? { maxHeight: `${maxHeight}rem` } : {};
-  const containerRef = React.useRef(null);
-  useMaxHeightTableStyle(containerRef, maxHeight);
-  usePinnedTableBackgroundStyle(containerRef);
-  usePinnedTableHeadStyle(containerRef, maxHeight);
-  return /* @__PURE__ */ React.createElement("div", {
-    ref: containerRef,
+  const classes = clsx(unsafelyReplaceClassName || "sps-table__row", className);
+  return /* @__PURE__ */ React.createElement("tr", __spreadValues({
     className: classes,
-    style: tableContainerInlineStyles
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "sps-table__shadow shadow--top"
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: "sps-table__shadow shadow--bottom"
-  }), /* @__PURE__ */ React.createElement("table", __spreadValues({
-    className: "sps-table",
-    role: "table",
-    "data-testid": `${testId}`
-  }, rest), React.Children.map(children, (child) => {
-    if (child.type === SpsTableHead || child.type === SpsThead) {
-      return React.cloneElement(child, newProps);
-    }
-    return child;
-  })));
+    role: "row",
+    "data-testid": `${testId}__row`
+  }, rest), children);
 }
-Object.assign(SpsTable, {
+Object.assign(SpsTableRow, {
   props: propsDoc$U,
   propTypes: propTypes$V,
-  displayName: "SpsTable"
+  displayName: "SpsTableRow"
+});
+function SpsTr(props2) {
+  return /* @__PURE__ */ React.createElement(SpsTableRow, __spreadValues({}, props2));
+}
+Object.assign(SpsTr, {
+  props: propsDoc$U,
+  propTypes: propTypes$V,
+  displayName: "SpsTr"
 });
 const propsDoc$T = {};
 const propTypes$U = __spreadValues({}, spsGlobalPropTypes);
@@ -26133,7 +26352,8 @@ Object.assign(SpsTbody, {
 const propsDoc$S = {
   buttonCell: "boolean",
   controlCell: "boolean",
-  wrap: "SpsTableCellWrapWidth"
+  wrap: "SpsTableCellWrapWidth",
+  pinned: "boolean"
 };
 const propTypes$T = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   buttonCell: propTypes$1G.exports.bool,
@@ -26193,11 +26413,11 @@ Object.assign(SpsTd, {
 const propsDoc$R = {};
 const propTypes$S = __spreadValues({}, spsGlobalPropTypes);
 const CSS_BLOCK$1 = "sps-icon-button-panel";
-function SpsIconButtonPanel(_w) {
-  var _x = _w, {
+function SpsIconButtonPanel(_I) {
+  var _J = _I, {
     children,
     className
-  } = _x, rest = __objRest(_x, [
+  } = _J, rest = __objRest(_J, [
     "children",
     "className"
   ]);
@@ -27236,6 +27456,146 @@ const SpsTableExamples = {
                 `
       }
     }
+  },
+  resizeableColumns: {
+    label: "Resizeable Columns",
+    examples: {
+      basic: {
+        react: code`
+                    function DemoComponent() {
+                      const [resizeState, setResizeState] = React.useState({});
+
+                      const items = [
+                          {
+                            spine: 2,
+                            title: "Seven Samurai",
+                            year: 1954,
+                            director: "Akira Kurosawa",
+                            runtime: 207,
+                            aspect_ratio: "1.33:1",
+                            countries: "Japan",
+                            languages: "Japanese",
+                            price: "$39.96"
+                          },
+                          {
+                            spine: 29,
+                            title: "Picnic at Hanging Rock",
+                            year: 1975,
+                            director: "Peter Weir",
+                            runtime: 107,
+                            aspect_ratio: "1.78:1",
+                            countries: "Australia",
+                            languages: "English",
+                            price: "$39.95"
+                          },
+                          {
+                            spine: 62,
+                            title: "The Passion of Joan of Arc",
+                            year: 1928,
+                            director: "Carl Theodor Dreyer",
+                            runtime: 81,
+                            aspect_ratio: "1.33:1",
+                            countries: "France",
+                            languages: "French",
+                            price: "$31.96"
+                          },
+                          {
+                            spine: 484,
+                            title: "Jeanne Dielman, 23, quai du Commerce, 1080 Bruxelles",
+                            year: 1975,
+                            director: "Chantal Akerman",
+                            runtime: 201,
+                            aspect_ratio: "1.66:1",
+                            countries: "France, Belgium",
+                            languages: "French",
+                            price: "$31.96"
+                          },
+                          {
+                            spine: 701,
+                            title: "Persona",
+                            year: 1966,
+                            director: "Ingmar Bergman",
+                            runtime: 83,
+                            aspect_ratio: "1.37:1",
+                            countries: "Sweden",
+                            languages: "Swedish",
+                            price: "$31.96"
+                          },
+                          {
+                            spine: 740,
+                            title: "The Bitter Tears of Petra von Kant",
+                            year: 1972,
+                            director: "Rainer Werner Fassbinder",
+                            runtime: 125,
+                            aspect_ratio: "1.37:1",
+                            countries: "West Germany",
+                            languages: "German",
+                            price: "$31.96"
+                          },
+                          {
+                            spine: 782,
+                            title: "The Apu Trilogy",
+                            year: 1959,
+                            director: "Satyajit Ray",
+                            aspect_ratio: "1.37:1",
+                            countries: "India",
+                            languages: "Bengali",
+                            price: "$79.96"
+                          },
+                          {
+                            spine: 888,
+                            title: "Stalker",
+                            year: 1979,
+                            director: "Andrei Tarkovsky",
+                            runtime: 161,
+                            aspect_ratio: "1.37:1",
+                            countries: "Soviet Union",
+                            languages: "Russian",
+                            price: "$31.96"
+                          }
+                        ];
+
+                      return (
+                        <>
+                          <SpsTable resizeable resizeState={resizeState} onResizeStateChange={setResizeState}>
+                              <SpsTableHead>
+                                  <SpsTableRow>
+                                      <SpsTableHeader resizeKey="spine">Spine#</SpsTableHeader>
+                                      <SpsTableHeader resizeKey="title">Title</SpsTableHeader>
+                                      <SpsTableHeader resizeKey="year">Year</SpsTableHeader>
+                                      <SpsTableHeader resizeKey="director">Director</SpsTableHeader>
+                                      <SpsTableHeader resizeKey="runtime">Runtime</SpsTableHeader>
+                                      <SpsTableHeader resizeKey="aspect_ratio">Aspect Ratio</SpsTableHeader>
+                                      <SpsTableHeader resizeKey="countries">Countries</SpsTableHeader>
+                                      <SpsTableHeader resizeKey="languages">Languages</SpsTableHeader>
+                                      <SpsTableHeader resizeKey="price" className="text-right">Price</SpsTableHeader>
+                                  </SpsTableRow>
+                              </SpsTableHead>
+                              <SpsTableBody>
+                                  {items.map((row, index) => {
+                                      return (
+                                          <SpsTableRow key={index}>
+                                              <SpsTableCell>{row["spine"]}</SpsTableCell>
+                                              <SpsTableCell>{row["title"]}</SpsTableCell>
+                                              <SpsTableCell>{row["year"]}</SpsTableCell>
+                                              <SpsTableCell>{row["director"]}</SpsTableCell>
+                                              <SpsTableCell>{row["runtime"]}</SpsTableCell>
+                                              <SpsTableCell>{row["aspect_ratio"]}</SpsTableCell>
+                                              <SpsTableCell>{row["countries"]}</SpsTableCell>
+                                              <SpsTableCell>{row["languages"]}</SpsTableCell>
+                                              <SpsTableCell className="text-right">{row["price"]}</SpsTableCell>
+                                          </SpsTableRow>
+                                      );
+                                  })}
+                              </SpsTableBody>
+                          </SpsTable>
+                          {JSON.stringify({ resizeState })}
+                        </>
+                      );
+                  }
+                `
+      }
+    }
   }
 };
 const SpsTagExamples = {
@@ -27755,8 +28115,8 @@ const propTypes$O = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   formMeta: impl(),
   stacked: propTypes$1G.exports.bool
 });
-function SpsInputGroup(_y) {
-  var _z = _y, {
+function SpsInputGroup(_K) {
+  var _L = _K, {
     children,
     className,
     formArray: formArray2,
@@ -27765,7 +28125,7 @@ function SpsInputGroup(_y) {
     stacked,
     "data-testid": testId,
     unsafelyReplaceClassName
-  } = _z, rest = __objRest(_z, [
+  } = _L, rest = __objRest(_L, [
     "children",
     "className",
     "formArray",
@@ -28933,8 +29293,8 @@ Object.assign(SpsModalFooter, {
   propTypes: {},
   displayName: "SpsModalFooter"
 });
-function SpsModal(_A) {
-  var _B = _A, {
+function SpsModal(_M) {
+  var _N = _M, {
     children,
     className,
     id: idProp,
@@ -28943,7 +29303,7 @@ function SpsModal(_A) {
     onClose,
     focusElementOnOpen,
     title
-  } = _B, rest = __objRest(_B, [
+  } = _N, rest = __objRest(_N, [
     "children",
     "className",
     "id",
@@ -29536,7 +29896,8 @@ const propsDoc$H = {
   zeroState: "string",
   loading: "boolean",
   maxHeightOptionListPx: "number",
-  maxHeightOptionListRem: "number"
+  maxHeightOptionListRem: "number",
+  disableOptionsMemoization: "boolean"
 };
 const propTypes$H = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   action: fun(),
@@ -29564,10 +29925,11 @@ const propTypes$H = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   zeroState: propTypes$1G.exports.string,
   loading: propTypes$1G.exports.bool,
   maxHeightOptionListPx: propTypes$1G.exports.number,
-  maxHeightOptionListRem: propTypes$1G.exports.number
+  maxHeightOptionListRem: propTypes$1G.exports.number,
+  disableOptionsMemoization: propTypes$1G.exports.bool
 });
-function SpsMultiSelect(_C) {
-  var _D = _C, {
+function SpsMultiSelect(_O) {
+  var _P = _O, {
     action,
     captionKey,
     className,
@@ -29593,8 +29955,9 @@ function SpsMultiSelect(_C) {
     icon,
     maxHeightOptionListPx,
     maxHeightOptionListRem,
+    disableOptionsMemoization,
     "data-testid": testId
-  } = _D, rest = __objRest(_D, [
+  } = _P, rest = __objRest(_P, [
     "action",
     "captionKey",
     "className",
@@ -29620,6 +29983,7 @@ function SpsMultiSelect(_C) {
     "icon",
     "maxHeightOptionListPx",
     "maxHeightOptionListRem",
+    "disableOptionsMemoization",
     "data-testid"
   ]);
   const meta = formMeta || formControl2;
@@ -29832,7 +30196,8 @@ function SpsMultiSelect(_C) {
     zeroState,
     loading,
     maxHeightPx: maxHeightOptionListPx,
-    maxHeightRem: maxHeightOptionListRem
+    maxHeightRem: maxHeightOptionListRem,
+    disableOptionsMemoization
   }));
 }
 Object.assign(SpsMultiSelect, {
@@ -30182,6 +30547,7 @@ const propsDoc$E = {
   notClearable: "boolean",
   options: "Eventually<any[]> | (filter?: string) => Eventually<any[]>",
   onChange: "ChangeEventHandler",
+  onOpen: "OnOpenHandler",
   placeholder: "string",
   searchDebounce: "number",
   searchPlaceholder: "string",
@@ -30194,7 +30560,8 @@ const propsDoc$E = {
   loading: "boolean",
   filterByTextAndCaptionKey: "boolean",
   maxHeightOptionListPx: "number",
-  maxHeightOptionListRem: "number"
+  maxHeightOptionListRem: "number",
+  disableOptionsMemoization: "boolean"
 };
 const propTypes$E = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   action: fun(),
@@ -30210,6 +30577,7 @@ const propTypes$E = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
     fun()
   ]).isRequired,
   onChange: fun(),
+  onOpen: fun(),
   placeholder: propTypes$1G.exports.string,
   searchDebounce: propTypes$1G.exports.number,
   searchPlaceholder: propTypes$1G.exports.string,
@@ -30222,7 +30590,8 @@ const propTypes$E = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   loading: propTypes$1G.exports.bool,
   filterByTextAndCaptionKey: propTypes$1G.exports.bool,
   maxHeightOptionListPx: propTypes$1G.exports.number,
-  maxHeightOptionListRem: propTypes$1G.exports.number
+  maxHeightOptionListRem: propTypes$1G.exports.number,
+  disableOptionsMemoization: propTypes$1G.exports.bool
 });
 const SpsSelect = React.forwardRef((props2, ref2) => {
   const _a = props2, {
@@ -30239,6 +30608,7 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     options,
     onChange,
     onClick,
+    onOpen,
     placeholder,
     searchDebounce,
     searchPlaceholder = "Search\u2026",
@@ -30252,7 +30622,8 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     filterByTextAndCaptionKey,
     maxHeightOptionListPx,
     maxHeightOptionListRem,
-    "data-testid": testId
+    "data-testid": testId,
+    disableOptionsMemoization
   } = _a, rest = __objRest(_a, [
     "action",
     "autoFixWidth",
@@ -30267,6 +30638,7 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     "options",
     "onChange",
     "onClick",
+    "onOpen",
     "placeholder",
     "searchDebounce",
     "searchPlaceholder",
@@ -30280,7 +30652,8 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     "filterByTextAndCaptionKey",
     "maxHeightOptionListPx",
     "maxHeightOptionListRem",
-    "data-testid"
+    "data-testid",
+    "disableOptionsMemoization"
   ]);
   const meta = formMeta || formControl2;
   const { wrapperId, controlId } = useFormControlId(id2, meta);
@@ -30380,6 +30753,7 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
   });
   useDidUpdateEffect(() => {
     if (state.isOpen) {
+      onOpen == null ? void 0 : onOpen();
       const event = document.createEvent("CustomEvent");
       event.initCustomEvent("DropdownOpened", false, false, wrapperId);
       document.dispatchEvent(event);
@@ -30451,6 +30825,7 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     loading,
     maxHeightPx: maxHeightOptionListPx,
     maxHeightRem: maxHeightOptionListRem,
+    disableOptionsMemoization,
     "data-testid": `${testId}-option-list`
   }));
 });
@@ -30463,13 +30838,15 @@ const propsDoc$D = {
   page: "number",
   numPages: "number",
   onPageChange: "(number) => void",
-  disabled: "boolean"
+  disabled: "boolean",
+  unknownPageCount: "boolean"
 };
 const propTypes$D = __spreadValues({
   numPages: propTypes$1G.exports.number,
   onPageChange: fun(),
   page: propTypes$1G.exports.number,
-  disabled: propTypes$1G.exports.bool
+  disabled: propTypes$1G.exports.bool,
+  unknownPageCount: propTypes$1G.exports.bool
 }, spsGlobalPropTypes);
 function SpsPageSelector(props2) {
   const _a = props2, {
@@ -30479,7 +30856,8 @@ function SpsPageSelector(props2) {
     unsafelyReplaceClassName,
     className,
     "data-testid": testId,
-    disabled = false
+    disabled = false,
+    unknownPageCount = false
   } = _a, rest = __objRest(_a, [
     "numPages",
     "onPageChange",
@@ -30487,7 +30865,8 @@ function SpsPageSelector(props2) {
     "unsafelyReplaceClassName",
     "className",
     "data-testid",
-    "disabled"
+    "disabled",
+    "unknownPageCount"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
   const [inputPage, setInputPage] = React.useState(pageProp);
@@ -30498,7 +30877,7 @@ function SpsPageSelector(props2) {
   }, [pageProp]);
   function updatePage(newPage) {
     const constrainedPage = constrain(newPage, [1, numPages]);
-    if (constrainedPage !== inputPage) {
+    if (newPage !== page) {
       setPage(constrainedPage);
       setInputPage(constrainedPage);
       if (onPageChange && typeof onPageChange === "function") {
@@ -30506,17 +30885,15 @@ function SpsPageSelector(props2) {
       }
     }
   }
-  const debouncedPageUpdate = debounce(updatePage, 500);
   function onTextInputInput(event) {
-    setInputPage(event.target.value);
-    void debouncedPageUpdate(parseInt(event.target.value, 10));
+    setInputPage(Number(event.target.value) || "");
   }
   const classes = clsx(unsafelyReplaceClassName || "sps-page-selector", className);
   const id2 = useElementId(null);
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: classes,
     "data-testid": testId
-  }, rest), /* @__PURE__ */ React.createElement("div", {
+  }, rest), !unknownPageCount && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     className: "sps-pagination__input-wrapper",
     "data-testid": `${testId}__input`
   }, /* @__PURE__ */ React.createElement("div", {
@@ -30524,7 +30901,9 @@ function SpsPageSelector(props2) {
   }, inputPage), /* @__PURE__ */ React.createElement("label", {
     htmlFor: id2.current,
     className: "sr-only"
-  }, t2("design-system:pagination.page")), /* @__PURE__ */ React.createElement("input", {
+  }, t2("design-system:pagination.page")), /* @__PURE__ */ React.createElement(SpsForm, {
+    onSubmit: () => updatePage(Number(inputPage))
+  }, /* @__PURE__ */ React.createElement("input", {
     id: id2.current,
     type: "text",
     value: inputPage,
@@ -30532,11 +30911,12 @@ function SpsPageSelector(props2) {
     onChange: () => {
     },
     className: "sps-form-control sps-pagination__input",
-    disabled
-  })), /* @__PURE__ */ React.createElement("span", {
+    disabled,
+    onBlur: () => updatePage(Number(inputPage))
+  }))), /* @__PURE__ */ React.createElement("span", {
     className: "sps-page-selector__total-pages",
     "data-testid": `${testId}_page-count`
-  }, Number.isNaN(numPages) ? t2("design-system:pagination.ofMany") : t2("design-system:pagination.ofPageCount", { pageCount: numPages })), /* @__PURE__ */ React.createElement("div", {
+  }, Number.isNaN(numPages) ? t2("design-system:pagination.ofMany") : t2("design-system:pagination.ofPageCount", { pageCount: numPages }))), /* @__PURE__ */ React.createElement("div", {
     className: "sps-icon-button-panel",
     "data-testid": `${testId}__buttons`
   }, /* @__PURE__ */ React.createElement("div", {
@@ -30572,7 +30952,8 @@ const propsDoc$C = {
   pageSizeOptions: "Array<number>",
   totalResults: "number",
   onPageChange: "(page: number, pageSize: number, indices: [number, number]) => void",
-  disabled: "boolean"
+  disabled: "boolean",
+  unknownPageCount: "boolean"
 };
 const propTypes$C = __spreadValues({
   onPageChange: fun().isRequired,
@@ -30580,7 +30961,8 @@ const propTypes$C = __spreadValues({
   pageSize: propTypes$1G.exports.number,
   pageSizeOptions: propTypes$1G.exports.arrayOf(propTypes$1G.exports.number),
   totalResults: propTypes$1G.exports.number,
-  disabled: propTypes$1G.exports.bool
+  disabled: propTypes$1G.exports.bool,
+  unknownPageCount: propTypes$1G.exports.bool
 }, spsGlobalPropTypes);
 function SpsPagination(props2) {
   const _a = props2, {
@@ -30592,7 +30974,8 @@ function SpsPagination(props2) {
     "data-testid": testId,
     totalResults,
     unsafelyReplaceClassName,
-    disabled = false
+    disabled = false,
+    unknownPageCount = false
   } = _a, rest = __objRest(_a, [
     "className",
     "onPageChange",
@@ -30602,7 +30985,8 @@ function SpsPagination(props2) {
     "data-testid",
     "totalResults",
     "unsafelyReplaceClassName",
-    "disabled"
+    "disabled",
+    "unknownPageCount"
   ]);
   const [state, patchState] = usePatchReducer({
     page: pageProp,
@@ -30680,13 +31064,16 @@ function SpsPagination(props2) {
     value: state.pageSize,
     className: "ml-1 mr-1",
     disabled
-  }), "Per Page"), /* @__PURE__ */ React.createElement("div", {
+  }), "Per Page"), unknownPageCount ? /* @__PURE__ */ React.createElement("div", {
+    className: "sps-pagination__details"
+  }, `Viewing ${state.indices[0]} - ${state.indices[1]}`) : /* @__PURE__ */ React.createElement("div", {
     className: "sps-pagination__details"
   }, `Viewing ${state.indices[0]} - ${state.indices[1]} of ${totalResultsString()}`), /* @__PURE__ */ React.createElement(SpsPageSelector, {
     numPages: state.numPages,
     page: state.page,
     onPageChange: handlePageChange,
-    disabled
+    disabled,
+    unknownPageCount
   }));
 }
 Object.assign(SpsPagination, {
@@ -30741,6 +31128,35 @@ const SpsPaginationExamples = {
                     }
                 `
       },
+      situational: {
+        description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Unknown Page Count"), /* @__PURE__ */ React.createElement("p", null, "In cases where the exact page count of results is not able to be determined, a variation of the Pagination component with limited features can be utilized.")),
+        react: code`
+                    function Component() {
+                        const [page, setPage] = React.useState(2);
+                        const [pageSize, setPageSize] = React.useState(25);
+
+                        function handlePageChange(newPage, newPageSize) {
+                          console.log("change", newPage, newPageSize);
+                          setPage(newPage);
+                          setPageSize(newPageSize);
+                        }
+
+                        return (
+                          <React.Fragment>
+                            <SpsPagination id="basic"
+                              totalResults={123}
+                              page={page}
+                              pageSize={pageSize}
+                              onPageChange={handlePageChange}
+                              unknownPageCount
+                            />
+                            <span className="mr-2">page: {page}</span>
+                            <span>pageSize: {pageSize}</span>
+                          </React.Fragment>
+                        );
+                    }
+                `
+      },
       disabled: {
         description: "Disabled state",
         react: code`
@@ -30820,7 +31236,7 @@ const propsDoc$A = {
   onTabChange: "(newTab: string) => void",
   onProductNameClick: "React.MouseEventHandler",
   productLogoSrc: "string",
-  productName: { type: "string", required: true },
+  productName: "string",
   productNameHref: "string",
   tabs: "Array<string>"
 };
@@ -30830,7 +31246,7 @@ const propTypes$B = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onTabChange: fun(),
   onProductNameClick: fun(),
   productLogoSrc: propTypes$1G.exports.string,
-  productName: propTypes$1G.exports.string.isRequired,
+  productName: propTypes$1G.exports.string,
   productNameHref: propTypes$1G.exports.string,
   tabs: propTypes$1G.exports.arrayOf(propTypes$1G.exports.string)
 });
@@ -30879,7 +31295,7 @@ function SpsProductBar(props2) {
     ref: rootElement
   }), /* @__PURE__ */ React.createElement("nav", {
     className: clsx("sps-navbar", "sps-navbar--expand-lg", fullWidth && "sps-navbar--full-width")
-  }, /* @__PURE__ */ React.createElement("a", {
+  }, productName || productLogoSrc ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("a", {
     className: "sps-navbar__brand",
     href: productNameHref,
     onClick: onProductNameClick
@@ -30888,11 +31304,11 @@ function SpsProductBar(props2) {
     src: productLogoSrc,
     "aria-hidden": "true",
     alt: `${productName} Logo`
-  }), /* @__PURE__ */ React.createElement("span", {
+  }), productName && /* @__PURE__ */ React.createElement("span", {
     className: "sps-navbar__brand-name"
   }, productName)), /* @__PURE__ */ React.createElement("span", {
     className: "sps-vertical-rule"
-  }), /* @__PURE__ */ React.createElement("div", {
+  })) : null, /* @__PURE__ */ React.createElement("div", {
     className: "sps-navbar__nav"
   }, tabs.map((tab2) => /* @__PURE__ */ React.createElement("a", {
     className: clsx("sps-nav__item", "sps-nav__link", tab2 === activeTab && "active"),
@@ -31970,8 +32386,8 @@ const propTypes$x = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   ref: ref(),
   value: propTypes$1G.exports.any
 });
-function SpsRadioButton(_E) {
-  var _F = _E, {
+function SpsRadioButton(_Q) {
+  var _R = _Q, {
     checked,
     className,
     "data-testid": testId,
@@ -31986,7 +32402,7 @@ function SpsRadioButton(_E) {
     ref: ref2,
     unsafelyReplaceClassName,
     value
-  } = _F, rest = __objRest(_F, [
+  } = _R, rest = __objRest(_R, [
     "checked",
     "className",
     "data-testid",
@@ -32995,8 +33411,8 @@ const propTypes$v = __spreadValues({
   widthPx: propTypes$1G.exports.number,
   widthRem: propTypes$1G.exports.number
 }, spsGlobalPropTypes);
-function SpsSortingHeaderCell(_G) {
-  var _H = _G, {
+function SpsSortingHeaderCell(_S) {
+  var _T = _S, {
     className,
     "data-testid": testId,
     unsafelyReplaceClassName,
@@ -33009,7 +33425,7 @@ function SpsSortingHeaderCell(_G) {
     widthPx,
     widthRem,
     style: style2
-  } = _H, rest = __objRest(_H, [
+  } = _T, rest = __objRest(_T, [
     "className",
     "data-testid",
     "unsafelyReplaceClassName",
@@ -33066,15 +33482,15 @@ const propTypes$u = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   sort: propTypes$1G.exports.arrayOf(impl()),
   onSortChange: fun()
 });
-function SpsSortingHeader(_I) {
-  var _J = _I, {
+function SpsSortingHeader(_U) {
+  var _V = _U, {
     className,
     "data-testid": testId,
     unsafelyReplaceClassName,
     sort,
     onSortChange,
     children
-  } = _J, rest = __objRest(_J, [
+  } = _V, rest = __objRest(_V, [
     "className",
     "data-testid",
     "unsafelyReplaceClassName",
@@ -33821,8 +34237,8 @@ const propTypes$o = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onClearCompleted: fun(),
   suppressTooltips: propTypes$1G.exports.bool
 });
-function SpsTaskQueue(_K) {
-  var _L = _K, {
+function SpsTaskQueue(_W) {
+  var _X = _W, {
     tasks = [],
     taskQueuePosition = Position.BOTTOM_RIGHT,
     notificationText,
@@ -33834,7 +34250,7 @@ function SpsTaskQueue(_K) {
     "data-testid": testId,
     unsafelyReplaceClassName,
     suppressTooltips = false
-  } = _L, rest = __objRest(_L, [
+  } = _X, rest = __objRest(_X, [
     "tasks",
     "taskQueuePosition",
     "notificationText",
@@ -33878,6 +34294,7 @@ function SpsTaskQueue(_K) {
   const hasCompletedTask = tasks.some((task) => task.status === SpsTaskStatus.COMPLETED || task.status === SpsTaskStatus.ERRORED);
   const onCloseRef = React.useRef(onClose);
   onCloseRef.current = onClose;
+  const tasksList = React.useRef();
   const handleToggle = () => {
     if (hasTasks && !isOpen) {
       setIsOpen(true);
@@ -33890,6 +34307,7 @@ function SpsTaskQueue(_K) {
         onClose();
       }
     }
+    tasksList.current.scrollTop = 0;
   };
   const getTaskIcon = (task) => task.status === SpsTaskStatus.IN_PROGRESS ? SpsTaskStatusIcons[task.status] : `sps-icon sps-icon-${SpsTaskStatusIcons[task.status]}`;
   React.useEffect(() => {
@@ -33990,12 +34408,13 @@ function SpsTaskQueue(_K) {
     kind: tooltipKind,
     showOn: hasTasks ? TooltipShowTrigger.MANUAL : TooltipShowTrigger.MOUSEOVER,
     isShown: showNotification && !isOpen ? TooltipVisibility.VISIBLE : TooltipVisibility.HIDDEN,
-    hideDelay: TASK_QUEUE_NOTIFICATION_DURATION_MS
+    hideDelay: Number(hasTasks) && TASK_QUEUE_NOTIFICATION_DURATION_MS
   }, !suppressTooltips && showNotification && (notificationText || t2("design-system:taskQueue.newTask")), !suppressTooltips && !showNotification && !hasTasks && t2("design-system:taskQueue.noTasks")), portal(/* @__PURE__ */ React.createElement("div", {
     ref: taskQueueDropdownRef,
     className: clsx("sps-task-queue__task-list", isOpen && "sps-task-queue__task-list--open", "z-stratum-dropdown"),
     style: posStyle
   }, /* @__PURE__ */ React.createElement("div", {
+    ref: tasksList,
     className: "sps-task-queue__task-list-tasks"
   }, tasks.map((task, taskIndex) => /* @__PURE__ */ React.createElement("div", {
     key: taskIndex,
@@ -34364,8 +34783,8 @@ const propTypes$n = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   value: propTypes$1G.exports.string,
   additionalText: propTypes$1G.exports.string
 });
-const SpsTextInput = React.forwardRef((_M, ref2) => {
-  var _N = _M, {
+const SpsTextInput = React.forwardRef((_Y, ref2) => {
+  var _Z = _Y, {
     className,
     disabled = false,
     formControl: formControl2,
@@ -34380,7 +34799,7 @@ const SpsTextInput = React.forwardRef((_M, ref2) => {
     unsafelyReplaceClassName,
     value = "",
     additionalText
-  } = _N, rest = __objRest(_N, [
+  } = _Z, rest = __objRest(_Z, [
     "className",
     "disabled",
     "formControl",
@@ -34595,8 +35014,8 @@ const propTypes$m = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   value: propTypes$1G.exports.string,
   additionalText: propTypes$1G.exports.string
 });
-function SpsTextarea(_O) {
-  var _P = _O, {
+function SpsTextarea(__) {
+  var _$ = __, {
     className,
     disabled = false,
     formControl: formControl2,
@@ -34611,7 +35030,7 @@ function SpsTextarea(_O) {
     unsafelyReplaceClassName,
     value = "",
     additionalText
-  } = _P, rest = __objRest(_P, [
+  } = _$, rest = __objRest(_$, [
     "className",
     "disabled",
     "formControl",
@@ -34806,16 +35225,22 @@ const propsDoc$l = {
   href: "string",
   icon: { type: "ReactNodeOrRenderFn", required: "true" },
   error: "boolean",
+  errorIcon: "ReactNodeOrRenderFn",
   title: { type: "string", required: "true" },
-  warning: "boolean"
+  warning: "boolean",
+  warningIcon: "ReactNodeOrRenderFn",
+  disabled: "boolean"
 };
 const propTypes$l = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   href: propTypes$1G.exports.string,
   target: propTypes$1G.exports.string,
   icon: nodeOrRenderFn.isRequired,
   error: propTypes$1G.exports.bool,
+  errorIcon: nodeOrRenderFn,
   title: propTypes$1G.exports.string.isRequired,
-  warning: propTypes$1G.exports.bool
+  warning: propTypes$1G.exports.bool,
+  warningIcon: nodeOrRenderFn,
+  disabled: propTypes$1G.exports.bool
 });
 function SpsTile(props2) {
   const _a = props2, {
@@ -34824,20 +35249,26 @@ function SpsTile(props2) {
     target,
     icon,
     error = false,
+    errorIcon,
     title,
     unsafelyReplaceClassName,
-    warning = false
+    warning = false,
+    warningIcon,
+    disabled = false
   } = _a, rest = __objRest(_a, [
     "className",
     "href",
     "target",
     "icon",
     "error",
+    "errorIcon",
     "title",
     "unsafelyReplaceClassName",
-    "warning"
+    "warning",
+    "warningIcon",
+    "disabled"
   ]);
-  const classes = clsx(unsafelyReplaceClassName || "sps-tile", className, error && "sps-tile--error", warning && "sps-tile--warning");
+  const classes = clsx(unsafelyReplaceClassName || "sps-tile", className, error && "sps-tile--error", warning && "sps-tile--warning", disabled && "sps-tile--disabled");
   React.useEffect(() => {
     if (warning && error) {
       throw new Error("Tile should have warning or error, not both");
@@ -34847,16 +35278,16 @@ function SpsTile(props2) {
     className: "sps-tile-container sfg-col-3 sfg-break-col-6"
   }, /* @__PURE__ */ React.createElement("a", __spreadValues({
     className: classes,
-    href,
+    href: disabled ? void 0 : href,
     target,
     rel: target === "_blank" ? "noopener noreferrer" : void 0
   }, rest), (warning || error) && /* @__PURE__ */ React.createElement("div", {
     className: "sps-tile--icon"
-  }, warning && /* @__PURE__ */ React.createElement("i", {
+  }, warning && (warningIcon ? contentOf(warningIcon) : /* @__PURE__ */ React.createElement("i", {
     className: clsx("sps-icon", "sps-icon-status-warning")
-  }), error && /* @__PURE__ */ React.createElement("i", {
+  })), error && (errorIcon ? contentOf(errorIcon) : /* @__PURE__ */ React.createElement("i", {
     className: clsx("sps-icon", "sps-icon-ban")
-  })), /* @__PURE__ */ React.createElement("div", {
+  }))), /* @__PURE__ */ React.createElement("div", {
     className: "sps-tile--content"
   }, /* @__PURE__ */ React.createElement("div", {
     className: "sps-tile--image"
@@ -36201,8 +36632,8 @@ function Component() {
 };
 const propsDoc$7 = {};
 const propTypes$7 = __spreadValues({}, spsGlobalPropTypes);
-function SpsFilterPanel(_Q) {
-  var _R = _Q, { children, className } = _R, rest = __objRest(_R, ["children", "className"]);
+function SpsFilterPanel(_aa) {
+  var _ba = _aa, { children, className } = _ba, rest = __objRest(_ba, ["children", "className"]);
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: clsx("sps-filter-panel", className)
   }, rest), children);
@@ -36228,8 +36659,8 @@ const propTypes$6 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onExpand: fun(),
   onCollapse: fun()
 });
-function SpsFilterPanelSection(_S) {
-  var _T = _S, {
+function SpsFilterPanelSection(_ca) {
+  var _da = _ca, {
     children,
     className,
     title,
@@ -36238,7 +36669,7 @@ function SpsFilterPanelSection(_S) {
     heightRem,
     onExpand,
     onCollapse
-  } = _T, rest = __objRest(_T, [
+  } = _da, rest = __objRest(_da, [
     "children",
     "className",
     "title",
@@ -36291,12 +36722,12 @@ const propsDoc$5 = {
 const propTypes$5 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onClear: fun()
 });
-function SpsFilterPanelCap(_U) {
-  var _V = _U, {
+function SpsFilterPanelCap(_ea) {
+  var _fa = _ea, {
     children,
     className,
     onClear
-  } = _V, rest = __objRest(_V, [
+  } = _fa, rest = __objRest(_fa, [
     "children",
     "className",
     "onClear"
@@ -36655,14 +37086,14 @@ const propTypes$4 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   formMeta: impl(),
   onFilterChange: fun()
 });
-function SpsFilterPanelFilterBox(_W) {
-  var _X = _W, {
+function SpsFilterPanelFilterBox(_ga) {
+  var _ha = _ga, {
     className,
     value,
     placeholder,
     formMeta,
     onFilterChange
-  } = _X, rest = __objRest(_X, [
+  } = _ha, rest = __objRest(_ha, [
     "className",
     "value",
     "placeholder",
@@ -36691,12 +37122,12 @@ const propsDoc$3 = {
 const propTypes$3 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   showCondition: propTypes$1G.exports.bool
 });
-function SpsConditionalField(_Y) {
-  var _Z = _Y, {
+function SpsConditionalField(_ia) {
+  var _ja = _ia, {
     showCondition = true,
     children,
     className
-  } = _Z, rest = __objRest(_Z, [
+  } = _ja, rest = __objRest(_ja, [
     "showCondition",
     "children",
     "className"
@@ -37197,8 +37628,8 @@ function strToDollars(str) {
 function dollarsToStr(dollars) {
   return typeof dollars === "number" ? dollars.toFixed(2) : "";
 }
-function SpsCurrencyInput(__) {
-  var _$ = __, {
+function SpsCurrencyInput(_ka) {
+  var _la = _ka, {
     className,
     disabled = false,
     formMeta,
@@ -37208,7 +37639,7 @@ function SpsCurrencyInput(__) {
     ref: ref2,
     title,
     value
-  } = _$, rest = __objRest(_$, [
+  } = _la, rest = __objRest(_la, [
     "className",
     "disabled",
     "formMeta",
@@ -37372,6 +37803,7 @@ const propTypes$1 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
 function SpsKeyValueTag(props2) {
   const _a = props2, {
     color = TagKind.KEY,
+    className,
     "data-testid": testId,
     href,
     icon,
@@ -37380,6 +37812,7 @@ function SpsKeyValueTag(props2) {
     unsafelyReplaceClassName
   } = _a, rest = __objRest(_a, [
     "color",
+    "className",
     "data-testid",
     "href",
     "icon",
@@ -37387,7 +37820,7 @@ function SpsKeyValueTag(props2) {
     "value",
     "unsafelyReplaceClassName"
   ]);
-  const classes = clsx(unsafelyReplaceClassName || "sps-key-value-tag", href && "sps-key-value-tag--link");
+  const classes = clsx(unsafelyReplaceClassName || "sps-key-value-tag", href && "sps-key-value-tag--link", className);
   return /* @__PURE__ */ React.createElement("span", __spreadValues({
     className: classes,
     "data-testid": `${testId}__key-value-tag`
@@ -37551,4 +37984,4 @@ Object.assign(SpsVr, {
   propTypes,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
-export { AsTypingErrorKeys, ContentOrderExample, DEFAULT_PRESETS, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, OnSubmitErrorKeys, PortalContext, PreventativeErrorKeys, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsAutocomplete, SpsAutocompleteExamples, SpsButton, SpsButtonExamples, SpsButtonGroup, SpsCard, SpsCardExamples, SpsCardTabbedPane, SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsCheckbox, SpsCheckboxDropdown, SpsCheckboxExamples, SpsClickableTag, SpsClickableTagExamples, SpsColumnChooser, SpsColumnChooserColumn, SpsColumnChooserExamples, SpsConditionalField, SpsConditionalFieldExamples, SpsContentRow, SpsContentRowCol, SpsContentRowExamples, SpsContentRowExpansion, SpsCurrencyInput, SpsCurrencyInputExamples, SpsDateRangePicker, SpsDateRangePickerExamples, SpsDateTime, SpsDatepicker, SpsDatepickerExamples, SpsDatetimeExamples, SpsDd, SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListExamples, SpsDescriptionListTerm, SpsDl, SpsDropdown, SpsDropdownExamples, SpsDt, SpsFeedbackBlock, SpsFeedbackBlockExamples, SpsFieldset, SpsFieldsetExamples, SpsFilterPanel, SpsFilterPanelCap, SpsFilterPanelExamples, SpsFilterPanelFilterBox, SpsFilterPanelSection, SpsFilterTile, SpsFilterTileList, SpsFilterTileListExamples, SpsFocusedTask, SpsFocusedTaskActions, SpsFocusedTaskExamples, SpsForm, SpsFormArrayMeta, SpsFormComponentWrapper, SpsFormExamples, SpsFormFieldMeta, SpsFormGroupMeta, SpsFormMetaBase, SpsFormSetMeta, SpsGrowler, SpsGrowlerExamples, SpsI, SpsIconButtonPanel, SpsIncrementor, SpsIncrementorExamples, SpsInputGroup, SpsInsightTile, SpsInsights, SpsKeyValueList, SpsKeyValueListExamples, SpsKeyValueListItem, SpsKeyValueTag, SpsKeyValueTagExamples, SpsLabel, SpsLabelExamples, SpsListActionBar, SpsListActionBarExamples, SpsListToolbar, SpsListToolbarExamples, SpsListToolbarSearch, SpsListToolbarSearchInfo, SpsListToolbarSortBy, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalExamples, SpsModalFooter, SpsMultiSelect, SpsMultiSelectExamples, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSearchResultsBarV2, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, SpsSortingHeader, SpsSortingHeaderCell, SpsSortingHeaderExamples, SpsSpinner, SpsSpinnerExamples, SpsSplitButton, SpsSplitButtonExamples, SpsSteppedProgressBar, SpsSteppedProgressBarExamples, SpsSummaryListColumn, SpsSummaryListExamples, SpsSummaryListExpansion, SpsSummaryListRow, SpsTab, SpsTabPanel, SpsTable, SpsTableBody, SpsTableCell, SpsTableExamples, SpsTableHead, SpsTableHeader, SpsTableRow, SpsTabsV2, SpsTag, SpsTagExamples, SpsTaskQueue, SpsTaskQueueExamples, SpsTbody, SpsTd, SpsTextInput, SpsTextInputExamples, SpsTextarea, SpsTextareaExamples, SpsTh, SpsThead, SpsTile, SpsTileList, SpsTileListExamples, SpsToggle, SpsToggleExamples, SpsTooltip, SpsTooltipExamples, SpsTooltipTitle, SpsTr, SpsValidators, SpsVerticalRule, SpsVr, SpsWf, SpsWfDoc, SpsWfDs, SpsWfStep, SpsWizardExamples, SpsWizardSidebar, SpsWizardSubstep, SpsWorkflow, SpsWorkflowDocument, SpsWorkflowDocumentStatus, SpsWorkflowExamples, SpsWorkflowStep, SpsZeroState, SpsZeroStateExamples, TooltipVisibility, ValidationMode, addOnChangeErrorKey, addOnSubmitErrorKey, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useCustomValidator, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate };
+export { AsTypingErrorKeys, ContentOrderExample, DEFAULT_PRESETS, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, OnSubmitErrorKeys, PortalContext, PreventativeErrorKeys, Provide, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsApp, 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, SpsDateTime, SpsDatepicker, SpsDatepickerExamples, SpsDatetimeExamples, SpsDd, SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListExamples, SpsDescriptionListTerm, SpsDl, SpsDropdown, SpsDropdownExamples, SpsDt, SpsFeedbackBlock, SpsFeedbackBlockExamples, SpsFieldset, SpsFieldsetExamples, SpsFilterPanel, SpsFilterPanelCap, SpsFilterPanelExamples, SpsFilterPanelFilterBox, SpsFilterPanelSection, SpsFilterTile, SpsFilterTileList, SpsFilterTileListExamples, SpsFocusedTask, SpsFocusedTaskActions, SpsFocusedTaskExamples, SpsForm, SpsFormArrayMeta, SpsFormComponentWrapper, SpsFormExamples, SpsFormFieldMeta, SpsFormGroupMeta, SpsFormMetaBase, SpsFormSetMeta, SpsGrowler, SpsGrowlerExamples, SpsI, SpsIconButtonPanel, SpsIncrementor, SpsIncrementorExamples, SpsInputGroup, SpsInsightTile, SpsInsights, SpsKeyValueList, SpsKeyValueListExamples, SpsKeyValueListItem, SpsKeyValueTag, SpsKeyValueTagExamples, SpsLabel, SpsLabelExamples, SpsListActionBar, SpsListActionBarExamples, SpsListToolbar, SpsListToolbarExamples, SpsListToolbarSearch, SpsListToolbarSearchInfo, SpsListToolbarSortBy, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalExamples, SpsModalFooter, SpsMultiSelect, SpsMultiSelectExamples, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSearchResultsBarV2, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, SpsSortingHeader, SpsSortingHeaderCell, SpsSortingHeaderExamples, SpsSpinner, SpsSpinnerExamples, SpsSplitButton, SpsSplitButtonExamples, SpsSteppedProgressBar, SpsSteppedProgressBarExamples, SpsSummaryListColumn, SpsSummaryListExamples, SpsSummaryListExpansion, SpsSummaryListRow, SpsTab, SpsTabPanel, SpsTable, SpsTableBody, SpsTableCell, SpsTableExamples, SpsTableHead, SpsTableHeader, SpsTableRow, SpsTabsV2, SpsTag, SpsTagExamples, SpsTaskQueue, SpsTaskQueueExamples, SpsTbody, SpsTd, SpsTextInput, SpsTextInputExamples, SpsTextarea, SpsTextareaExamples, SpsTh, SpsThead, SpsTile, SpsTileList, SpsTileListExamples, SpsToggle, SpsToggleExamples, SpsTooltip, SpsTooltipExamples, SpsTooltipTitle, SpsTr, SpsValidators, SpsVerticalRule, SpsVr, SpsWf, SpsWfDoc, SpsWfDs, SpsWfStep, SpsWizardExamples, SpsWizardSidebar, SpsWizardSubstep, SpsWorkflow, SpsWorkflowDocument, SpsWorkflowDocumentStatus, SpsWorkflowExamples, SpsWorkflowStep, SpsZeroState, SpsZeroStateExamples, TooltipVisibility, ValidationMode, addOnChangeErrorKey, addOnSubmitErrorKey, bindProps, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useColumnResizer, useCustomValidator, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate };