@spscommerce/ds-react 6.0.0 → 6.2.0

package/lib/index.es.js

@@ -25640,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) => {
@@ -25698,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;
@@ -25731,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) => {
@@ -25889,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) => {
@@ -25940,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",
@@ -25955,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,
@@ -26078,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);
@@ -26198,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,
@@ -26258,11 +26413,11 @@ Object.assign(SpsTd, {
 const propsDoc$R = {};
 const propTypes$S = __spreadValues({}, spsGlobalPropTypes);
 const CSS_BLOCK$1 = "sps-icon-button-panel";
-function SpsIconButtonPanel(_A) {
-  var _B = _A, {
+function SpsIconButtonPanel(_I) {
+  var _J = _I, {
     children,
     className
-  } = _B, rest = __objRest(_B, [
+  } = _J, rest = __objRest(_J, [
     "children",
     "className"
   ]);
@@ -27301,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 = {
@@ -27820,8 +28115,8 @@ const propTypes$O = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   formMeta: impl(),
   stacked: propTypes$1G.exports.bool
 });
-function SpsInputGroup(_C) {
-  var _D = _C, {
+function SpsInputGroup(_K) {
+  var _L = _K, {
     children,
     className,
     formArray: formArray2,
@@ -27830,7 +28125,7 @@ function SpsInputGroup(_C) {
     stacked,
     "data-testid": testId,
     unsafelyReplaceClassName
-  } = _D, rest = __objRest(_D, [
+  } = _L, rest = __objRest(_L, [
     "children",
     "className",
     "formArray",
@@ -28998,8 +29293,8 @@ Object.assign(SpsModalFooter, {
   propTypes: {},
   displayName: "SpsModalFooter"
 });
-function SpsModal(_E) {
-  var _F = _E, {
+function SpsModal(_M) {
+  var _N = _M, {
     children,
     className,
     id: idProp,
@@ -29008,7 +29303,7 @@ function SpsModal(_E) {
     onClose,
     focusElementOnOpen,
     title
-  } = _F, rest = __objRest(_F, [
+  } = _N, rest = __objRest(_N, [
     "children",
     "className",
     "id",
@@ -29633,8 +29928,8 @@ const propTypes$H = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   maxHeightOptionListRem: propTypes$1G.exports.number,
   disableOptionsMemoization: propTypes$1G.exports.bool
 });
-function SpsMultiSelect(_G) {
-  var _H = _G, {
+function SpsMultiSelect(_O) {
+  var _P = _O, {
     action,
     captionKey,
     className,
@@ -29662,7 +29957,7 @@ function SpsMultiSelect(_G) {
     maxHeightOptionListRem,
     disableOptionsMemoization,
     "data-testid": testId
-  } = _H, rest = __objRest(_H, [
+  } = _P, rest = __objRest(_P, [
     "action",
     "captionKey",
     "className",
@@ -32091,8 +32386,8 @@ const propTypes$x = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   ref: ref(),
   value: propTypes$1G.exports.any
 });
-function SpsRadioButton(_I) {
-  var _J = _I, {
+function SpsRadioButton(_Q) {
+  var _R = _Q, {
     checked,
     className,
     "data-testid": testId,
@@ -32107,7 +32402,7 @@ function SpsRadioButton(_I) {
     ref: ref2,
     unsafelyReplaceClassName,
     value
-  } = _J, rest = __objRest(_J, [
+  } = _R, rest = __objRest(_R, [
     "checked",
     "className",
     "data-testid",
@@ -33116,8 +33411,8 @@ const propTypes$v = __spreadValues({
   widthPx: propTypes$1G.exports.number,
   widthRem: propTypes$1G.exports.number
 }, spsGlobalPropTypes);
-function SpsSortingHeaderCell(_K) {
-  var _L = _K, {
+function SpsSortingHeaderCell(_S) {
+  var _T = _S, {
     className,
     "data-testid": testId,
     unsafelyReplaceClassName,
@@ -33130,7 +33425,7 @@ function SpsSortingHeaderCell(_K) {
     widthPx,
     widthRem,
     style: style2
-  } = _L, rest = __objRest(_L, [
+  } = _T, rest = __objRest(_T, [
     "className",
     "data-testid",
     "unsafelyReplaceClassName",
@@ -33187,15 +33482,15 @@ const propTypes$u = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   sort: propTypes$1G.exports.arrayOf(impl()),
   onSortChange: fun()
 });
-function SpsSortingHeader(_M) {
-  var _N = _M, {
+function SpsSortingHeader(_U) {
+  var _V = _U, {
     className,
     "data-testid": testId,
     unsafelyReplaceClassName,
     sort,
     onSortChange,
     children
-  } = _N, rest = __objRest(_N, [
+  } = _V, rest = __objRest(_V, [
     "className",
     "data-testid",
     "unsafelyReplaceClassName",
@@ -33942,8 +34237,8 @@ const propTypes$o = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onClearCompleted: fun(),
   suppressTooltips: propTypes$1G.exports.bool
 });
-function SpsTaskQueue(_O) {
-  var _P = _O, {
+function SpsTaskQueue(_W) {
+  var _X = _W, {
     tasks = [],
     taskQueuePosition = Position.BOTTOM_RIGHT,
     notificationText,
@@ -33955,7 +34250,7 @@ function SpsTaskQueue(_O) {
     "data-testid": testId,
     unsafelyReplaceClassName,
     suppressTooltips = false
-  } = _P, rest = __objRest(_P, [
+  } = _X, rest = __objRest(_X, [
     "tasks",
     "taskQueuePosition",
     "notificationText",
@@ -34488,8 +34783,8 @@ const propTypes$n = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   value: propTypes$1G.exports.string,
   additionalText: propTypes$1G.exports.string
 });
-const SpsTextInput = React.forwardRef((_Q, ref2) => {
-  var _R = _Q, {
+const SpsTextInput = React.forwardRef((_Y, ref2) => {
+  var _Z = _Y, {
     className,
     disabled = false,
     formControl: formControl2,
@@ -34504,7 +34799,7 @@ const SpsTextInput = React.forwardRef((_Q, ref2) => {
     unsafelyReplaceClassName,
     value = "",
     additionalText
-  } = _R, rest = __objRest(_R, [
+  } = _Z, rest = __objRest(_Z, [
     "className",
     "disabled",
     "formControl",
@@ -34719,8 +35014,8 @@ const propTypes$m = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   value: propTypes$1G.exports.string,
   additionalText: propTypes$1G.exports.string
 });
-function SpsTextarea(_S) {
-  var _T = _S, {
+function SpsTextarea(__) {
+  var _$ = __, {
     className,
     disabled = false,
     formControl: formControl2,
@@ -34735,7 +35030,7 @@ function SpsTextarea(_S) {
     unsafelyReplaceClassName,
     value = "",
     additionalText
-  } = _T, rest = __objRest(_T, [
+  } = _$, rest = __objRest(_$, [
     "className",
     "disabled",
     "formControl",
@@ -34930,8 +35225,10 @@ const propsDoc$l = {
   href: "string",
   icon: { type: "ReactNodeOrRenderFn", required: "true" },
   error: "boolean",
+  errorIcon: "ReactNodeOrRenderFn",
   title: { type: "string", required: "true" },
   warning: "boolean",
+  warningIcon: "ReactNodeOrRenderFn",
   disabled: "boolean"
 };
 const propTypes$l = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
@@ -34939,8 +35236,10 @@ const propTypes$l = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   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,
+  warningIcon: nodeOrRenderFn,
   disabled: propTypes$1G.exports.bool
 });
 function SpsTile(props2) {
@@ -34950,9 +35249,11 @@ function SpsTile(props2) {
     target,
     icon,
     error = false,
+    errorIcon,
     title,
     unsafelyReplaceClassName,
     warning = false,
+    warningIcon,
     disabled = false
   } = _a, rest = __objRest(_a, [
     "className",
@@ -34960,9 +35261,11 @@ function SpsTile(props2) {
     "target",
     "icon",
     "error",
+    "errorIcon",
     "title",
     "unsafelyReplaceClassName",
     "warning",
+    "warningIcon",
     "disabled"
   ]);
   const classes = clsx(unsafelyReplaceClassName || "sps-tile", className, error && "sps-tile--error", warning && "sps-tile--warning", disabled && "sps-tile--disabled");
@@ -34980,11 +35283,11 @@ function SpsTile(props2) {
     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"
@@ -36329,8 +36632,8 @@ function Component() {
 };
 const propsDoc$7 = {};
 const propTypes$7 = __spreadValues({}, spsGlobalPropTypes);
-function SpsFilterPanel(_U) {
-  var _V = _U, { children, className } = _V, rest = __objRest(_V, ["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);
@@ -36356,8 +36659,8 @@ const propTypes$6 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onExpand: fun(),
   onCollapse: fun()
 });
-function SpsFilterPanelSection(_W) {
-  var _X = _W, {
+function SpsFilterPanelSection(_ca) {
+  var _da = _ca, {
     children,
     className,
     title,
@@ -36366,7 +36669,7 @@ function SpsFilterPanelSection(_W) {
     heightRem,
     onExpand,
     onCollapse
-  } = _X, rest = __objRest(_X, [
+  } = _da, rest = __objRest(_da, [
     "children",
     "className",
     "title",
@@ -36419,12 +36722,12 @@ const propsDoc$5 = {
 const propTypes$5 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onClear: fun()
 });
-function SpsFilterPanelCap(_Y) {
-  var _Z = _Y, {
+function SpsFilterPanelCap(_ea) {
+  var _fa = _ea, {
     children,
     className,
     onClear
-  } = _Z, rest = __objRest(_Z, [
+  } = _fa, rest = __objRest(_fa, [
     "children",
     "className",
     "onClear"
@@ -36783,14 +37086,14 @@ const propTypes$4 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   formMeta: impl(),
   onFilterChange: fun()
 });
-function SpsFilterPanelFilterBox(__) {
-  var _$ = __, {
+function SpsFilterPanelFilterBox(_ga) {
+  var _ha = _ga, {
     className,
     value,
     placeholder,
     formMeta,
     onFilterChange
-  } = _$, rest = __objRest(_$, [
+  } = _ha, rest = __objRest(_ha, [
     "className",
     "value",
     "placeholder",
@@ -36819,12 +37122,12 @@ const propsDoc$3 = {
 const propTypes$3 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   showCondition: propTypes$1G.exports.bool
 });
-function SpsConditionalField(_aa) {
-  var _ba = _aa, {
+function SpsConditionalField(_ia) {
+  var _ja = _ia, {
     showCondition = true,
     children,
     className
-  } = _ba, rest = __objRest(_ba, [
+  } = _ja, rest = __objRest(_ja, [
     "showCondition",
     "children",
     "className"
@@ -37304,6 +37607,23 @@ const MANIFEST = {
     examples: SpsZeroStateExamples
   }
 };
+const SpsContextBar = function({
+  viewing,
+  in: inProp,
+  onChange
+}) {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "sps-context-bar"
+  }, "Viewing", /* @__PURE__ */ React.createElement("span", {
+    className: "sps-context-bar__emphasized"
+  }, viewing), Boolean(inProp) && /* @__PURE__ */ React.createElement(React.Fragment, null, "in", /* @__PURE__ */ React.createElement("span", {
+    className: "sps-context-bar__emphasized"
+  }, inProp)), Boolean(onChange) && /* @__PURE__ */ React.createElement(SpsButton, {
+    className: "sps-context-bar__change-button",
+    kind: ButtonKind.LINK,
+    onClick: onChange
+  }, "Change"));
+};
 const propsDoc$2 = {
   disabled: "boolean",
   formMeta: "SpsFormFieldMeta<number>",
@@ -37325,8 +37645,8 @@ function strToDollars(str) {
 function dollarsToStr(dollars) {
   return typeof dollars === "number" ? dollars.toFixed(2) : "";
 }
-function SpsCurrencyInput(_ca) {
-  var _da = _ca, {
+function SpsCurrencyInput(_ka) {
+  var _la = _ka, {
     className,
     disabled = false,
     formMeta,
@@ -37336,7 +37656,7 @@ function SpsCurrencyInput(_ca) {
     ref: ref2,
     title,
     value
-  } = _da, rest = __objRest(_da, [
+  } = _la, rest = __objRest(_la, [
     "className",
     "disabled",
     "formMeta",
@@ -37681,4 +38001,4 @@ Object.assign(SpsVr, {
   propTypes,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
-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, 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, SpsContextBar, 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 };