@wavelengthusaf/components 4.17.0 → 4.21.0

package/dist/cjs/index.cjs

@@ -3745,6 +3745,8 @@ var WavelengthSearch = ({
   placeholderFont,
   inputColor,
   inputFont,
+  onSearchSubmit,
+  onSearchSelect,
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
@@ -3771,13 +3773,31 @@ var WavelengthSearch = ({
     syncAttribute("border-color", borderColor2);
     syncAttribute("background-color", backgroundColor2);
     syncAttribute("hover-color", hoverColor);
-    syncAttribute("options", options);
+    if (options !== void 0) {
+      el.options = options;
+    }
     syncAttribute("icon-pos", iconPos);
     syncAttribute("placeholder", placeholder);
     syncAttribute("placeholder-color", placeholderColor);
     syncAttribute("placeholder-font", placeholderFont);
     syncAttribute("input-color", inputColor);
     syncAttribute("input-font", inputFont);
+    const handleSearchSubmit = (e) => {
+      if (onSearchSubmit) {
+        onSearchSubmit(e.detail.value);
+      }
+    };
+    const handleSearchSelect = (e) => {
+      if (onSearchSelect) {
+        onSearchSelect(e.detail.value);
+      }
+    };
+    el.addEventListener("wavelength-search-submit", handleSearchSubmit);
+    el.addEventListener("wavelength-search-select", handleSearchSelect);
+    return () => {
+      el.removeEventListener("wavelength-search-submit", handleSearchSubmit);
+      el.removeEventListener("wavelength-search-select", handleSearchSelect);
+    };
   }, [
     customStyle,
     width2,
@@ -3795,7 +3815,9 @@ var WavelengthSearch = ({
     placeholderColor,
     placeholderFont,
     inputColor,
-    inputFont
+    inputFont,
+    onSearchSubmit,
+    onSearchSelect
   ]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-search", { ref, ...rest });
 };
@@ -4297,75 +4319,21 @@ WavelengthNotAvailablePage.displayName = "WavelengthNotAvailablePage";
 
 // src/components/PageComponents/WavelengthSideBar.tsx
 
-var _reactrouterdom = require('react-router-dom');
-var _iconsmaterial = require('@mui/icons-material');
-var _ListItem = require('@mui/material/ListItem'); var _ListItem2 = _interopRequireDefault(_ListItem);
-var _Typography = require('@mui/material/Typography'); var _Typography2 = _interopRequireDefault(_Typography);
-var _Collapse = require('@mui/material/Collapse'); var _Collapse2 = _interopRequireDefault(_Collapse);
-var _List = require('@mui/material/List'); var _List2 = _interopRequireDefault(_List);
 
-function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor, marginTop, marginLeft, width: width2 = 240, height: height2 = 300, id }) {
-  const [openSections, setOpenSections] = _react.useState.call(void 0, {});
-  const navigate = _reactrouterdom.useNavigate.call(void 0, );
-  const palette2 = getPalette();
-  function handleToggle(sectionTitle) {
-    setOpenSections((prevState) => ({
-      ...prevState,
-      [sectionTitle]: !prevState[sectionTitle]
-    }));
-  }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      id,
-      style: {
-        width: width2,
-        minHeight: 300,
-        height: height2,
-        maxHeight: 737,
-        overflow: "hidden",
-        overflowY: "scroll",
-        backgroundColor: bgColor ? bgColor : palette2.primary,
-        marginBottom: 5,
-        marginTop,
-        marginLeft,
-        borderRadius: "12px",
-        position: "relative"
-      },
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _List2.default, { component: "nav", children: sections.map((section, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, React2.default.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _ListItem2.default, { button: true, onClick: () => handleToggle(section.title), sx: { flexDirection: "row", alignItems: "center", paddingX: 0.75, paddingY: 0.5 }, children: [
-          openSections[section.title] ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.KeyboardArrowDownRounded, { sx: { color: arrowColor ? arrowColor : palette2.secondary } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.KeyboardArrowRightRounded, { sx: { color: arrowColor ? arrowColor : palette2.secondary } }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "h6", sx: { fontSize: 16, color: txtColor ? txtColor : palette2.secondary }, children: section.title })
-        ] }),
-        _optionalChain([section, 'access', _2 => _2.subsections, 'optionalAccess', _3 => _3.length]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Collapse2.default, { in: openSections[section.title], timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _List2.default, { component: "div", disablePadding: true, sx: { paddingLeft: 4 }, children: section.subsections.map((subsection, subIndex) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, React2.default.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _Typography2.default,
-            {
-              variant: "subtitle2",
-              sx: {
-                fontSize: 12,
-                marginTop: 1,
-                paddingLeft: 0.75,
-                color: labelColor ? labelColor : palette2.secondary
-              },
-              children: _optionalChain([subsection, 'access', _4 => _4.title, 'optionalAccess', _5 => _5.toUpperCase, 'call', _6 => _6()])
-            }
-          ),
-          subsection.items && subsection.items.map((item, itemIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _ListItem2.default,
-            {
-              button: true,
-              onClick: item.path ? () => navigate(item.path) : item.onClick,
-              sx: { color: txtColor ? txtColor : palette2.secondary, paddingLeft: 4, paddingX: 0.75, paddingY: 0.25 },
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body2", sx: { fontSize: 16 }, children: item.title })
-            },
-            itemIndex
-          ))
-        ] }, subIndex)) }) })
-      ] }, index)) })
-    }
-  );
-}
+var WavelengthSideBar = ({ children, customStyle, sections = "[]", onItemClick, ...rest }) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    if (customStyle) el.customStyles = customStyle;
+    el.setAttribute("sections", sections);
+    if (onItemClick) {
+      el.addEventListener("wavelength-sidebar-item-click", onItemClick);
+      return () => el.removeEventListener("wavelength-sidebar-item-click", onItemClick);
+    }
+  }, [customStyle, sections, onItemClick]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-sidebar", { ref, ...rest, children });
+};
 WavelengthSideBar.displayName = "WavelengthSideBar";
 
 // src/components/PageComponents/WavelengthNavBar.tsx
@@ -4453,7 +4421,7 @@ var WavelengthFileDropZone = ({
     else el.removeAttribute("multiple");
     const handleFilesSelected = (event) => {
       const customEvent = event;
-      _optionalChain([onFilesSelected, 'optionalCall', _7 => _7(customEvent.detail.files)]);
+      _optionalChain([onFilesSelected, 'optionalCall', _2 => _2(customEvent.detail.files)]);
     };
     el.addEventListener("files-selected", handleFilesSelected);
     return () => {
@@ -4741,65 +4709,6 @@ WavelengthProgressBar.displayName = "WavelengthProgressBar";
 // src/index.ts
 
 
-// src/components/PageComponents/WavelengthCommentDisplay.tsx
-
-var _CheckCircleOutline = require('@mui/icons-material/CheckCircleOutline'); var _CheckCircleOutline2 = _interopRequireDefault(_CheckCircleOutline);
-var _CheckCircle = require('@mui/icons-material/CheckCircle'); var _CheckCircle2 = _interopRequireDefault(_CheckCircle);
-
-
-function WavelengthCommentDisplay(props) {
-  const [selected, setSelected] = _react.useState.call(void 0, false);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "div",
-    {
-      id: props.id,
-      "data-testid": props.dataTestId,
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        width: props.width || "332px",
-        minHeight: "fit",
-        height: props.height || "fit-content",
-        backgroundColor: props.backgroundColor || "rgba(250, 242, 236, 1)",
-        border: props.border || "1px solid rgba(0, 0, 0, 0.05)",
-        borderRadius: "6px",
-        padding: "12px",
-        color: props.textColor || "black"
-      },
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize: "14px", fontWeight: 600, display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", padding: 0 }, children: [
-          props.author,
-          !selected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _material.IconButton,
-            {
-              onClick: (e) => {
-                setSelected(!selected);
-                _optionalChain([props, 'access', _8 => _8.onClick, 'optionalCall', _9 => _9(e)]);
-              },
-              style: { padding: "0px" },
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircleOutline2.default, { fontSize: "small" })
-            }
-          ),
-          selected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _material.IconButton,
-            {
-              onClick: (e) => {
-                setSelected(!selected);
-                _optionalChain([props, 'access', _10 => _10.onClick, 'optionalCall', _11 => _11(e)]);
-              },
-              style: { padding: "0px" },
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircle2.default, { fontSize: "small", sx: { color: props.iconSelectedColor || "rgba(209, 106, 47, 1)" } })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { style: { fontSize: "12px", fontWeight: 400, opacity: 0.6 }, children: props.date }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "14px", fontWeight: 400, marginTop: "8px" }, children: props.comments })
-      ]
-    }
-  );
-}
-WavelengthCommentDisplay.displayName = "WavelengthCommentDisplay";
-
 // src/components/PageComponents/WavelengthPermissionAlert.tsx
 
 function WavelengthPermissionAlert({
@@ -5192,7 +5101,7 @@ var WavelengthBadge = ({
     updateAttribute("text-box-border-radius", textBoxBorderRadius);
     updateAttribute("text-box-hover-border-color", textBoxHoverBorderColor);
     updateAttribute("badge-font", badgeFont);
-    updateAttribute("badge-content", _optionalChain([badgeContent, 'optionalAccess', _12 => _12.toString, 'call', _13 => _13()]));
+    updateAttribute("badge-content", _optionalChain([badgeContent, 'optionalAccess', _3 => _3.toString, 'call', _4 => _4()]));
     updateAttribute("badge-size", badgeSize);
   }, [
     variant,
@@ -5222,6 +5131,62 @@ var WavelengthBadge = ({
 };
 WavelengthBadge.displayName = "WavelengthBadge";
 
+// src/components/PageComponents/WavelengthCommentDisplay.tsx
+
+
+var WavelengthCommentDisplay = ({
+  children,
+  customStyle,
+  author,
+  comment,
+  date,
+  width: width2,
+  height: height2,
+  txtColor,
+  bgColor,
+  border: border2,
+  iconSelectedColor,
+  selected,
+  ...rest
+}) => {
+  const ref = _react.useRef.call(void 0, null);
+  const syncAttribute = (attribute, value) => {
+    const el = ref.current;
+    if (!el) return;
+    if (value) {
+      el.setAttribute(attribute, value);
+    } else {
+      el.removeAttribute(attribute);
+    }
+  };
+  const syncBooleanAttribute = (attribute, value) => {
+    const el = ref.current;
+    if (!el) return;
+    if (value) {
+      el.setAttribute(attribute, "");
+    } else {
+      el.removeAttribute(attribute);
+    }
+  };
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    el.customStyles = customStyle;
+    syncAttribute("author", author);
+    syncAttribute("comment", comment);
+    syncAttribute("date", date);
+    syncAttribute("width", width2);
+    syncAttribute("height", height2);
+    syncAttribute("txt-color", txtColor);
+    syncAttribute("bg-color", bgColor);
+    syncAttribute("border", border2);
+    syncAttribute("icon-selected-color", iconSelectedColor);
+    syncBooleanAttribute("selected", selected);
+  }, [customStyle, author, comment, date, width2, height2, txtColor, bgColor, border2, iconSelectedColor, selected]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-comment-display", { ref, ...rest, children });
+};
+WavelengthCommentDisplay.displayName = "WavelengthCommentDisplay";
+
 // src/components/footers/WavelengthFooter/WavelengthFooter.tsx
 
 var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
@@ -5283,7 +5248,7 @@ function useStableCallback(fn) {
   _react.useEffect.call(void 0, () => {
     fnRef.current = fn;
   }, [fn]);
-  return (...args) => _optionalChain([fnRef, 'access', _14 => _14.current, 'optionalCall', _15 => _15(...args)]);
+  return (...args) => _optionalChain([fnRef, 'access', _5 => _5.current, 'optionalCall', _6 => _6(...args)]);
 }
 function WavelengthFormInner(props, ref) {
   const {
@@ -5323,7 +5288,7 @@ function WavelengthFormInner(props, ref) {
     if (!el) return;
     let finalSchema = schema;
     if (placeholders) {
-      const shape2 = _optionalChain([schema, 'optionalAccess', _16 => _16.shape]);
+      const shape2 = _optionalChain([schema, 'optionalAccess', _7 => _7.shape]);
       if (shape2) {
         const overrides = {};
         for (const [key, ph] of Object.entries(placeholders)) {
@@ -5356,15 +5321,15 @@ function WavelengthFormInner(props, ref) {
     if (!el) return;
     const handleChange = (e) => {
       const detail = e.detail;
-      _optionalChain([onChangeStable, 'optionalCall', _17 => _17(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _18 => _18.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _19 => _19.issues]), () => ( [])))]);
+      _optionalChain([onChangeStable, 'optionalCall', _8 => _8(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _9 => _9.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _10 => _10.issues]), () => ( [])))]);
     };
     const handleValid = (e) => {
       const detail = e.detail;
-      _optionalChain([onValidStable, 'optionalCall', _20 => _20(_optionalChain([detail, 'optionalAccess', _21 => _21.value]), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _22 => _22.issues]), () => ( [])))]);
+      _optionalChain([onValidStable, 'optionalCall', _11 => _11(_optionalChain([detail, 'optionalAccess', _12 => _12.value]), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _13 => _13.issues]), () => ( [])))]);
     };
     const handleInvalid = (e) => {
       const detail = e.detail;
-      _optionalChain([onInvalidStable, 'optionalCall', _23 => _23(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _24 => _24.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _25 => _25.issues]), () => ( [])))]);
+      _optionalChain([onInvalidStable, 'optionalCall', _14 => _14(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _15 => _15.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _16 => _16.issues]), () => ( [])))]);
     };
     el.addEventListener("form-change", handleChange);
     el.addEventListener("form-valid", handleValid);
@@ -5386,8 +5351,8 @@ function WavelengthFormInner(props, ref) {
   _react.useImperativeHandle.call(void 0, 
     ref,
     () => ({
-      validate: () => _nullishCoalesce(_optionalChain([hostRef, 'access', _26 => _26.current, 'optionalAccess', _27 => _27.validate, 'optionalCall', _28 => _28()]), () => ( false)),
-      getValue: () => _optionalChain([hostRef, 'access', _29 => _29.current, 'optionalAccess', _30 => _30.value]),
+      validate: () => _nullishCoalesce(_optionalChain([hostRef, 'access', _17 => _17.current, 'optionalAccess', _18 => _18.validate, 'optionalCall', _19 => _19()]), () => ( false)),
+      getValue: () => _optionalChain([hostRef, 'access', _20 => _20.current, 'optionalAccess', _21 => _21.value]),
       setValue: (v) => {
         if (hostRef.current) hostRef.current.value = v;
       }
@@ -5494,7 +5459,7 @@ var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color
     const el = ref.current;
     if (!el) return;
     if (numberOfPlanes !== void 0) {
-      el.setAttribute("number-of-planes", numberOfPlanes);
+      el.numberOfPlanes = numberOfPlanes;
     }
     if (trailDir !== void 0) {
       el.setAttribute("trail-dir", trailDir);
@@ -5509,10 +5474,10 @@ var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color
       el.setAttribute("gradient", gradient);
     }
     if (spaced !== void 0) {
-      el.setAttribute("spaced", spaced);
+      el.spaced = spaced;
     }
   }, [numberOfPlanes, trailDir, opacity, color2, gradient, spaced]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-manyplanes", { ref, trailDir, opacity, color: color2, gradient, spaced, ...rest, children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-manyplanes", { ref, trailDir, opacity, color: color2, gradient, spaced: _optionalChain([spaced, 'optionalAccess', _22 => _22.toString, 'call', _23 => _23()]), ...rest, children });
 };
 WavelengthManyPlanes.displayName = "WavelengthManyPlanes";
 
@@ -5583,8 +5548,8 @@ function WavelengthConfirmationModal(props) {
       "font-family": props.fontFamily,
       "text-color": props.textColor,
       "background-color": props.backgroundColor,
-      "title-text": _optionalChain([props, 'access', _31 => _31.textObj, 'optionalAccess', _32 => _32.title]),
-      "dialog-text": _optionalChain([props, 'access', _33 => _33.textObj, 'optionalAccess', _34 => _34.dialog]),
+      "title-text": _optionalChain([props, 'access', _24 => _24.textObj, 'optionalAccess', _25 => _25.title]),
+      "dialog-text": _optionalChain([props, 'access', _26 => _26.textObj, 'optionalAccess', _27 => _27.dialog]),
       children: [
         props.cancelButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { slot: "cancel-button", style: { display: "contents" }, children: props.cancelButton }),
         props.submitButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { slot: "submit-button", style: { display: "contents" }, children: props.submitButton })
@@ -5605,11 +5570,11 @@ function WavelengthContentModal(props) {
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Dialog, { "data-testid": "testId-WavelengthContentModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", id: props.id, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { display: "flex", alignItems: "center", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _35 => _35.textObj, 'optionalAccess', _36 => _36.title]) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _28 => _28.textObj, 'optionalAccess', _29 => _29.title]) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) }) })
     ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _37 => _37.textObj, 'optionalAccess', _38 => _38.dialog]) }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _39 => _39.textObj, 'optionalAccess', _40 => _40.purpose]) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _30 => _30.textObj, 'optionalAccess', _31 => _31.dialog]) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _32 => _32.textObj, 'optionalAccess', _33 => _33.purpose]) }) })
   ] });
 }
 WavelengthContentModal.displayName = "WavelengthContentModal";
@@ -5864,8 +5829,8 @@ var WavelengthDialog = ({
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el) return;
-    const handleLeft = (e) => _optionalChain([onWlLeftBtnClick, 'optionalCall', _41 => _41(e)]);
-    const handleRight = (e) => _optionalChain([onWlRightBtnClick, 'optionalCall', _42 => _42(e)]);
+    const handleLeft = (e) => _optionalChain([onWlLeftBtnClick, 'optionalCall', _34 => _34(e)]);
+    const handleRight = (e) => _optionalChain([onWlRightBtnClick, 'optionalCall', _35 => _35(e)]);
     el.addEventListener("wl-left-btn-click", handleLeft);
     el.addEventListener("wl-right-btn-click", handleRight);
     return () => {
@@ -5963,8 +5928,8 @@ var WavelengthPagination = ({
     syncAttribute("active-text-color", activeTextColor || "");
     syncAttribute("background-color", backgroundColor2 || "");
     syncAttribute("disabled-color", disabledColor || "");
-    syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _43 => _43.toString, 'call', _44 => _44()]) || "");
-    syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _45 => _45.toString, 'call', _46 => _46()]) || "");
+    syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _36 => _36.toString, 'call', _37 => _37()]) || "");
+    syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _38 => _38.toString, 'call', _39 => _39()]) || "");
     const handlePageChange = (e) => {
       if (onPageChange) {
         onPageChange(e.detail.page);
@@ -6500,7 +6465,7 @@ WavelengthSlider.displayName = "WavelengthSlider";
 var _IconButton = require('@mui/material/IconButton'); var _IconButton2 = _interopRequireDefault(_IconButton);
 var _NavigateBefore = require('@mui/icons-material/NavigateBefore'); var _NavigateBefore2 = _interopRequireDefault(_NavigateBefore);
 var _NavigateNext = require('@mui/icons-material/NavigateNext'); var _NavigateNext2 = _interopRequireDefault(_NavigateNext);
-
+var _Typography = require('@mui/material/Typography'); var _Typography2 = _interopRequireDefault(_Typography);
 
 var _Card = require('@mui/material/Card'); var _Card2 = _interopRequireDefault(_Card);
 var _CardContent = require('@mui/material/CardContent'); var _CardContent2 = _interopRequireDefault(_CardContent);
@@ -6684,7 +6649,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
     const internalRef = _react.useRef.call(void 0, null);
     _react.useImperativeHandle.call(void 0, ref, () => ({
       ...internalRef.current,
-      validate: () => _optionalChain([internalRef, 'access', _47 => _47.current, 'optionalAccess', _48 => _48.validate, 'optionalCall', _49 => _49(true)])
+      validate: () => _optionalChain([internalRef, 'access', _40 => _40.current, 'optionalAccess', _41 => _41.validate, 'optionalCall', _42 => _42(true)])
     }));
     _react.useEffect.call(void 0, () => {
       const el = internalRef.current;
@@ -6763,7 +6728,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _50 => _50.shadowRoot, 'optionalAccess', _51 => _51.querySelector, 'call', _52 => _52("input, textarea")]);
+        const input = _optionalChain([el, 'access', _43 => _43.shadowRoot, 'optionalAccess', _44 => _44.querySelector, 'call', _45 => _45("input, textarea")]);
         if (input) {
           onBlurCallback();
         }
@@ -6775,7 +6740,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _53 => _53.shadowRoot, 'optionalAccess', _54 => _54.querySelector, 'call', _55 => _55("input, textarea")]);
+        const input = _optionalChain([el, 'access', _46 => _46.shadowRoot, 'optionalAccess', _47 => _47.querySelector, 'call', _48 => _48("input, textarea")]);
         if (input) {
           const synthetic = {
             ...e,
@@ -6978,7 +6943,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const [noRowsOpen, setNoRowsOpen] = _react.useState.call(void 0, false);
   const [isModalOpen, setIsModalOpen] = _react.useState.call(void 0, false);
   const [searchItem, setSearchItem] = _react.useState.call(void 0, "");
-  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _56 => _56[0], 'optionalAccess', _57 => _57.key]) || "");
+  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _49 => _49[0], 'optionalAccess', _50 => _50.key]) || "");
   const [currentPage, setCurrentPage] = _react.useState.call(void 0, 1);
   const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
   const [editingMenuKey, setEditingMenuKey] = _react.useState.call(void 0, null);
@@ -7132,7 +7097,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _58 => _58.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _59 => _59.map, 'call', _60 => _60((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _51 => _51.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _52 => _52.map, 'call', _53 => _53((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       StyledInput,
       {
@@ -7378,7 +7343,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     }
     if (sortSubOrder) {
       result.map(
-        (item) => _optionalChain([item, 'access', _61 => _61.Details, 'optionalAccess', _62 => _62.fileObjects, 'access', _63 => _63.sort, 'call', _64 => _64((c, d) => {
+        (item) => _optionalChain([item, 'access', _54 => _54.Details, 'optionalAccess', _55 => _55.fileObjects, 'access', _56 => _56.sort, 'call', _57 => _57((c, d) => {
           const valueC = c[sortSubKey];
           const valueD = d[sortSubKey];
           if (typeof valueC === "string" && typeof valueD === "string") {
@@ -7439,24 +7404,24 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
   });
   const subDataRows = (itemId) => {
-    return processedRowData.filter((item) => _optionalChain([item, 'access', _65 => _65.Details, 'optionalAccess', _66 => _66.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _67 => _67.Details, 'optionalAccess', _68 => _68.fileObjects, 'access', _69 => _69.map, 'call', _70 => _70((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
+    return processedRowData.filter((item) => _optionalChain([item, 'access', _58 => _58.Details, 'optionalAccess', _59 => _59.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _60 => _60.Details, 'optionalAccess', _61 => _61.fileObjects, 'access', _62 => _62.map, 'call', _63 => _63((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "path",
         {
           d: "M8.5 12L3.5 7L4.9 5.55L7.5 8.15V0H9.5V8.15L12.1 5.55L13.5 7L8.5 12ZM2.5 16C1.95 16 1.47917 15.8042 1.0875 15.4125C0.695833 15.0208 0.5 14.55 0.5 14V11H2.5V14H14.5V11H16.5V14C16.5 14.55 16.3042 15.0208 15.9125 15.4125C15.5208 15.8042 15.05 16 14.5 16H2.5Z",
           fill: "#1C1B1F"
         }
-      ) }) }) }, `td-${_optionalChain([item, 'access', _71 => _71.Details, 'optionalAccess', _72 => _72.relationId])}-${fileItem.id}`),
+      ) }) }) }, `td-${_optionalChain([item, 'access', _64 => _64.Details, 'optionalAccess', _65 => _65.relationId])}-${fileItem.id}`),
       SubDataColumns.map((column) => {
         const columnKey = trimBeforePeriod2(column.key);
         const value = fileItem[columnKey];
         if (value !== void 0) {
-          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableCell, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }, `span-${_optionalChain([item, 'access', _73 => _73.Details, 'optionalAccess', _74 => _74.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _75 => _75.Details, 'optionalAccess', _76 => _76.relationId])}-${fileItem.id}-${index}-${column.title}`);
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableCell, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }, `span-${_optionalChain([item, 'access', _66 => _66.Details, 'optionalAccess', _67 => _67.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _68 => _68.Details, 'optionalAccess', _69 => _69.relationId])}-${fileItem.id}-${index}-${column.title}`);
         }
       })
-    ] }, `${item}-${_optionalChain([item, 'access', _77 => _77.Details, 'optionalAccess', _78 => _78.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _79 => _79.Details, 'optionalAccess', _80 => _80.relationId])}`));
+    ] }, `${item}-${_optionalChain([item, 'access', _70 => _70.Details, 'optionalAccess', _71 => _71.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _72 => _72.Details, 'optionalAccess', _73 => _73.relationId])}`));
   };
-  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _81 => _81.map, 'call', _82 => _82((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
+  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _74 => _74.map, 'call', _75 => _75((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ButtonStylingRow, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
@@ -7550,8 +7515,8 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
         root = _client.createRoot.call(void 0, container);
         dropdownRoots.current.set(container, root);
       }
-      const item = _optionalChain([data, 'optionalAccess', _83 => _83.find, 'call', _84 => _84((i) => String(i.id) === String(itemId))]);
-      if (_optionalChain([item, 'optionalAccess', _85 => _85.dropdown]) && root) {
+      const item = _optionalChain([data, 'optionalAccess', _76 => _76.find, 'call', _77 => _77((i) => String(i.id) === String(itemId))]);
+      if (_optionalChain([item, 'optionalAccess', _78 => _78.dropdown]) && root) {
         root.render(item.dropdown);
       }
     };
@@ -7679,9 +7644,9 @@ var NestedDataTable = ({ data, columns, id }) => {
   const SubDataHeaders = SubDataColumns.map((column, index) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !_optionalChain([data, 'optionalAccess', _86 => _86.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+  const subDataRows = !_optionalChain([data, 'optionalAccess', _79 => _79.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
     const columnKey = trimBeforePeriod(column.key);
-    const value = _optionalChain([item, 'access', _87 => _87.Details, 'optionalAccess', _88 => _88[columnKey]]);
+    const value = _optionalChain([item, 'access', _80 => _80.Details, 'optionalAccess', _81 => _81[columnKey]]);
     console.log("value: ", value);
     if (value !== void 0) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }) }, `Span-${item.id}-${colIndex}`);
@@ -7691,7 +7656,7 @@ var NestedDataTable = ({ data, columns, id }) => {
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: SubDataHeaders }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: subDataRows })
   ] });
-  const rows = !_optionalChain([data, 'optionalAccess', _89 => _89.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([data, 'optionalAccess', _90 => _90.map, 'call', _91 => _91((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+  const rows = !_optionalChain([data, 'optionalAccess', _82 => _82.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([data, 'optionalAccess', _83 => _83.map, 'call', _84 => _84((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PrimaryTrRows, { $index: index, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: "\u2227" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: "\u2228" }) }),
       HeadColumns.map((column, index2) => {