@wavelengthusaf/components 4.8.0 → 4.9.0

package/dist/cjs/index.cjs

@@ -6282,369 +6282,79 @@ var WavelengthMenu = ({
 };
 WavelengthMenu.displayName = "WavelengthMenu";
 
-// src/components/snackbars/WavelengthSnackbar.tsx
-var _Snackbar = require('@mui/material/Snackbar'); var _Snackbar2 = _interopRequireDefault(_Snackbar);
-var _SnackbarContent = require('@mui/material/SnackbarContent'); var _SnackbarContent2 = _interopRequireDefault(_SnackbarContent);
-
-
-
-function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor, textColor, horryAlign, vertyAlign, durationSb, width: width2, icon, id }) {
-  const handleClose = () => {
-    setShow(false);
-  };
-  const defaultIcon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { size: "small", "aria-label": "close", color: "inherit", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, { fontSize: "small" }) });
-  const palette2 = getPalette();
-  const durationMs = durationSb ? durationSb * 1e3 : 4e3;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _Snackbar2.default,
-    {
-      id,
-      open: show,
-      onClose: handleClose,
-      autoHideDuration: durationMs,
-      anchorOrigin: {
-        vertical: vertyAlign ? vertyAlign : "bottom",
-        horizontal: horryAlign ? horryAlign : "center"
-      },
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _SnackbarContent2.default,
-        {
-          style: {
-            backgroundColor: snackBarColor ? snackBarColor : palette2.primary,
-            color: textColor ? textColor : palette2.secondary,
-            display: "flex",
-            width: width2
-          },
-          message: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: icon }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { id: "snackbar", children: message ? message : "Insert Message Here" })
-          ] }),
-          action: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { display: "flex", justifyContent: "center" }, onClick: handleClose, children: closeIcon ? closeIcon : defaultIcon })
-        }
-      )
-    }
-  );
-}
-WavelengthSnackbar.displayName = "WavelengthSnackbar";
-
-// src/components/snackbars/WavelengthStandardSnackbar.tsx
-
-
-
-function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign, durationSb, width: width2, message, customVertyAlign, toggleShow, closeIcon, id }) {
-  const handleClose = () => {
-    toggleShow(false);
-  };
-  const durationMs = durationSb ? durationSb * 1e3 : 4e3;
-  let bgColor = "";
-  if (type === "success") {
-    bgColor = "#25ab21";
-  } else if (type === "error") {
-    bgColor = "#FF4646";
-  } else if (type === "disabled") {
-    bgColor = "#737373";
-  }
-  const sIcon = icon ? icon : "";
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _Snackbar2.default,
-    {
-      id,
-      sx: { marginTop: customVertyAlign ? `${customVertyAlign}` : "", zIndex: 1400 },
-      open: show,
-      onClose: handleClose,
-      autoHideDuration: durationMs,
-      anchorOrigin: {
-        vertical: vertyAlign ? vertyAlign : "top",
-        horizontal: horryAlign ? horryAlign : "center"
-      },
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _SnackbarContent2.default,
-        {
-          style: {
-            backgroundColor: bgColor,
-            borderRadius: "1px"
-            //color: props.textColor ? props.textColor : palette.secondary,
-          },
-          sx: { paddingTop: "0px", paddingBottom: "0px" },
-          message: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            "div",
-            {
-              style: {
-                display: "grid",
-                gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr",
-                width: width2
-              },
-              children: [
-                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }, id: "snackbar", children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { marginTop: "5px" }, children: sIcon }),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "1rem", marginLeft: "10px" }, children: message ? message : "Insert Message Here" })
-                ] }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { gridColumnStart: 6 }, onClick: handleClose, children: closeIcon })
-              ]
-            }
-          )
-        }
-      )
-    }
-  );
-}
-WavelengthStandardSnackbar.displayName = "WavelengthStandardSnackbar";
-
-// src/components/snackbars/WavelengthTestSnackbar.tsx
-
+// src/components/modals/WavelengthPagination.tsx
 
 
-
-var useOutsideClick = (callback) => {
+var WavelengthPagination = ({
+  testProp,
+  children,
+  // Style argument
+  customStyle: customStyle2,
+  variant,
+  textColor,
+  font,
+  fontSize,
+  border: border2,
+  borderRadius: borderRadius2,
+  padding: padding2,
+  totalPages,
+  currentPage,
+  activeColor,
+  activeTextColor,
+  backgroundColor: backgroundColor2,
+  disabledColor,
+  onPageChange,
+  ...rest
+  // This rest operator includes className, style, onClick, etc.
+}) => {
   const ref = _react.useRef.call(void 0, null);
+  const syncAttribute = (attribute, value) => {
+    const el = ref.current;
+    if (!el) return;
+    el.setAttribute(attribute, value);
+  };
   _react.useEffect.call(void 0, () => {
-    const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        callback();
+    const el = ref.current;
+    if (!el) return;
+    el.customStyles = customStyle2;
+    syncAttribute("variant", variant || "");
+    syncAttribute("text-color", textColor || "");
+    syncAttribute("font", font || "");
+    syncAttribute("font-size", fontSize || "");
+    syncAttribute("border", border2 || "");
+    syncAttribute("border-radius", borderRadius2 || "");
+    syncAttribute("padding", padding2 || "");
+    syncAttribute("active-color", activeColor || "");
+    syncAttribute("active-text-color", activeTextColor || "");
+    syncAttribute("background-color", backgroundColor2 || "");
+    syncAttribute("disabled-color", disabledColor || "");
+    syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _39 => _39.toString, 'call', _40 => _40()]) || "");
+    syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _41 => _41.toString, 'call', _42 => _42()]) || "");
+    const handlePageChange = (e) => {
+      if (onPageChange) {
+        onPageChange(e.detail.page);
       }
     };
-    document.addEventListener("mouseup", handleClickOutside);
-    document.addEventListener("touchend", handleClickOutside);
+    el.addEventListener("page-change", handlePageChange);
     return () => {
-      document.removeEventListener("mouseup", handleClickOutside);
-      document.removeEventListener("touchend", handleClickOutside);
+      el.removeEventListener("page-change", handlePageChange);
     };
-  }, [callback]);
-  return ref;
+  }, [testProp, textColor, font, fontSize, border2, borderRadius2, padding2, variant, totalPages, currentPage, activeColor, activeTextColor, backgroundColor2, disabledColor, onPageChange]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-pagination", { ref, variant, "total-pages": totalPages, "current-page": currentPage, ...rest });
 };
-function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, customVertyAlign, width: width2, img, id }) {
-  const ref = useOutsideClick(() => {
-    toggleOpen(false);
-  });
-  let bgColor = "";
-  if (type === "success") {
-    bgColor = "#25ab21";
-  } else if (type === "error") {
-    bgColor = "#FF4646";
-  } else if (type === "disabled") {
-    bgColor = "#737373";
-  }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: isPopUpOpen && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _Box2.default,
-    {
-      id,
-      sx: { position: "fixed", right: "auto", top: "24px", left: "50%", transform: "translateX(-50%)" },
-      ref,
-      style: {
-        height: "50px",
-        width: width2,
-        backgroundColor: bgColor,
-        borderRadius: "1px",
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingRight: "20px",
-        paddingLeft: "20px",
-        zIndex: 2800,
-        marginTop: customVertyAlign ? `${customVertyAlign}` : ""
-      },
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { backgroundColor: "red" } }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { color: "white", fontSize: "1rem" }, children: message }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _Button2.default,
-          {
-            variant: "text",
-            onClick: () => {
-              toggleOpen(false);
-            },
-            children: img
-          }
-        )
-      ]
-    }
-  ) });
-}
-WavelengthTestSnackbar.displayName = "WavelengthTestSnackbar";
+WavelengthPagination.displayName = "WavelengthPagination";
 
-// src/components/sliders/WavelengthSlider.tsx
+// src/index.ts
 
-var _Slider = require('@mui/material/Slider'); var _Slider2 = _interopRequireDefault(_Slider);
 
-function WavelengthSlider({ width: width2 = "300px", color: color2, valueDisplayed, marks, labelColor, value, id, maxVal = 100, minVal, step = 1, labelFunc, handleChange }) {
-  const on = valueDisplayed ? "on" : "off";
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { width: width2 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _Slider2.default,
-    {
-      id,
-      "aria-label": "Custom marks",
-      value,
-      getAriaValueText: labelFunc,
-      step,
-      marks,
-      valueLabelDisplay: on,
-      max: maxVal,
-      min: minVal,
-      onChange: handleChange,
-      sx: {
-        color: color2,
-        "& .MuiSlider-markLabel": {
-          color: labelColor
-        }
-      }
-    }
-  ) });
-}
-WavelengthSlider.displayName = "WavelengthSlider";
+// src/components/pagination/WavelengthDefaultPagination.tsx
 
-// src/components/carousels/WavelengthDefaultCarousel.tsx
 
+// src/components/pagination/WavelengthButtonPagination.tsx
 
-var _NavigateBefore = require('@mui/icons-material/NavigateBefore'); var _NavigateBefore2 = _interopRequireDefault(_NavigateBefore);
-var _NavigateNext = require('@mui/icons-material/NavigateNext'); var _NavigateNext2 = _interopRequireDefault(_NavigateNext);
 
-
-var _Card = require('@mui/material/Card'); var _Card2 = _interopRequireDefault(_Card);
-var _CardContent = require('@mui/material/CardContent'); var _CardContent2 = _interopRequireDefault(_CardContent);
-var _CardMedia = require('@mui/material/CardMedia'); var _CardMedia2 = _interopRequireDefault(_CardMedia);
-var _CardActionArea = require('@mui/material/CardActionArea'); var _CardActionArea2 = _interopRequireDefault(_CardActionArea);
-
-var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight, cardWidth, id, name }) => {
-  const [currentIndex, setCurrentIndex] = _react.useState.call(void 0, 0);
-  const adjustButtonSize = buttonSize !== void 0 ? buttonSize : 70;
-  const adjustImageHeight = imageHeight !== void 0 ? imageHeight : 250;
-  const adjustImageWidth = imageWidth !== void 0 ? imageWidth : 300;
-  const adjustCardHeight = cardHeight !== void 0 ? cardHeight : 345;
-  const adjustCardWidth = cardWidth !== void 0 ? cardWidth : 300;
-  const handleNext = () => {
-    setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
-  };
-  const handlePrev = () => {
-    setCurrentIndex((prevIndex) => (prevIndex - 1 + items.length) % items.length);
-  };
-  const handleClick = () => {
-    window.open(items[currentIndex].path, "_blank");
-  };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _Grid2.default,
-    {
-      container: true,
-      spacing: 1,
-      sx: {
-        alignItems: "center"
-      },
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IconButton2.default, { onClick: handlePrev, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _NavigateBefore2.default, { style: { fontSize: adjustButtonSize } }) }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _Card2.default,
-          {
-            sx: {
-              maxWidth: adjustCardWidth,
-              maxHeight: adjustCardHeight
-            },
-            children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CardActionArea2.default, { onClick: handleClick, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CardMedia2.default, { sx: { height: adjustImageHeight, width: adjustImageWidth }, image: items[currentIndex].image }),
-              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CardContent2.default, { children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "h4", children: items[currentIndex].title }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body1", children: items[currentIndex].description })
-              ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IconButton2.default, { onClick: handleNext, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _NavigateNext2.default, { style: { fontSize: adjustButtonSize } }) }) })
-      ]
-    }
-  ) }) });
-};
-DefaultCarousel.displayName = "DefaultCarousel";
-
-// src/components/carousels/WavelengthSliderCarousel.tsx
-
-
-
-
-
-
-
-var delay = 2500;
-var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
-  const [index, setIndex] = _react.useState.call(void 0, 0);
-  const [isHovered, setIsHovered] = _react.useState.call(void 0, false);
-  _react.useEffect.call(void 0, () => {
-    setTimeout(() => setIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1), delay);
-    return () => {
-    };
-  }, [index]);
-  const carouselCardWidth = items.length > 0 ? `calc(35% * ${items.length})` : "200%";
-  const adjustContHeight = contHeight !== void 0 ? contHeight : "100%";
-  const adjustContWidth = contWidth !== void 0 ? contWidth : "200%";
-  const adjustCardHeight = cardHeight !== void 0 ? cardHeight : 120;
-  const adjustCardWith = cardWidth !== void 0 ? cardWidth : 310;
-  const styles = {
-    carouselcontainer: {
-      overflow: "hidden",
-      position: "relative",
-      borderColor: "#4b5563",
-      height: adjustContHeight,
-      width: adjustContWidth,
-      minHeight: "280px",
-      minWidth: "640px",
-      borderRadius: "10px"
-    },
-    carouselTrackStyle: {
-      display: "flex",
-      position: "relative",
-      justifyContent: "center",
-      left: "0",
-      alignItems: "center",
-      gap: "5px",
-      width: carouselCardWidth,
-      height: "100%",
-      transition: "background-color 0.5s ease-in-out"
-    },
-    carouselCard: {
-      transition: "transform 0.3s ease, box-shadow 0.3s ease",
-      transform: isHovered ? "scale(0.9)" : "scale(1)",
-      boxShadow: isHovered ? "5px 5px 8px rgba(222, 222, 222, 0.362), 10px 10px 8px rgba(152, 133, 133, 0.392), 15px 15px 8px rgba(139, 154, 139, 0.303)" : "none"
-    }
-  };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles.carouselcontainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "my-animation", style: styles.carouselTrackStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _Grid2.default,
-    {
-      sx: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      container: true,
-      spacing: 0.5,
-      children: items.map((card) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _Card2.default,
-        {
-          sx: {
-            transition: "transform 0.3s ease, box-shadow 0.3s ease",
-            transform: isHovered ? "scale(0.9)" : "scale(1)",
-            boxShadow: isHovered ? "5px 5px 8px rgba(222, 222, 222, 0.362), 10px 10px 8px rgba(152, 133, 133, 0.392), 15px 15px 8px rgba(139, 154, 139, 0.303)" : "none"
-          },
-          onMouseEnter: () => setIsHovered(true),
-          onMouseLeave: () => setIsHovered(false),
-          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CardActionArea2.default, { href: card.path, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CardMedia2.default, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CardContent2.default, { children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { children: card.title }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: card.description })
-            ] })
-          ] })
-        }
-      ) }, card.title))
-    }
-  ) }) });
-};
-SliderCardCarousel.displayName = "SliderCardCarousel";
-
-// src/components/pagination/WavelengthDefaultPagination.tsx
-
-
-// src/components/pagination/WavelengthButtonPagination.tsx
-
-
-var _ArrowBackIosNew = require('@mui/icons-material/ArrowBackIosNew'); var _ArrowBackIosNew2 = _interopRequireDefault(_ArrowBackIosNew);
-var _ArrowForwardIos = require('@mui/icons-material/ArrowForwardIos'); var _ArrowForwardIos2 = _interopRequireDefault(_ArrowForwardIos);
+var _ArrowBackIosNew = require('@mui/icons-material/ArrowBackIosNew'); var _ArrowBackIosNew2 = _interopRequireDefault(_ArrowBackIosNew);
+var _ArrowForwardIos = require('@mui/icons-material/ArrowForwardIos'); var _ArrowForwardIos2 = _interopRequireDefault(_ArrowForwardIos);
 
 
 var MyDroplistItems = _styledcomponents2.default.call(void 0, "li")`
@@ -6936,6 +6646,361 @@ function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCou
 WavelengthDefaultPagination.displayName = "WavelengthDefaultPagination";
 var WavelengthDefaultPagination_default = WavelengthDefaultPagination;
 
+// src/components/snackbars/WavelengthSnackbar.tsx
+var _Snackbar = require('@mui/material/Snackbar'); var _Snackbar2 = _interopRequireDefault(_Snackbar);
+var _SnackbarContent = require('@mui/material/SnackbarContent'); var _SnackbarContent2 = _interopRequireDefault(_SnackbarContent);
+
+
+
+function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor, textColor, horryAlign, vertyAlign, durationSb, width: width2, icon, id }) {
+  const handleClose = () => {
+    setShow(false);
+  };
+  const defaultIcon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { size: "small", "aria-label": "close", color: "inherit", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, { fontSize: "small" }) });
+  const palette2 = getPalette();
+  const durationMs = durationSb ? durationSb * 1e3 : 4e3;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _Snackbar2.default,
+    {
+      id,
+      open: show,
+      onClose: handleClose,
+      autoHideDuration: durationMs,
+      anchorOrigin: {
+        vertical: vertyAlign ? vertyAlign : "bottom",
+        horizontal: horryAlign ? horryAlign : "center"
+      },
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _SnackbarContent2.default,
+        {
+          style: {
+            backgroundColor: snackBarColor ? snackBarColor : palette2.primary,
+            color: textColor ? textColor : palette2.secondary,
+            display: "flex",
+            width: width2
+          },
+          message: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: icon }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { id: "snackbar", children: message ? message : "Insert Message Here" })
+          ] }),
+          action: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { display: "flex", justifyContent: "center" }, onClick: handleClose, children: closeIcon ? closeIcon : defaultIcon })
+        }
+      )
+    }
+  );
+}
+WavelengthSnackbar.displayName = "WavelengthSnackbar";
+
+// src/components/snackbars/WavelengthStandardSnackbar.tsx
+
+
+
+function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign, durationSb, width: width2, message, customVertyAlign, toggleShow, closeIcon, id }) {
+  const handleClose = () => {
+    toggleShow(false);
+  };
+  const durationMs = durationSb ? durationSb * 1e3 : 4e3;
+  let bgColor = "";
+  if (type === "success") {
+    bgColor = "#25ab21";
+  } else if (type === "error") {
+    bgColor = "#FF4646";
+  } else if (type === "disabled") {
+    bgColor = "#737373";
+  }
+  const sIcon = icon ? icon : "";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _Snackbar2.default,
+    {
+      id,
+      sx: { marginTop: customVertyAlign ? `${customVertyAlign}` : "", zIndex: 1400 },
+      open: show,
+      onClose: handleClose,
+      autoHideDuration: durationMs,
+      anchorOrigin: {
+        vertical: vertyAlign ? vertyAlign : "top",
+        horizontal: horryAlign ? horryAlign : "center"
+      },
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _SnackbarContent2.default,
+        {
+          style: {
+            backgroundColor: bgColor,
+            borderRadius: "1px"
+            //color: props.textColor ? props.textColor : palette.secondary,
+          },
+          sx: { paddingTop: "0px", paddingBottom: "0px" },
+          message: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "div",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr",
+                width: width2
+              },
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }, id: "snackbar", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { marginTop: "5px" }, children: sIcon }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "1rem", marginLeft: "10px" }, children: message ? message : "Insert Message Here" })
+                ] }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { gridColumnStart: 6 }, onClick: handleClose, children: closeIcon })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+WavelengthStandardSnackbar.displayName = "WavelengthStandardSnackbar";
+
+// src/components/snackbars/WavelengthTestSnackbar.tsx
+
+
+
+
+var useOutsideClick = (callback) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    };
+    document.addEventListener("mouseup", handleClickOutside);
+    document.addEventListener("touchend", handleClickOutside);
+    return () => {
+      document.removeEventListener("mouseup", handleClickOutside);
+      document.removeEventListener("touchend", handleClickOutside);
+    };
+  }, [callback]);
+  return ref;
+};
+function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, customVertyAlign, width: width2, img, id }) {
+  const ref = useOutsideClick(() => {
+    toggleOpen(false);
+  });
+  let bgColor = "";
+  if (type === "success") {
+    bgColor = "#25ab21";
+  } else if (type === "error") {
+    bgColor = "#FF4646";
+  } else if (type === "disabled") {
+    bgColor = "#737373";
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: isPopUpOpen && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _Box2.default,
+    {
+      id,
+      sx: { position: "fixed", right: "auto", top: "24px", left: "50%", transform: "translateX(-50%)" },
+      ref,
+      style: {
+        height: "50px",
+        width: width2,
+        backgroundColor: bgColor,
+        borderRadius: "1px",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingRight: "20px",
+        paddingLeft: "20px",
+        zIndex: 2800,
+        marginTop: customVertyAlign ? `${customVertyAlign}` : ""
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { backgroundColor: "red" } }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { color: "white", fontSize: "1rem" }, children: message }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _Button2.default,
+          {
+            variant: "text",
+            onClick: () => {
+              toggleOpen(false);
+            },
+            children: img
+          }
+        )
+      ]
+    }
+  ) });
+}
+WavelengthTestSnackbar.displayName = "WavelengthTestSnackbar";
+
+// src/components/sliders/WavelengthSlider.tsx
+
+var _Slider = require('@mui/material/Slider'); var _Slider2 = _interopRequireDefault(_Slider);
+
+function WavelengthSlider({ width: width2 = "300px", color: color2, valueDisplayed, marks, labelColor, value, id, maxVal = 100, minVal, step = 1, labelFunc, handleChange }) {
+  const on = valueDisplayed ? "on" : "off";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { width: width2 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _Slider2.default,
+    {
+      id,
+      "aria-label": "Custom marks",
+      value,
+      getAriaValueText: labelFunc,
+      step,
+      marks,
+      valueLabelDisplay: on,
+      max: maxVal,
+      min: minVal,
+      onChange: handleChange,
+      sx: {
+        color: color2,
+        "& .MuiSlider-markLabel": {
+          color: labelColor
+        }
+      }
+    }
+  ) });
+}
+WavelengthSlider.displayName = "WavelengthSlider";
+
+// src/components/carousels/WavelengthDefaultCarousel.tsx
+
+
+var _NavigateBefore = require('@mui/icons-material/NavigateBefore'); var _NavigateBefore2 = _interopRequireDefault(_NavigateBefore);
+var _NavigateNext = require('@mui/icons-material/NavigateNext'); var _NavigateNext2 = _interopRequireDefault(_NavigateNext);
+
+
+var _Card = require('@mui/material/Card'); var _Card2 = _interopRequireDefault(_Card);
+var _CardContent = require('@mui/material/CardContent'); var _CardContent2 = _interopRequireDefault(_CardContent);
+var _CardMedia = require('@mui/material/CardMedia'); var _CardMedia2 = _interopRequireDefault(_CardMedia);
+var _CardActionArea = require('@mui/material/CardActionArea'); var _CardActionArea2 = _interopRequireDefault(_CardActionArea);
+
+var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight, cardWidth, id, name }) => {
+  const [currentIndex, setCurrentIndex] = _react.useState.call(void 0, 0);
+  const adjustButtonSize = buttonSize !== void 0 ? buttonSize : 70;
+  const adjustImageHeight = imageHeight !== void 0 ? imageHeight : 250;
+  const adjustImageWidth = imageWidth !== void 0 ? imageWidth : 300;
+  const adjustCardHeight = cardHeight !== void 0 ? cardHeight : 345;
+  const adjustCardWidth = cardWidth !== void 0 ? cardWidth : 300;
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
+  };
+  const handlePrev = () => {
+    setCurrentIndex((prevIndex) => (prevIndex - 1 + items.length) % items.length);
+  };
+  const handleClick = () => {
+    window.open(items[currentIndex].path, "_blank");
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _Grid2.default,
+    {
+      container: true,
+      spacing: 1,
+      sx: {
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IconButton2.default, { onClick: handlePrev, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _NavigateBefore2.default, { style: { fontSize: adjustButtonSize } }) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _Card2.default,
+          {
+            sx: {
+              maxWidth: adjustCardWidth,
+              maxHeight: adjustCardHeight
+            },
+            children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CardActionArea2.default, { onClick: handleClick, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CardMedia2.default, { sx: { height: adjustImageHeight, width: adjustImageWidth }, image: items[currentIndex].image }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CardContent2.default, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "h4", children: items[currentIndex].title }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body1", children: items[currentIndex].description })
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IconButton2.default, { onClick: handleNext, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _NavigateNext2.default, { style: { fontSize: adjustButtonSize } }) }) })
+      ]
+    }
+  ) }) });
+};
+DefaultCarousel.displayName = "DefaultCarousel";
+
+// src/components/carousels/WavelengthSliderCarousel.tsx
+
+
+
+
+
+
+
+var delay = 2500;
+var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
+  const [index, setIndex] = _react.useState.call(void 0, 0);
+  const [isHovered, setIsHovered] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    setTimeout(() => setIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1), delay);
+    return () => {
+    };
+  }, [index]);
+  const carouselCardWidth = items.length > 0 ? `calc(35% * ${items.length})` : "200%";
+  const adjustContHeight = contHeight !== void 0 ? contHeight : "100%";
+  const adjustContWidth = contWidth !== void 0 ? contWidth : "200%";
+  const adjustCardHeight = cardHeight !== void 0 ? cardHeight : 120;
+  const adjustCardWith = cardWidth !== void 0 ? cardWidth : 310;
+  const styles = {
+    carouselcontainer: {
+      overflow: "hidden",
+      position: "relative",
+      borderColor: "#4b5563",
+      height: adjustContHeight,
+      width: adjustContWidth,
+      minHeight: "280px",
+      minWidth: "640px",
+      borderRadius: "10px"
+    },
+    carouselTrackStyle: {
+      display: "flex",
+      position: "relative",
+      justifyContent: "center",
+      left: "0",
+      alignItems: "center",
+      gap: "5px",
+      width: carouselCardWidth,
+      height: "100%",
+      transition: "background-color 0.5s ease-in-out"
+    },
+    carouselCard: {
+      transition: "transform 0.3s ease, box-shadow 0.3s ease",
+      transform: isHovered ? "scale(0.9)" : "scale(1)",
+      boxShadow: isHovered ? "5px 5px 8px rgba(222, 222, 222, 0.362), 10px 10px 8px rgba(152, 133, 133, 0.392), 15px 15px 8px rgba(139, 154, 139, 0.303)" : "none"
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles.carouselcontainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "my-animation", style: styles.carouselTrackStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _Grid2.default,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      container: true,
+      spacing: 0.5,
+      children: items.map((card) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _Card2.default,
+        {
+          sx: {
+            transition: "transform 0.3s ease, box-shadow 0.3s ease",
+            transform: isHovered ? "scale(0.9)" : "scale(1)",
+            boxShadow: isHovered ? "5px 5px 8px rgba(222, 222, 222, 0.362), 10px 10px 8px rgba(152, 133, 133, 0.392), 15px 15px 8px rgba(139, 154, 139, 0.303)" : "none"
+          },
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false),
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CardActionArea2.default, { href: card.path, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CardMedia2.default, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CardContent2.default, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { children: card.title }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: card.description })
+            ] })
+          ] })
+        }
+      ) }, card.title))
+    }
+  ) }) });
+};
+SliderCardCarousel.displayName = "SliderCardCarousel";
+
 // src/components/TextField/WavelengthInput.tsx
 
 
@@ -6979,7 +7044,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', _39 => _39.current, 'optionalAccess', _40 => _40.validate, 'optionalCall', _41 => _41(true)])
+      validate: () => _optionalChain([internalRef, 'access', _43 => _43.current, 'optionalAccess', _44 => _44.validate, 'optionalCall', _45 => _45(true)])
     }));
     _react.useEffect.call(void 0, () => {
       const el = internalRef.current;
@@ -7056,7 +7121,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _42 => _42.shadowRoot, 'optionalAccess', _43 => _43.querySelector, 'call', _44 => _44("input")]);
+        const input = _optionalChain([el, 'access', _46 => _46.shadowRoot, 'optionalAccess', _47 => _47.querySelector, 'call', _48 => _48("input")]);
         if (input) {
           onBlurCallback();
         }
@@ -7068,7 +7133,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _45 => _45.shadowRoot, 'optionalAccess', _46 => _46.querySelector, 'call', _47 => _47("input")]);
+        const input = _optionalChain([el, 'access', _49 => _49.shadowRoot, 'optionalAccess', _50 => _50.querySelector, 'call', _51 => _51("input")]);
         if (input) {
           const synthetic = {
             ...e,
@@ -7271,7 +7336,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', _48 => _48[0], 'optionalAccess', _49 => _49.key]) || "");
+  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _52 => _52[0], 'optionalAccess', _53 => _53.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);
@@ -7425,7 +7490,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _50 => _50.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', _51 => _51.map, 'call', _52 => _52((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _54 => _54.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', _55 => _55.map, 'call', _56 => _56((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,
       {
@@ -7671,7 +7736,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     }
     if (sortSubOrder) {
       result.map(
-        (item) => _optionalChain([item, 'access', _53 => _53.Details, 'optionalAccess', _54 => _54.fileObjects, 'access', _55 => _55.sort, 'call', _56 => _56((c, d) => {
+        (item) => _optionalChain([item, 'access', _57 => _57.Details, 'optionalAccess', _58 => _58.fileObjects, 'access', _59 => _59.sort, 'call', _60 => _60((c, d) => {
           const valueC = c[sortSubKey];
           const valueD = d[sortSubKey];
           if (typeof valueC === "string" && typeof valueD === "string") {
@@ -7732,24 +7797,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', _57 => _57.Details, 'optionalAccess', _58 => _58.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _59 => _59.Details, 'optionalAccess', _60 => _60.fileObjects, 'access', _61 => _61.map, 'call', _62 => _62((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
+    return processedRowData.filter((item) => _optionalChain([item, 'access', _61 => _61.Details, 'optionalAccess', _62 => _62.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _63 => _63.Details, 'optionalAccess', _64 => _64.fileObjects, 'access', _65 => _65.map, 'call', _66 => _66((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', _63 => _63.Details, 'optionalAccess', _64 => _64.relationId])}-${fileItem.id}`),
+      ) }) }) }, `td-${_optionalChain([item, 'access', _67 => _67.Details, 'optionalAccess', _68 => _68.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', _65 => _65.Details, 'optionalAccess', _66 => _66.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _67 => _67.Details, 'optionalAccess', _68 => _68.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', _69 => _69.Details, 'optionalAccess', _70 => _70.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _71 => _71.Details, 'optionalAccess', _72 => _72.relationId])}-${fileItem.id}-${index}-${column.title}`);
         }
       })
-    ] }, `${item}-${_optionalChain([item, 'access', _69 => _69.Details, 'optionalAccess', _70 => _70.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _71 => _71.Details, 'optionalAccess', _72 => _72.relationId])}`));
+    ] }, `${item}-${_optionalChain([item, 'access', _73 => _73.Details, 'optionalAccess', _74 => _74.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _75 => _75.Details, 'optionalAccess', _76 => _76.relationId])}`));
   };
-  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _73 => _73.map, 'call', _74 => _74((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
+  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _77 => _77.map, 'call', _78 => _78((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" }),
@@ -7803,7 +7868,7 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
         root = _client.createRoot.call(void 0, container);
         reactDropdownRoots.current.set(container, root);
       }
-      const item = _optionalChain([data, 'optionalAccess', _75 => _75.find, 'call', _76 => _76((item2) => String(item2.id) === String(itemId))]);
+      const item = _optionalChain([data, 'optionalAccess', _79 => _79.find, 'call', _80 => _80((item2) => String(item2.id) === String(itemId))]);
       if (item && item.dropdown && root) {
         root.render(item.dropdown);
       }
@@ -7930,9 +7995,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', _77 => _77.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', _81 => _81.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', _78 => _78.Details, 'optionalAccess', _79 => _79[columnKey]]);
+    const value = _optionalChain([item, 'access', _82 => _82.Details, 'optionalAccess', _83 => _83[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}`);
@@ -7942,7 +8007,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', _80 => _80.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', _81 => _81.map, 'call', _82 => _82((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+  const rows = !_optionalChain([data, 'optionalAccess', _84 => _84.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', _85 => _85.map, 'call', _86 => _86((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) => {
@@ -8609,7 +8674,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
 
 
 
-exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.ChildDataTable = ChildDataTable2; exports.ChildDataTableElement = _webcomponents.ChildDataTable; exports.DefaultCarousel = DefaultCarousel; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDefaultPagination = WavelengthDefaultPagination; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthForm = WavelengthForm; exports.WavelengthFormElement = _webcomponents.WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthInputElement = _webcomponents.WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthMultiSelectAutocompleteElement = _webcomponents.WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthProgressBarElement = _webcomponents.WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip; exports.WavelengthWebSnackbar = WavelengthWebSnackbar; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.ChildDataTable = ChildDataTable2; exports.ChildDataTableElement = _webcomponents.ChildDataTable; exports.DefaultCarousel = DefaultCarousel; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDefaultPagination = WavelengthDefaultPagination; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthForm = WavelengthForm; exports.WavelengthFormElement = _webcomponents.WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthInputElement = _webcomponents.WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthMultiSelectAutocompleteElement = _webcomponents.WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPaginationElement = _webcomponents.WavelengthPagination; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthProgressBarElement = _webcomponents.WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip; exports.WavelengthWebSnackbar = WavelengthWebSnackbar; exports.add = add; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js: