@utahdts/utah-design-system 0.5.3 → 0.6.0-beta.0

package/dist/utah-design-system.es.js

@@ -1,12 +1,12 @@
+import { setUtahHeaderSettings, getUtahHeaderSettings } from "@utahdts/utah-design-system-header";
+import { baseSettings, childrenMenuTypes, events, renderDOMSingle } from "@utahdts/utah-design-system-header";
 import * as React from "react";
 import React__default, { useState, useEffect, useContext, useCallback, useMemo, useRef, useLayoutEffect } from "react";
-import { popupPlacement, setUtahHeaderSettings, getUtahHeaderSettings } from "@utahdts/utah-design-system-header";
-import { baseSettings, childrenMenuTypes, events, popupPlacement as popupPlacement2, renderDOMSingle } from "@utahdts/utah-design-system-header";
 import { useLocation, NavLink } from "react-router-dom";
 const name = "@utahdts/utah-design-system";
 const description = "Utah Design System React Library";
 const displayName = "Utah Design System React Library";
-const version$1 = "0.5.3";
+const version$1 = "0.6.0-beta.0";
 const exports = {
   ".": {
     "development-local": "./index.js",
@@ -64,27 +64,28 @@ const bugs = {
 };
 const homepage = "https://github.com/utahdts/utah-design-system";
 const dependencies = {
-  "@utahdts/utah-design-system-header": "0.4.3",
+  "@utahdts/utah-design-system-header": "0.6.0-beta.0",
   lodash: "4.17.21",
   "prop-types": "15.8.1",
   react: "18.x",
   "react-popper": "2.3.0",
   "react-router-dom": "6.x",
-  "use-immer": "0.9.0"
+  "use-immer": "0.9.0",
+  uuid: "9.0.0"
 };
 const devDependencies = {
-  "@types/react": "18.0.33",
+  "@types/react": "18.0.37",
   "@types/react-dom": "18.0.11",
   "@vitejs/plugin-react": "3.1.0",
-  "@vitest/coverage-istanbul": "0.29.8",
-  eslint: "8.37.0",
+  "@vitest/coverage-istanbul": "0.30.1",
+  eslint: "8.38.0",
   "eslint-config-airbnb": "19.0.4",
   "eslint-plugin-import": "2.27.5",
   "eslint-plugin-jsx-a11y": "6.7.1",
   "eslint-plugin-react": "7.32.2",
   "eslint-plugin-react-hooks": "4.6.0",
-  sass: "1.60.0",
-  vite: "4.2.1",
+  sass: "1.62.0",
+  vite: "4.2.2",
   "vite-plugin-eslint": "1.8.1",
   vitest: "0.30.1"
 };
@@ -109,20 +110,6 @@ const packageJson = {
   devDependencies,
   type
 };
-const BUTTON_APPEARANCE = {
-  SOLID: "solid",
-  OUTLINED: "outlined"
-};
-const BUTTON_TYPES = {
-  BUTTON: "button",
-  RESET: "reset",
-  SUBMIT: "submit"
-};
-const ICON_BUTTON_APPEARANCE = {
-  SOLID: "solid",
-  OUTLINED: "outlined",
-  BORDERLESS: "borderless"
-};
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var jsxRuntimeExports = {};
 var jsxRuntime = {
@@ -1064,7 +1051,7 @@ const Fragment = jsxRuntimeExports.Fragment;
 const jsx = jsxRuntimeExports.jsx;
 const jsxs = jsxRuntimeExports.jsxs;
 var propTypesExports = {};
-var propTypes$Q = {
+var propTypes$S = {
   get exports() {
     return propTypesExports;
   },
@@ -2023,309 +2010,24 @@ function requireFactoryWithThrowingShims() {
 if (process.env.NODE_ENV !== "production") {
   var ReactIs = requireReactIs();
   var throwOnDirectAccess = true;
-  propTypes$Q.exports = requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
+  propTypes$S.exports = requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
 } else {
-  propTypes$Q.exports = requireFactoryWithThrowingShims()();
-}
-var isArray$5 = Array.isArray;
-var isArray_1 = isArray$5;
-var isArray$4 = isArray_1;
-function castArray() {
-  if (!arguments.length) {
-    return [];
-  }
-  var value = arguments[0];
-  return isArray$4(value) ? value : [value];
-}
-var castArray_1 = castArray;
-function identity(value) {
-  return value;
-}
-var identity_1 = identity;
-var freeGlobal$1 = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
-var _freeGlobal = freeGlobal$1;
-var freeGlobal = _freeGlobal;
-var freeSelf = typeof self == "object" && self && self.Object === Object && self;
-var root$8 = freeGlobal || freeSelf || Function("return this")();
-var _root = root$8;
-var root$7 = _root;
-var Symbol$5 = root$7.Symbol;
-var _Symbol = Symbol$5;
-function arrayMap$1(array, iteratee) {
-  var index = -1, length = array == null ? 0 : array.length, result = Array(length);
-  while (++index < length) {
-    result[index] = iteratee(array[index], index, array);
-  }
-  return result;
-}
-var _arrayMap = arrayMap$1;
-var Symbol$4 = _Symbol;
-var objectProto$c = Object.prototype;
-var hasOwnProperty$9 = objectProto$c.hasOwnProperty;
-var nativeObjectToString$1 = objectProto$c.toString;
-var symToStringTag$1 = Symbol$4 ? Symbol$4.toStringTag : void 0;
-function getRawTag$1(value) {
-  var isOwn = hasOwnProperty$9.call(value, symToStringTag$1), tag = value[symToStringTag$1];
-  try {
-    value[symToStringTag$1] = void 0;
-    var unmasked = true;
-  } catch (e) {
-  }
-  var result = nativeObjectToString$1.call(value);
-  if (unmasked) {
-    if (isOwn) {
-      value[symToStringTag$1] = tag;
-    } else {
-      delete value[symToStringTag$1];
-    }
-  }
-  return result;
-}
-var _getRawTag = getRawTag$1;
-var objectProto$b = Object.prototype;
-var nativeObjectToString = objectProto$b.toString;
-function objectToString$1(value) {
-  return nativeObjectToString.call(value);
-}
-var _objectToString = objectToString$1;
-var Symbol$3 = _Symbol, getRawTag = _getRawTag, objectToString = _objectToString;
-var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
-var symToStringTag = Symbol$3 ? Symbol$3.toStringTag : void 0;
-function baseGetTag$6(value) {
-  if (value == null) {
-    return value === void 0 ? undefinedTag : nullTag;
-  }
-  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
-}
-var _baseGetTag = baseGetTag$6;
-function isObjectLike$7(value) {
-  return value != null && typeof value == "object";
-}
-var isObjectLike_1 = isObjectLike$7;
-var baseGetTag$5 = _baseGetTag, isObjectLike$6 = isObjectLike_1;
-var symbolTag$2 = "[object Symbol]";
-function isSymbol$1(value) {
-  return typeof value == "symbol" || isObjectLike$6(value) && baseGetTag$5(value) == symbolTag$2;
-}
-var isSymbol_1 = isSymbol$1;
-var Symbol$2 = _Symbol, arrayMap = _arrayMap, isArray$3 = isArray_1, isSymbol = isSymbol_1;
-var INFINITY = 1 / 0;
-var symbolProto$1 = Symbol$2 ? Symbol$2.prototype : void 0, symbolToString = symbolProto$1 ? symbolProto$1.toString : void 0;
-function baseToString$3(value) {
-  if (typeof value == "string") {
-    return value;
-  }
-  if (isArray$3(value)) {
-    return arrayMap(value, baseToString$3) + "";
-  }
-  if (isSymbol(value)) {
-    return symbolToString ? symbolToString.call(value) : "";
-  }
-  var result = value + "";
-  return result == "0" && 1 / value == -INFINITY ? "-0" : result;
-}
-var _baseToString = baseToString$3;
-var reWhitespace = /\s/;
-function trimmedEndIndex$1(string) {
-  var index = string.length;
-  while (index-- && reWhitespace.test(string.charAt(index))) {
-  }
-  return index;
-}
-var _trimmedEndIndex = trimmedEndIndex$1;
-var trimmedEndIndex = _trimmedEndIndex;
-var reTrimStart = /^\s+/;
-function baseTrim$1(string) {
-  return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
-}
-var _baseTrim = baseTrim$1;
-function baseSlice$1(array, start2, end2) {
-  var index = -1, length = array.length;
-  if (start2 < 0) {
-    start2 = -start2 > length ? 0 : length + start2;
-  }
-  end2 = end2 > length ? length : end2;
-  if (end2 < 0) {
-    end2 += length;
-  }
-  length = start2 > end2 ? 0 : end2 - start2 >>> 0;
-  start2 >>>= 0;
-  var result = Array(length);
-  while (++index < length) {
-    result[index] = array[index + start2];
-  }
-  return result;
-}
-var _baseSlice = baseSlice$1;
-var baseSlice = _baseSlice;
-function castSlice$2(array, start2, end2) {
-  var length = array.length;
-  end2 = end2 === void 0 ? length : end2;
-  return !start2 && end2 >= length ? array : baseSlice(array, start2, end2);
-}
-var _castSlice = castSlice$2;
-function baseFindIndex$1(array, predicate, fromIndex, fromRight) {
-  var length = array.length, index = fromIndex + (fromRight ? 1 : -1);
-  while (fromRight ? index-- : ++index < length) {
-    if (predicate(array[index], index, array)) {
-      return index;
-    }
-  }
-  return -1;
-}
-var _baseFindIndex = baseFindIndex$1;
-function baseIsNaN$1(value) {
-  return value !== value;
-}
-var _baseIsNaN = baseIsNaN$1;
-function strictIndexOf$1(array, value, fromIndex) {
-  var index = fromIndex - 1, length = array.length;
-  while (++index < length) {
-    if (array[index] === value) {
-      return index;
-    }
-  }
-  return -1;
-}
-var _strictIndexOf = strictIndexOf$1;
-var baseFindIndex = _baseFindIndex, baseIsNaN = _baseIsNaN, strictIndexOf = _strictIndexOf;
-function baseIndexOf$2(array, value, fromIndex) {
-  return value === value ? strictIndexOf(array, value, fromIndex) : baseFindIndex(array, baseIsNaN, fromIndex);
-}
-var _baseIndexOf = baseIndexOf$2;
-var baseIndexOf$1 = _baseIndexOf;
-function charsEndIndex$1(strSymbols, chrSymbols) {
-  var index = strSymbols.length;
-  while (index-- && baseIndexOf$1(chrSymbols, strSymbols[index], 0) > -1) {
-  }
-  return index;
-}
-var _charsEndIndex = charsEndIndex$1;
-var baseIndexOf = _baseIndexOf;
-function charsStartIndex$1(strSymbols, chrSymbols) {
-  var index = -1, length = strSymbols.length;
-  while (++index < length && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {
-  }
-  return index;
-}
-var _charsStartIndex = charsStartIndex$1;
-function asciiToArray$1(string) {
-  return string.split("");
-}
-var _asciiToArray = asciiToArray$1;
-var rsAstralRange$1 = "\\ud800-\\udfff", rsComboMarksRange$1 = "\\u0300-\\u036f", reComboHalfMarksRange$1 = "\\ufe20-\\ufe2f", rsComboSymbolsRange$1 = "\\u20d0-\\u20ff", rsComboRange$1 = rsComboMarksRange$1 + reComboHalfMarksRange$1 + rsComboSymbolsRange$1, rsVarRange$1 = "\\ufe0e\\ufe0f";
-var rsZWJ$1 = "\\u200d";
-var reHasUnicode = RegExp("[" + rsZWJ$1 + rsAstralRange$1 + rsComboRange$1 + rsVarRange$1 + "]");
-function hasUnicode$2(string) {
-  return reHasUnicode.test(string);
-}
-var _hasUnicode = hasUnicode$2;
-var rsAstralRange = "\\ud800-\\udfff", rsComboMarksRange = "\\u0300-\\u036f", reComboHalfMarksRange = "\\ufe20-\\ufe2f", rsComboSymbolsRange = "\\u20d0-\\u20ff", rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange, rsVarRange = "\\ufe0e\\ufe0f";
-var rsAstral = "[" + rsAstralRange + "]", rsCombo = "[" + rsComboRange + "]", rsFitz = "\\ud83c[\\udffb-\\udfff]", rsModifier = "(?:" + rsCombo + "|" + rsFitz + ")", rsNonAstral = "[^" + rsAstralRange + "]", rsRegional = "(?:\\ud83c[\\udde6-\\uddff]){2}", rsSurrPair = "[\\ud800-\\udbff][\\udc00-\\udfff]", rsZWJ = "\\u200d";
-var reOptMod = rsModifier + "?", rsOptVar = "[" + rsVarRange + "]?", rsOptJoin = "(?:" + rsZWJ + "(?:" + [rsNonAstral, rsRegional, rsSurrPair].join("|") + ")" + rsOptVar + reOptMod + ")*", rsSeq = rsOptVar + reOptMod + rsOptJoin, rsSymbol = "(?:" + [rsNonAstral + rsCombo + "?", rsCombo, rsRegional, rsSurrPair, rsAstral].join("|") + ")";
-var reUnicode = RegExp(rsFitz + "(?=" + rsFitz + ")|" + rsSymbol + rsSeq, "g");
-function unicodeToArray$1(string) {
-  return string.match(reUnicode) || [];
-}
-var _unicodeToArray = unicodeToArray$1;
-var asciiToArray = _asciiToArray, hasUnicode$1 = _hasUnicode, unicodeToArray = _unicodeToArray;
-function stringToArray$2(string) {
-  return hasUnicode$1(string) ? unicodeToArray(string) : asciiToArray(string);
-}
-var _stringToArray = stringToArray$2;
-var baseToString$2 = _baseToString;
-function toString$2(value) {
-  return value == null ? "" : baseToString$2(value);
-}
-var toString_1 = toString$2;
-var baseToString$1 = _baseToString, baseTrim = _baseTrim, castSlice$1 = _castSlice, charsEndIndex = _charsEndIndex, charsStartIndex = _charsStartIndex, stringToArray$1 = _stringToArray, toString$1 = toString_1;
-function trim(string, chars, guard) {
-  string = toString$1(string);
-  if (string && (guard || chars === void 0)) {
-    return baseTrim(string);
-  }
-  if (!string || !(chars = baseToString$1(chars))) {
-    return string;
-  }
-  var strSymbols = stringToArray$1(string), chrSymbols = stringToArray$1(chars), start2 = charsStartIndex(strSymbols, chrSymbols), end2 = charsEndIndex(strSymbols, chrSymbols) + 1;
-  return castSlice$1(strSymbols, start2, end2).join("");
-}
-var trim_1 = trim;
-function joinClassNames(...classNames) {
-  return (
-    // convert passed in parameters to an array
-    castArray_1(Array.from(classNames)).flat(Infinity).map((className) => typeof className === "string" ? trim_1(className) : className).filter(identity_1).join(" ")
-  );
-}
-function handleEvent(func) {
-  return (e) => {
-    var _a;
-    if (e.preventDefault) {
-      e.preventDefault();
-    }
-    if (e.stopPropagation) {
-      e.stopPropagation();
-    }
-    if ((_a = e == null ? void 0 : e.nativeEvent) == null ? void 0 : _a.stopImmediatePropagation) {
-      e.nativeEvent.stopImmediatePropagation();
-    }
-    func.call(e.target, e);
-  };
+  propTypes$S.exports = requireFactoryWithThrowingShims()();
 }
-const propTypes$P = {
-  children: propTypesExports.node.isRequired,
-  className: propTypesExports.string,
-  contentClassName: propTypesExports.string,
-  headerClassName: propTypesExports.string,
-  headerContent: propTypesExports.node.isRequired,
-  isOpen: propTypesExports.bool,
-  onToggle: propTypesExports.func
+const BUTTON_APPEARANCE = {
+  SOLID: "solid",
+  OUTLINED: "outlined"
 };
-const defaultProps$P = {
-  className: void 0,
-  contentClassName: void 0,
-  headerClassName: void 0,
-  isOpen: void 0,
-  onToggle: void 0
+const BUTTON_TYPES = {
+  BUTTON: "button",
+  RESET: "reset",
+  SUBMIT: "submit"
+};
+const ICON_BUTTON_APPEARANCE = {
+  SOLID: "solid",
+  OUTLINED: "outlined",
+  BORDERLESS: "borderless"
 };
-function Accordion({
-  children,
-  className,
-  contentClassName,
-  headerClassName,
-  headerContent,
-  isOpen,
-  onToggle
-}) {
-  const [stateIsOpen, setStateIsOpen] = useState(isOpen || false);
-  useEffect(() => {
-    setStateIsOpen(isOpen);
-  }, [isOpen]);
-  function toggleAccordion() {
-    if (onToggle) {
-      onToggle(stateIsOpen);
-    } else {
-      setStateIsOpen(!stateIsOpen);
-    }
-  }
-  return /* @__PURE__ */ jsxs("div", { className: joinClassNames(["accordion", className]), children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        className: joinClassNames(["accordion__header", headerClassName]),
-        type: "button",
-        onClick: handleEvent(toggleAccordion),
-        children: [
-          headerContent,
-          /* @__PURE__ */ jsx("span", { className: `material-symbols-outlined icon-button__icon ${stateIsOpen ? "" : "icon-button__icon--rotate180"}`, children: "expand_circle_down" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: joinClassNames(["accordion__content", contentClassName, stateIsOpen ? "accordion__content--open" : ""]), children })
-  ] });
-}
-Accordion.propTypes = propTypes$P;
-Accordion.defaultProps = defaultProps$P;
 const componentColors = {
   PRIMARY: "primary",
   SECONDARY: "secondary",
@@ -2347,7 +2049,252 @@ const RefShape = propTypesExports.oneOfType([
   // Or the instance of a DOM native element (see the note about SSR)
   propTypesExports.shape({ current: propTypesExports.instanceOf(Element) })
 ]);
-const propTypes$O = {
+function handleEvent(func) {
+  return (e) => {
+    var _a;
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+    if (e.stopPropagation) {
+      e.stopPropagation();
+    }
+    if ((_a = e == null ? void 0 : e.nativeEvent) == null ? void 0 : _a.stopImmediatePropagation) {
+      e.nativeEvent.stopImmediatePropagation();
+    }
+    func.call(e.target, e);
+  };
+}
+var isArray$5 = Array.isArray;
+var isArray_1 = isArray$5;
+var isArray$4 = isArray_1;
+function castArray() {
+  if (!arguments.length) {
+    return [];
+  }
+  var value = arguments[0];
+  return isArray$4(value) ? value : [value];
+}
+var castArray_1 = castArray;
+function identity(value) {
+  return value;
+}
+var identity_1 = identity;
+var freeGlobal$1 = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+var _freeGlobal = freeGlobal$1;
+var freeGlobal = _freeGlobal;
+var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+var root$8 = freeGlobal || freeSelf || Function("return this")();
+var _root = root$8;
+var root$7 = _root;
+var Symbol$5 = root$7.Symbol;
+var _Symbol = Symbol$5;
+function arrayMap$1(array, iteratee) {
+  var index = -1, length = array == null ? 0 : array.length, result = Array(length);
+  while (++index < length) {
+    result[index] = iteratee(array[index], index, array);
+  }
+  return result;
+}
+var _arrayMap = arrayMap$1;
+var Symbol$4 = _Symbol;
+var objectProto$c = Object.prototype;
+var hasOwnProperty$9 = objectProto$c.hasOwnProperty;
+var nativeObjectToString$1 = objectProto$c.toString;
+var symToStringTag$1 = Symbol$4 ? Symbol$4.toStringTag : void 0;
+function getRawTag$1(value) {
+  var isOwn = hasOwnProperty$9.call(value, symToStringTag$1), tag = value[symToStringTag$1];
+  try {
+    value[symToStringTag$1] = void 0;
+    var unmasked = true;
+  } catch (e) {
+  }
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+var _getRawTag = getRawTag$1;
+var objectProto$b = Object.prototype;
+var nativeObjectToString = objectProto$b.toString;
+function objectToString$1(value) {
+  return nativeObjectToString.call(value);
+}
+var _objectToString = objectToString$1;
+var Symbol$3 = _Symbol, getRawTag = _getRawTag, objectToString = _objectToString;
+var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
+var symToStringTag = Symbol$3 ? Symbol$3.toStringTag : void 0;
+function baseGetTag$6(value) {
+  if (value == null) {
+    return value === void 0 ? undefinedTag : nullTag;
+  }
+  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+}
+var _baseGetTag = baseGetTag$6;
+function isObjectLike$7(value) {
+  return value != null && typeof value == "object";
+}
+var isObjectLike_1 = isObjectLike$7;
+var baseGetTag$5 = _baseGetTag, isObjectLike$6 = isObjectLike_1;
+var symbolTag$2 = "[object Symbol]";
+function isSymbol$1(value) {
+  return typeof value == "symbol" || isObjectLike$6(value) && baseGetTag$5(value) == symbolTag$2;
+}
+var isSymbol_1 = isSymbol$1;
+var Symbol$2 = _Symbol, arrayMap = _arrayMap, isArray$3 = isArray_1, isSymbol = isSymbol_1;
+var INFINITY$1 = 1 / 0;
+var symbolProto$1 = Symbol$2 ? Symbol$2.prototype : void 0, symbolToString = symbolProto$1 ? symbolProto$1.toString : void 0;
+function baseToString$3(value) {
+  if (typeof value == "string") {
+    return value;
+  }
+  if (isArray$3(value)) {
+    return arrayMap(value, baseToString$3) + "";
+  }
+  if (isSymbol(value)) {
+    return symbolToString ? symbolToString.call(value) : "";
+  }
+  var result = value + "";
+  return result == "0" && 1 / value == -INFINITY$1 ? "-0" : result;
+}
+var _baseToString = baseToString$3;
+var reWhitespace = /\s/;
+function trimmedEndIndex$1(string) {
+  var index = string.length;
+  while (index-- && reWhitespace.test(string.charAt(index))) {
+  }
+  return index;
+}
+var _trimmedEndIndex = trimmedEndIndex$1;
+var trimmedEndIndex = _trimmedEndIndex;
+var reTrimStart = /^\s+/;
+function baseTrim$1(string) {
+  return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
+}
+var _baseTrim = baseTrim$1;
+function baseSlice$1(array, start2, end2) {
+  var index = -1, length = array.length;
+  if (start2 < 0) {
+    start2 = -start2 > length ? 0 : length + start2;
+  }
+  end2 = end2 > length ? length : end2;
+  if (end2 < 0) {
+    end2 += length;
+  }
+  length = start2 > end2 ? 0 : end2 - start2 >>> 0;
+  start2 >>>= 0;
+  var result = Array(length);
+  while (++index < length) {
+    result[index] = array[index + start2];
+  }
+  return result;
+}
+var _baseSlice = baseSlice$1;
+var baseSlice = _baseSlice;
+function castSlice$2(array, start2, end2) {
+  var length = array.length;
+  end2 = end2 === void 0 ? length : end2;
+  return !start2 && end2 >= length ? array : baseSlice(array, start2, end2);
+}
+var _castSlice = castSlice$2;
+function baseFindIndex$1(array, predicate, fromIndex, fromRight) {
+  var length = array.length, index = fromIndex + (fromRight ? 1 : -1);
+  while (fromRight ? index-- : ++index < length) {
+    if (predicate(array[index], index, array)) {
+      return index;
+    }
+  }
+  return -1;
+}
+var _baseFindIndex = baseFindIndex$1;
+function baseIsNaN$1(value) {
+  return value !== value;
+}
+var _baseIsNaN = baseIsNaN$1;
+function strictIndexOf$1(array, value, fromIndex) {
+  var index = fromIndex - 1, length = array.length;
+  while (++index < length) {
+    if (array[index] === value) {
+      return index;
+    }
+  }
+  return -1;
+}
+var _strictIndexOf = strictIndexOf$1;
+var baseFindIndex = _baseFindIndex, baseIsNaN = _baseIsNaN, strictIndexOf = _strictIndexOf;
+function baseIndexOf$3(array, value, fromIndex) {
+  return value === value ? strictIndexOf(array, value, fromIndex) : baseFindIndex(array, baseIsNaN, fromIndex);
+}
+var _baseIndexOf = baseIndexOf$3;
+var baseIndexOf$2 = _baseIndexOf;
+function charsEndIndex$1(strSymbols, chrSymbols) {
+  var index = strSymbols.length;
+  while (index-- && baseIndexOf$2(chrSymbols, strSymbols[index], 0) > -1) {
+  }
+  return index;
+}
+var _charsEndIndex = charsEndIndex$1;
+var baseIndexOf$1 = _baseIndexOf;
+function charsStartIndex$1(strSymbols, chrSymbols) {
+  var index = -1, length = strSymbols.length;
+  while (++index < length && baseIndexOf$1(chrSymbols, strSymbols[index], 0) > -1) {
+  }
+  return index;
+}
+var _charsStartIndex = charsStartIndex$1;
+function asciiToArray$1(string) {
+  return string.split("");
+}
+var _asciiToArray = asciiToArray$1;
+var rsAstralRange$1 = "\\ud800-\\udfff", rsComboMarksRange$1 = "\\u0300-\\u036f", reComboHalfMarksRange$1 = "\\ufe20-\\ufe2f", rsComboSymbolsRange$1 = "\\u20d0-\\u20ff", rsComboRange$1 = rsComboMarksRange$1 + reComboHalfMarksRange$1 + rsComboSymbolsRange$1, rsVarRange$1 = "\\ufe0e\\ufe0f";
+var rsZWJ$1 = "\\u200d";
+var reHasUnicode = RegExp("[" + rsZWJ$1 + rsAstralRange$1 + rsComboRange$1 + rsVarRange$1 + "]");
+function hasUnicode$2(string) {
+  return reHasUnicode.test(string);
+}
+var _hasUnicode = hasUnicode$2;
+var rsAstralRange = "\\ud800-\\udfff", rsComboMarksRange = "\\u0300-\\u036f", reComboHalfMarksRange = "\\ufe20-\\ufe2f", rsComboSymbolsRange = "\\u20d0-\\u20ff", rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange, rsVarRange = "\\ufe0e\\ufe0f";
+var rsAstral = "[" + rsAstralRange + "]", rsCombo = "[" + rsComboRange + "]", rsFitz = "\\ud83c[\\udffb-\\udfff]", rsModifier = "(?:" + rsCombo + "|" + rsFitz + ")", rsNonAstral = "[^" + rsAstralRange + "]", rsRegional = "(?:\\ud83c[\\udde6-\\uddff]){2}", rsSurrPair = "[\\ud800-\\udbff][\\udc00-\\udfff]", rsZWJ = "\\u200d";
+var reOptMod = rsModifier + "?", rsOptVar = "[" + rsVarRange + "]?", rsOptJoin = "(?:" + rsZWJ + "(?:" + [rsNonAstral, rsRegional, rsSurrPair].join("|") + ")" + rsOptVar + reOptMod + ")*", rsSeq = rsOptVar + reOptMod + rsOptJoin, rsSymbol = "(?:" + [rsNonAstral + rsCombo + "?", rsCombo, rsRegional, rsSurrPair, rsAstral].join("|") + ")";
+var reUnicode = RegExp(rsFitz + "(?=" + rsFitz + ")|" + rsSymbol + rsSeq, "g");
+function unicodeToArray$1(string) {
+  return string.match(reUnicode) || [];
+}
+var _unicodeToArray = unicodeToArray$1;
+var asciiToArray = _asciiToArray, hasUnicode$1 = _hasUnicode, unicodeToArray = _unicodeToArray;
+function stringToArray$2(string) {
+  return hasUnicode$1(string) ? unicodeToArray(string) : asciiToArray(string);
+}
+var _stringToArray = stringToArray$2;
+var baseToString$2 = _baseToString;
+function toString$2(value) {
+  return value == null ? "" : baseToString$2(value);
+}
+var toString_1 = toString$2;
+var baseToString$1 = _baseToString, baseTrim = _baseTrim, castSlice$1 = _castSlice, charsEndIndex = _charsEndIndex, charsStartIndex = _charsStartIndex, stringToArray$1 = _stringToArray, toString$1 = toString_1;
+function trim(string, chars, guard) {
+  string = toString$1(string);
+  if (string && (guard || chars === void 0)) {
+    return baseTrim(string);
+  }
+  if (!string || !(chars = baseToString$1(chars))) {
+    return string;
+  }
+  var strSymbols = stringToArray$1(string), chrSymbols = stringToArray$1(chars), start2 = charsStartIndex(strSymbols, chrSymbols), end2 = charsEndIndex(strSymbols, chrSymbols) + 1;
+  return castSlice$1(strSymbols, start2, end2).join("");
+}
+var trim_1 = trim;
+function joinClassNames(...classNames) {
+  return (
+    // convert passed in parameters to an array
+    castArray_1(Array.from(classNames)).flat(Infinity).map((className) => typeof className === "string" ? trim_1(className) : className).filter(identity_1).join(" ")
+  );
+}
+const propTypes$R = {
   children: propTypesExports.node,
   className: propTypesExports.string,
   id: propTypesExports.string,
@@ -2365,7 +2312,7 @@ const propTypes$O = {
     return false;
   }
 };
-const defaultProps$O = {
+const defaultProps$R = {
   children: null,
   className: null,
   id: null,
@@ -2408,9 +2355,9 @@ function Spinner({
     }
   );
 }
-Spinner.propTypes = propTypes$O;
-Spinner.defaultProps = defaultProps$O;
-const propTypes$N = {
+Spinner.propTypes = propTypes$R;
+Spinner.defaultProps = defaultProps$R;
+const propTypes$Q = {
   // the appearance of the button
   appearance: propTypesExports.oneOf([
     BUTTON_APPEARANCE.OUTLINED,
@@ -2454,7 +2401,7 @@ const propTypes$N = {
     BUTTON_TYPES.SUBMIT
   ])
 };
-const defaultProps$N = {
+const defaultProps$Q = {
   appearance: BUTTON_APPEARANCE.OUTLINED,
   className: null,
   color: componentColors.NONE,
@@ -2511,257 +2458,9 @@ function Button({
     }
   );
 }
-Button.propTypes = propTypes$N;
-Button.defaultProps = defaultProps$N;
-function calculateMenuItemsParents({ parentLinks = [], menuItems }) {
-  return (menuItems || []).map((menuItem2) => {
-    const menuItemLink = menuItem2.link || `menuHeader::${menuItem2.title}`;
-    return {
-      ...menuItem2,
-      link: menuItemLink,
-      parentLinks: [...menuItem2.parentLinks || [], ...parentLinks],
-      children: menuItem2.children && calculateMenuItemsParents({
-        parentLinks: [
-          ...menuItem2.parentLinks || [],
-          ...parentLinks,
-          menuItemLink
-        ].filter(identity_1),
-        menuItems: menuItem2.children
-      })
-    };
-  });
-}
-const FormContext = React__default.createContext();
-function eq$3(value, other) {
-  return value === other || value !== value && other !== other;
-}
-var eq_1 = eq$3;
-function isObject$6(value) {
-  var type2 = typeof value;
-  return value != null && (type2 == "object" || type2 == "function");
-}
-var isObject_1 = isObject$6;
-var baseGetTag$4 = _baseGetTag, isObject$5 = isObject_1;
-var asyncTag = "[object AsyncFunction]", funcTag$2 = "[object Function]", genTag$1 = "[object GeneratorFunction]", proxyTag = "[object Proxy]";
-function isFunction$2(value) {
-  if (!isObject$5(value)) {
-    return false;
-  }
-  var tag = baseGetTag$4(value);
-  return tag == funcTag$2 || tag == genTag$1 || tag == asyncTag || tag == proxyTag;
-}
-var isFunction_1 = isFunction$2;
-var MAX_SAFE_INTEGER$1 = 9007199254740991;
-function isLength$2(value) {
-  return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER$1;
-}
-var isLength_1 = isLength$2;
-var isFunction$1 = isFunction_1, isLength$1 = isLength_1;
-function isArrayLike$3(value) {
-  return value != null && isLength$1(value.length) && !isFunction$1(value);
-}
-var isArrayLike_1 = isArrayLike$3;
-var MAX_SAFE_INTEGER = 9007199254740991;
-var reIsUint = /^(?:0|[1-9]\d*)$/;
-function isIndex$2(value, length) {
-  var type2 = typeof value;
-  length = length == null ? MAX_SAFE_INTEGER : length;
-  return !!length && (type2 == "number" || type2 != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
-}
-var _isIndex = isIndex$2;
-var eq$2 = eq_1, isArrayLike$2 = isArrayLike_1, isIndex$1 = _isIndex, isObject$4 = isObject_1;
-function isIterateeCall$1(value, index, object) {
-  if (!isObject$4(object)) {
-    return false;
-  }
-  var type2 = typeof index;
-  if (type2 == "number" ? isArrayLike$2(object) && isIndex$1(index, object.length) : type2 == "string" && index in object) {
-    return eq$2(object[index], value);
-  }
-  return false;
-}
-var _isIterateeCall = isIterateeCall$1;
-var baseGetTag$3 = _baseGetTag, isObjectLike$5 = isObjectLike_1;
-var regexpTag$3 = "[object RegExp]";
-function baseIsRegExp$1(value) {
-  return isObjectLike$5(value) && baseGetTag$3(value) == regexpTag$3;
-}
-var _baseIsRegExp = baseIsRegExp$1;
-function baseUnary$4(func) {
-  return function(value) {
-    return func(value);
-  };
-}
-var _baseUnary = baseUnary$4;
-var _nodeUtilExports = {};
-var _nodeUtil = {
-  get exports() {
-    return _nodeUtilExports;
-  },
-  set exports(v) {
-    _nodeUtilExports = v;
-  }
-};
-(function(module, exports2) {
-  var freeGlobal2 = _freeGlobal;
-  var freeExports = exports2 && !exports2.nodeType && exports2;
-  var freeModule = freeExports && true && module && !module.nodeType && module;
-  var moduleExports = freeModule && freeModule.exports === freeExports;
-  var freeProcess = moduleExports && freeGlobal2.process;
-  var nodeUtil2 = function() {
-    try {
-      var types = freeModule && freeModule.require && freeModule.require("util").types;
-      if (types) {
-        return types;
-      }
-      return freeProcess && freeProcess.binding && freeProcess.binding("util");
-    } catch (e) {
-    }
-  }();
-  module.exports = nodeUtil2;
-})(_nodeUtil, _nodeUtilExports);
-var baseIsRegExp = _baseIsRegExp, baseUnary$3 = _baseUnary, nodeUtil$3 = _nodeUtilExports;
-var nodeIsRegExp = nodeUtil$3 && nodeUtil$3.isRegExp;
-var isRegExp$1 = nodeIsRegExp ? baseUnary$3(nodeIsRegExp) : baseIsRegExp;
-var isRegExp_1 = isRegExp$1;
-var baseToString = _baseToString, castSlice = _castSlice, hasUnicode = _hasUnicode, isIterateeCall = _isIterateeCall, isRegExp = isRegExp_1, stringToArray = _stringToArray, toString = toString_1;
-var MAX_ARRAY_LENGTH = 4294967295;
-function split(string, separator, limit) {
-  if (limit && typeof limit != "number" && isIterateeCall(string, separator, limit)) {
-    separator = limit = void 0;
-  }
-  limit = limit === void 0 ? MAX_ARRAY_LENGTH : limit >>> 0;
-  if (!limit) {
-    return [];
-  }
-  string = toString(string);
-  if (string && (typeof separator == "string" || separator != null && !isRegExp(separator))) {
-    separator = baseToString(separator);
-    if (!separator && hasUnicode(string)) {
-      return castSlice(stringToArray(string), 0, limit);
-    }
-  }
-  return string.split(separator, limit);
-}
-var split_1 = split;
-function valueAtPath({ object, path }) {
-  return split_1(path, ".").reduce((obj, field) => field && obj ? obj[field] : obj, object);
-}
-function onKeyPress({ targetKey, func }) {
-  return (e) => {
-    if (e.key === targetKey) {
-      func(e);
-    }
-  };
-}
-function useCurrentValuesFromForm({
-  errorMessage,
-  id,
-  onChange,
-  onSubmit,
-  value
-}) {
-  if (!id) {
-    console.error("useCurrentValuesFromForm: `id` is required");
-  }
-  const {
-    onChange: contextOnChange,
-    onSubmit: contextOnSubmit,
-    state,
-    validationErrors
-  } = useContext(FormContext) || {};
-  const currentOnSubmit = onSubmit ?? contextOnSubmit;
-  return {
-    currentErrorMessage: errorMessage ?? (validationErrors && validationErrors[id]),
-    currentOnChange: onChange ?? (contextOnChange && ((e, newValue) => contextOnChange({ e, id, newValue }))),
-    currentOnSubmit,
-    currentValue: (value ?? (state && valueAtPath({ object: state, path: id }))) || "",
-    currentOnFormKeyPress: onKeyPress({ targetKey: "Enter", func: (e) => currentOnSubmit && currentOnSubmit(e) })
-  };
-}
-const propTypes$M = {
-  errorMessage: propTypesExports.string,
-  id: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]).isRequired
-};
-const defaultProps$M = {
-  errorMessage: null
-};
-function ErrorMessage({ errorMessage, id }) {
-  return errorMessage ? /* @__PURE__ */ jsx("div", { className: "input-wrapper__error-message", id: `${id}-error`, children: errorMessage }) : null;
-}
-ErrorMessage.propTypes = propTypes$M;
-ErrorMessage.defaultProps = defaultProps$M;
-const propTypes$L = {
-  className: propTypesExports.string,
-  errorMessage: propTypesExports.string,
-  innerRef: RefShape,
-  // id of the input; when tied to a Form the `id` is also the 'dot' path to the data in the form's state: ie person.contact.address.line1
-  id: propTypesExports.string.isRequired,
-  isDisabled: propTypesExports.bool,
-  label: propTypesExports.string.isRequired,
-  // e => ... do something with e.target.value ...; can be omitted so as to be uncontrolled OR if changes are sent through form's onChange
-  onChange: propTypesExports.func,
-  // when enter key pressed in field, submit the form
-  onSubmit: propTypesExports.func,
-  value: propTypesExports.bool
-};
-const defaultProps$L = {
-  className: null,
-  errorMessage: null,
-  innerRef: null,
-  isDisabled: false,
-  onChange: null,
-  onSubmit: null,
-  value: null
-};
-function CheckBox({
-  className,
-  errorMessage,
-  innerRef,
-  id,
-  isDisabled,
-  label,
-  onChange,
-  onSubmit,
-  value,
-  ...rest
-}) {
-  const {
-    currentErrorMessage,
-    currentOnChange,
-    currentOnFormKeyPress,
-    currentValue
-  } = useCurrentValuesFromForm({
-    errorMessage,
-    id,
-    onChange,
-    onSubmit,
-    value
-  });
-  return /* @__PURE__ */ jsxs("div", { className: "input-wrapper input-wrapper--checkbox", children: [
-    /* @__PURE__ */ jsx("label", { htmlFor: id, children: label }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        "aria-describedby": currentErrorMessage ? `${id}-error` : null,
-        checked: currentValue,
-        className,
-        disabled: isDisabled,
-        id,
-        name: id,
-        onChange: currentOnChange,
-        onKeyPress: currentOnFormKeyPress,
-        ref: innerRef,
-        type: "checkbox",
-        ...rest
-      }
-    ),
-    /* @__PURE__ */ jsx(ErrorMessage, { errorMessage: currentErrorMessage, id })
-  ] });
-}
-CheckBox.propTypes = propTypes$L;
-CheckBox.defaultProps = defaultProps$L;
-const propTypes$K = {
+Button.propTypes = propTypes$Q;
+Button.defaultProps = defaultProps$Q;
+const propTypes$P = {
   appearance: propTypesExports.oneOf(["solid", "outlined"]),
   // most often is the title of the button, but can also contain most anything
   children: propTypesExports.node.isRequired,
@@ -2786,7 +2485,7 @@ const propTypes$K = {
   // button type
   type: propTypesExports.oneOf(["button", "reset", "submit"])
 };
-const defaultProps$K = {
+const defaultProps$P = {
   appearance: "outlined",
   className: null,
   color: "none",
@@ -2839,34 +2538,195 @@ function ConfirmationButton({
     }
   );
 }
-ConfirmationButton.propTypes = propTypes$K;
-ConfirmationButton.defaultProps = defaultProps$K;
-const propTypes$J = {
-  content: propTypesExports.func.isRequired,
-  contentRef: RefShape.isRequired,
-  sidePanelRightContent: propTypesExports.element.isRequired,
-  sidePanelLeftContent: propTypesExports.element.isRequired
-};
-const defaultProps$J = {};
-function DocumentationTemplate({
-  content: Content,
-  contentRef,
-  sidePanelRightContent,
-  sidePanelLeftContent
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "documentation-template__wrapper", children: /* @__PURE__ */ jsxs("div", { className: "documentation-template", children: [
-    /* @__PURE__ */ jsx("div", { className: "documentation-template__side-panel-left", children: sidePanelLeftContent }),
-    /* @__PURE__ */ jsx("main", { className: "documentation-template__content", ref: contentRef, children: /* @__PURE__ */ jsx(Content, {}) }),
-    /* @__PURE__ */ jsx("div", { className: "documentation-template__side-panel-right", children: sidePanelRightContent })
-  ] }) });
-}
-DocumentationTemplate.propTypes = propTypes$J;
-DocumentationTemplate.defaultProps = defaultProps$J;
-var NOTHING = Symbol.for("immer-nothing");
-var DRAFTABLE = Symbol.for("immer-draftable");
-var DRAFT_STATE = Symbol.for("immer-state");
-var errors = process.env.NODE_ENV !== "production" ? [
-  // All error codes, starting by 0:
+ConfirmationButton.propTypes = propTypes$P;
+ConfirmationButton.defaultProps = defaultProps$P;
+const propTypes$O = {
+  // the appearance of the button
+  appearance: propTypesExports.oneOf([
+    ICON_BUTTON_APPEARANCE.OUTLINED,
+    ICON_BUTTON_APPEARANCE.SOLID,
+    ICON_BUTTON_APPEARANCE.BORDERLESS
+  ]),
+  // css classes for the button
+  className: propTypesExports.string,
+  // the base color of the button
+  color: propTypesExports.oneOf([
+    componentColors.PRIMARY,
+    componentColors.SECONDARY,
+    componentColors.ACCENT,
+    componentColors.NONE
+  ]),
+  // the icon for the button
+  icon: propTypesExports.node.isRequired,
+  // the button id
+  id: propTypesExports.string,
+  // a ref to attach to the actual DOM <button> element
+  innerRef: RefShape,
+  // button isDisabled state
+  isDisabled: propTypesExports.bool,
+  // what to do when the button is clicked
+  onClick: propTypesExports.func.isRequired,
+  size: propTypesExports.oneOf([
+    formElementSizesEnum.SMALL1X,
+    formElementSizesEnum.SMALL,
+    formElementSizesEnum.MEDIUM,
+    formElementSizesEnum.LARGE,
+    formElementSizesEnum.LARGE1X
+  ]),
+  // A title is used for accessibility purposes to describe the button for screen readers
+  title: propTypesExports.string.isRequired
+};
+const defaultProps$O = {
+  appearance: ICON_BUTTON_APPEARANCE.OUTLINED,
+  className: null,
+  color: componentColors.NONE,
+  id: null,
+  innerRef: null,
+  isDisabled: false,
+  size: formElementSizesEnum.MEDIUM
+};
+function IconButton({
+  appearance,
+  className,
+  color,
+  icon,
+  id,
+  innerRef,
+  isDisabled,
+  onClick,
+  size,
+  title,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: joinClassNames(
+        "button icon-button",
+        className,
+        `${appearance === ICON_BUTTON_APPEARANCE.BORDERLESS ? "icon-button--" : "button--"}${appearance}`,
+        // default color is none
+        color && color !== "none" ? `button--${color}-color` : null,
+        // default size is medium
+        size && size !== formElementSizesEnum.MEDIUM ? `icon-button--${size}` : null
+      ),
+      disabled: isDisabled,
+      id,
+      onClick: handleEvent(onClick),
+      ref: innerRef,
+      type: "button",
+      ...rest,
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: title })
+      ]
+    }
+  );
+}
+IconButton.propTypes = propTypes$O;
+IconButton.defaultProps = defaultProps$O;
+const SegmentedButton = () => null;
+const propTypes$N = {
+  children: propTypesExports.node.isRequired,
+  className: propTypesExports.string,
+  contentClassName: propTypesExports.string,
+  headerClassName: propTypesExports.string,
+  headerContent: propTypesExports.node.isRequired,
+  isOpen: propTypesExports.bool,
+  onToggle: propTypesExports.func
+};
+const defaultProps$N = {
+  className: void 0,
+  contentClassName: void 0,
+  headerClassName: void 0,
+  isOpen: void 0,
+  onToggle: void 0
+};
+function Accordion({
+  children,
+  className,
+  contentClassName,
+  headerClassName,
+  headerContent,
+  isOpen,
+  onToggle
+}) {
+  const [stateIsOpen, setStateIsOpen] = useState(isOpen || false);
+  useEffect(() => {
+    setStateIsOpen(isOpen);
+  }, [isOpen]);
+  function toggleAccordion() {
+    if (onToggle) {
+      onToggle(stateIsOpen);
+    } else {
+      setStateIsOpen(!stateIsOpen);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: joinClassNames(["accordion", className]), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: joinClassNames(["accordion__header", headerClassName]),
+        type: "button",
+        onClick: handleEvent(toggleAccordion),
+        children: [
+          headerContent,
+          /* @__PURE__ */ jsx("span", { className: `material-symbols-outlined icon-button__icon ${stateIsOpen ? "" : "icon-button__icon--rotate180"}`, children: "expand_circle_down" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: joinClassNames(["accordion__content", contentClassName, stateIsOpen ? "accordion__content--open" : ""]), children })
+  ] });
+}
+Accordion.propTypes = propTypes$N;
+Accordion.defaultProps = defaultProps$N;
+const TabGroupContext = React__default.createContext();
+const propTypes$M = {
+  children: propTypesExports.node.isRequired,
+  // a tab id must be provided for accessibility and selecting tab
+  id: propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]).isRequired
+};
+const defaultProps$M = {};
+function Tab({ children, id }) {
+  const {
+    selectedTabId,
+    setSelectedTabId,
+    tabGroupId
+  } = useContext(TabGroupContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: joinClassNames(
+        selectedTabId === id && "tab-group__tab--selected",
+        "tab-group__tab"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-controls": `tabpanel-${tabGroupId}-${id}`,
+          "aria-selected": selectedTabId === id,
+          className: joinClassNames(
+            selectedTabId === id && "tab-group__tab-button--selected",
+            "tab-group__tab-button"
+          ),
+          id: `tab-${tabGroupId}-${id}`,
+          onClick: handleEvent(() => setSelectedTabId(id)),
+          role: "tab",
+          tabIndex: "-1",
+          type: "button",
+          children
+        }
+      )
+    }
+  );
+}
+Tab.propTypes = propTypes$M;
+Tab.defaultProps = defaultProps$M;
+var NOTHING = Symbol.for("immer-nothing");
+var DRAFTABLE = Symbol.for("immer-draftable");
+var DRAFT_STATE = Symbol.for("immer-state");
+var errors = process.env.NODE_ENV !== "production" ? [
+  // All error codes, starting by 0:
   function(plugin) {
     return `The plugin for '${plugin}' has not been loaded into Immer. To enable the plugin, import and call \`enable${plugin}()\` when initializing your application.`;
   },
@@ -3536,148 +3396,501 @@ function i(f) {
     i2("function" == typeof t ? produce(t) : freeze(t));
   }, [])];
 }
-function listCacheClear$1() {
-  this.__data__ = [];
-  this.size = 0;
+const propTypes$L = {
+  children: propTypesExports.node.isRequired,
+  className: propTypesExports.string,
+  defaultValue: propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]),
+  onChange: propTypesExports.func,
+  // value is the currentSelectedTabIndex number
+  value: propTypesExports.number
+};
+const defaultProps$L = {
+  className: null,
+  defaultValue: null,
+  onChange: null,
+  value: null
+};
+let nextTabGroupId = 0;
+function TabGroup({
+  children,
+  className,
+  defaultValue,
+  onChange,
+  value
+}) {
+  const [tabGroupState, setTabGroupState] = i(() => {
+    nextTabGroupId += 1;
+    return {
+      selectedTabId: defaultValue || NaN,
+      tabGroupId: nextTabGroupId
+    };
+  });
+  const contextValue = useMemo(
+    () => ({
+      tabGroupId: tabGroupState.tabGroupId,
+      selectedTabId: value || tabGroupState.selectedTabId,
+      setSelectedTabId: (tabId) => {
+        if (onChange) {
+          onChange(tabId);
+        } else {
+          setTabGroupState((draftState) => {
+            draftState.selectedTabId = tabId;
+          });
+        }
+      }
+    }),
+    [tabGroupState, value]
+  );
+  return /* @__PURE__ */ jsx(TabGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: joinClassNames("tab-group", className), id: `tab-group-${tabGroupState.id}`, children }) });
 }
-var _listCacheClear = listCacheClear$1;
-var eq$1 = eq_1;
-function assocIndexOf$4(array, key) {
-  var length = array.length;
-  while (length--) {
-    if (eq$1(array[length][0], key)) {
-      return length;
+TabGroup.propTypes = propTypes$L;
+TabGroup.defaultProps = defaultProps$L;
+const propTypes$K = {
+  children: propTypesExports.node.isRequired,
+  className: propTypesExports.string,
+  tagName: propTypesExports.string
+};
+const defaultProps$K = {
+  className: null,
+  tagName: "div"
+};
+function TabGroupTitle({ children, className, tagName: TagName }) {
+  const { tabGroupId } = useContext(TabGroupContext);
+  return /* @__PURE__ */ jsx(TagName, { id: `tab-group-${tabGroupId}`, className: joinClassNames("tag-group__title", className), children });
+}
+TabGroupTitle.propTypes = propTypes$K;
+TabGroupTitle.defaultProps = defaultProps$K;
+const propTypes$J = {
+  children: propTypesExports.node.isRequired,
+  className: propTypesExports.string
+};
+const defaultProps$J = {
+  className: null
+};
+function TabList({ children, className }) {
+  const { tabGroupId } = useContext(TabGroupContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: joinClassNames(className, "tab-group__list"),
+      role: "tablist",
+      "aria-labelledby": `tab-group-${tabGroupId}`,
+      children
     }
-  }
-  return -1;
+  );
 }
-var _assocIndexOf = assocIndexOf$4;
-var assocIndexOf$3 = _assocIndexOf;
-var arrayProto = Array.prototype;
-var splice = arrayProto.splice;
-function listCacheDelete$1(key) {
-  var data = this.__data__, index = assocIndexOf$3(data, key);
-  if (index < 0) {
-    return false;
-  }
-  var lastIndex = data.length - 1;
-  if (index == lastIndex) {
-    data.pop();
-  } else {
-    splice.call(data, index, 1);
-  }
-  --this.size;
-  return true;
+TabList.propTypes = propTypes$J;
+TabList.defaultProps = defaultProps$J;
+const propTypes$I = {
+  children: propTypesExports.node.isRequired,
+  className: propTypesExports.string,
+  // a tabId id must be provided for accessibility and selecting tabs
+  tabId: propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]).isRequired
+};
+const defaultProps$I = {
+  className: null
+};
+function TabPanel({ children, className, tabId }) {
+  const { selectedTabId, tabGroupId } = useContext(TabGroupContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-labelledby": `tab-${tabGroupId}-${tabId}`,
+      className: joinClassNames(
+        className,
+        selectedTabId === tabId && "tab-group__panel--selected",
+        "tab-group__panel"
+      ),
+      id: `tabpanel-${tabGroupId}-${tabId}`,
+      role: "tabpanel",
+      tabIndex: "0",
+      children
+    }
+  );
 }
-var _listCacheDelete = listCacheDelete$1;
-var assocIndexOf$2 = _assocIndexOf;
-function listCacheGet$1(key) {
-  var data = this.__data__, index = assocIndexOf$2(data, key);
-  return index < 0 ? void 0 : data[index][1];
+TabPanel.propTypes = propTypes$I;
+TabPanel.defaultProps = defaultProps$I;
+const propTypes$H = {
+  children: propTypesExports.node.isRequired
+};
+const defaultProps$H = {};
+function TabPanels({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "tab-group__panels", children });
 }
-var _listCacheGet = listCacheGet$1;
-var assocIndexOf$1 = _assocIndexOf;
-function listCacheHas$1(key) {
-  return assocIndexOf$1(this.__data__, key) > -1;
+TabPanels.propTypes = propTypes$H;
+TabPanels.defaultProps = defaultProps$H;
+const FormContext = React__default.createContext();
+function eq$3(value, other) {
+  return value === other || value !== value && other !== other;
 }
-var _listCacheHas = listCacheHas$1;
-var assocIndexOf = _assocIndexOf;
-function listCacheSet$1(key, value) {
-  var data = this.__data__, index = assocIndexOf(data, key);
-  if (index < 0) {
-    ++this.size;
-    data.push([key, value]);
-  } else {
-    data[index][1] = value;
-  }
-  return this;
+var eq_1 = eq$3;
+function isObject$6(value) {
+  var type2 = typeof value;
+  return value != null && (type2 == "object" || type2 == "function");
 }
-var _listCacheSet = listCacheSet$1;
-var listCacheClear = _listCacheClear, listCacheDelete = _listCacheDelete, listCacheGet = _listCacheGet, listCacheHas = _listCacheHas, listCacheSet = _listCacheSet;
-function ListCache$4(entries) {
-  var index = -1, length = entries == null ? 0 : entries.length;
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
+var isObject_1 = isObject$6;
+var baseGetTag$4 = _baseGetTag, isObject$5 = isObject_1;
+var asyncTag = "[object AsyncFunction]", funcTag$2 = "[object Function]", genTag$1 = "[object GeneratorFunction]", proxyTag = "[object Proxy]";
+function isFunction$2(value) {
+  if (!isObject$5(value)) {
+    return false;
   }
+  var tag = baseGetTag$4(value);
+  return tag == funcTag$2 || tag == genTag$1 || tag == asyncTag || tag == proxyTag;
 }
-ListCache$4.prototype.clear = listCacheClear;
-ListCache$4.prototype["delete"] = listCacheDelete;
-ListCache$4.prototype.get = listCacheGet;
-ListCache$4.prototype.has = listCacheHas;
-ListCache$4.prototype.set = listCacheSet;
-var _ListCache = ListCache$4;
-var ListCache$3 = _ListCache;
-function stackClear$1() {
-  this.__data__ = new ListCache$3();
-  this.size = 0;
+var isFunction_1 = isFunction$2;
+var MAX_SAFE_INTEGER$1 = 9007199254740991;
+function isLength$2(value) {
+  return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER$1;
 }
-var _stackClear = stackClear$1;
-function stackDelete$1(key) {
-  var data = this.__data__, result = data["delete"](key);
-  this.size = data.size;
-  return result;
+var isLength_1 = isLength$2;
+var isFunction$1 = isFunction_1, isLength$1 = isLength_1;
+function isArrayLike$3(value) {
+  return value != null && isLength$1(value.length) && !isFunction$1(value);
 }
-var _stackDelete = stackDelete$1;
-function stackGet$1(key) {
-  return this.__data__.get(key);
+var isArrayLike_1 = isArrayLike$3;
+var MAX_SAFE_INTEGER = 9007199254740991;
+var reIsUint = /^(?:0|[1-9]\d*)$/;
+function isIndex$2(value, length) {
+  var type2 = typeof value;
+  length = length == null ? MAX_SAFE_INTEGER : length;
+  return !!length && (type2 == "number" || type2 != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
 }
-var _stackGet = stackGet$1;
-function stackHas$1(key) {
-  return this.__data__.has(key);
+var _isIndex = isIndex$2;
+var eq$2 = eq_1, isArrayLike$2 = isArrayLike_1, isIndex$1 = _isIndex, isObject$4 = isObject_1;
+function isIterateeCall$1(value, index, object) {
+  if (!isObject$4(object)) {
+    return false;
+  }
+  var type2 = typeof index;
+  if (type2 == "number" ? isArrayLike$2(object) && isIndex$1(index, object.length) : type2 == "string" && index in object) {
+    return eq$2(object[index], value);
+  }
+  return false;
 }
-var _stackHas = stackHas$1;
-var root$6 = _root;
-var coreJsData$1 = root$6["__core-js_shared__"];
-var _coreJsData = coreJsData$1;
-var coreJsData = _coreJsData;
-var maskSrcKey = function() {
-  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || "");
-  return uid ? "Symbol(src)_1." + uid : "";
-}();
-function isMasked$1(func) {
-  return !!maskSrcKey && maskSrcKey in func;
+var _isIterateeCall = isIterateeCall$1;
+var baseGetTag$3 = _baseGetTag, isObjectLike$5 = isObjectLike_1;
+var regexpTag$3 = "[object RegExp]";
+function baseIsRegExp$1(value) {
+  return isObjectLike$5(value) && baseGetTag$3(value) == regexpTag$3;
 }
-var _isMasked = isMasked$1;
-var funcProto$1 = Function.prototype;
-var funcToString$1 = funcProto$1.toString;
-function toSource$2(func) {
-  if (func != null) {
+var _baseIsRegExp = baseIsRegExp$1;
+function baseUnary$4(func) {
+  return function(value) {
+    return func(value);
+  };
+}
+var _baseUnary = baseUnary$4;
+var _nodeUtilExports = {};
+var _nodeUtil = {
+  get exports() {
+    return _nodeUtilExports;
+  },
+  set exports(v) {
+    _nodeUtilExports = v;
+  }
+};
+(function(module, exports2) {
+  var freeGlobal2 = _freeGlobal;
+  var freeExports = exports2 && !exports2.nodeType && exports2;
+  var freeModule = freeExports && true && module && !module.nodeType && module;
+  var moduleExports = freeModule && freeModule.exports === freeExports;
+  var freeProcess = moduleExports && freeGlobal2.process;
+  var nodeUtil2 = function() {
     try {
-      return funcToString$1.call(func);
+      var types = freeModule && freeModule.require && freeModule.require("util").types;
+      if (types) {
+        return types;
+      }
+      return freeProcess && freeProcess.binding && freeProcess.binding("util");
     } catch (e) {
     }
-    try {
-      return func + "";
-    } catch (e) {
+  }();
+  module.exports = nodeUtil2;
+})(_nodeUtil, _nodeUtilExports);
+var baseIsRegExp = _baseIsRegExp, baseUnary$3 = _baseUnary, nodeUtil$3 = _nodeUtilExports;
+var nodeIsRegExp = nodeUtil$3 && nodeUtil$3.isRegExp;
+var isRegExp$1 = nodeIsRegExp ? baseUnary$3(nodeIsRegExp) : baseIsRegExp;
+var isRegExp_1 = isRegExp$1;
+var baseToString = _baseToString, castSlice = _castSlice, hasUnicode = _hasUnicode, isIterateeCall = _isIterateeCall, isRegExp = isRegExp_1, stringToArray = _stringToArray, toString = toString_1;
+var MAX_ARRAY_LENGTH = 4294967295;
+function split(string, separator, limit) {
+  if (limit && typeof limit != "number" && isIterateeCall(string, separator, limit)) {
+    separator = limit = void 0;
+  }
+  limit = limit === void 0 ? MAX_ARRAY_LENGTH : limit >>> 0;
+  if (!limit) {
+    return [];
+  }
+  string = toString(string);
+  if (string && (typeof separator == "string" || separator != null && !isRegExp(separator))) {
+    separator = baseToString(separator);
+    if (!separator && hasUnicode(string)) {
+      return castSlice(stringToArray(string), 0, limit);
     }
   }
-  return "";
+  return string.split(separator, limit);
 }
-var _toSource = toSource$2;
-var isFunction = isFunction_1, isMasked = _isMasked, isObject$3 = isObject_1, toSource$1 = _toSource;
-var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
-var reIsHostCtor = /^\[object .+?Constructor\]$/;
-var funcProto = Function.prototype, objectProto$a = Object.prototype;
-var funcToString = funcProto.toString;
-var hasOwnProperty$8 = objectProto$a.hasOwnProperty;
-var reIsNative = RegExp(
-  "^" + funcToString.call(hasOwnProperty$8).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
-);
-function baseIsNative$1(value) {
-  if (!isObject$3(value) || isMasked(value)) {
-    return false;
-  }
-  var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
-  return pattern.test(toSource$1(value));
+var split_1 = split;
+function valueAtPath({ object, path }) {
+  return split_1(path, ".").reduce((obj, field) => field && obj ? obj[field] : obj, object);
 }
-var _baseIsNative = baseIsNative$1;
-function getValue$1(object, key) {
-  return object == null ? void 0 : object[key];
+function onKeyPress({ targetKey, func }) {
+  return (e) => {
+    if (e.key === targetKey) {
+      func(e);
+    }
+  };
 }
-var _getValue = getValue$1;
-var baseIsNative = _baseIsNative, getValue = _getValue;
+function useCurrentValuesFromForm({
+  errorMessage,
+  id,
+  onChange,
+  onSubmit,
+  value
+}) {
+  if (!id) {
+    console.error("useCurrentValuesFromForm: `id` is required");
+  }
+  const {
+    onChange: contextOnChange,
+    onSubmit: contextOnSubmit,
+    state,
+    validationErrors
+  } = useContext(FormContext) || {};
+  const currentOnSubmit = onSubmit ?? contextOnSubmit;
+  return {
+    currentErrorMessage: errorMessage ?? (validationErrors && validationErrors[id]),
+    currentOnChange: onChange ?? (contextOnChange && ((e, newValue) => contextOnChange({ e, id, newValue }))),
+    currentOnSubmit,
+    currentValue: (value ?? (state && valueAtPath({ object: state, path: id }))) || "",
+    currentOnFormKeyPress: onKeyPress({ targetKey: "Enter", func: (e) => currentOnSubmit && currentOnSubmit(e) })
+  };
+}
+const propTypes$G = {
+  errorMessage: propTypesExports.string,
+  id: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]).isRequired
+};
+const defaultProps$G = {
+  errorMessage: null
+};
+function ErrorMessage({ errorMessage, id }) {
+  return errorMessage ? /* @__PURE__ */ jsx("div", { className: "input-wrapper__error-message", id: `${id}-error`, children: errorMessage }) : null;
+}
+ErrorMessage.propTypes = propTypes$G;
+ErrorMessage.defaultProps = defaultProps$G;
+const propTypes$F = {
+  className: propTypesExports.string,
+  errorMessage: propTypesExports.string,
+  innerRef: RefShape,
+  // id of the input; when tied to a Form the `id` is also the 'dot' path to the data in the form's state: ie person.contact.address.line1
+  id: propTypesExports.string.isRequired,
+  isDisabled: propTypesExports.bool,
+  label: propTypesExports.string.isRequired,
+  // e => ... do something with e.target.value ...; can be omitted so as to be uncontrolled OR if changes are sent through form's onChange
+  onChange: propTypesExports.func,
+  // when enter key pressed in field, submit the form
+  onSubmit: propTypesExports.func,
+  value: propTypesExports.bool
+};
+const defaultProps$F = {
+  className: null,
+  errorMessage: null,
+  innerRef: null,
+  isDisabled: false,
+  onChange: null,
+  onSubmit: null,
+  value: null
+};
+function CheckBox({
+  className,
+  errorMessage,
+  innerRef,
+  id,
+  isDisabled,
+  label,
+  onChange,
+  onSubmit,
+  value,
+  ...rest
+}) {
+  const {
+    currentErrorMessage,
+    currentOnChange,
+    currentOnFormKeyPress,
+    currentValue
+  } = useCurrentValuesFromForm({
+    errorMessage,
+    id,
+    onChange,
+    onSubmit,
+    value
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "input-wrapper input-wrapper--checkbox", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-describedby": currentErrorMessage ? `${id}-error` : null,
+        checked: currentValue,
+        className,
+        disabled: isDisabled,
+        id,
+        name: id,
+        onChange: currentOnChange,
+        onKeyPress: currentOnFormKeyPress,
+        ref: innerRef,
+        type: "checkbox",
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx(ErrorMessage, { errorMessage: currentErrorMessage, id })
+  ] });
+}
+CheckBox.propTypes = propTypes$F;
+CheckBox.defaultProps = defaultProps$F;
+function listCacheClear$1() {
+  this.__data__ = [];
+  this.size = 0;
+}
+var _listCacheClear = listCacheClear$1;
+var eq$1 = eq_1;
+function assocIndexOf$4(array, key) {
+  var length = array.length;
+  while (length--) {
+    if (eq$1(array[length][0], key)) {
+      return length;
+    }
+  }
+  return -1;
+}
+var _assocIndexOf = assocIndexOf$4;
+var assocIndexOf$3 = _assocIndexOf;
+var arrayProto = Array.prototype;
+var splice = arrayProto.splice;
+function listCacheDelete$1(key) {
+  var data = this.__data__, index = assocIndexOf$3(data, key);
+  if (index < 0) {
+    return false;
+  }
+  var lastIndex = data.length - 1;
+  if (index == lastIndex) {
+    data.pop();
+  } else {
+    splice.call(data, index, 1);
+  }
+  --this.size;
+  return true;
+}
+var _listCacheDelete = listCacheDelete$1;
+var assocIndexOf$2 = _assocIndexOf;
+function listCacheGet$1(key) {
+  var data = this.__data__, index = assocIndexOf$2(data, key);
+  return index < 0 ? void 0 : data[index][1];
+}
+var _listCacheGet = listCacheGet$1;
+var assocIndexOf$1 = _assocIndexOf;
+function listCacheHas$1(key) {
+  return assocIndexOf$1(this.__data__, key) > -1;
+}
+var _listCacheHas = listCacheHas$1;
+var assocIndexOf = _assocIndexOf;
+function listCacheSet$1(key, value) {
+  var data = this.__data__, index = assocIndexOf(data, key);
+  if (index < 0) {
+    ++this.size;
+    data.push([key, value]);
+  } else {
+    data[index][1] = value;
+  }
+  return this;
+}
+var _listCacheSet = listCacheSet$1;
+var listCacheClear = _listCacheClear, listCacheDelete = _listCacheDelete, listCacheGet = _listCacheGet, listCacheHas = _listCacheHas, listCacheSet = _listCacheSet;
+function ListCache$4(entries) {
+  var index = -1, length = entries == null ? 0 : entries.length;
+  this.clear();
+  while (++index < length) {
+    var entry = entries[index];
+    this.set(entry[0], entry[1]);
+  }
+}
+ListCache$4.prototype.clear = listCacheClear;
+ListCache$4.prototype["delete"] = listCacheDelete;
+ListCache$4.prototype.get = listCacheGet;
+ListCache$4.prototype.has = listCacheHas;
+ListCache$4.prototype.set = listCacheSet;
+var _ListCache = ListCache$4;
+var ListCache$3 = _ListCache;
+function stackClear$1() {
+  this.__data__ = new ListCache$3();
+  this.size = 0;
+}
+var _stackClear = stackClear$1;
+function stackDelete$1(key) {
+  var data = this.__data__, result = data["delete"](key);
+  this.size = data.size;
+  return result;
+}
+var _stackDelete = stackDelete$1;
+function stackGet$1(key) {
+  return this.__data__.get(key);
+}
+var _stackGet = stackGet$1;
+function stackHas$1(key) {
+  return this.__data__.has(key);
+}
+var _stackHas = stackHas$1;
+var root$6 = _root;
+var coreJsData$1 = root$6["__core-js_shared__"];
+var _coreJsData = coreJsData$1;
+var coreJsData = _coreJsData;
+var maskSrcKey = function() {
+  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || "");
+  return uid ? "Symbol(src)_1." + uid : "";
+}();
+function isMasked$1(func) {
+  return !!maskSrcKey && maskSrcKey in func;
+}
+var _isMasked = isMasked$1;
+var funcProto$1 = Function.prototype;
+var funcToString$1 = funcProto$1.toString;
+function toSource$2(func) {
+  if (func != null) {
+    try {
+      return funcToString$1.call(func);
+    } catch (e) {
+    }
+    try {
+      return func + "";
+    } catch (e) {
+    }
+  }
+  return "";
+}
+var _toSource = toSource$2;
+var isFunction = isFunction_1, isMasked = _isMasked, isObject$3 = isObject_1, toSource$1 = _toSource;
+var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+var reIsHostCtor = /^\[object .+?Constructor\]$/;
+var funcProto = Function.prototype, objectProto$a = Object.prototype;
+var funcToString = funcProto.toString;
+var hasOwnProperty$8 = objectProto$a.hasOwnProperty;
+var reIsNative = RegExp(
+  "^" + funcToString.call(hasOwnProperty$8).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
+);
+function baseIsNative$1(value) {
+  if (!isObject$3(value) || isMasked(value)) {
+    return false;
+  }
+  var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
+  return pattern.test(toSource$1(value));
+}
+var _baseIsNative = baseIsNative$1;
+function getValue$1(object, key) {
+  return object == null ? void 0 : object[key];
+}
+var _getValue = getValue$1;
+var baseIsNative = _baseIsNative, getValue = _getValue;
 function getNative$7(object, key) {
   var value = getValue(object, key);
   return baseIsNative(value) ? value : void 0;
@@ -3702,14 +3915,14 @@ function hashDelete$1(key) {
 }
 var _hashDelete = hashDelete$1;
 var nativeCreate$2 = _nativeCreate;
-var HASH_UNDEFINED$1 = "__lodash_hash_undefined__";
+var HASH_UNDEFINED$2 = "__lodash_hash_undefined__";
 var objectProto$9 = Object.prototype;
 var hasOwnProperty$7 = objectProto$9.hasOwnProperty;
 function hashGet$1(key) {
   var data = this.__data__;
   if (nativeCreate$2) {
     var result = data[key];
-    return result === HASH_UNDEFINED$1 ? void 0 : result;
+    return result === HASH_UNDEFINED$2 ? void 0 : result;
   }
   return hasOwnProperty$7.call(data, key) ? data[key] : void 0;
 }
@@ -3723,11 +3936,11 @@ function hashHas$1(key) {
 }
 var _hashHas = hashHas$1;
 var nativeCreate = _nativeCreate;
-var HASH_UNDEFINED = "__lodash_hash_undefined__";
+var HASH_UNDEFINED$1 = "__lodash_hash_undefined__";
 function hashSet$1(key, value) {
   var data = this.__data__;
   this.size += this.has(key) ? 0 : 1;
-  data[key] = nativeCreate && value === void 0 ? HASH_UNDEFINED : value;
+  data[key] = nativeCreate && value === void 0 ? HASH_UNDEFINED$1 : value;
   return this;
 }
 var _hashSet = hashSet$1;
@@ -3793,7 +4006,7 @@ function mapCacheSet$1(key, value) {
 }
 var _mapCacheSet = mapCacheSet$1;
 var mapCacheClear = _mapCacheClear, mapCacheDelete = _mapCacheDelete, mapCacheGet = _mapCacheGet, mapCacheHas = _mapCacheHas, mapCacheSet = _mapCacheSet;
-function MapCache$1(entries) {
+function MapCache$2(entries) {
   var index = -1, length = entries == null ? 0 : entries.length;
   this.clear();
   while (++index < length) {
@@ -3801,24 +4014,24 @@ function MapCache$1(entries) {
     this.set(entry[0], entry[1]);
   }
 }
-MapCache$1.prototype.clear = mapCacheClear;
-MapCache$1.prototype["delete"] = mapCacheDelete;
-MapCache$1.prototype.get = mapCacheGet;
-MapCache$1.prototype.has = mapCacheHas;
-MapCache$1.prototype.set = mapCacheSet;
-var _MapCache = MapCache$1;
-var ListCache$1 = _ListCache, Map$2 = _Map, MapCache = _MapCache;
-var LARGE_ARRAY_SIZE = 200;
+MapCache$2.prototype.clear = mapCacheClear;
+MapCache$2.prototype["delete"] = mapCacheDelete;
+MapCache$2.prototype.get = mapCacheGet;
+MapCache$2.prototype.has = mapCacheHas;
+MapCache$2.prototype.set = mapCacheSet;
+var _MapCache = MapCache$2;
+var ListCache$1 = _ListCache, Map$2 = _Map, MapCache$1 = _MapCache;
+var LARGE_ARRAY_SIZE$1 = 200;
 function stackSet$1(key, value) {
   var data = this.__data__;
   if (data instanceof ListCache$1) {
     var pairs = data.__data__;
-    if (!Map$2 || pairs.length < LARGE_ARRAY_SIZE - 1) {
+    if (!Map$2 || pairs.length < LARGE_ARRAY_SIZE$1 - 1) {
       pairs.push([key, value]);
       this.size = ++data.size;
       return this;
     }
-    data = this.__data__ = new MapCache(pairs);
+    data = this.__data__ = new MapCache$1(pairs);
   }
   data.set(key, value);
   this.size = data.size;
@@ -4173,17 +4386,17 @@ var getNative$2 = _getNative, root$3 = _root;
 var Promise$2 = getNative$2(root$3, "Promise");
 var _Promise = Promise$2;
 var getNative$1 = _getNative, root$2 = _root;
-var Set$2 = getNative$1(root$2, "Set");
-var _Set = Set$2;
+var Set$3 = getNative$1(root$2, "Set");
+var _Set = Set$3;
 var getNative = _getNative, root$1 = _root;
 var WeakMap$2 = getNative(root$1, "WeakMap");
 var _WeakMap = WeakMap$2;
-var DataView = _DataView, Map$1 = _Map, Promise$1 = _Promise, Set$1 = _Set, WeakMap$1 = _WeakMap, baseGetTag = _baseGetTag, toSource = _toSource;
+var DataView = _DataView, Map$1 = _Map, Promise$1 = _Promise, Set$2 = _Set, WeakMap$1 = _WeakMap, baseGetTag = _baseGetTag, toSource = _toSource;
 var mapTag$3 = "[object Map]", objectTag$1 = "[object Object]", promiseTag = "[object Promise]", setTag$3 = "[object Set]", weakMapTag$1 = "[object WeakMap]";
 var dataViewTag$2 = "[object DataView]";
-var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map$1), promiseCtorString = toSource(Promise$1), setCtorString = toSource(Set$1), weakMapCtorString = toSource(WeakMap$1);
+var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map$1), promiseCtorString = toSource(Promise$1), setCtorString = toSource(Set$2), weakMapCtorString = toSource(WeakMap$1);
 var getTag$3 = baseGetTag;
-if (DataView && getTag$3(new DataView(new ArrayBuffer(1))) != dataViewTag$2 || Map$1 && getTag$3(new Map$1()) != mapTag$3 || Promise$1 && getTag$3(Promise$1.resolve()) != promiseTag || Set$1 && getTag$3(new Set$1()) != setTag$3 || WeakMap$1 && getTag$3(new WeakMap$1()) != weakMapTag$1) {
+if (DataView && getTag$3(new DataView(new ArrayBuffer(1))) != dataViewTag$2 || Map$1 && getTag$3(new Map$1()) != mapTag$3 || Promise$1 && getTag$3(Promise$1.resolve()) != promiseTag || Set$2 && getTag$3(new Set$2()) != setTag$3 || WeakMap$1 && getTag$3(new WeakMap$1()) != weakMapTag$1) {
   getTag$3 = function(value) {
     var result = baseGetTag(value), Ctor = result == objectTag$1 ? value.constructor : void 0, ctorString = Ctor ? toSource(Ctor) : "";
     if (ctorString) {
@@ -4216,12 +4429,12 @@ function initCloneArray$1(array) {
 }
 var _initCloneArray = initCloneArray$1;
 var root = _root;
-var Uint8Array$1 = root.Uint8Array;
-var _Uint8Array = Uint8Array$1;
-var Uint8Array = _Uint8Array;
+var Uint8Array$2 = root.Uint8Array;
+var _Uint8Array = Uint8Array$2;
+var Uint8Array$1 = _Uint8Array;
 function cloneArrayBuffer$3(arrayBuffer) {
   var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
-  new Uint8Array(result).set(new Uint8Array(arrayBuffer));
+  new Uint8Array$1(result).set(new Uint8Array$1(arrayBuffer));
   return result;
 }
 var _cloneArrayBuffer = cloneArrayBuffer$3;
@@ -4438,7 +4651,7 @@ function setValueAtPath({ object, path, value }) {
   }
   return result;
 }
-const propTypes$I = {
+const propTypes$E = {
   children: propTypesExports.node.isRequired,
   formState: propTypesExports.shape({
     formId: propTypesExports.number.isRequired
@@ -4452,7 +4665,7 @@ const propTypes$I = {
   setState: propTypesExports.func,
   state: propTypesExports.shape({})
 };
-const defaultProps$I = {
+const defaultProps$E = {
   formState: null,
   onChange: null,
   onSubmit: null,
@@ -4502,9 +4715,9 @@ function FormContextProvider({
   );
   return /* @__PURE__ */ jsx(FormContext.Provider, { value: contextValue, children });
 }
-FormContextProvider.propTypes = propTypes$I;
-FormContextProvider.defaultProps = defaultProps$I;
-const propTypes$H = {
+FormContextProvider.propTypes = propTypes$E;
+FormContextProvider.defaultProps = defaultProps$E;
+const propTypes$D = {
   children: propTypesExports.node.isRequired,
   className: propTypesExports.string,
   // respond to field changes for key/value pairs of data, where the key is the `id` of the nested form components/inputs.
@@ -4516,7 +4729,7 @@ const propTypes$H = {
   setState: propTypesExports.func,
   state: propTypesExports.shape({})
 };
-const defaultProps$H = {
+const defaultProps$D = {
   className: null,
   onChange: null,
   onSubmit: null,
@@ -4553,148 +4766,371 @@ function Form({
     }
   );
 }
-Form.propTypes = propTypes$H;
-Form.defaultProps = defaultProps$H;
-const handleKeyPress = (code, handler) => (e) => e.code === code && handler();
-const menuItem = {
-  // parent menu item must have an id to tie aria attributes together
-  id: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
-  // if no link, then it is a "menu header" then the link is computed so there will always be a link even if it wasn't initially passed in
-  link: propTypesExports.string,
-  // the parent menu links for this menu as calculated in `calculateMenuItemsParents()`
-  parentLinks: propTypesExports.arrayOf(propTypesExports.string),
-  // the title to show for the menu item
-  title: propTypesExports.string.isRequired
-};
-menuItem.children = propTypesExports.arrayOf(propTypesExports.exact(menuItem));
-const MenuItemShape = propTypesExports.exact(menuItem);
-const MenuItemsShape = propTypesExports.arrayOf(MenuItemShape);
-const MenuShape = propTypesExports.exact({
-  header: propTypesExports.string.isRequired,
+Form.propTypes = propTypes$D;
+Form.defaultProps = defaultProps$D;
+const propTypes$C = {
+  // children are the options
+  children: propTypesExports.node,
+  className: propTypesExports.string,
+  errorMessage: propTypesExports.string,
+  innerRef: RefShape,
+  // id of the input; when tied to a Form the `id` is also the 'dot' path to the data in the form's state: ie person.contact.address.line1
   id: propTypesExports.string.isRequired,
-  menuItems: MenuItemsShape.isRequired,
-  titleTagClassName: propTypesExports.string,
-  titleTagName: propTypesExports.string
-});
-const Icons = {
-  IconArrowLeft: (className) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12.334 12.334", className: `icon-svg icon-arrow-left ${className || ""}`, children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("path", { d: "M0,6.167L6.167,0l1.458,1.438-3.708,3.708H12.334v2.042H3.917s3.708,3.708,3.708,3.708l-1.458,1.438L0,6.167Z" }) }) }),
-  IconArrowRight: (className) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12.334 12.334", className: `icon-svg icon-arrow-right ${className || ""}`, children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("path", { d: "M6.167,12.334l-1.458-1.438,3.708-3.708H0v-2.042H8.417L4.709,1.438l1.458-1.438,6.167,6.167-6.167,6.167Z" }) }) }),
-  IconChevron: (className) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10.75 6.834", className: `icon-svg icon-chevron ${className || ""}`, children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("path", { d: "M5.375,6.834L0,1.438,1.437,0l3.938,3.938L9.313,0l1.437,1.438L5.375,6.834Z" }) }) }),
-  IconCheck: (className) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 11.334 8.896", className: `icon-svg icon-check ${className || ""}`, children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("path", { d: "M3.896,8.896L0,4.979l1.438-1.438,2.458,2.459L9.896,0l1.438,1.458L3.896,8.896Z" }) }) }),
-  IconLightMode: (className) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 18.542 18.542", className: `icon-svg icon-light-mode ${className || ""}`, children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("path", { d: "M9.271,11.229c.5413,0,1.003-.191,1.385-.573,.382-.382,.573-.8437,.573-1.385s-.191-1.003-.573-1.385c-.382-.382-.8437-.573-1.385-.573s-1.003,.191-1.385,.573-.573,.8437-.573,1.385,.191,1.003,.573,1.385c.382,.382,.8437,.573,1.385,.573Zm0,2.042c-1.1113,0-2.0557-.389-2.833-1.167-.778-.7773-1.167-1.7217-1.167-2.833s.389-2.0557,1.167-2.833c.7773-.778,1.7217-1.167,2.833-1.167s2.0557,.389,2.833,1.167c.778,.7773,1.167,1.7217,1.167,2.833s-.389,2.0557-1.167,2.833c-.7773,.778-1.7217,1.167-2.833,1.167ZM1.021,10.292c-.278,0-.5177-.0973-.719-.292C.1007,9.806,0,9.563,0,9.271c0-.278,.1007-.5177,.302-.719s.441-.302,.719-.302H3.021c.278,0,.5177,.0973,.719,.292,.2013,.194,.302,.437,.302,.729,0,.278-.1007,.5177-.302,.719-.2013,.2013-.441,.302-.719,.302H1.021Zm14.5,0c-.278,0-.5177-.0973-.719-.292-.2013-.194-.302-.437-.302-.729,0-.278,.1007-.5177,.302-.719,.2013-.2013,.441-.302,.719-.302h2c.278,0,.5177,.0973,.719,.292,.2013,.194,.302,.437,.302,.729,0,.278-.1007,.5177-.302,.719-.2013,.2013-.441,.302-.719,.302h-2Zm-6.25-6.25c-.278,0-.5177-.1007-.719-.302s-.302-.441-.302-.719V1.021c0-.278,.0973-.5177,.292-.719,.194-.2013,.437-.302,.729-.302,.278,0,.5177,.1007,.719,.302,.2013,.2013,.302,.441,.302,.719V3.021c0,.278-.0973,.5177-.292,.719-.194,.2013-.437,.302-.729,.302Zm0,14.5c-.278,0-.5177-.1007-.719-.302-.2013-.2013-.302-.441-.302-.719v-2c0-.278,.0973-.5177,.292-.719,.194-.2013,.437-.302,.729-.302,.278,0,.5177,.1007,.719,.302,.2013,.2013,.302,.441,.302,.719v2c0,.278-.0973,.5177-.292,.719-.194,.2013-.437,.302-.729,.302ZM4.125,5.583l-1.042-1.062c-.208-.1947-.312-.4307-.312-.708,0-.278,.104-.5213,.312-.73,.1947-.208,.431-.312,.709-.312s.514,.104,.708,.312l1.083,1.042c.2087,.1947,.3097,.431,.303,.709-.0073,.2773-.1083,.5203-.303,.729-.194,.208-.4333,.3157-.718,.323-.2847,.0067-.5313-.0943-.74-.303ZM14.042,15.459l-1.083-1.042c-.2087-.1947-.313-.4307-.313-.708,0-.278,.1043-.5213,.313-.73,.194-.208,.4333-.312,.718-.312s.5313,.104,.74,.312l1.042,1.042c.208,.1947,.312,.4307,.312,.708,0,.278-.0973,.5213-.292,.73-.208,.208-.4473,.312-.718,.312-.2713,0-.511-.104-.719-.312Zm-1.063-9.876c-.208-.194-.312-.4333-.312-.718s.104-.5313,.312-.74l1.042-1.042c.208-.208,.4477-.3087,.719-.302,.2707,.0073,.5103,.108,.719,.302,.208,.1947,.312,.4273,.312,.698,0,.2713-.104,.511-.312,.719l-1.042,1.083c-.1947,.2087-.4307,.3097-.708,.303-.278-.0073-.5213-.1083-.73-.303ZM3.083,15.459c-.208-.1947-.312-.431-.312-.709s.104-.514,.312-.708l1.042-1.083c.1947-.1947,.4307-.292,.708-.292,.278,0,.5213,.0973,.73,.292,.208,.208,.3087,.451,.302,.729-.0073,.2773-.108,.5203-.302,.729l-1.042,1.042c-.1947,.208-.4307,.312-.708,.312-.278,0-.5213-.104-.73-.312Z" }) }) })
+  isDisabled: propTypesExports.bool,
+  label: propTypesExports.string.isRequired,
+  // e => ... do something with e.target.value ...; can be omitted so as to be uncontrolled OR if changes are sent through form's onChange
+  onChange: propTypesExports.func,
+  // when enter key pressed in field, submit the form
+  onSubmit: propTypesExports.func,
+  value: propTypesExports.string
 };
-const useStateEffect = ({ calculateValueFn, onUnmountFn, dependencyList }) => {
-  const [state, setState] = useState(() => calculateValueFn(null));
-  useEffect(
-    () => {
-      setState((previousState) => calculateValueFn(previousState));
-      return onUnmountFn;
-    },
-    dependencyList
-  );
-  return [state, setState];
+const defaultProps$C = {
+  children: null,
+  className: null,
+  errorMessage: null,
+  innerRef: null,
+  isDisabled: false,
+  onChange: null,
+  onSubmit: null,
+  value: null
 };
-const propTypes$G = {
-  // the appearance of the button
-  appearance: propTypesExports.oneOf([
-    ICON_BUTTON_APPEARANCE.OUTLINED,
-    ICON_BUTTON_APPEARANCE.SOLID,
-    ICON_BUTTON_APPEARANCE.BORDERLESS
-  ]),
-  // css classes for the button
+function Select({
+  children,
+  className,
+  errorMessage,
+  innerRef,
+  id,
+  isDisabled,
+  label,
+  onChange,
+  onSubmit,
+  value,
+  ...rest
+}) {
+  const {
+    currentErrorMessage,
+    currentOnChange,
+    currentOnFormKeyPress,
+    currentValue
+  } = useCurrentValuesFromForm({
+    errorMessage,
+    id,
+    onChange,
+    onSubmit,
+    value
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "input-wrapper input-wrapper--select", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        "aria-describedby": currentErrorMessage ? `${id}-error` : null,
+        className,
+        disabled: isDisabled,
+        id,
+        name: id,
+        onChange: currentOnChange,
+        onKeyPress: currentOnFormKeyPress,
+        ref: innerRef,
+        value: currentValue,
+        ...rest,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(ErrorMessage, { errorMessage: currentErrorMessage, id })
+  ] });
+}
+Select.propTypes = propTypes$C;
+Select.defaultProps = defaultProps$C;
+const propTypes$B = {
   className: propTypesExports.string,
-  // the base color of the button
-  color: propTypesExports.oneOf([
-    componentColors.PRIMARY,
-    componentColors.SECONDARY,
-    componentColors.ACCENT,
-    componentColors.NONE
-  ]),
-  // the icon for the button
-  icon: propTypesExports.node.isRequired,
-  // the button id
-  id: propTypesExports.string,
-  // a ref to attach to the actual DOM <button> element
   innerRef: RefShape,
-  // button isDisabled state
   isDisabled: propTypesExports.bool,
-  // what to do when the button is clicked
-  onClick: propTypesExports.func.isRequired,
-  size: propTypesExports.oneOf([
-    formElementSizesEnum.SMALL1X,
-    formElementSizesEnum.SMALL,
-    formElementSizesEnum.MEDIUM,
-    formElementSizesEnum.LARGE,
-    formElementSizesEnum.LARGE1X
-  ]),
-  // A title is used for accessibility purposes to describe the button for screen readers
-  title: propTypesExports.string.isRequired
+  label: propTypesExports.string.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  value: propTypesExports.any.isRequired
 };
-const defaultProps$G = {
-  appearance: ICON_BUTTON_APPEARANCE.OUTLINED,
+const defaultProps$B = {
   className: null,
-  color: componentColors.NONE,
-  id: null,
   innerRef: null,
-  isDisabled: false,
-  size: formElementSizesEnum.MEDIUM
+  isDisabled: false
 };
-function IconButton({
-  appearance,
+function SelectOption({
   className,
-  color,
-  icon,
-  id,
   innerRef,
   isDisabled,
-  onClick,
-  size,
-  title,
+  label,
+  value,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs(
-    "button",
+  return /* @__PURE__ */ jsx(
+    "option",
     {
-      className: joinClassNames(
-        "button icon-button",
-        className,
-        `${appearance === ICON_BUTTON_APPEARANCE.BORDERLESS ? "icon-button--" : "button--"}${appearance}`,
-        // default color is none
-        color && color !== "none" ? `button--${color}-color` : null,
-        // default size is medium
-        size && size !== formElementSizesEnum.MEDIUM ? `icon-button--${size}` : null
-      ),
+      className,
       disabled: isDisabled,
-      id,
-      onClick: handleEvent(onClick),
       ref: innerRef,
-      type: "button",
+      value,
       ...rest,
-      children: [
-        icon,
-        /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: title })
-      ]
+      children: label
     }
   );
 }
-IconButton.propTypes = propTypes$G;
-IconButton.defaultProps = defaultProps$G;
-const propTypes$F = {
-  currentMenuItem: MenuItemShape,
-  menuItem: MenuItemShape.isRequired
+SelectOption.propTypes = propTypes$B;
+SelectOption.defaultProps = defaultProps$B;
+const propTypes$A = {
+  className: propTypesExports.string,
+  errorMessage: propTypesExports.string,
+  // id of the input; when tied to a Form the `id` is also the 'dot' path to the data in the form's state: ie person.contact.address.line1
+  id: propTypesExports.string.isRequired,
+  innerRef: RefShape,
+  isDisabled: propTypesExports.bool,
+  label: propTypesExports.string.isRequired,
+  labelClassName: propTypesExports.string,
+  labelOff: propTypesExports.node,
+  labelOn: propTypesExports.node,
+  // e => ... do something with e.target.value ...; can be omitted so as to be uncontrolled OR if changes are sent through form's onChange
+  onChange: propTypesExports.func,
+  // when enter key pressed in field, submit the form
+  onSubmit: propTypesExports.func,
+  size: propTypesExports.oneOf([formElementSizesEnum.SMALL, formElementSizesEnum.MEDIUM, formElementSizesEnum.LARGE]),
+  sliderChildren: propTypesExports.node,
+  value: propTypesExports.bool,
+  width: propTypesExports.number
 };
-const defaultProps$F = {
-  currentMenuItem: null
+const defaultProps$A = {
+  className: null,
+  errorMessage: null,
+  innerRef: null,
+  isDisabled: false,
+  labelClassName: "",
+  labelOff: null,
+  labelOn: null,
+  onChange: null,
+  onSubmit: null,
+  size: formElementSizesEnum.MEDIUM,
+  sliderChildren: null,
+  value: null,
+  width: null
 };
-function MenuItem({ currentMenuItem, menuItem: menuItem2 }) {
-  var _a, _b, _c;
-  const { pathname } = useLocation();
-  const [isChildrenOpen, setIsChildrenOpen] = useStateEffect({
-    calculateValueFn: (isChildrenOpenPreviously) => {
-      var _a2;
-      return isChildrenOpenPreviously || ((_a2 = currentMenuItem == null ? void 0 : currentMenuItem.parentLinks) == null ? void 0 : _a2.includes(menuItem2.link));
-    },
-    dependencyList: [currentMenuItem, menuItem2, pathname]
+function Switch({
+  className,
+  errorMessage,
+  id,
+  innerRef,
+  isDisabled,
+  label,
+  labelClassName,
+  labelOn,
+  labelOff,
+  onChange,
+  onSubmit,
+  size,
+  sliderChildren,
+  value,
+  width,
+  ...rest
+}) {
+  const {
+    currentErrorMessage,
+    currentOnChange,
+    currentOnFormKeyPress,
+    currentValue
+  } = useCurrentValuesFromForm({
+    errorMessage,
+    id,
+    onChange,
+    onSubmit,
+    value
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "input-wrapper input-wrapper--switch",
+      ref: innerRef,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: joinClassNames(
+              "switch__wrapper",
+              size === formElementSizesEnum.MEDIUM ? null : `switch--${size}`,
+              isDisabled ? "switch--disabled" : null,
+              currentValue && "switch__wrapper--on"
+            ),
+            htmlFor: id,
+            style: width && { width: `${width}px` },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: joinClassNames("switch__label", labelClassName), children: label }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  "aria-describedby": currentErrorMessage ? `${id}-error` : null,
+                  checked: currentValue,
+                  className: joinClassNames("switch visually-hidden", className),
+                  disabled: isDisabled,
+                  id,
+                  name: id,
+                  onChange: currentOnChange,
+                  onKeyPress: currentOnFormKeyPress,
+                  type: "checkbox",
+                  ...rest
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: joinClassNames("switch__slider", currentValue && "switch__slider--on"), children: sliderChildren }),
+              labelOn || labelOff ? /* @__PURE__ */ jsxs("span", { className: "switch__inner-label", children: [
+                /* @__PURE__ */ jsx("span", { className: joinClassNames(currentValue ? "show" : "", "switch__inner-label-on"), children: labelOn }),
+                /* @__PURE__ */ jsx("span", { className: joinClassNames(currentValue ? "" : "show", "switch__inner-label-off"), children: labelOff })
+              ] }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ErrorMessage, { errorMessage: currentErrorMessage, id })
+      ]
+    }
+  );
+}
+Switch.propTypes = propTypes$A;
+Switch.defaultProps = defaultProps$A;
+const propTypes$z = {
+  className: propTypesExports.string,
+  errorMessage: propTypesExports.string,
+  innerRef: RefShape,
+  // id of the input; when tied to a Form the `id` is also the 'dot' path to the data in the form's state: ie person.contact.address.line1
+  id: propTypesExports.string.isRequired,
+  isDisabled: propTypesExports.bool,
+  label: propTypesExports.string.isRequired,
+  // e => ... do something with e.target.value ...; can be omitted so as to be uncontrolled OR if changes are sent through form's onChange
+  onChange: propTypesExports.func,
+  // when enter key pressed in field, submit the form
+  onSubmit: propTypesExports.func,
+  value: propTypesExports.string
+};
+const defaultProps$z = {
+  className: null,
+  errorMessage: null,
+  innerRef: null,
+  isDisabled: false,
+  onChange: null,
+  onSubmit: null,
+  value: null
+};
+function TextInput({
+  className,
+  errorMessage,
+  innerRef,
+  id,
+  isDisabled,
+  label,
+  onChange,
+  onSubmit,
+  value,
+  ...rest
+}) {
+  const {
+    currentErrorMessage,
+    currentOnChange,
+    currentOnFormKeyPress,
+    currentValue
+  } = useCurrentValuesFromForm({
+    errorMessage,
+    id,
+    onChange,
+    onSubmit,
+    value
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "input-wrapper input-wrapper--text-input", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-describedby": currentErrorMessage ? `${id}-error` : null,
+        className,
+        disabled: isDisabled,
+        id,
+        name: id,
+        onChange: currentOnChange,
+        onKeyPress: currentOnFormKeyPress,
+        ref: innerRef,
+        type: "text",
+        value: currentValue,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx(ErrorMessage, { errorMessage: currentErrorMessage, id })
+  ] });
+}
+TextInput.propTypes = propTypes$z;
+TextInput.defaultProps = defaultProps$z;
+const Icons = {
+  IconArrowLeft: (className) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12.334 12.334", className: `icon-svg icon-arrow-left ${className || ""}`, children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("path", { d: "M0,6.167L6.167,0l1.458,1.438-3.708,3.708H12.334v2.042H3.917s3.708,3.708,3.708,3.708l-1.458,1.438L0,6.167Z" }) }) }),
+  IconArrowRight: (className) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12.334 12.334", className: `icon-svg icon-arrow-right ${className || ""}`, children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("path", { d: "M6.167,12.334l-1.458-1.438,3.708-3.708H0v-2.042H8.417L4.709,1.438l1.458-1.438,6.167,6.167-6.167,6.167Z" }) }) }),
+  IconChevron: (className) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10.75 6.834", className: `icon-svg icon-chevron ${className || ""}`, children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("path", { d: "M5.375,6.834L0,1.438,1.437,0l3.938,3.938L9.313,0l1.437,1.438L5.375,6.834Z" }) }) }),
+  IconCheck: (className) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 11.334 8.896", className: `icon-svg icon-check ${className || ""}`, children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("path", { d: "M3.896,8.896L0,4.979l1.438-1.438,2.458,2.459L9.896,0l1.438,1.458L3.896,8.896Z" }) }) }),
+  IconLightMode: (className) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 18.542 18.542", className: `icon-svg icon-light-mode ${className || ""}`, children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("path", { d: "M9.271,11.229c.5413,0,1.003-.191,1.385-.573,.382-.382,.573-.8437,.573-1.385s-.191-1.003-.573-1.385c-.382-.382-.8437-.573-1.385-.573s-1.003,.191-1.385,.573-.573,.8437-.573,1.385,.191,1.003,.573,1.385c.382,.382,.8437,.573,1.385,.573Zm0,2.042c-1.1113,0-2.0557-.389-2.833-1.167-.778-.7773-1.167-1.7217-1.167-2.833s.389-2.0557,1.167-2.833c.7773-.778,1.7217-1.167,2.833-1.167s2.0557,.389,2.833,1.167c.778,.7773,1.167,1.7217,1.167,2.833s-.389,2.0557-1.167,2.833c-.7773,.778-1.7217,1.167-2.833,1.167ZM1.021,10.292c-.278,0-.5177-.0973-.719-.292C.1007,9.806,0,9.563,0,9.271c0-.278,.1007-.5177,.302-.719s.441-.302,.719-.302H3.021c.278,0,.5177,.0973,.719,.292,.2013,.194,.302,.437,.302,.729,0,.278-.1007,.5177-.302,.719-.2013,.2013-.441,.302-.719,.302H1.021Zm14.5,0c-.278,0-.5177-.0973-.719-.292-.2013-.194-.302-.437-.302-.729,0-.278,.1007-.5177,.302-.719,.2013-.2013,.441-.302,.719-.302h2c.278,0,.5177,.0973,.719,.292,.2013,.194,.302,.437,.302,.729,0,.278-.1007,.5177-.302,.719-.2013,.2013-.441,.302-.719,.302h-2Zm-6.25-6.25c-.278,0-.5177-.1007-.719-.302s-.302-.441-.302-.719V1.021c0-.278,.0973-.5177,.292-.719,.194-.2013,.437-.302,.729-.302,.278,0,.5177,.1007,.719,.302,.2013,.2013,.302,.441,.302,.719V3.021c0,.278-.0973,.5177-.292,.719-.194,.2013-.437,.302-.729,.302Zm0,14.5c-.278,0-.5177-.1007-.719-.302-.2013-.2013-.302-.441-.302-.719v-2c0-.278,.0973-.5177,.292-.719,.194-.2013,.437-.302,.729-.302,.278,0,.5177,.1007,.719,.302,.2013,.2013,.302,.441,.302,.719v2c0,.278-.0973,.5177-.292,.719-.194,.2013-.437,.302-.729,.302ZM4.125,5.583l-1.042-1.062c-.208-.1947-.312-.4307-.312-.708,0-.278,.104-.5213,.312-.73,.1947-.208,.431-.312,.709-.312s.514,.104,.708,.312l1.083,1.042c.2087,.1947,.3097,.431,.303,.709-.0073,.2773-.1083,.5203-.303,.729-.194,.208-.4333,.3157-.718,.323-.2847,.0067-.5313-.0943-.74-.303ZM14.042,15.459l-1.083-1.042c-.2087-.1947-.313-.4307-.313-.708,0-.278,.1043-.5213,.313-.73,.194-.208,.4333-.312,.718-.312s.5313,.104,.74,.312l1.042,1.042c.208,.1947,.312,.4307,.312,.708,0,.278-.0973,.5213-.292,.73-.208,.208-.4473,.312-.718,.312-.2713,0-.511-.104-.719-.312Zm-1.063-9.876c-.208-.194-.312-.4333-.312-.718s.104-.5313,.312-.74l1.042-1.042c.208-.208,.4477-.3087,.719-.302,.2707,.0073,.5103,.108,.719,.302,.208,.1947,.312,.4273,.312,.698,0,.2713-.104,.511-.312,.719l-1.042,1.083c-.1947,.2087-.4307,.3097-.708,.303-.278-.0073-.5213-.1083-.73-.303ZM3.083,15.459c-.208-.1947-.312-.431-.312-.709s.104-.514,.312-.708l1.042-1.083c.1947-.1947,.4307-.292,.708-.292,.278,0,.5213,.0973,.73,.292,.208,.208,.3087,.451,.302,.729-.0073,.2773-.108,.5203-.302,.729l-1.042,1.042c-.1947,.208-.4307,.312-.708,.312-.278,0-.5213-.104-.73-.312Z" }) }) })
+};
+const propTypes$y = {
+  children: propTypesExports.node.isRequired,
+  href: propTypesExports.string.isRequired
+};
+const defaultProps$y = {};
+function ExternalLink({ children, href, ...rest }) {
+  return /* @__PURE__ */ jsxs("a", { href, target: "_blank", rel: "noreferrer", ...rest, children: [
+    children,
+    /* @__PURE__ */ jsxs("span", { className: "utds-new-tab-link-a11y", children: [
+      /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: "opens in a new tab" }),
+      /* @__PURE__ */ jsx("span", { className: "utds-icon-after-external-link", "aria-hidden": "true" })
+    ] })
+  ] });
+}
+ExternalLink.propTypes = propTypes$y;
+ExternalLink.defaultProps = defaultProps$y;
+const menuItem = {
+  // parent menu item must have an id to tie aria attributes together
+  id: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  // if no link, then it is a "menu header" then the link is computed so there will always be a link even if it wasn't initially passed in
+  link: propTypesExports.string,
+  // the parent menu links for this menu as calculated in `calculateMenuItemsParents()`
+  parentLinks: propTypesExports.arrayOf(propTypesExports.string),
+  // the title to show for the menu item
+  title: propTypesExports.string.isRequired
+};
+menuItem.children = propTypesExports.arrayOf(propTypesExports.exact(menuItem));
+const MenuItemShape = propTypesExports.exact(menuItem);
+const MenuItemsShape = propTypesExports.arrayOf(MenuItemShape);
+const MenuShape = propTypesExports.exact({
+  header: propTypesExports.string.isRequired,
+  id: propTypesExports.string.isRequired,
+  menuItems: MenuItemsShape.isRequired,
+  titleTagClassName: propTypesExports.string,
+  titleTagName: propTypesExports.string
+});
+const useStateEffect = ({ calculateValueFn, onUnmountFn, dependencyList }) => {
+  const [state, setState] = useState(() => calculateValueFn(null));
+  useEffect(
+    () => {
+      setState((previousState) => calculateValueFn(previousState));
+      return onUnmountFn;
+    },
+    dependencyList
+  );
+  return [state, setState];
+};
+const propTypes$x = {
+  currentMenuItem: MenuItemShape,
+  menuItem: MenuItemShape.isRequired
+};
+const defaultProps$x = {
+  currentMenuItem: null
+};
+function MenuItem({ currentMenuItem, menuItem: menuItem2 }) {
+  var _a, _b, _c;
+  const { pathname } = useLocation();
+  const [isChildrenOpen, setIsChildrenOpen] = useStateEffect({
+    calculateValueFn: (isChildrenOpenPreviously) => {
+      var _a2;
+      return isChildrenOpenPreviously || ((_a2 = currentMenuItem == null ? void 0 : currentMenuItem.parentLinks) == null ? void 0 : _a2.includes(menuItem2.link));
+    },
+    dependencyList: [currentMenuItem, menuItem2, pathname]
   });
   const navLinkRef = useRef(null);
   useLayoutEffect(
@@ -4762,9 +5198,9 @@ function MenuItem({ currentMenuItem, menuItem: menuItem2 }) {
     )) }) : null
   ] });
 }
-MenuItem.propTypes = propTypes$F;
-MenuItem.defaultProps = defaultProps$F;
-const propTypes$E = {
+MenuItem.propTypes = propTypes$x;
+MenuItem.defaultProps = defaultProps$x;
+const propTypes$w = {
   className: propTypesExports.string,
   currentMenuItem: MenuItemShape,
   // used for accessibility labeling
@@ -4773,7 +5209,7 @@ const propTypes$E = {
   titleTagClassName: propTypesExports.string,
   titleTagName: propTypesExports.string
 };
-const defaultProps$E = {
+const defaultProps$w = {
   className: null,
   currentMenuItem: null,
   titleTagClassName: "visually-hidden",
@@ -4793,38 +5229,33 @@ function HorizontalMenu({
     /* @__PURE__ */ jsx("ul", { children: (_a = menu == null ? void 0 : menu.menuItems) == null ? void 0 : _a.map((menuItem2) => /* @__PURE__ */ jsx(MenuItem, { menuItem: menuItem2, currentMenuItem }, `horizontal-menu__nav-link__${menuItem2.link}-${menuItem2.title}}`)) })
   ] });
 }
-HorizontalMenu.propTypes = propTypes$E;
-HorizontalMenu.defaultProps = defaultProps$E;
-const propTypes$D = {
-  content: propTypesExports.func.isRequired
-};
-const defaultProps$D = {};
-function LandingTemplate({ content: Content }) {
-  return /* @__PURE__ */ jsx(Content, {});
+HorizontalMenu.propTypes = propTypes$w;
+HorizontalMenu.defaultProps = defaultProps$w;
+function htmlDecode(input) {
+  const doc = new DOMParser().parseFromString(input, "text/html");
+  return doc.documentElement.textContent;
 }
-LandingTemplate.propTypes = propTypes$D;
-LandingTemplate.defaultProps = defaultProps$D;
 const headerShape = propTypesExports.shape({ node: propTypesExports.shape({}), level: propTypesExports.oneOf([2, 3]) });
 headerShape.children = propTypesExports.arrayOf(headerShape);
-const propTypes$C = {
+const propTypes$v = {
   headersLevel: propTypesExports.arrayOf(headerShape).isRequired
 };
-const defaultProps$C = {};
+const defaultProps$v = {};
 function OnThisPageHeadersLevel({ headersLevel }) {
   return /* @__PURE__ */ jsx("ul", { className: "on-this-page__list", children: headersLevel.map((header) => {
     var _a;
     let node = null;
     if (header.node.id) {
       node = /* @__PURE__ */ jsxs("li", { children: [
-        /* @__PURE__ */ jsx("a", { href: `#${header.node.id}`, children: header.node.innerHTML }),
+        /* @__PURE__ */ jsx("a", { href: `#${header.node.id}`, children: htmlDecode(header.node.innerHTML) }),
         ((_a = header.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx(OnThisPageHeadersLevel, { headersLevel: header.children }) : null
       ] }, `on-this-page-ul-${header.node.id}`);
     }
     return node;
   }) });
 }
-OnThisPageHeadersLevel.propTypes = propTypes$C;
-OnThisPageHeadersLevel.defaultProps = defaultProps$C;
+OnThisPageHeadersLevel.propTypes = propTypes$v;
+OnThisPageHeadersLevel.defaultProps = defaultProps$v;
 function findElementsByTagNameMatch(element) {
   return [
     element && element.tagName.match(/^h[23]$/i) ? element : null,
@@ -4855,10 +5286,10 @@ function groupElementsByHeaderLevel(headers) {
   });
   return nodesHierarchy;
 }
-const propTypes$B = {
+const propTypes$u = {
   contentRef: RefShape.isRequired
 };
-const defaultProps$B = {};
+const defaultProps$u = {};
 function OnThisPage({ contentRef }) {
   const headers = findElementsByTagNameMatch(contentRef.current);
   const headersTree = groupElementsByHeaderLevel(headers);
@@ -4867,8 +5298,33 @@ function OnThisPage({ contentRef }) {
     /* @__PURE__ */ jsx(OnThisPageHeadersLevel, { headersLevel: headersTree })
   ] }) : null });
 }
-OnThisPage.propTypes = propTypes$B;
-OnThisPage.defaultProps = defaultProps$B;
+OnThisPage.propTypes = propTypes$u;
+OnThisPage.defaultProps = defaultProps$u;
+const propTypes$t = {
+  currentMenuItem: MenuItemShape,
+  menus: propTypesExports.arrayOf(MenuShape).isRequired
+};
+const defaultProps$t = {
+  currentMenuItem: null
+};
+function SidePanelNavigation({ currentMenuItem, menus }) {
+  return menus.map((menu) => {
+    const TitleTagName = menu.titleTagName || "h2";
+    return /* @__PURE__ */ jsxs("nav", { className: "menu-side-panel", "aria-labelledby": menu.id, children: [
+      /* @__PURE__ */ jsx(
+        TitleTagName,
+        {
+          id: menu.id,
+          className: joinClassNames(menu.titleTagClassName, "menu-side-panel__header"),
+          children: menu.header
+        }
+      ),
+      /* @__PURE__ */ jsx("ul", { role: "menu", children: menu.menuItems.map((menuItem2) => /* @__PURE__ */ jsx(MenuItem, { currentMenuItem, menuItem: menuItem2 }, `menu-side-panel__menu-item__${menuItem2.link}-${menuItem2.title}}`)) }, `side-panel-navigation-menu__${menu.id}`)
+    ] }, `side-panel-navigation-menu__${menu.id}`);
+  });
+}
+SidePanelNavigation.propTypes = propTypes$t;
+SidePanelNavigation.defaultProps = defaultProps$t;
 function useComponentState({ defaultValue, onChange, value }) {
   const [currentValue, setCurrentValue] = useState(value === void 0 ? defaultValue : value);
   return {
@@ -4876,7 +5332,7 @@ function useComponentState({ defaultValue, onChange, value }) {
     value: value === void 0 ? currentValue : value
   };
 }
-const propTypes$A = {
+const propTypes$s = {
   className: propTypesExports.string,
   // starting page number (for uncontrolled)
   defaultValue: propTypesExports.number,
@@ -4890,7 +5346,7 @@ const propTypes$A = {
   // controlled component: value is the current page number (0 based-index)
   value: propTypesExports.number
 };
-const defaultProps$A = {
+const defaultProps$s = {
   className: null,
   defaultValue: 0,
   id: null,
@@ -4961,8 +5417,20 @@ function Pagination({
     )
   ] });
 }
-Pagination.propTypes = propTypes$A;
-Pagination.defaultProps = defaultProps$A;
+Pagination.propTypes = propTypes$s;
+Pagination.defaultProps = defaultProps$s;
+function usePaginatedList({ list, pageIndex, itemsPerPage }) {
+  const [paginatedList] = useStateEffect({
+    calculateValueFn: () => {
+      const totalPages = Math.ceil(list.length / itemsPerPage);
+      const startIndex = totalPages ? Math.max(Math.min(totalPages - 1, pageIndex) * itemsPerPage) : 0;
+      const endIndex = startIndex + itemsPerPage;
+      return list.slice(startIndex, endIndex);
+    },
+    dependencyList: [list, pageIndex, itemsPerPage]
+  });
+  return paginatedList;
+}
 var fromEntries = function fromEntries2(entries) {
   return entries.reduce(function(acc, _ref) {
     var key = _ref[0], value = _ref[1];
@@ -19637,10 +20105,10 @@ function requireReactDom_development() {
       function getOwnerDocumentFromRootContainer(rootContainerElement) {
         return rootContainerElement.nodeType === DOCUMENT_NODE ? rootContainerElement : rootContainerElement.ownerDocument;
       }
-      function noop() {
+      function noop2() {
       }
       function trapClickOnNonInteractiveElement(node) {
-        node.onclick = noop;
+        node.onclick = noop2;
       }
       function setInitialDOMProperties(tag, domElement, rootContainerElement, nextProps, isCustomComponentTag) {
         for (var propKey in nextProps) {
@@ -35450,6 +35918,68 @@ var usePopper = function usePopper2(referenceElement, popperElement, options) {
     forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null
   };
 };
+const popupPlacement = {
+  AUTO: (
+    /** @type {PopupPlacement} */
+    "auto"
+  ),
+  AUTO_START: (
+    /** @type {PopupPlacement} */
+    "auto-start"
+  ),
+  AUTO_END: (
+    /** @type {PopupPlacement} */
+    "auto-end"
+  ),
+  BOTTOM: (
+    /** @type {PopupPlacement} */
+    "bottom"
+  ),
+  BOTTOM_START: (
+    /** @type {PopupPlacement} */
+    "bottom-start"
+  ),
+  BOTTOM_END: (
+    /** @type {PopupPlacement} */
+    "bottom-end"
+  ),
+  LEFT: (
+    /** @type {PopupPlacement} */
+    "left"
+  ),
+  LEFT_START: (
+    /** @type {PopupPlacement} */
+    "left-start"
+  ),
+  LEFT_END: (
+    /** @type {PopupPlacement} */
+    "left-end"
+  ),
+  RIGHT: (
+    /** @type {PopupPlacement} */
+    "right"
+  ),
+  RIGHT_START: (
+    /** @type {PopupPlacement} */
+    "right-start"
+  ),
+  RIGHT_END: (
+    /** @type {PopupPlacement} */
+    "right-end"
+  ),
+  TOP: (
+    /** @type {PopupPlacement} */
+    "top"
+  ),
+  TOP_START: (
+    /** @type {PopupPlacement} */
+    "top-start"
+  ),
+  TOP_END: (
+    /** @type {PopupPlacement} */
+    "top-end"
+  )
+};
 function useClickOutside(ref, handler, isDisabled = false) {
   useEffect(() => {
     let retVal;
@@ -35509,7 +36039,7 @@ const useGlobalKeyEvent = ({ whichKeyCode, onKeyDown, onKeyUp }) => {
   }, []);
   return keyPressed;
 };
-const propTypes$z = {
+const propTypes$r = {
   // usually the id of the button that controls the popup
   ariaLabelledBy: propTypesExports.string.isRequired,
   // The content of the popup
@@ -35535,7 +36065,7 @@ const propTypes$z = {
   // popup must tell its role for accessibility
   role: propTypesExports.oneOf(["dialog", "grid", "listbox", "menu", "tree"]).isRequired
 };
-const defaultProps$z = {
+const defaultProps$r = {
   className: null,
   hasCloseButton: false,
   innerRef: null,
@@ -35623,434 +36153,270 @@ function Popup({
     }
   );
 }
-Popup.propTypes = propTypes$z;
-Popup.defaultProps = defaultProps$z;
-function rectContainsPoint(rect, point) {
-  return rect.left <= point.x && rect.right >= point.x && rect.top <= point.y && rect.bottom >= point.y;
-}
-const SegmentedButton = () => null;
-const propTypes$y = {
-  // children are the options
-  children: propTypesExports.node,
+Popup.propTypes = propTypes$r;
+Popup.defaultProps = defaultProps$r;
+const propTypes$q = {
+  children: propTypesExports.node.isRequired,
   className: propTypesExports.string,
-  errorMessage: propTypesExports.string,
   innerRef: RefShape,
-  // id of the input; when tied to a Form the `id` is also the 'dot' path to the data in the form's state: ie person.contact.address.line1
-  id: propTypesExports.string.isRequired,
-  isDisabled: propTypesExports.bool,
-  label: propTypesExports.string.isRequired,
-  // e => ... do something with e.target.value ...; can be omitted so as to be uncontrolled OR if changes are sent through form's onChange
-  onChange: propTypesExports.func,
-  // when enter key pressed in field, submit the form
-  onSubmit: propTypesExports.func,
-  value: propTypesExports.string
+  id: propTypesExports.string
 };
-const defaultProps$y = {
-  children: null,
+const defaultProps$q = {
   className: null,
-  errorMessage: null,
   innerRef: null,
-  isDisabled: false,
-  onChange: null,
-  onSubmit: null,
-  value: null
+  id: null
 };
-function Select({
+function Table({
   children,
   className,
-  errorMessage,
   innerRef,
   id,
-  isDisabled,
-  label,
-  onChange,
-  onSubmit,
-  value,
   ...rest
 }) {
-  const {
-    currentErrorMessage,
-    currentOnChange,
-    currentOnFormKeyPress,
-    currentValue
-  } = useCurrentValuesFromForm({
-    errorMessage,
-    id,
-    onChange,
-    onSubmit,
-    value
-  });
-  return /* @__PURE__ */ jsxs("div", { className: "input-wrapper input-wrapper--select", children: [
-    /* @__PURE__ */ jsx("label", { htmlFor: id, children: label }),
-    /* @__PURE__ */ jsx(
-      "select",
-      {
-        "aria-describedby": currentErrorMessage ? `${id}-error` : null,
-        className,
-        disabled: isDisabled,
-        id,
-        name: id,
-        onChange: currentOnChange,
-        onKeyPress: currentOnFormKeyPress,
-        ref: innerRef,
-        value: currentValue,
-        ...rest,
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx(ErrorMessage, { errorMessage: currentErrorMessage, id })
-  ] });
+  return /* @__PURE__ */ jsx("table", { className: joinClassNames("some-table-classname", className), id, ref: innerRef, role: "grid", ...rest, children });
 }
-Select.propTypes = propTypes$y;
-Select.defaultProps = defaultProps$y;
-const propTypes$x = {
+Table.propTypes = propTypes$q;
+Table.defaultProps = defaultProps$q;
+const propTypes$p = {
+  children: propTypesExports.node,
   className: propTypesExports.string,
   innerRef: RefShape,
-  isDisabled: propTypesExports.bool,
-  label: propTypesExports.string.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  value: propTypesExports.any.isRequired
+  id: propTypesExports.string
 };
-const defaultProps$x = {
+const defaultProps$p = {
+  children: null,
   className: null,
   innerRef: null,
-  isDisabled: false
+  id: null
 };
-function SelectOption({
+function TableBody({
+  children,
   className,
   innerRef,
-  isDisabled,
-  label,
-  value,
+  id,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx(
-    "option",
-    {
-      className,
-      disabled: isDisabled,
-      ref: innerRef,
-      value,
-      ...rest,
-      children: label
+  return /* @__PURE__ */ jsx("tbody", { className: joinClassNames("some-TableBody-classname", className), id, ref: innerRef, ...rest, children });
+}
+TableBody.propTypes = propTypes$p;
+TableBody.defaultProps = defaultProps$p;
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  if (!getRandomValues) {
+    getRandomValues = typeof crypto !== "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+    if (!getRandomValues) {
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
     }
-  );
+  }
+  return getRandomValues(rnds8);
 }
-SelectOption.propTypes = propTypes$x;
-SelectOption.defaultProps = defaultProps$x;
-const propTypes$w = {
-  currentMenuItem: MenuItemShape,
-  menus: propTypesExports.arrayOf(MenuShape).isRequired
-};
-const defaultProps$w = {
-  currentMenuItem: null
-};
-function SidePanelNavigation({ currentMenuItem, menus }) {
-  return menus.map((menu) => {
-    const TitleTagName = menu.titleTagName || "h2";
-    return /* @__PURE__ */ jsxs("nav", { className: "menu-side-panel", "aria-labelledby": menu.id, children: [
-      /* @__PURE__ */ jsx(
-        TitleTagName,
-        {
-          id: menu.id,
-          className: joinClassNames(menu.titleTagClassName, "menu-side-panel__header"),
-          children: menu.header
-        }
-      ),
-      /* @__PURE__ */ jsx("ul", { role: "menu", children: menu.menuItems.map((menuItem2) => /* @__PURE__ */ jsx(MenuItem, { currentMenuItem, menuItem: menuItem2 }, `menu-side-panel__menu-item__${menuItem2.link}-${menuItem2.title}}`)) }, `side-panel-navigation-menu__${menu.id}`)
-    ] }, `side-panel-navigation-menu__${menu.id}`);
-  });
+const byteToHex = [];
+for (let i2 = 0; i2 < 256; ++i2) {
+  byteToHex.push((i2 + 256).toString(16).slice(1));
 }
-SidePanelNavigation.propTypes = propTypes$w;
-SidePanelNavigation.defaultProps = defaultProps$w;
-function stringToId(inputString) {
-  let retVal;
-  retVal = inputString == null ? void 0 : inputString.toLowerCase();
-  retVal = retVal == null ? void 0 : retVal.replaceAll(" ", "-");
-  retVal = retVal == null ? void 0 : retVal.replaceAll(/[^a-zA-Z0-9-]+/g, "");
-  return retVal;
+function unsafeStringify(arr, offset2 = 0) {
+  return (byteToHex[arr[offset2 + 0]] + byteToHex[arr[offset2 + 1]] + byteToHex[arr[offset2 + 2]] + byteToHex[arr[offset2 + 3]] + "-" + byteToHex[arr[offset2 + 4]] + byteToHex[arr[offset2 + 5]] + "-" + byteToHex[arr[offset2 + 6]] + byteToHex[arr[offset2 + 7]] + "-" + byteToHex[arr[offset2 + 8]] + byteToHex[arr[offset2 + 9]] + "-" + byteToHex[arr[offset2 + 10]] + byteToHex[arr[offset2 + 11]] + byteToHex[arr[offset2 + 12]] + byteToHex[arr[offset2 + 13]] + byteToHex[arr[offset2 + 14]] + byteToHex[arr[offset2 + 15]]).toLowerCase();
 }
-const propTypes$v = {
-  className: propTypesExports.string,
-  errorMessage: propTypesExports.string,
-  // id of the input; when tied to a Form the `id` is also the 'dot' path to the data in the form's state: ie person.contact.address.line1
-  id: propTypesExports.string.isRequired,
-  innerRef: RefShape,
-  isDisabled: propTypesExports.bool,
-  label: propTypesExports.string.isRequired,
-  labelClassName: propTypesExports.string,
-  labelOff: propTypesExports.node,
-  labelOn: propTypesExports.node,
-  // e => ... do something with e.target.value ...; can be omitted so as to be uncontrolled OR if changes are sent through form's onChange
-  onChange: propTypesExports.func,
-  // when enter key pressed in field, submit the form
-  onSubmit: propTypesExports.func,
-  size: propTypesExports.oneOf([formElementSizesEnum.SMALL, formElementSizesEnum.MEDIUM, formElementSizesEnum.LARGE]),
-  sliderChildren: propTypesExports.node,
-  value: propTypesExports.bool,
-  width: propTypesExports.number
+const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = {
+  randomUUID
 };
-const defaultProps$v = {
-  className: null,
-  errorMessage: null,
-  innerRef: null,
-  isDisabled: false,
-  labelClassName: "",
-  labelOff: null,
-  labelOn: null,
-  onChange: null,
-  onSubmit: null,
-  size: formElementSizesEnum.MEDIUM,
-  sliderChildren: null,
-  value: null,
-  width: null
-};
-function Switch({
-  className,
-  errorMessage,
-  id,
-  innerRef,
-  isDisabled,
-  label,
-  labelClassName,
-  labelOn,
-  labelOff,
-  onChange,
-  onSubmit,
-  size,
-  sliderChildren,
-  value,
-  width,
-  ...rest
-}) {
-  const {
-    currentErrorMessage,
-    currentOnChange,
-    currentOnFormKeyPress,
-    currentValue
-  } = useCurrentValuesFromForm({
-    errorMessage,
-    id,
-    onChange,
-    onSubmit,
-    value
+function v4(options, buf, offset2) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)();
+  rnds[6] = rnds[6] & 15 | 64;
+  rnds[8] = rnds[8] & 63 | 128;
+  if (buf) {
+    offset2 = offset2 || 0;
+    for (let i2 = 0; i2 < 16; ++i2) {
+      buf[offset2 + i2] = rnds[i2];
+    }
+    return buf;
+  }
+  return unsafeStringify(rnds);
+}
+function useComponentGuid() {
+  const [guid] = useStateEffect({
+    calculateValueFn: () => v4(),
+    dependencyList: []
   });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "input-wrapper input-wrapper--switch",
-      ref: innerRef,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: joinClassNames(
-              "switch__wrapper",
-              size === formElementSizesEnum.MEDIUM ? null : `switch--${size}`,
-              isDisabled ? "switch--disabled" : null,
-              currentValue && "switch__wrapper--on"
-            ),
-            htmlFor: id,
-            style: width && { width: `${width}px` },
-            children: [
-              /* @__PURE__ */ jsx("span", { className: joinClassNames("switch__label", labelClassName), children: label }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  "aria-describedby": currentErrorMessage ? `${id}-error` : null,
-                  checked: currentValue,
-                  className: joinClassNames("switch visually-hidden", className),
-                  disabled: isDisabled,
-                  id,
-                  name: id,
-                  onChange: currentOnChange,
-                  onKeyPress: currentOnFormKeyPress,
-                  type: "checkbox",
-                  ...rest
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: joinClassNames("switch__slider", currentValue && "switch__slider--on"), children: sliderChildren }),
-              labelOn || labelOff ? /* @__PURE__ */ jsxs("span", { className: "switch__inner-label", children: [
-                /* @__PURE__ */ jsx("span", { className: joinClassNames(currentValue ? "show" : "", "switch__inner-label-on"), children: labelOn }),
-                /* @__PURE__ */ jsx("span", { className: joinClassNames(currentValue ? "" : "show", "switch__inner-label-off"), children: labelOff })
-              ] }) : null
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(ErrorMessage, { errorMessage: currentErrorMessage, id })
-      ]
-    }
-  );
+  return guid;
 }
-Switch.propTypes = propTypes$v;
-Switch.defaultProps = defaultProps$v;
-const TabGroupContext = React__default.createContext();
-const propTypes$u = {
-  children: propTypesExports.node.isRequired,
-  // a tab id must be provided for accessibility and selecting tab
-  id: propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]).isRequired
-};
-const defaultProps$u = {};
-function Tab({ children, id }) {
-  const {
-    selectedTabId,
-    setSelectedTabId,
-    tabGroupId
-  } = useContext(TabGroupContext);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: joinClassNames(
-        selectedTabId === id && "tab-group__tab--selected",
-        "tab-group__tab"
-      ),
-      children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          "aria-controls": `tabpanel-${tabGroupId}-${id}`,
-          "aria-selected": selectedTabId === id,
-          className: joinClassNames(
-            selectedTabId === id && "tab-group__tab-button--selected",
-            "tab-group__tab-button"
-          ),
-          id: `tab-${tabGroupId}-${id}`,
-          onClick: handleEvent(() => setSelectedTabId(id)),
-          role: "tab",
-          tabIndex: "-1",
-          type: "button",
-          children
-        }
-      )
-    }
+function chainSorters(sorters, ...sorterParams) {
+  return (
+    // One Sorter to rule them all, One Sorter to find them,
+    // One Sorter to bring them all, and in the darkness bind them,
+    (a, b) => (sorters || []).reduce(
+      // loop through the sorters until a comparison gets a non-zero result
+      (result, sorter) => result === 0 ? sorter(a, b, ...sorterParams) : result,
+      // default to zero/equals result
+      0
+    )
   );
 }
-Tab.propTypes = propTypes$u;
-Tab.defaultProps = defaultProps$u;
-const propTypes$t = {
-  children: propTypesExports.node.isRequired,
-  className: propTypesExports.string,
-  defaultValue: propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]),
-  onChange: propTypesExports.func,
-  // value is the currentSelectedTabIndex number
-  value: propTypesExports.number
-};
-const defaultProps$t = {
-  className: null,
-  defaultValue: null,
-  onChange: null,
-  value: null
-};
-let nextTabGroupId = 0;
-function TabGroup({
-  children,
-  className,
-  defaultValue,
-  onChange,
-  value
-}) {
-  const [tabGroupState, setTabGroupState] = i(() => {
-    nextTabGroupId += 1;
-    return {
-      selectedTabId: defaultValue || NaN,
-      tabGroupId: nextTabGroupId
-    };
-  });
-  const contextValue = useMemo(
-    () => ({
-      tabGroupId: tabGroupState.tabGroupId,
-      selectedTabId: value || tabGroupState.selectedTabId,
-      setSelectedTabId: (tabId) => {
-        if (onChange) {
-          onChange(tabId);
-        } else {
-          setTabGroupState((draftState) => {
-            draftState.selectedTabId = tabId;
-          });
-        }
-      }
-    }),
-    [tabGroupState, value]
-  );
-  return /* @__PURE__ */ jsx(TabGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: joinClassNames("tab-group", className), id: `tab-group-${tabGroupState.id}`, children }) });
+function toSafeString(value) {
+  return !value && value !== 0 ? "" : `${value}`;
 }
-TabGroup.propTypes = propTypes$t;
-TabGroup.defaultProps = defaultProps$t;
-const propTypes$s = {
-  children: propTypesExports.node.isRequired,
-  className: propTypesExports.string,
-  tagName: propTypesExports.string
+const TableBodyDataRowContext = React__default.createContext();
+const tableSortingRuleFieldType = {
+  // compares dates as Date() objects
+  // dates represented by an ISO string should use the STRING enum value
+  DATE: "date",
+  // compares numbers (does do Number(fieldValue)) conversion so it is safe to pass strings as numbers)
+  NUMBER: "number",
+  // does simple localeCompare() string comparison; is safe for null strings
+  STRING: "string"
 };
-const defaultProps$s = {
-  className: null,
-  tagName: "div"
+const useRefAlways = (value) => {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
 };
-function TabGroupTitle({ children, className, tagName: TagName }) {
-  const { tabGroupId } = useContext(TabGroupContext);
-  return /* @__PURE__ */ jsx(TagName, { id: `tab-group-${tabGroupId}`, className: joinClassNames("tag-group__title", className), children });
+const TableContext = React__default.createContext();
+function useTableContext() {
+  return useContext(TableContext);
 }
-TabGroupTitle.propTypes = propTypes$s;
-TabGroupTitle.defaultProps = defaultProps$s;
-const propTypes$r = {
+const propTypes$o = {
   children: propTypesExports.node.isRequired,
   className: propTypesExports.string,
   innerRef: RefShape,
   id: propTypesExports.string
 };
-const defaultProps$r = {
+const defaultProps$o = {
   className: null,
   innerRef: null,
   id: null
 };
-function Table({
-  children,
-  className,
-  innerRef,
-  id,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx("table", { className: joinClassNames("some-table-classname", className), id, ref: innerRef, role: "grid", ...rest, children });
+function sortByFieldType(sortingRule, fieldValueA, fieldValueB) {
+  let result;
+  switch (sortingRule.fieldType) {
+    case tableSortingRuleFieldType.DATE:
+      result = ((fieldValueA == null ? void 0 : fieldValueA.getTime()) || 0) - ((fieldValueB == null ? void 0 : fieldValueB.getTime()) || 0);
+      break;
+    case tableSortingRuleFieldType.NUMBER:
+      result = Number(fieldValueA || 0) - Number(fieldValueB || 0);
+      break;
+    case tableSortingRuleFieldType.STRING:
+      result = (fieldValueA || "").localeCompare(fieldValueB || "");
+      break;
+    default:
+      throw new Error(`Unknown tableSortingRuleFieldType '${sortingRule.fieldType}'`);
+  }
+  return result;
 }
-Table.propTypes = propTypes$r;
-Table.defaultProps = defaultProps$r;
-const propTypes$q = {
-  children: propTypesExports.node,
-  className: propTypesExports.string,
-  innerRef: RefShape,
-  id: propTypesExports.string
-};
-const defaultProps$q = {
-  children: null,
-  className: null,
-  innerRef: null,
-  id: null
-};
-function TableBody({
+function combineData(tableData, whichField) {
+  return Object.values(tableData).map((tableDatum) => tableDatum[whichField]).flat();
+}
+function TableWrapper({
   children,
   className,
   innerRef,
   id,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx("tbody", { className: joinClassNames("some-TableBody-classname", className), id, ref: innerRef, ...rest, children });
-}
-TableBody.propTypes = propTypes$q;
-TableBody.defaultProps = defaultProps$q;
-const TableBodyDataRowContext = React__default.createContext();
-const TableContext = React__default.createContext();
-const chainSorters = (sorters, ...sorterParams) => (
-  // One Sorter to rule them all, One Sorter to find them,
-  // One Sorter to bring them all, and in the darkness bind them,
-  (a, b) => (sorters || []).reduce(
-    // loop through the sorters until a comparison gets a non-zero result
-    (result, sorter) => result === 0 ? sorter(a, b, ...sorterParams) : result,
-    // default to zero/equals result
-    0
-  )
-);
-function toSafeString(value) {
-  return !value && value !== 0 ? "" : `${value}`;
+  const [state, setState] = i({
+    // when sorting, should the sort order for a rule be the "default"
+    // ie a rule defaults to ascending so when currentSortingOrderIsDefault is true then sort that rule ascending
+    currentSortingOrderIsDefault: true,
+    // [recordFieldPath]: filterValue <== the current filtering values from <TableFilter... /> components
+    filterValues: {
+      // context level values from a <TableFilters /> component (<TableFilter... /> child components would override/chain these values)
+      // defaultValue - object of [recordFieldPath]:value pairs for filtering inputs
+      defaultValue: null,
+      // instead of doing a "contains" match, the match must exactly match
+      isExactMatch: false,
+      // onChange to call for any filter change
+      onChange: null,
+      // value - object of [recordFieldPath]:value pairs for filtering inputs
+      value: {}
+    },
+    // these are the sorting rules to which a <TableHeadCell> connects assumes order is add order
+    sortingRules: {},
+    // data for this table separated out by component GUID
+    //
+    // A table may have multiple dynamic and/or static sections of data yet some things, like
+    // a Table Select Filter that wants to show all the possible values, wants to know what all
+    // the possible data is for the table. Each data section needs to be able to add/remove its
+    // data since the data could morph at each render per component. This `tableData` then holds the data per
+    // component (use useComponentGuid() hook to get a guid) so that the component can add/remove its data
+    // without zapping other components' data but still give a full picture of all the data in the end.
+    // Use the context's exposed `setBodyDataForComponentGuid` to manipulate table data for a component
+    //
+    // { [guid]: {allData, filteredData }} - allData = all the records, filteredData = just the records being shown
+    tableData: {},
+    // (func) when table sorting changes, this callback will be called: from <TableSortingRules>
+    tableSortingOnChange: null,
+    // (string | [string]) the current recordFieldPath name for the current header being sorted
+    // array if <TableHeadCell> specifies sort order; otherwise, sort fields in registration order
+    // set when a TableHeadCell is selected and sets its tableSortingFieldPaths as the tableSortingFieldPath
+    // TableBodyData uses this value to sort its records
+    tableSortingFieldPath: null,
+    // a TableHeadCell can provide tableSortingFieldPaths to customize which sorters to use in which order
+    tableSortingFieldPaths: null
+  });
+  const stateRef = useRefAlways(state);
+  const contextValue = useMemo(
+    () => ({
+      // for analytic usage, rendering is generally done at the component level and not at the context level
+      // because each data section handles it differently. This allData is useful for filtering and other
+      // global table tooling that pokes through the data.
+      allData: combineData(stateRef.current.tableData, "allData"),
+      // ATTOW: filteredData may/may not work with a TableRow and TableFilters?
+      filteredData: combineData(stateRef.current.tableData, "filteredData"),
+      // register a new rule for sorting, generally from a <TableSortingRule>
+      registerSortingRule: (sortingRule) => setState((draftState) => {
+        draftState.sortingRules[sortingRule.recordFieldPath] = {
+          ...sortingRule,
+          sorter: (recordA, recordB, records) => {
+            const fieldValueA = valueAtPath({ object: recordA.record, path: sortingRule.recordFieldPath });
+            const fieldValueB = valueAtPath({ object: recordB.record, path: sortingRule.recordFieldPath });
+            let result;
+            if (sortingRule.customSort) {
+              result = sortingRule.customSort({
+                fieldValueA,
+                fieldValueB,
+                recordA: recordA.record,
+                recordAIndex: recordA.recordIndex,
+                recordB: recordB.record,
+                recordBIndex: recordB.recordIndex,
+                records
+              });
+            } else {
+              result = sortByFieldType(sortingRule, fieldValueA, fieldValueB);
+            }
+            return result * (stateRef.current.currentSortingOrderIsDefault ? 1 : -1) * (sortingRule.defaultIsAscending ? 1 : -1);
+          }
+        };
+      }),
+      // unregister a rule for sorting, generally when a <TableSortingRule> unmounts
+      unregisterSortingRule: (recordFieldPath) => setState((draftState) => {
+        delete draftState.sortingRules[recordFieldPath];
+      }),
+      /**
+       * data recording per table body section so as to form a full picture of the currently exposed data
+       * @param {string} guid the guid tied to this specific component instance (use useComponentGuid())
+       * @param {any[] | null} data the data for this component (or null on unmount)
+       * @param {any[] | null} [filteredData] the filtered data for this component (optional, defaults to [])
+       */
+      setBodyDataForComponentGuid: (guid, allData, filteredData) => {
+        setState((draftState) => {
+          draftState.tableData[guid] = { allData, filteredData: filteredData || [] };
+        });
+      },
+      setState,
+      state
+    }),
+    [state]
+  );
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: joinClassNames("some-table-wrapper-className", className), id, ref: innerRef, ...rest, children }) });
 }
-const propTypes$p = {
+TableWrapper.propTypes = propTypes$o;
+TableWrapper.defaultProps = defaultProps$o;
+const propTypes$n = {
   // the TableBodyDataRowTemplate and TableBodyDataCellTemplate elements making up the repeatable section
   children: propTypesExports.node.isRequired,
   // field on the record that provides the unique id of the record; uses pathing ie 'contact.address.zipCode'
@@ -36058,9 +36424,10 @@ const propTypes$p = {
   // the data records to repeat in the children templates
   records: propTypesExports.arrayOf(propTypesExports.shape({})).isRequired
 };
-const defaultProps$p = {};
+const defaultProps$n = {};
 function TableBodyData({ children, recordIdField, records }) {
   const [recordsForContexts, setRecordsForContexts] = i(null);
+  const guid = useComponentGuid();
   const {
     state: {
       currentSortingOrderIsDefault,
@@ -36068,8 +36435,9 @@ function TableBodyData({ children, recordIdField, records }) {
       sortingRules,
       tableSortingFieldPath,
       tableSortingFieldPaths
-    }
-  } = useContext(TableContext);
+    },
+    setBodyDataForComponentGuid
+  } = useTableContext();
   useEffect(
     () => {
       let newRecordsForContext = records == null ? void 0 : records.map((record, recordIndex) => ({ record, recordIndex, records }));
@@ -36089,6 +36457,7 @@ function TableBodyData({ children, recordIdField, records }) {
         true
       ));
       setRecordsForContexts(newRecordsForContext);
+      setBodyDataForComponentGuid(guid, records, newRecordsForContext);
     },
     [currentSortingOrderIsDefault, filterValues, records, tableSortingFieldPath, tableSortingFieldPaths]
   );
@@ -36097,9 +36466,9 @@ function TableBodyData({ children, recordIdField, records }) {
     recordsForContexts == null ? void 0 : recordsForContexts.map((recordForContext) => /* @__PURE__ */ jsx(TableBodyDataRowContext.Provider, { value: recordForContext, children }, `table-body-data-${valueAtPath({ object: recordForContext.record, path: recordIdField })}`))
   ) : null;
 }
-TableBodyData.propTypes = propTypes$p;
-TableBodyData.defaultProps = defaultProps$p;
-const propTypes$o = {
+TableBodyData.propTypes = propTypes$n;
+TableBodyData.defaultProps = defaultProps$n;
+const propTypes$m = {
   children: propTypesExports.node,
   className: propTypesExports.string,
   id: propTypesExports.string,
@@ -36107,7 +36476,7 @@ const propTypes$o = {
   onClick: propTypesExports.func,
   onDoubleClick: propTypesExports.func
 };
-const defaultProps$o = {
+const defaultProps$m = {
   children: null,
   className: null,
   id: null,
@@ -36139,9 +36508,9 @@ function TableCell({
     }
   );
 }
-TableCell.propTypes = propTypes$o;
-TableCell.defaultProps = defaultProps$o;
-const propTypes$n = {
+TableCell.propTypes = propTypes$m;
+TableCell.defaultProps = defaultProps$m;
+const propTypes$l = {
   children: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.func]),
   className: propTypesExports.string,
   id: propTypesExports.string,
@@ -36153,7 +36522,7 @@ const propTypes$n = {
   // the field path in the record to the data to render in the <td>; ie 'person.contact.address.city'
   recordFieldPath: propTypesExports.string
 };
-const defaultProps$n = {
+const defaultProps$l = {
   children: null,
   className: null,
   id: null,
@@ -36197,9 +36566,9 @@ function TableBodyDataCellTemplate({
     }
   );
 }
-TableBodyDataCellTemplate.propTypes = propTypes$n;
-TableBodyDataCellTemplate.defaultProps = defaultProps$n;
-const propTypes$m = {
+TableBodyDataCellTemplate.propTypes = propTypes$l;
+TableBodyDataCellTemplate.defaultProps = defaultProps$l;
+const propTypes$k = {
   // the TableBodyDataCellTemplates for the row
   children: propTypesExports.node.isRequired,
   // className for the <TableRow>
@@ -36211,7 +36580,7 @@ const propTypes$m = {
   // ({ e }) => { ... do something ... }
   onDoubleClick: propTypesExports.func
 };
-const defaultProps$m = {
+const defaultProps$k = {
   className: null,
   innerRef: null,
   onClick: null,
@@ -36233,118 +36602,48 @@ function TableBodyDataRowTemplate({
         "some-TableBodyDataRowTemplate-classname",
         isFunction_1(className) ? className(rowContextData) : className
       ),
-      onClick: onClick && ((e) => onClick({ e, ...rowContextData })),
-      onDoubleClick: onDoubleClick && ((e) => onDoubleClick({ e, ...rowContextData })),
-      ref: innerRef,
-      ...rest,
-      children
-    }
-  );
-}
-TableBodyDataRowTemplate.propTypes = propTypes$m;
-TableBodyDataRowTemplate.defaultProps = defaultProps$m;
-const propTypes$l = {
-  children: propTypesExports.func.isRequired,
-  className: propTypesExports.string,
-  innerRef: RefShape,
-  id: propTypesExports.string
-};
-const defaultProps$l = {
-  className: null,
-  innerRef: null,
-  id: null
-};
-function TableFilterCustom({
-  children,
-  className,
-  innerRef,
-  id,
-  ...rest
-}) {
-  const { setState: setStateContext, state: stateContext } = useContext(TableContext);
-  return /* @__PURE__ */ jsx("th", { className: joinClassNames("some-TableFilterCustom-classname", className), id, ref: innerRef, ...rest, children: children({
-    // current filter values (key => value)
-    filterValues: stateContext.filterValues.value,
-    // 'setter' function that will update just the filterValues.value of the table context
-    setFilterValues: (setFilterValuesFunc) => {
-      setStateContext((draftStateContext) => {
-        setFilterValuesFunc(draftStateContext.filterValues.value);
-      });
-    }
-  }) });
-}
-TableFilterCustom.propTypes = propTypes$l;
-TableFilterCustom.defaultProps = defaultProps$l;
-const propTypes$k = {
-  className: propTypesExports.string,
-  errorMessage: propTypesExports.string,
-  innerRef: RefShape,
-  // id of the input; when tied to a Form the `id` is also the 'dot' path to the data in the form's state: ie person.contact.address.line1
-  id: propTypesExports.string.isRequired,
-  isDisabled: propTypesExports.bool,
-  label: propTypesExports.string.isRequired,
-  // e => ... do something with e.target.value ...; can be omitted so as to be uncontrolled OR if changes are sent through form's onChange
-  onChange: propTypesExports.func,
-  // when enter key pressed in field, submit the form
-  onSubmit: propTypesExports.func,
-  value: propTypesExports.string
-};
-const defaultProps$k = {
-  className: null,
-  errorMessage: null,
-  innerRef: null,
-  isDisabled: false,
-  onChange: null,
-  onSubmit: null,
-  value: null
-};
-function TextInput({
-  className,
-  errorMessage,
-  innerRef,
-  id,
-  isDisabled,
-  label,
-  onChange,
-  onSubmit,
-  value,
-  ...rest
-}) {
-  const {
-    currentErrorMessage,
-    currentOnChange,
-    currentOnFormKeyPress,
-    currentValue
-  } = useCurrentValuesFromForm({
-    errorMessage,
-    id,
-    onChange,
-    onSubmit,
-    value
-  });
-  return /* @__PURE__ */ jsxs("div", { className: "input-wrapper input-wrapper--text-input", children: [
-    /* @__PURE__ */ jsx("label", { htmlFor: id, children: label }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        "aria-describedby": currentErrorMessage ? `${id}-error` : null,
-        className,
-        disabled: isDisabled,
-        id,
-        name: id,
-        onChange: currentOnChange,
-        onKeyPress: currentOnFormKeyPress,
-        ref: innerRef,
-        type: "text",
-        value: currentValue,
-        ...rest
-      }
-    ),
-    /* @__PURE__ */ jsx(ErrorMessage, { errorMessage: currentErrorMessage, id })
-  ] });
+      onClick: onClick && ((e) => onClick({ e, ...rowContextData })),
+      onDoubleClick: onDoubleClick && ((e) => onDoubleClick({ e, ...rowContextData })),
+      ref: innerRef,
+      ...rest,
+      children
+    }
+  );
+}
+TableBodyDataRowTemplate.propTypes = propTypes$k;
+TableBodyDataRowTemplate.defaultProps = defaultProps$k;
+const propTypes$j = {
+  children: propTypesExports.func.isRequired,
+  className: propTypesExports.string,
+  innerRef: RefShape,
+  id: propTypesExports.string
+};
+const defaultProps$j = {
+  className: null,
+  innerRef: null,
+  id: null
+};
+function TableFilterCustom({
+  children,
+  className,
+  innerRef,
+  id,
+  ...rest
+}) {
+  const { setState: setStateContext, state: stateContext } = useContext(TableContext);
+  return /* @__PURE__ */ jsx("th", { className: joinClassNames("some-TableFilterCustom-classname", className), id, ref: innerRef, ...rest, children: children({
+    // current filter values (key => value)
+    filterValues: stateContext.filterValues.value,
+    // 'setter' function that will update just the filterValues.value of the table context
+    setFilterValues: (setFilterValuesFunc) => {
+      setStateContext((draftStateContext) => {
+        setFilterValuesFunc(draftStateContext.filterValues.value);
+      });
+    }
+  }) });
 }
-TextInput.propTypes = propTypes$k;
-TextInput.defaultProps = defaultProps$k;
+TableFilterCustom.propTypes = propTypes$j;
+TableFilterCustom.defaultProps = defaultProps$j;
 function useCurrentValuesFromStateContext({
   // the React.createContext being questioned
   context,
@@ -36389,7 +36688,7 @@ function useCurrentValuesFromStateContext({
     )
   };
 }
-const propTypes$j = {
+const propTypes$i = {
   className: propTypesExports.string,
   defaultValue: propTypesExports.string,
   innerRef: RefShape,
@@ -36398,7 +36697,7 @@ const propTypes$j = {
   recordFieldPath: propTypesExports.string.isRequired,
   value: propTypesExports.string
 };
-const defaultProps$j = {
+const defaultProps$i = {
   className: null,
   defaultValue: null,
   innerRef: null,
@@ -36438,15 +36737,15 @@ function TableFilterDate({
     }
   ) });
 }
-TableFilterDate.propTypes = propTypes$j;
-TableFilterDate.defaultProps = defaultProps$j;
-const propTypes$i = {
+TableFilterDate.propTypes = propTypes$i;
+TableFilterDate.defaultProps = defaultProps$i;
+const propTypes$h = {
   children: propTypesExports.node,
   className: propTypesExports.string,
   innerRef: RefShape,
   id: propTypesExports.string
 };
-const defaultProps$i = {
+const defaultProps$h = {
   children: null,
   className: null,
   innerRef: null,
@@ -36461,72 +36760,166 @@ function TableFilterNone({
 }) {
   return /* @__PURE__ */ jsx("th", { className: joinClassNames("some-TableFilterNone-classname", className), id, ref: innerRef, ...rest, children });
 }
-TableFilterNone.propTypes = propTypes$i;
-TableFilterNone.defaultProps = defaultProps$i;
-const propTypes$h = {
-  children: propTypesExports.node.isRequired,
-  defaultValue: propTypesExports.shape({}),
+TableFilterNone.propTypes = propTypes$h;
+TableFilterNone.defaultProps = defaultProps$h;
+var HASH_UNDEFINED = "__lodash_hash_undefined__";
+function setCacheAdd$1(value) {
+  this.__data__.set(value, HASH_UNDEFINED);
+  return this;
+}
+var _setCacheAdd = setCacheAdd$1;
+function setCacheHas$1(value) {
+  return this.__data__.has(value);
+}
+var _setCacheHas = setCacheHas$1;
+var MapCache = _MapCache, setCacheAdd = _setCacheAdd, setCacheHas = _setCacheHas;
+function SetCache$1(values) {
+  var index = -1, length = values == null ? 0 : values.length;
+  this.__data__ = new MapCache();
+  while (++index < length) {
+    this.add(values[index]);
+  }
+}
+SetCache$1.prototype.add = SetCache$1.prototype.push = setCacheAdd;
+SetCache$1.prototype.has = setCacheHas;
+var _SetCache = SetCache$1;
+var baseIndexOf = _baseIndexOf;
+function arrayIncludes$1(array, value) {
+  var length = array == null ? 0 : array.length;
+  return !!length && baseIndexOf(array, value, 0) > -1;
+}
+var _arrayIncludes = arrayIncludes$1;
+function arrayIncludesWith$1(array, value, comparator) {
+  var index = -1, length = array == null ? 0 : array.length;
+  while (++index < length) {
+    if (comparator(value, array[index])) {
+      return true;
+    }
+  }
+  return false;
+}
+var _arrayIncludesWith = arrayIncludesWith$1;
+function cacheHas$1(cache, key) {
+  return cache.has(key);
+}
+var _cacheHas = cacheHas$1;
+function noop$1() {
+}
+var noop_1 = noop$1;
+function setToArray$2(set2) {
+  var index = -1, result = Array(set2.size);
+  set2.forEach(function(value) {
+    result[++index] = value;
+  });
+  return result;
+}
+var _setToArray = setToArray$2;
+var Set$1 = _Set, noop = noop_1, setToArray$1 = _setToArray;
+var INFINITY = 1 / 0;
+var createSet$1 = !(Set$1 && 1 / setToArray$1(new Set$1([, -0]))[1] == INFINITY) ? noop : function(values) {
+  return new Set$1(values);
+};
+var _createSet = createSet$1;
+var SetCache = _SetCache, arrayIncludes = _arrayIncludes, arrayIncludesWith = _arrayIncludesWith, cacheHas = _cacheHas, createSet = _createSet, setToArray = _setToArray;
+var LARGE_ARRAY_SIZE = 200;
+function baseUniq$1(array, iteratee, comparator) {
+  var index = -1, includes = arrayIncludes, length = array.length, isCommon = true, result = [], seen = result;
+  if (comparator) {
+    isCommon = false;
+    includes = arrayIncludesWith;
+  } else if (length >= LARGE_ARRAY_SIZE) {
+    var set2 = iteratee ? null : createSet(array);
+    if (set2) {
+      return setToArray(set2);
+    }
+    isCommon = false;
+    includes = cacheHas;
+    seen = new SetCache();
+  } else {
+    seen = iteratee ? [] : result;
+  }
+  outer:
+    while (++index < length) {
+      var value = array[index], computed = iteratee ? iteratee(value) : value;
+      value = comparator || value !== 0 ? value : 0;
+      if (isCommon && computed === computed) {
+        var seenIndex = seen.length;
+        while (seenIndex--) {
+          if (seen[seenIndex] === computed) {
+            continue outer;
+          }
+        }
+        if (iteratee) {
+          seen.push(computed);
+        }
+        result.push(value);
+      } else if (!includes(seen, computed, comparator)) {
+        if (seen !== result) {
+          seen.push(computed);
+        }
+        result.push(value);
+      }
+    }
+  return result;
+}
+var _baseUniq = baseUniq$1;
+var baseUniq = _baseUniq;
+function uniq(array) {
+  return array && array.length ? baseUniq(array) : [];
+}
+var uniq_1 = uniq;
+const propTypes$g = {
   className: propTypesExports.string,
-  innerRef: RefShape,
-  id: propTypesExports.string,
-  // fires when any filter changes; ie ({ recordFieldPath, value }) => { ... do something ... }
-  onChange: propTypesExports.func,
-  // make sure to useMemo() before passing value in here
-  value: propTypesExports.shape({})
+  idBase: propTypesExports.string,
+  recordFieldPath: propTypesExports.string.isRequired
 };
-const defaultProps$h = {
+const defaultProps$g = {
   className: null,
-  defaultValue: null,
-  innerRef: null,
-  id: null,
-  onChange: null,
-  value: null
+  idBase: null
 };
-function TableFilters({
-  children,
+function TableFilterSelectAllOptions({
   className,
-  defaultValue,
-  innerRef,
-  id,
-  onChange,
-  value,
+  idBase,
+  recordFieldPath,
   ...rest
 }) {
-  const { setState, state } = useContext(TableContext);
-  useEffect(
-    () => {
-      if (state.filterValues.defaultValue || state.filterValues.onChange || state.filterValues.value && Object.values(state.filterValues.value).length) {
-        console.warn("defaultValue, onChange, or value were already set for Filters. There should only be one <TableFilters/> section in a table.");
+  const { allData } = useTableContext();
+  const dataOptions = uniq_1(
+    allData.map((datum) => datum[recordFieldPath]).filter(identity_1)
+  ).sort(chainSorters([
+    (a, b) => a < b ? -1 : 0,
+    (a, b) => a > b ? 1 : 0
+  ]));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectOption,
+      {
+        className,
+        id: idBase ? `${idBase}-empty` : null,
+        label: "",
+        value: "",
+        ...rest
       }
-      setState((draftState) => {
-        draftState.filterValues.defaultValue = defaultValue;
-        draftState.filterValues.onChange = onChange;
-        draftState.filterValues.value = value || draftState.filterValues.value;
-      });
-      return () => {
-        setState((draftState) => {
-          draftState.filterValues.defaultValue = null;
-          draftState.filterValues.onChange = null;
-          draftState.filterValues.value = {};
-        });
-      };
-    },
-    []
-  );
-  useEffect(
-    () => {
-      setState((draftState) => {
-        draftState.filterValues.value = value || draftState.filterValues.value;
-      });
-    },
-    [value]
-  );
-  return /* @__PURE__ */ jsx("tr", { className: joinClassNames("some-TableFilters-classname", className), id, ref: innerRef, ...rest, children });
+    ),
+    // create select options for each possible data value
+    dataOptions.map((dataOption) => /* @__PURE__ */ jsx(
+      SelectOption,
+      {
+        className,
+        id: idBase ? `${idBase}-${dataOption}` : null,
+        label: dataOption,
+        value: dataOption,
+        ...rest
+      },
+      `${idBase || "table-filter-select-all-options"}-${dataOption}`
+    ))
+  ] });
 }
-TableFilters.propTypes = propTypes$h;
-TableFilters.defaultProps = defaultProps$h;
-const propTypes$g = {
-  children: propTypesExports.node.isRequired,
+TableFilterSelectAllOptions.propTypes = propTypes$g;
+TableFilterSelectAllOptions.defaultProps = defaultProps$g;
+const propTypes$f = {
+  // if no children (TableFilterSelect) are provided then it will automagically use TableFilterSelectAllOptions
+  children: propTypesExports.node,
   className: propTypesExports.string,
   defaultValue: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
   innerRef: RefShape,
@@ -36535,7 +36928,8 @@ const propTypes$g = {
   recordFieldPath: propTypesExports.string.isRequired,
   value: propTypesExports.string
 };
-const defaultProps$g = {
+const defaultProps$f = {
+  children: null,
   className: null,
   defaultValue: null,
   innerRef: null,
@@ -36573,13 +36967,21 @@ function TableFilterSelect({
       onChange: currentOnChange,
       value: currentValue,
       ...rest,
-      children
+      children: children || /* @__PURE__ */ jsx(
+        TableFilterSelectAllOptions,
+        {
+          className,
+          idBase: id,
+          recordFieldPath,
+          ...rest
+        }
+      )
     }
   ) });
 }
-TableFilterSelect.propTypes = propTypes$g;
-TableFilterSelect.defaultProps = defaultProps$g;
-const propTypes$f = {
+TableFilterSelect.propTypes = propTypes$f;
+TableFilterSelect.defaultProps = defaultProps$f;
+const propTypes$e = {
   className: propTypesExports.string,
   innerRef: RefShape,
   id: propTypesExports.string,
@@ -36587,7 +36989,7 @@ const propTypes$f = {
   // eslint-disable-next-line react/forbid-prop-types
   value: propTypesExports.any.isRequired
 };
-const defaultProps$f = {
+const defaultProps$e = {
   className: null,
   innerRef: null,
   id: null
@@ -36612,9 +37014,9 @@ function TableFilterSelectOption({
     }
   );
 }
-TableFilterSelectOption.propTypes = propTypes$f;
-TableFilterSelectOption.defaultProps = defaultProps$f;
-const propTypes$e = {
+TableFilterSelectOption.propTypes = propTypes$e;
+TableFilterSelectOption.defaultProps = defaultProps$e;
+const propTypes$d = {
   className: propTypesExports.string,
   defaultValue: propTypesExports.string,
   innerRef: RefShape,
@@ -36623,7 +37025,7 @@ const propTypes$e = {
   recordFieldPath: propTypesExports.string.isRequired,
   value: propTypesExports.string
 };
-const defaultProps$e = {
+const defaultProps$d = {
   className: null,
   defaultValue: null,
   innerRef: null,
@@ -36663,15 +37065,77 @@ function TableFilterTextInput({
     }
   ) });
 }
-TableFilterTextInput.propTypes = propTypes$e;
-TableFilterTextInput.defaultProps = defaultProps$e;
-const propTypes$d = {
+TableFilterTextInput.propTypes = propTypes$d;
+TableFilterTextInput.defaultProps = defaultProps$d;
+const propTypes$c = {
+  children: propTypesExports.node.isRequired,
+  defaultValue: propTypesExports.shape({}),
+  className: propTypesExports.string,
+  innerRef: RefShape,
+  id: propTypesExports.string,
+  // fires when any filter changes; ie ({ recordFieldPath, value }) => { ... do something ... }
+  onChange: propTypesExports.func,
+  // make sure to useMemo() before passing value in here
+  value: propTypesExports.shape({})
+};
+const defaultProps$c = {
+  className: null,
+  defaultValue: null,
+  innerRef: null,
+  id: null,
+  onChange: null,
+  value: null
+};
+function TableFilters({
+  children,
+  className,
+  defaultValue,
+  innerRef,
+  id,
+  onChange,
+  value,
+  ...rest
+}) {
+  const { setState, state } = useContext(TableContext);
+  useEffect(
+    () => {
+      if (state.filterValues.defaultValue || state.filterValues.onChange || state.filterValues.value && Object.values(state.filterValues.value).length) {
+        console.warn("defaultValue, onChange, or value were already set for Filters. There should only be one <TableFilters/> section in a table.");
+      }
+      setState((draftState) => {
+        draftState.filterValues.defaultValue = defaultValue;
+        draftState.filterValues.onChange = onChange;
+        draftState.filterValues.value = value || draftState.filterValues.value;
+      });
+      return () => {
+        setState((draftState) => {
+          draftState.filterValues.defaultValue = null;
+          draftState.filterValues.onChange = null;
+          draftState.filterValues.value = {};
+        });
+      };
+    },
+    []
+  );
+  useEffect(
+    () => {
+      setState((draftState) => {
+        draftState.filterValues.value = value || draftState.filterValues.value;
+      });
+    },
+    [value]
+  );
+  return /* @__PURE__ */ jsx("tr", { className: joinClassNames("some-TableFilters-classname", className), id, ref: innerRef, ...rest, children });
+}
+TableFilters.propTypes = propTypes$c;
+TableFilters.defaultProps = defaultProps$c;
+const propTypes$b = {
   children: propTypesExports.node.isRequired,
   className: propTypesExports.string,
   innerRef: RefShape,
   id: propTypesExports.string
 };
-const defaultProps$d = {
+const defaultProps$b = {
   className: null,
   innerRef: null,
   id: null
@@ -36685,15 +37149,15 @@ function TableFoot({
 }) {
   return /* @__PURE__ */ jsx("tfoot", { className: joinClassNames("some-TableFoot-classname", className), id, ref: innerRef, ...rest, children });
 }
-TableFoot.propTypes = propTypes$d;
-TableFoot.defaultProps = defaultProps$d;
-const propTypes$c = {
+TableFoot.propTypes = propTypes$b;
+TableFoot.defaultProps = defaultProps$b;
+const propTypes$a = {
   children: propTypesExports.node,
   className: propTypesExports.string,
   innerRef: RefShape,
   id: propTypesExports.string
 };
-const defaultProps$c = {
+const defaultProps$a = {
   children: null,
   className: null,
   innerRef: null,
@@ -36708,15 +37172,15 @@ function TableFootCell({
 }) {
   return /* @__PURE__ */ jsx("td", { className: joinClassNames("some-TableFootCell-classname", className), id, ref: innerRef, ...rest, children });
 }
-TableFootCell.propTypes = propTypes$c;
-TableFootCell.defaultProps = defaultProps$c;
-const propTypes$b = {
+TableFootCell.propTypes = propTypes$a;
+TableFootCell.defaultProps = defaultProps$a;
+const propTypes$9 = {
   children: propTypesExports.node.isRequired,
   className: propTypesExports.string,
   innerRef: RefShape,
   id: propTypesExports.string
 };
-const defaultProps$b = {
+const defaultProps$9 = {
   className: null,
   innerRef: null,
   id: null
@@ -36730,15 +37194,15 @@ function TableFootRow({
 }) {
   return /* @__PURE__ */ jsx("tr", { className: joinClassNames("some-TableFootRow-classname", className), id, ref: innerRef, ...rest, children });
 }
-TableFootRow.propTypes = propTypes$b;
-TableFootRow.defaultProps = defaultProps$b;
-const propTypes$a = {
+TableFootRow.propTypes = propTypes$9;
+TableFootRow.defaultProps = defaultProps$9;
+const propTypes$8 = {
   children: propTypesExports.node.isRequired,
   className: propTypesExports.string,
   innerRef: RefShape,
   id: propTypesExports.string
 };
-const defaultProps$a = {
+const defaultProps$8 = {
   className: null,
   innerRef: null,
   id: null
@@ -36761,9 +37225,9 @@ function TableHead({
     }
   );
 }
-TableHead.propTypes = propTypes$a;
-TableHead.defaultProps = defaultProps$a;
-const propTypes$9 = {
+TableHead.propTypes = propTypes$8;
+TableHead.defaultProps = defaultProps$8;
+const propTypes$7 = {
   children: propTypesExports.node,
   className: propTypesExports.string,
   // The field related to this column. CellTemplate and RowTemplate can define a field. This field is used for determining sorting and filtering.
@@ -36773,7 +37237,7 @@ const propTypes$9 = {
   onClick: propTypesExports.func,
   tableSortingFieldPaths: propTypesExports.arrayOf(propTypesExports.string)
 };
-const defaultProps$9 = {
+const defaultProps$7 = {
   children: null,
   className: null,
   recordFieldPath: null,
@@ -36827,15 +37291,15 @@ function TableHeadCell({
     }
   );
 }
-TableHeadCell.propTypes = propTypes$9;
-TableHeadCell.defaultProps = defaultProps$9;
-const propTypes$8 = {
+TableHeadCell.propTypes = propTypes$7;
+TableHeadCell.defaultProps = defaultProps$7;
+const propTypes$6 = {
   children: propTypesExports.node.isRequired,
   className: propTypesExports.string,
   innerRef: RefShape,
   id: propTypesExports.string
 };
-const defaultProps$8 = {
+const defaultProps$6 = {
   className: null,
   innerRef: null,
   id: null
@@ -36849,9 +37313,9 @@ function TableHeadRow({
 }) {
   return /* @__PURE__ */ jsx("tr", { className: joinClassNames("some-TableHeadRow-classname", className), id, ref: innerRef, ...rest, children });
 }
-TableHeadRow.propTypes = propTypes$8;
-TableHeadRow.defaultProps = defaultProps$8;
-const propTypes$7 = {
+TableHeadRow.propTypes = propTypes$6;
+TableHeadRow.defaultProps = defaultProps$6;
+const propTypes$5 = {
   children: propTypesExports.node.isRequired,
   className: propTypesExports.string,
   innerRef: RefShape,
@@ -36861,7 +37325,7 @@ const propTypes$7 = {
   // (e) => { ... do something ... }
   onDoubleClick: propTypesExports.func
 };
-const defaultProps$7 = {
+const defaultProps$5 = {
   className: null,
   innerRef: null,
   id: null,
@@ -36890,18 +37354,9 @@ function TableRow({
     }
   );
 }
-TableRow.propTypes = propTypes$7;
-TableRow.defaultProps = defaultProps$7;
-const tableSortingRuleFieldType = {
-  // compares dates as Date() objects
-  // dates represented by an ISO string should use the STRING enum value
-  DATE: "date",
-  // compares numbers (does do Number(fieldValue)) conversion so it is safe to pass strings as numbers)
-  NUMBER: "number",
-  // does simple localeCompare() string comparison; is safe for null strings
-  STRING: "string"
-};
-const propTypes$6 = {
+TableRow.propTypes = propTypes$5;
+TableRow.defaultProps = defaultProps$5;
+const propTypes$4 = {
   // should be a function that does sorting
   // ({ fieldValueA, fieldValueB, recordA, recordB, records }) => (a < b ? -1 : a > b ? 1 : 0)
   customSort: propTypesExports.func,
@@ -36915,7 +37370,7 @@ const propTypes$6 = {
   // calculated value's path. This way the value does not have to be recalculated on every render.
   recordFieldPath: propTypesExports.string.isRequired
 };
-const defaultProps$6 = {
+const defaultProps$4 = {
   customSort: null,
   defaultIsAscending: true,
   fieldType: "string"
@@ -36943,16 +37398,16 @@ function TableSortingRule({
   );
   return null;
 }
-TableSortingRule.propTypes = propTypes$6;
-TableSortingRule.defaultProps = defaultProps$6;
-const propTypes$5 = {
+TableSortingRule.propTypes = propTypes$4;
+TableSortingRule.defaultProps = defaultProps$4;
+const propTypes$3 = {
   children: propTypesExports.node.isRequired,
   defaultValue: propTypesExports.string,
   // ({ recordFieldPath }) => { ... do something ... }
   onChange: propTypesExports.func,
   value: propTypesExports.string
 };
-const defaultProps$5 = {
+const defaultProps$3 = {
   defaultValue: null,
   onChange: null,
   value: void 0
@@ -36999,174 +37454,63 @@ function TableSortingRules({
   );
   return children;
 }
-TableSortingRules.propTypes = propTypes$5;
-TableSortingRules.defaultProps = defaultProps$5;
-const useRefAlways = (value) => {
-  const ref = useRef(value);
-  ref.current = value;
-  return ref;
-};
-const propTypes$4 = {
-  children: propTypesExports.node.isRequired,
-  className: propTypesExports.string,
-  innerRef: RefShape,
-  id: propTypesExports.string
-};
-const defaultProps$4 = {
-  className: null,
-  innerRef: null,
-  id: null
-};
-function sortByFieldType(sortingRule, fieldValueA, fieldValueB) {
-  let result;
-  switch (sortingRule.fieldType) {
-    case tableSortingRuleFieldType.DATE:
-      result = ((fieldValueA == null ? void 0 : fieldValueA.getTime()) || 0) - ((fieldValueB == null ? void 0 : fieldValueB.getTime()) || 0);
-      break;
-    case tableSortingRuleFieldType.NUMBER:
-      result = Number(fieldValueA || 0) - Number(fieldValueB || 0);
-      break;
-    case tableSortingRuleFieldType.STRING:
-      result = (fieldValueA || "").localeCompare(fieldValueB || "");
-      break;
-    default:
-      throw new Error(`Unknown tableSortingRuleFieldType '${sortingRule.fieldType}'`);
-  }
-  return result;
-}
-function TableWrapper({
-  children,
-  className,
-  innerRef,
-  id,
-  ...rest
-}) {
-  const [state, setState] = i({
-    // when sorting, should the sort order for a rule be the "default"
-    // ie a rule defaults to ascending so when currentSortingOrderIsDefault is true then sort that rule ascending
-    currentSortingOrderIsDefault: true,
-    // [recordFieldPath]: filterValue <== the current filtering values from <TableFilter... /> components
-    filterValues: {
-      // context level values from a <TableFilters /> component (<TableFilter... /> child components would override/chain these values)
-      // defaultValue - object of [recordFieldPath]:value pairs for filtering inputs
-      defaultValue: null,
-      // onChange to call for any filter change
-      onChange: null,
-      // value - object of [recordFieldPath]:value pairs for filtering inputs
-      value: {}
-    },
-    // these are the sorting rules to which a <TableHeadCell> connects assumes order is add order
-    sortingRules: {},
-    // (func) when table sorting changes, this callback will be called: from <TableSortingRules>
-    tableSortingOnChange: null,
-    // (string | [string]) the current recordFieldPath name for the current header being sorted
-    // array if <TableHeadCell> specifies sort order; otherwise, sort fields in registration order
-    // set when a TableHeadCell is selected and sets its tableSortingFieldPaths as the tableSortingFieldPath
-    // TableBodyData uses this value to sort its records
-    tableSortingFieldPath: null,
-    // a TableHeadCell can provide tableSortingFieldPaths to customize which sorters to use in which order
-    tableSortingFieldPaths: null
-  });
-  const stateRef = useRefAlways(state);
-  const contextValue = useMemo(
-    () => ({
-      // register a new rule for sorting, generally from a <TableSortingRule>
-      registerSortingRule: (sortingRule) => setState((draftState) => {
-        draftState.sortingRules[sortingRule.recordFieldPath] = {
-          ...sortingRule,
-          sorter: (recordA, recordB, records) => {
-            const fieldValueA = valueAtPath({ object: recordA.record, path: sortingRule.recordFieldPath });
-            const fieldValueB = valueAtPath({ object: recordB.record, path: sortingRule.recordFieldPath });
-            let result;
-            if (sortingRule.customSort) {
-              result = sortingRule.customSort({
-                fieldValueA,
-                fieldValueB,
-                recordA: recordA.record,
-                recordAIndex: recordA.recordIndex,
-                recordB: recordB.record,
-                recordBIndex: recordB.recordIndex,
-                records
-              });
-            } else {
-              result = sortByFieldType(sortingRule, fieldValueA, fieldValueB);
-            }
-            return result * (stateRef.current.currentSortingOrderIsDefault ? 1 : -1) * (sortingRule.defaultIsAscending ? 1 : -1);
-          }
-        };
-      }),
-      // unregister a rule for sorting, generally when a <TableSortingRule> unmounts
-      unregisterSortingRule: (recordFieldPath) => setState((draftState) => {
-        delete draftState.sortingRules[recordFieldPath];
-      }),
-      setState,
-      state
-    }),
-    [state]
-  );
-  return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: joinClassNames("some-table-wrapper-className", className), id, ref: innerRef, ...rest, children }) });
-}
-TableWrapper.propTypes = propTypes$4;
-TableWrapper.defaultProps = defaultProps$4;
-const propTypes$3 = {
-  children: propTypesExports.node.isRequired,
-  className: propTypesExports.string
-};
-const defaultProps$3 = {
-  className: null
-};
-function TabList({ children, className }) {
-  const { tabGroupId } = useContext(TabGroupContext);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: joinClassNames(className, "tab-group__list"),
-      role: "tablist",
-      "aria-labelledby": `tab-group-${tabGroupId}`,
-      children
-    }
-  );
-}
-TabList.propTypes = propTypes$3;
-TabList.defaultProps = defaultProps$3;
+TableSortingRules.propTypes = propTypes$3;
+TableSortingRules.defaultProps = defaultProps$3;
 const propTypes$2 = {
-  children: propTypesExports.node.isRequired,
-  className: propTypesExports.string,
-  // a tabId id must be provided for accessibility and selecting tabs
-  tabId: propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]).isRequired
-};
-const defaultProps$2 = {
-  className: null
+  content: propTypesExports.func.isRequired,
+  contentRef: RefShape.isRequired,
+  sidePanelRightContent: propTypesExports.element.isRequired,
+  sidePanelLeftContent: propTypesExports.element.isRequired
 };
-function TabPanel({ children, className, tabId }) {
-  const { selectedTabId, tabGroupId } = useContext(TabGroupContext);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "aria-labelledby": `tab-${tabGroupId}-${tabId}`,
-      className: joinClassNames(
-        className,
-        selectedTabId === tabId && "tab-group__panel--selected",
-        "tab-group__panel"
-      ),
-      id: `tabpanel-${tabGroupId}-${tabId}`,
-      role: "tabpanel",
-      tabIndex: "0",
-      children
-    }
-  );
+const defaultProps$2 = {};
+function DocumentationTemplate({
+  content: Content,
+  contentRef,
+  sidePanelRightContent,
+  sidePanelLeftContent
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "documentation-template__wrapper", children: /* @__PURE__ */ jsxs("div", { className: "documentation-template", children: [
+    /* @__PURE__ */ jsx("div", { className: "documentation-template__side-panel-left", children: sidePanelLeftContent }),
+    /* @__PURE__ */ jsx("main", { className: "documentation-template__content", ref: contentRef, children: /* @__PURE__ */ jsx(Content, {}) }),
+    /* @__PURE__ */ jsx("div", { className: "documentation-template__side-panel-right", children: sidePanelRightContent })
+  ] }) });
 }
-TabPanel.propTypes = propTypes$2;
-TabPanel.defaultProps = defaultProps$2;
+DocumentationTemplate.propTypes = propTypes$2;
+DocumentationTemplate.defaultProps = defaultProps$2;
 const propTypes$1 = {
-  children: propTypesExports.node.isRequired
+  content: propTypesExports.func.isRequired
 };
 const defaultProps$1 = {};
-function TabPanels({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "tab-group__panels", children });
+function LandingTemplate({ content: Content }) {
+  return /* @__PURE__ */ jsx(Content, {});
+}
+LandingTemplate.propTypes = propTypes$1;
+LandingTemplate.defaultProps = defaultProps$1;
+const UtahHeaderContext = React__default.createContext();
+function useUtahHeaderContext() {
+  return useContext(UtahHeaderContext);
+}
+const propTypes = { children: propTypesExports.node.isRequired };
+const defaultProps = {};
+function UtahHeaderContextProvider({ children }) {
+  const [settings, setSettings] = i(() => getUtahHeaderSettings());
+  useEffect(
+    () => {
+      setUtahHeaderSettings(settings);
+    },
+    [settings]
+  );
+  const providedSettings = useMemo(() => ({ settings, setSettings }), [settings]);
+  return (
+    // Vite HMR was sometimes getting an "unspreadable" value for this context!
+    // The above useMemo() ALWAYS returns a spreadable object, so it seems it's got to
+    // be HMR's fault it's not always behaving? Why would providedSettings ever not be an object?
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    /* @__PURE__ */ jsx(UtahHeaderContext.Provider, { value: providedSettings || {}, children })
+  );
 }
-TabPanels.propTypes = propTypes$1;
-TabPanels.defaultProps = defaultProps$1;
+UtahHeaderContextProvider.propTypes = propTypes;
+UtahHeaderContextProvider.defaultProps = defaultProps;
 function useBanner() {
   return ({ message }) => {
     console.log(message);
@@ -37207,18 +37551,6 @@ function useMountingTracker(title) {
     []
   );
 }
-function usePaginatedList({ list, pageIndex, itemsPerPage }) {
-  const [paginatedList] = useStateEffect({
-    calculateValueFn: () => {
-      const totalPages = Math.ceil(list.length / itemsPerPage);
-      const startIndex = totalPages ? Math.max(Math.min(totalPages - 1, pageIndex) * itemsPerPage) : 0;
-      const endIndex = startIndex + itemsPerPage;
-      return list.slice(startIndex, endIndex);
-    },
-    dependencyList: [list, pageIndex, itemsPerPage]
-  });
-  return paginatedList;
-}
 const useRefLazy = (lazyFunc) => {
   const ref = useRef(void 0);
   if (ref.current === void 0) {
@@ -37226,25 +37558,35 @@ const useRefLazy = (lazyFunc) => {
   }
   return ref;
 };
-const UtahHeaderContext = React__default.createContext();
-function useUtahHeaderContext() {
-  return useContext(UtahHeaderContext);
+const handleKeyPress = (code, handler) => (e) => e.code === code && handler();
+function calculateMenuItemsParents({ parentLinks = [], menuItems }) {
+  return (menuItems || []).map((menuItem2) => {
+    const menuItemLink = menuItem2.link || `menuHeader::${menuItem2.title}`;
+    return {
+      ...menuItem2,
+      link: menuItemLink,
+      parentLinks: [...menuItem2.parentLinks || [], ...parentLinks],
+      children: menuItem2.children && calculateMenuItemsParents({
+        parentLinks: [
+          ...menuItem2.parentLinks || [],
+          ...parentLinks,
+          menuItemLink
+        ].filter(identity_1),
+        menuItems: menuItem2.children
+      })
+    };
+  });
 }
-const propTypes = { children: propTypesExports.node.isRequired };
-const defaultProps = {};
-function UtahHeaderContextProvider({ children }) {
-  const [settings, setSettings] = i(() => getUtahHeaderSettings());
-  useEffect(
-    () => {
-      setUtahHeaderSettings(settings);
-    },
-    [settings]
-  );
-  const providedSettings = useMemo(() => ({ settings, setSettings }), [settings]);
-  return /* @__PURE__ */ jsx(UtahHeaderContext.Provider, { value: providedSettings, children });
+function rectContainsPoint(rect, point) {
+  return rect.left <= point.x && rect.right >= point.x && rect.top <= point.y && rect.bottom >= point.y;
+}
+function stringToId(inputString) {
+  let retVal;
+  retVal = inputString == null ? void 0 : inputString.toLowerCase();
+  retVal = retVal == null ? void 0 : retVal.replaceAll(" ", "-");
+  retVal = retVal == null ? void 0 : retVal.replaceAll(/[^a-zA-Z0-9-]+/g, "");
+  return retVal;
 }
-UtahHeaderContextProvider.propTypes = propTypes;
-UtahHeaderContextProvider.defaultProps = defaultProps;
 const { version } = packageJson;
 export {
   Accordion,
@@ -37254,6 +37596,7 @@ export {
   CheckBox,
   ConfirmationButton,
   DocumentationTemplate,
+  ExternalLink,
   Form,
   FormContext,
   FormContextProvider,
@@ -37306,6 +37649,7 @@ export {
   UtahHeaderContextProvider,
   baseSettings,
   calculateMenuItemsParents,
+  chainSorters,
   childrenMenuTypes,
   componentColors,
   events,
@@ -37313,7 +37657,7 @@ export {
   handleEvent,
   handleKeyPress,
   joinClassNames,
-  popupPlacement2 as popupPlacement,
+  popupPlacement,
   rectContainsPoint,
   renderDOMSingle,
   setValueAtPath,