@wavelengthusaf/components 4.3.0 → 4.4.1

package/dist/esm/index.js

@@ -206,7 +206,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment18 = REACT_FRAGMENT_TYPE;
+        var Fragment17 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment18;
+        exports.Fragment = Fragment17;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -6083,133 +6083,47 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
 WavelengthPopUpMenu.displayName = "WavelengthPopUpMenu";
 
 // src/components/modals/WavelengthDropdown.tsx
-import React11 from "react";
-import { Menu as MuiMenu } from "@mui/material";
-import { MenuItem as MuiMenuItem, styled as styled7 } from "@mui/material";
-import Grow from "@mui/material/Grow";
-import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
-function WavelengthDropdown({
-  id,
-  options,
-  buttonSx,
-  width: width2 = "200px",
-  buttonText,
-  menuSx = { backgroundColor: "#FCFAF8", borderColor: "blue", width: width2, boxShadow: "none" },
-  palette: palette2
-}) {
-  const [anchorEl, setAnchorEl] = React11.useState(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  const breweryStyleButton = {
-    backgroundColor: "#d16a2f",
-    color: "white",
-    padding: "16px 16px",
-    width: width2,
-    fontSize: "18px",
-    minWidth: "min-content",
-    borderTopRightRadius: "8px",
-    borderTopLeftRadius: "8px",
-    "&:hover": {
-      backgroundColor: "rgba(228, 119, 57, 1)"
-    }
-  };
-  const breweryDropDownStyle = {
-    backgroundColor: "#FCFAF8",
-    borderColor: "#d16a2f",
-    hoverColor: "rgba(209, 106, 47, 0.1)",
-    width: width2
-  };
-  const defaultDropdownSx = {
-    backgroundColor: "white",
-    borderColor: "blue",
-    hoverColor: "#d4d4e3",
-    width: width2
-  };
-  const defaultsx = menuSx ? { ...defaultDropdownSx, ...menuSx } : defaultDropdownSx;
-  let myButtonSx;
-  let myMenusx;
-  if (palette2 === "brewery") {
-    myButtonSx = { ...breweryStyleButton, ...buttonSx };
-    myMenusx = { ...breweryDropDownStyle, ...menuSx };
-  } else {
-    myButtonSx = buttonSx;
-    myMenusx = defaultsx;
-  }
-  const MenuItem2 = styled7(MuiMenuItem)({
-    "&.MuiMenuItem-root": {
-      "&.Mui-selected": {
-        backgroundColor: `${myMenusx.backgroundColor}`
-      },
-      "&:hover": {
-        backgroundColor: `${myMenusx.hoverColor}`
-      }
+import { forwardRef, useEffect as useEffect8, useImperativeHandle as useImperativeHandle2, useRef as useRef9 } from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var WavelengthDropdown = forwardRef((props, ref) => {
+  const { options, defaultValue, value, fontSize, fontFamily, borderRadius: borderRadius2, width: width2, height: height2, textColor, arrowSize, popupRadius, popupAlign, popupSelectedColor, onChange, ...rest } = props;
+  const elementRef = useRef9(null);
+  useImperativeHandle2(ref, () => elementRef.current);
+  useEffect8(() => {
+    const el = elementRef.current;
+    if (!el || !onChange) return;
+    const handler = (e) => {
+      const customEvent = e;
+      onChange(customEvent);
+    };
+    el.addEventListener("change", handler);
+    return () => el.removeEventListener("change", handler);
+  }, [onChange]);
+  useEffect8(() => {
+    if (value !== void 0 && elementRef.current) {
+      elementRef.current.value = value;
     }
-  });
-  const MyMenu = styled7(MuiMenu)({
-    top: "-7px",
-    left: "0px",
-    boxSizing: "border-box",
-    "& .MuiMenu-paper": {
-      borderBottomLeftRadius: "8px",
-      borderBottomRightRadius: "8px",
-      borderTopRightRadius: "0px",
-      borderTopLeftRadius: "0px",
-      boxShadow: menuSx?.boxShadow,
-      width: myMenusx.width,
-      backgroundColor: `${myMenusx.backgroundColor}`
-    },
-    "& .MuiMenu-list": {
-      borderBottomLeftRadius: "8px",
-      borderBottomRightRadius: "8px",
-      borderLeft: `1px solid ${myMenusx.borderColor}`,
-      borderRight: `1px solid ${myMenusx.borderColor}`,
-      borderBottom: `1px solid ${myMenusx.borderColor}`
+  }, [value]);
+  return /* @__PURE__ */ jsx33(
+    "wavelength-dropdown",
+    {
+      ref: elementRef,
+      options: JSON.stringify(options),
+      defaultValue,
+      "font-size": fontSize,
+      "font-family": fontFamily,
+      "border-radius": borderRadius2,
+      width: width2,
+      height: height2,
+      color: textColor,
+      "arrow-size": arrowSize,
+      "popup-radius": popupRadius,
+      "popup-align": popupAlign,
+      "popup-selected-color": popupSelectedColor,
+      ...rest
     }
-  });
-  return /* @__PURE__ */ jsxs22(Fragment12, { children: [
-    /* @__PURE__ */ jsx33(
-      WavelengthButton,
-      {
-        variant: "contained",
-        size: "large",
-        borderRadius: "0.5rem",
-        padding: myButtonSx.padding || breweryStyleButton.padding,
-        width: width2,
-        margin: "0rem",
-        colorOne: menuSx.borderColor,
-        colorTwo: menuSx.backgroundColor,
-        fontSize: "1.125rem",
-        boxShadow: "none",
-        onClick: handleClick,
-        children: buttonText
-      }
-    ),
-    /* @__PURE__ */ jsx33(
-      MyMenu,
-      {
-        id,
-        anchorEl,
-        open,
-        onClose: handleClose,
-        MenuListProps: {
-          "aria-labelledby": "basic-button"
-        },
-        anchorOrigin: { vertical: "bottom", horizontal: "center" },
-        transformOrigin: { vertical: "top", horizontal: "center" },
-        TransitionComponent: Grow,
-        children: options.map((item, index) => {
-          return /* @__PURE__ */ jsx33(MenuItem2, { onClick: item.onClick, children: item.option }, index);
-        })
-      }
-    )
-  ] });
-}
-var WavelengthDropdownStyled = styled7(WavelengthDropdown)``;
+  );
+});
 WavelengthDropdown.displayName = "WavelengthDropdown";
 
 // src/components/snackbars/WavelengthSnackbar.tsx
@@ -6217,7 +6131,7 @@ import Snackbar from "@mui/material/Snackbar";
 import SnackbarContent from "@mui/material/SnackbarContent";
 import CloseIcon2 from "@mui/icons-material/Close";
 import { IconButton as IconButton6 } from "@mui/material";
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor, textColor, horryAlign, vertyAlign, durationSb, width: width2, icon, id }) {
   const handleClose = () => {
     setShow(false);
@@ -6245,7 +6159,7 @@ function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor,
             display: "flex",
             width: width2
           },
-          message: /* @__PURE__ */ jsxs23("div", { children: [
+          message: /* @__PURE__ */ jsxs22("div", { children: [
             /* @__PURE__ */ jsx34("span", { children: icon }),
             /* @__PURE__ */ jsx34("span", { id: "snackbar", children: message ? message : "Insert Message Here" })
           ] }),
@@ -6260,7 +6174,7 @@ WavelengthSnackbar.displayName = "WavelengthSnackbar";
 // src/components/snackbars/WavelengthStandardSnackbar.tsx
 import Snackbar2 from "@mui/material/Snackbar";
 import SnackbarContent2 from "@mui/material/SnackbarContent";
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign, durationSb, width: width2, message, customVertyAlign, toggleShow, closeIcon, id }) {
   const handleClose = () => {
     toggleShow(false);
@@ -6296,7 +6210,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
             //color: props.textColor ? props.textColor : palette.secondary,
           },
           sx: { paddingTop: "0px", paddingBottom: "0px" },
-          message: /* @__PURE__ */ jsxs24(
+          message: /* @__PURE__ */ jsxs23(
             "div",
             {
               style: {
@@ -6305,7 +6219,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
                 width: width2
               },
               children: [
-                /* @__PURE__ */ jsxs24("div", { style: { gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }, id: "snackbar", children: [
+                /* @__PURE__ */ jsxs23("div", { style: { gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }, id: "snackbar", children: [
                   /* @__PURE__ */ jsx35("div", { style: { marginTop: "5px" }, children: sIcon }),
                   /* @__PURE__ */ jsx35("div", { style: { fontSize: "1rem", marginLeft: "10px" }, children: message ? message : "Insert Message Here" })
                 ] }),
@@ -6323,11 +6237,11 @@ WavelengthStandardSnackbar.displayName = "WavelengthStandardSnackbar";
 // src/components/snackbars/WavelengthTestSnackbar.tsx
 import Box5 from "@mui/material/Box";
 import Button4 from "@mui/material/Button";
-import { useEffect as useEffect8, useRef as useRef9 } from "react";
-import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useRef as useRef10 } from "react";
+import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
 var useOutsideClick = (callback) => {
-  const ref = useRef9(null);
-  useEffect8(() => {
+  const ref = useRef10(null);
+  useEffect9(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
@@ -6354,7 +6268,7 @@ function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, custom
   } else if (type === "disabled") {
     bgColor = "#737373";
   }
-  return /* @__PURE__ */ jsx36(Fragment13, { children: isPopUpOpen && /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsx36(Fragment12, { children: isPopUpOpen && /* @__PURE__ */ jsxs24(
     Box5,
     {
       id,
@@ -6433,7 +6347,7 @@ import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import CardMedia from "@mui/material/CardMedia";
 import CardActionArea from "@mui/material/CardActionArea";
-import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
 var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight, cardWidth, id, name }) => {
   const [currentIndex, setCurrentIndex] = useState4(0);
   const adjustButtonSize = buttonSize !== void 0 ? buttonSize : 70;
@@ -6450,7 +6364,7 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
   const handleClick = () => {
     window.open(items[currentIndex].path, "_blank");
   };
-  return /* @__PURE__ */ jsx38("div", { children: /* @__PURE__ */ jsx38("div", { children: /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsx38("div", { children: /* @__PURE__ */ jsx38("div", { children: /* @__PURE__ */ jsxs25(
     Grid5,
     {
       container: true,
@@ -6467,9 +6381,9 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
               maxWidth: adjustCardWidth,
               maxHeight: adjustCardHeight
             },
-            children: /* @__PURE__ */ jsxs26(CardActionArea, { onClick: handleClick, children: [
+            children: /* @__PURE__ */ jsxs25(CardActionArea, { onClick: handleClick, children: [
               /* @__PURE__ */ jsx38(CardMedia, { sx: { height: adjustImageHeight, width: adjustImageWidth }, image: items[currentIndex].image }),
-              /* @__PURE__ */ jsxs26(CardContent, { children: [
+              /* @__PURE__ */ jsxs25(CardContent, { children: [
                 /* @__PURE__ */ jsx38(Typography4, { variant: "h4", children: items[currentIndex].title }),
                 /* @__PURE__ */ jsx38(Typography4, { variant: "body1", children: items[currentIndex].description })
               ] })
@@ -6484,18 +6398,18 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
 DefaultCarousel.displayName = "DefaultCarousel";
 
 // src/components/carousels/WavelengthSliderCarousel.tsx
-import { useState as useState5, useEffect as useEffect10 } from "react";
+import { useState as useState5, useEffect as useEffect11 } from "react";
 import Grid6 from "@mui/material/Grid";
 import Card2 from "@mui/material/Card";
 import CardContent2 from "@mui/material/CardContent";
 import CardMedia2 from "@mui/material/CardMedia";
 import CardActionArea2 from "@mui/material/CardActionArea";
-import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
 var delay = 2500;
 var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
   const [index, setIndex] = useState5(0);
   const [isHovered, setIsHovered] = useState5(false);
-  useEffect10(() => {
+  useEffect11(() => {
     setTimeout(() => setIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1), delay);
     return () => {
     };
@@ -6553,9 +6467,9 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
           },
           onMouseEnter: () => setIsHovered(true),
           onMouseLeave: () => setIsHovered(false),
-          children: /* @__PURE__ */ jsxs27(CardActionArea2, { href: card.path, children: [
+          children: /* @__PURE__ */ jsxs26(CardActionArea2, { href: card.path, children: [
             /* @__PURE__ */ jsx39(CardMedia2, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
-            /* @__PURE__ */ jsxs27(CardContent2, { children: [
+            /* @__PURE__ */ jsxs26(CardContent2, { children: [
               /* @__PURE__ */ jsx39("h3", { children: card.title }),
               /* @__PURE__ */ jsx39("p", { children: card.description })
             ] })
@@ -6575,9 +6489,9 @@ import { useState as useState6 } from "react";
 import Button5 from "@mui/material/Button";
 import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
-import styled8 from "styled-components";
-import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
-var MyDroplistItems = styled8("li")`
+import styled7 from "styled-components";
+import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+var MyDroplistItems = styled7("li")`
   background-color: white;
   color: #000000;
   padding: 10px 30px;
@@ -6620,14 +6534,14 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
     "&:disabled": { background: "rgb(226, 223, 223)" },
     "&.active": { background: "#8FD8FF" }
   };
-  return /* @__PURE__ */ jsxs28("div", { style: dropstyles.butPagCompDivStyle, id, children: [
+  return /* @__PURE__ */ jsxs27("div", { style: dropstyles.butPagCompDivStyle, id, children: [
     /* @__PURE__ */ jsx40(Button5, { onClick: () => handleChangePage(current - 1), disabled: current === 1, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx40(ArrowBackIosNewIcon, {}) }),
     /* @__PURE__ */ jsx40("section", { style: dropstyles.rangenumbers, children: itemList.map(
       (item, index) => item === "..." && index === 1 ? (
         //first half ellipse with first half dropdown
         // dropdown
         // eslint-disable-next-line react/jsx-key
-        /* @__PURE__ */ jsxs28("div", { children: [
+        /* @__PURE__ */ jsxs27("div", { children: [
           /* @__PURE__ */ jsx40(Button5, { onClick: () => toggleDropdown(1), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
           isOpen && /* @__PURE__ */ jsx40("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx40("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx40(
             MyDroplistItems,
@@ -6642,7 +6556,7 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
         ] })
       ) : item === "..." && index === 5 ? (
         //second half ellipse with second half dropdown
-        /* @__PURE__ */ jsxs28("div", { children: [
+        /* @__PURE__ */ jsxs27("div", { children: [
           /* @__PURE__ */ jsx40(Button5, { onClick: () => toggleDropdown(5), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
           isSecOpen && /* @__PURE__ */ jsx40("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx40("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx40(
             MyDroplistItems,
@@ -6668,12 +6582,12 @@ import { useState as useState7 } from "react";
 import Button6 from "@mui/material/Button";
 import ArrowBackIosNewIcon2 from "@mui/icons-material/ArrowBackIosNew";
 import ArrowForwardIosIcon2 from "@mui/icons-material/ArrowForwardIos";
-import styled9 from "styled-components";
-import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
+import styled8 from "styled-components";
+import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 function WavelengthVariationPagination({ totalPages, current, variant, handleChangePage, itemList, firstEllipseList, secondEllipseList, id }) {
   const [isOpen, setIsOpen] = useState7(false);
   const [isSecOpen, setIsSecOpen] = useState7(false);
-  const MyDroplistItems2 = styled9("li")`
+  const MyDroplistItems2 = styled8("li")`
     background-color: white;
     color: #000000;
     padding: 10px 30px;
@@ -6711,13 +6625,13 @@ function WavelengthVariationPagination({ totalPages, current, variant, handleCha
       setIsSecOpen(!isSecOpen);
     }
   };
-  return /* @__PURE__ */ jsxs29("div", { style: dropstyles.pagination, id, children: [
+  return /* @__PURE__ */ jsxs28("div", { style: dropstyles.pagination, id, children: [
     /* @__PURE__ */ jsx41(Button6, { onClick: () => handleChangePage(current - 1), variant, disabled: current === 1, children: /* @__PURE__ */ jsx41(ArrowBackIosNewIcon2, {}) }),
     /* @__PURE__ */ jsx41("section", { style: dropstyles.rangenumbers, children: itemList.map(
       (item, index) => item === "..." && index === 1 ? (
         //first half ellipse with first half dropdown
         // eslint-disable-next-line react/jsx-key
-        /* @__PURE__ */ jsxs29("div", { children: [
+        /* @__PURE__ */ jsxs28("div", { children: [
           /* @__PURE__ */ jsx41(Button6, { onClick: () => toggleDropdown(1), variant, className: current === index ? "active" : "", children: item }, index),
           isOpen && /* @__PURE__ */ jsx41("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx41("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx41(
             MyDroplistItems2,
@@ -6733,7 +6647,7 @@ function WavelengthVariationPagination({ totalPages, current, variant, handleCha
         ] })
       ) : item === "..." && index === 5 ? (
         //second half ellipse with second half dropdown
-        /* @__PURE__ */ jsxs29("div", { children: [
+        /* @__PURE__ */ jsxs28("div", { children: [
           /* @__PURE__ */ jsx41(Button6, { onClick: () => toggleDropdown(5), variant, className: current === index ? "active" : "", children: item }, index),
           isSecOpen && /* @__PURE__ */ jsx41("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx41("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx41(
             MyDroplistItems2,
@@ -6867,10 +6781,10 @@ WavelengthDefaultPagination.displayName = "WavelengthDefaultPagination";
 var WavelengthDefaultPagination_default = WavelengthDefaultPagination;
 
 // src/components/TextField/WavelengthInput.tsx
-import { useRef as useRef10, useEffect as useEffect11, forwardRef, useImperativeHandle as useImperativeHandle2 } from "react";
+import { useRef as useRef11, useEffect as useEffect12, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx43 } from "react/jsx-runtime";
-var WavelengthInput = forwardRef(
+var WavelengthInput = forwardRef2(
   ({
     id,
     name,
@@ -6906,12 +6820,12 @@ var WavelengthInput = forwardRef(
     onBlurCallback,
     ...rest
   }, ref) => {
-    const internalRef = useRef10(null);
-    useImperativeHandle2(ref, () => ({
+    const internalRef = useRef11(null);
+    useImperativeHandle3(ref, () => ({
       ...internalRef.current,
       validate: () => internalRef.current?.validate?.(true)
     }));
-    useEffect11(() => {
+    useEffect12(() => {
       const el = internalRef.current;
       if (!el) return;
       const set = (attr, val) => {
@@ -6982,7 +6896,7 @@ var WavelengthInput = forwardRef(
       label,
       disabled
     ]);
-    useEffect11(() => {
+    useEffect12(() => {
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
@@ -6994,7 +6908,7 @@ var WavelengthInput = forwardRef(
       el.addEventListener("blur", handler);
       return () => el.removeEventListener("blur", handler);
     }, [onBlurCallback]);
-    useEffect11(() => {
+    useEffect12(() => {
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
@@ -7024,10 +6938,10 @@ WavelengthInput.displayName = "WavelengthInput";
 import { WavelengthInput as WavelengthInput2 } from "@wavelengthusaf/web-components";
 
 // src/components/DataTable/WavelengthDataTable.tsx
-import { useEffect as useEffect12, useRef as useRef11, useState as useState9 } from "react";
-import styled10 from "styled-components";
-import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
-var ModalInputDiv = styled10.div`
+import { useEffect as useEffect13, useRef as useRef12, useState as useState9 } from "react";
+import styled9 from "styled-components";
+import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+var ModalInputDiv = styled9.div`
   display: flex;
   flex-direction: column; /* Corrected this line */
   gap: 3px;
@@ -7057,7 +6971,7 @@ var ModalInputDiv = styled10.div`
     }
   }
 `;
-var ModalOverlay = styled10.div`
+var ModalOverlay = styled9.div`
   position: fixed;
   bottom: 19%;
   right: 15%;
@@ -7069,7 +6983,7 @@ var ModalOverlay = styled10.div`
   align-items: center;
   z-index: 1;
 `;
-var ModalWrapper = styled10.div`
+var ModalWrapper = styled9.div`
   background-color: white;
   border-radius: 8px;
   padding: 20px;
@@ -7080,7 +6994,7 @@ var ModalWrapper = styled10.div`
   display: flex;
   align-items: center;
 `;
-var ModalClose = styled10.button`
+var ModalClose = styled9.button`
   position: absolute;
   top: 10px;
   right: 10px;
@@ -7090,16 +7004,16 @@ var ModalClose = styled10.button`
   background: none;
   z-index: 2;
 `;
-var TableHeadStyle = styled10.th`
+var TableHeadStyle = styled9.th`
   position: relative;
 `;
-var KebabMenu = styled10.div`
+var KebabMenu = styled9.div`
   display: inline-block;
   position: absolute;
   right: 0;
   top: 2px;
 `;
-var KebabIcon = styled10.div`
+var KebabIcon = styled9.div`
   cursor: pointer;
   font-size: 20px;
   padding: 5px;
@@ -7112,7 +7026,7 @@ var KebabIcon = styled10.div`
     color: #8fd8ff;
   }
 `;
-var MenuOptions = styled10.ul`
+var MenuOptions = styled9.ul`
   position: absolute;
   right: 0;
   top: 100%;
@@ -7135,7 +7049,7 @@ var MenuOptions = styled10.ul`
     }
   }
 `;
-var StyledBoxDiv = styled10.div`
+var StyledBoxDiv = styled9.div`
   background-color: white;
   width: 700px;
   height: 480px;
@@ -7143,7 +7057,7 @@ var StyledBoxDiv = styled10.div`
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 `;
-var StyledNavBoxDiv = styled10.div`
+var StyledNavBoxDiv = styled9.div`
   background-color: white;
   width: 700px;
   display: flex; /* Make parent a flex-container */
@@ -7153,13 +7067,13 @@ var StyledNavBoxDiv = styled10.div`
 
   box-shadow: 0.5px 3px 5px black;
 `;
-var StyledTd = styled10.td`
+var StyledTd = styled9.td`
   border-top: 1px solid #c6c7cc;
   border-bottom: 1px solid #c6c7cc;
   padding: 10px 15px;
   vertical-align: middle;
 `;
-var StyledTableTwo = styled10.table`
+var StyledTableTwo = styled9.table`
   width: 95%;
   height: 95%;
   border-collapse: collapse;
@@ -7185,7 +7099,7 @@ var StyledTableTwo = styled10.table`
     }
   }
 `;
-var StyledInput = styled10.input`
+var StyledInput = styled9.input`
   height: 100%;
   width: 100%;
   outline: none;
@@ -7205,8 +7119,8 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const [currentPage, setCurrentPage] = useState9(1);
   const [isOpen, setIsOpen] = useState9(false);
   const [editingMenuKey, setEditingMenuKey] = useState9(null);
-  const menuRef = useRef11(null);
-  const modalRef = useRef11(null);
+  const menuRef = useRef12(null);
+  const modalRef = useRef12(null);
   function isNumeric(value) {
     return /^\d+$/.test(value);
   }
@@ -7214,7 +7128,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     setSelectedValue(event.target.value);
     setLocalData(copiedArray);
   };
-  useEffect12(() => {
+  useEffect13(() => {
     if (!selectedValue || searchItem === "") {
       setLocalData(copiedArray);
       setNoRowsOpen(false);
@@ -7244,7 +7158,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const closeModal = () => {
     setIsModalOpen(false);
   };
-  useEffect12(() => {
+  useEffect13(() => {
     const handleClickOutside = (event) => {
       if (isModalOpen && modalRef.current && !modalRef.current.contains(event.target)) {
         closeModal();
@@ -7301,9 +7215,9 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     setEditingId(null);
   };
   const headers = columns.map((column, index) => {
-    return /* @__PURE__ */ jsxs30(TableHeadStyle, { children: [
+    return /* @__PURE__ */ jsxs29(TableHeadStyle, { children: [
       column.title,
-      /* @__PURE__ */ jsxs30(KebabMenu, { ref: menuRef, children: [
+      /* @__PURE__ */ jsxs29(KebabMenu, { ref: menuRef, children: [
         /* @__PURE__ */ jsx44(
           KebabIcon,
           {
@@ -7314,25 +7228,25 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
             children: "\u22EE"
           }
         ),
-        isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs30(MenuOptions, { children: [
-          sortOrder === "asc" ? /* @__PURE__ */ jsxs30("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
+        isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs29(MenuOptions, { children: [
+          sortOrder === "asc" ? /* @__PURE__ */ jsxs29("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
             /* @__PURE__ */ jsx44("span", { children: "\u2B06" }),
             " Sort ASC"
-          ] }) : /* @__PURE__ */ jsxs30("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
+          ] }) : /* @__PURE__ */ jsxs29("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
             /* @__PURE__ */ jsx44("span", { children: "\u2B07" }),
             " Sort DESC"
           ] }),
-          /* @__PURE__ */ jsxs30("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
+          /* @__PURE__ */ jsxs29("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
             /* @__PURE__ */ jsx44("span", { children: "\u23F7" }),
             " Filter"
           ] }),
-          isModalOpen && /* @__PURE__ */ jsx44(ModalOverlay, { children: /* @__PURE__ */ jsxs30(ModalWrapper, { ref: modalRef, children: [
+          isModalOpen && /* @__PURE__ */ jsx44(ModalOverlay, { children: /* @__PURE__ */ jsxs29(ModalWrapper, { ref: modalRef, children: [
             /* @__PURE__ */ jsx44(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
-            /* @__PURE__ */ jsxs30(ModalInputDiv, { children: [
+            /* @__PURE__ */ jsxs29(ModalInputDiv, { children: [
               /* @__PURE__ */ jsx44("label", { htmlFor: "filterSelectId", children: "Columns: " }),
               /* @__PURE__ */ jsx44("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx44("option", { children: item.key }, item.key)) })
             ] }),
-            /* @__PURE__ */ jsxs30(ModalInputDiv, { children: [
+            /* @__PURE__ */ jsxs29(ModalInputDiv, { children: [
               /* @__PURE__ */ jsx44("label", { htmlFor: "filterInputId", children: "Values: " }),
               /* @__PURE__ */ jsx44(
                 "input",
@@ -7375,8 +7289,8 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       }
     ) : /* @__PURE__ */ jsx44("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => handleEdit(item.id, item[column.key], column.key), children: item[column.key] }) }, index2);
   }) }, item.id));
-  return /* @__PURE__ */ jsxs30("div", { id, children: [
-    /* @__PURE__ */ jsx44(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs30(StyledTableTwo, { title: "StyledTable", children: [
+  return /* @__PURE__ */ jsxs29("div", { id, children: [
+    /* @__PURE__ */ jsx44(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs29(StyledTableTwo, { title: "StyledTable", children: [
       /* @__PURE__ */ jsx44("thead", { children: /* @__PURE__ */ jsx44("tr", { children: headers }) }),
       /* @__PURE__ */ jsx44("tbody", { children: rows })
     ] }) }),
@@ -7386,29 +7300,29 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
 WavelengthDataTable.displayName = "WavelengthDataTable";
 
 // src/components/DataTable/SubRowTable/ChildSubTable.tsx
-import { useMemo as useMemo3, useState as useState10, Fragment as Fragment14 } from "react";
-import styled11 from "styled-components";
-import { Fragment as Fragment15, jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
-var TableContainer = styled11.div`
+import { useMemo as useMemo3, useState as useState10, Fragment as Fragment13 } from "react";
+import styled10 from "styled-components";
+import { Fragment as Fragment14, jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+var TableContainer = styled10.div`
   width: 1200px;
   border-radius: 16px;
 `;
-var TableRow = styled11.div`
+var TableRow = styled10.div`
   display: grid;
   grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
 `;
-var TablePrimaryRow = styled11.div`
+var TablePrimaryRow = styled10.div`
   display: grid;
   grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
 `;
-var BodyRowContainer = styled11.div`
+var BodyRowContainer = styled10.div`
   border: 1px solid black;
   background-color: white;
   border-radius: 16px;
   overflow: hidden;
   margin-bottom: 10px;
 `;
-var TableHeaderCell = styled11.div`
+var TableHeaderCell = styled10.div`
   padding-left: 12px;
   padding-right: 25px;
   height: 60px;
@@ -7416,7 +7330,7 @@ var TableHeaderCell = styled11.div`
   display: flex;
   align-items: center;
 `;
-var TableBodyCell = styled11.div`
+var TableBodyCell = styled10.div`
   background-color: #fff;
   color: black;
   position: relative;
@@ -7425,27 +7339,27 @@ var TableBodyCell = styled11.div`
   font-size: ${(props) => props.$primaryBoldState ? "24px" : "16px"};
   font-weight: ${(props) => props.$primaryBoldState ? "bold" : "normal"};
 `;
-var ButtonStylingRow = styled11.div`
+var ButtonStylingRow = styled10.div`
   display: flex;
   flex-direction: row;
 `;
-var BottomArrowBar = styled11.div`
+var BottomArrowBar = styled10.div`
   background-color: #e9e9e9;
   text-align: center;
 `;
-var BottomUpArrowBar = styled11.div`
+var BottomUpArrowBar = styled10.div`
   background-color: #e9e9e9;
   text-align: center;
   position: relative;
 `;
-var SubDataTable = styled11.table`
+var SubDataTable = styled10.table`
   background-color: white;
   color: black;
   width: 100%;
   border-collapse: collapse;
   line-height: 1.2;
 `;
-var SubDataTableHeaderRow = styled11.tr`
+var SubDataTableHeaderRow = styled10.tr`
   height: 50px;
   background-color: #304359;
   color: white;
@@ -7456,10 +7370,10 @@ var SubDataTableHeaderRow = styled11.tr`
     white-space: nowrap;
   }
 `;
-var SubDataTableBodyRow = styled11.tbody`
+var SubDataTableBodyRow = styled10.tbody`
   font-size: 14px;
 `;
-var SubDataTableBodyRowContainer = styled11.tr`
+var SubDataTableBodyRowContainer = styled10.tr`
   td {
     padding: 10px 0;
     max-width: 100px;
@@ -7469,13 +7383,13 @@ var SubDataTableBodyRowContainer = styled11.tr`
     background-color: #96e0e5;
   }
 `;
-var SubDataTableCell = styled11.td`
+var SubDataTableCell = styled10.td`
   text-align: center;
 `;
-var SubDataHeaderColumn = styled11.thead`
+var SubDataHeaderColumn = styled10.thead`
   background-color: #304359;
 `;
-var SortButton = styled11.button`
+var SortButton = styled10.button`
   font-size: 16px;
   font-weight: bold;
   color: white;
@@ -7483,7 +7397,7 @@ var SortButton = styled11.button`
   border: none;
   white-space: nowrap;
 `;
-var DownloadMissionButton = styled11.button`
+var DownloadMissionButton = styled10.button`
   width: 217px;
   height: 45px;
   padding: 12px 32px 12px 32px;
@@ -7512,7 +7426,7 @@ var DownloadMissionButton = styled11.button`
     transition: background-color 0.2s ease;
   }
 `;
-var AddButton = styled11.button`
+var AddButton = styled10.button`
   width: 130px;
   height: 45px;
   border: 1px solid #1a8083;
@@ -7542,7 +7456,7 @@ var AddButton = styled11.button`
     transition: background-color 0.2s ease;
   }
 `;
-var DownloadArrow = styled11.button`
+var DownloadArrow = styled10.button`
   background-color: transparent;
   border: none;
 
@@ -7625,15 +7539,15 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     return result;
   }, [data, sortKey, sortOrder, sortSubKey, sortSubOrder]);
   const renderSortButton = (column, sortOrder2, sortKey2) => {
-    return sortKey2 === column.key ? sortOrder2 === "asc" ? /* @__PURE__ */ jsx45(Fragment15, { children: /* @__PURE__ */ jsxs31(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+    return sortKey2 === column.key ? sortOrder2 === "asc" ? /* @__PURE__ */ jsx45(Fragment14, { children: /* @__PURE__ */ jsxs30(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
       /* @__PURE__ */ jsx45("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx45("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
-    ] }) }) : /* @__PURE__ */ jsx45(Fragment15, { children: /* @__PURE__ */ jsxs31(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+    ] }) }) : /* @__PURE__ */ jsx45(Fragment14, { children: /* @__PURE__ */ jsxs30(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
       /* @__PURE__ */ jsx45("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx45("path", { d: "M13.2375 9.2627L7.5 3.5377L1.7625 9.2627L0 7.5002L7.5 0.000196457L15 7.5002L13.2375 9.2627Z", fill: "white" }) })
-    ] }) }) : /* @__PURE__ */ jsx45(Fragment15, { children: /* @__PURE__ */ jsxs31(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+    ] }) }) : /* @__PURE__ */ jsx45(Fragment14, { children: /* @__PURE__ */ jsxs30(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
       /* @__PURE__ */ jsx45("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx45("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
@@ -7641,15 +7555,15 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
   };
   const renderSortSubButton = (column, sortSubOrder2, sortSubKey2) => {
     const columnKey = trimBeforePeriod2(column.key);
-    return sortSubKey2 === columnKey ? sortSubOrder2 === "asc" ? /* @__PURE__ */ jsxs31(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+    return sortSubKey2 === columnKey ? sortSubOrder2 === "asc" ? /* @__PURE__ */ jsxs30(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
       /* @__PURE__ */ jsx45("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx45("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
-    ] }) : /* @__PURE__ */ jsxs31(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+    ] }) : /* @__PURE__ */ jsxs30(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
       /* @__PURE__ */ jsx45("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx45("path", { d: "M13.2375 9.2627L7.5 3.5377L1.7625 9.2627L0 7.5002L7.5 0.000196457L15 7.5002L13.2375 9.2627Z", fill: "white" }) })
-    ] }) : /* @__PURE__ */ jsxs31(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+    ] }) : /* @__PURE__ */ jsxs30(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
       /* @__PURE__ */ jsx45("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx45("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
@@ -7662,7 +7576,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     return /* @__PURE__ */ jsx45("th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
   });
   const subDataRows = (itemId) => {
-    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx45(Fragment14, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs31(SubDataTableBodyRowContainer, { children: [
+    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx45(Fragment13, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs30(SubDataTableBodyRowContainer, { children: [
       /* @__PURE__ */ jsx45("td", { children: /* @__PURE__ */ jsx45(DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ jsx45("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx45(
         "path",
         {
@@ -7679,16 +7593,16 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
       })
     ] }, `${item}-${item.Details?.relationId}-${fileItem.id}-${index}`)) }, `SDR-${item.id}-${item.Details?.relationId}`));
   };
-  const dataRows = processedRowData?.map((item, index) => /* @__PURE__ */ jsxs31(BodyRowContainer, { children: [
+  const dataRows = processedRowData?.map((item, index) => /* @__PURE__ */ jsxs30(BodyRowContainer, { children: [
     /* @__PURE__ */ jsx45(TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ jsx45(TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
-    /* @__PURE__ */ jsxs31(ButtonStylingRow, { children: [
+    /* @__PURE__ */ jsxs30(ButtonStylingRow, { children: [
       /* @__PURE__ */ jsx45(DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
       /* @__PURE__ */ jsx45(AddButton, { onClick: addFilesOnClick, children: "Add files" })
     ] }),
     openRow !== item.id && /* @__PURE__ */ jsx45(BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ jsx45("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx45("path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
-    openRow === item.id && /* @__PURE__ */ jsxs31("div", { children: [
-      /* @__PURE__ */ jsxs31(SubDataTable, { children: [
-        /* @__PURE__ */ jsx45(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs31(SubDataTableHeaderRow, { children: [
+    openRow === item.id && /* @__PURE__ */ jsxs30("div", { children: [
+      /* @__PURE__ */ jsxs30(SubDataTable, { children: [
+        /* @__PURE__ */ jsx45(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs30(SubDataTableHeaderRow, { children: [
           /* @__PURE__ */ jsx45("th", {}),
           SubDataHeaders
         ] }) }),
@@ -7697,7 +7611,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
       /* @__PURE__ */ jsx45(BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ jsx45("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx45("path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
     ] })
   ] }, `Bodycontainer-${item.id}-${index}`));
-  return /* @__PURE__ */ jsxs31(TableContainer, { children: [
+  return /* @__PURE__ */ jsxs30(TableContainer, { children: [
     /* @__PURE__ */ jsx45(TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
     /* @__PURE__ */ jsx45("div", { title: "tablebodies", children: dataRows })
   ] });
@@ -7705,14 +7619,14 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
 ChildDataTable.displayName = "ChildDataTable";
 
 // src/components/DataTable/SubRowTable/ChildDataTable.tsx
-import { useRef as useRef12, useEffect as useEffect13 } from "react";
+import { useRef as useRef13, useEffect as useEffect14 } from "react";
 import "@wavelengthusaf/web-components";
 import { createRoot } from "react-dom/client";
 import { jsx as jsx46 } from "react/jsx-runtime";
 var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, ...rest }) => {
-  const tableRef = useRef12(null);
-  const reactDropdownRoots = useRef12(/* @__PURE__ */ new Map());
-  useEffect13(() => {
+  const tableRef = useRef13(null);
+  const reactDropdownRoots = useRef13(/* @__PURE__ */ new Map());
+  useEffect14(() => {
     const customChildDataTableElement = tableRef.current;
     if (!customChildDataTableElement) return;
     if (columns !== void 0) customChildDataTableElement.setColumns = columns;
@@ -7721,7 +7635,7 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
     if (sortIcon !== void 0) customChildDataTableElement.setSortIcon = sortIcon;
     if (dropdownButtonIcon !== void 0) customChildDataTableElement.setDropdownButtonIcon = dropdownButtonIcon;
   }, [columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon]);
-  useEffect13(() => {
+  useEffect14(() => {
     const el = tableRef.current;
     if (!el) return;
     const handleReactDropdown = (event) => {
@@ -7767,9 +7681,9 @@ import { ChildDataTable as ChildDataTable3 } from "@wavelengthusaf/web-component
 
 // src/components/DataTable/NestedDataTable/NestedDataTable.tsx
 import { useState as useState11 } from "react";
-import styled12 from "styled-components";
-import { Fragment as Fragment16, jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
-var TableStyle = styled12.table`
+import styled11 from "styled-components";
+import { Fragment as Fragment15, jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+var TableStyle = styled11.table`
   width: 100%;
   height: 100%;
   border-collapse: collapse;
@@ -7785,26 +7699,26 @@ var TableStyle = styled12.table`
   margin-right: auto;
   position: absolute;
 `;
-var MainThHeaders = styled12.th`
+var MainThHeaders = styled11.th`
   &:not(:last-child) {
     border-right: 1px solid #c6c7cc;
   }
 `;
-var SubDataTr = styled12.tr`
+var SubDataTr = styled11.tr`
   background-color: white;
 
   &:nth-child(even) {
     background-color: #e0ffff;
   }
 `;
-var PrimaryTrRows = styled12.tr`
+var PrimaryTrRows = styled11.tr`
   background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
 `;
-var SubTrRows = styled12.tr`
+var SubTrRows = styled11.tr`
   background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
   height: 120px;
 `;
-var SubTableStyle = styled12.table`
+var SubTableStyle = styled11.table`
   width: 95%;
   border-collapse: collapse;
   margin-top: -15px;
@@ -7824,7 +7738,7 @@ var SubTableStyle = styled12.table`
     }
   }
 `;
-var DropdownButton = styled12.button`
+var DropdownButton = styled11.button`
   background-color: transparent;
   background-repeat: no-repeat;
   border: none;
@@ -7834,7 +7748,7 @@ var DropdownButton = styled12.button`
   font-weight: bold; /* This makes the UTF symbols bold */
   font-size: 20px;
 `;
-var PrimaryTdSpan = styled12.td`
+var PrimaryTdSpan = styled11.td`
   &:not(:last-child) {
     border-right: 1px solid black;
   }
@@ -7860,7 +7774,7 @@ var NestedDataTable = ({ data, columns, id }) => {
   const SubDataHeaders = SubDataColumns.map((column, index) => {
     return /* @__PURE__ */ jsx47("th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !data?.length ? /* @__PURE__ */ jsx47("tr", { children: /* @__PURE__ */ jsx47("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx47(Fragment16, { children: /* @__PURE__ */ jsx47(SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+  const subDataRows = !data?.length ? /* @__PURE__ */ jsx47("tr", { children: /* @__PURE__ */ jsx47("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx47(Fragment15, { children: /* @__PURE__ */ jsx47(SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
     const columnKey = trimBeforePeriod(column.key);
     const value = item.Details?.[columnKey];
     console.log("value: ", value);
@@ -7868,21 +7782,21 @@ var NestedDataTable = ({ data, columns, id }) => {
       return /* @__PURE__ */ jsx47("td", { children: /* @__PURE__ */ jsx47("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
     }
   }) }, `Sub-${item.id}-${index}`) }));
-  const childRows = /* @__PURE__ */ jsxs32(SubTableStyle, { children: [
+  const childRows = /* @__PURE__ */ jsxs31(SubTableStyle, { children: [
     /* @__PURE__ */ jsx47("thead", { children: /* @__PURE__ */ jsx47("tr", { children: SubDataHeaders }) }),
     /* @__PURE__ */ jsx47("tbody", { children: subDataRows })
   ] });
-  const rows = !data?.length ? /* @__PURE__ */ jsx47("tr", { children: /* @__PURE__ */ jsx47("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs32(Fragment16, { children: [
-    /* @__PURE__ */ jsxs32(PrimaryTrRows, { $index: index, children: [
-      /* @__PURE__ */ jsx47(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx47(Fragment16, { children: "\u2227" }) : /* @__PURE__ */ jsx47(Fragment16, { children: "\u2228" }) }),
+  const rows = !data?.length ? /* @__PURE__ */ jsx47("tr", { children: /* @__PURE__ */ jsx47("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs31(Fragment15, { children: [
+    /* @__PURE__ */ jsxs31(PrimaryTrRows, { $index: index, children: [
+      /* @__PURE__ */ jsx47(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx47(Fragment15, { children: "\u2227" }) : /* @__PURE__ */ jsx47(Fragment15, { children: "\u2228" }) }),
       HeadColumns.map((column, index2) => {
         return /* @__PURE__ */ jsx47(PrimaryTdSpan, { children: /* @__PURE__ */ jsx47("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
       })
     ] }, index),
     isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx47(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx47("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
   ] }));
-  return /* @__PURE__ */ jsx47("div", { id, children: /* @__PURE__ */ jsxs32(TableStyle, { children: [
-    /* @__PURE__ */ jsx47("thead", { children: /* @__PURE__ */ jsxs32("tr", { children: [
+  return /* @__PURE__ */ jsx47("div", { id, children: /* @__PURE__ */ jsxs31(TableStyle, { children: [
+    /* @__PURE__ */ jsx47("thead", { children: /* @__PURE__ */ jsxs31("tr", { children: [
       /* @__PURE__ */ jsx47("th", { title: "dropdownth" }),
       headers
     ] }) }),
@@ -7892,20 +7806,20 @@ var NestedDataTable = ({ data, columns, id }) => {
 NestedDataTable.displayName = "NestedDataTable";
 
 // src/components/AutoComplete/WavelengthAutoComplete.tsx
-import { useEffect as useEffect14, useRef as useRef14, useState as useState12 } from "react";
-import styled13 from "styled-components";
-import { Fragment as Fragment17, jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
-var AutoContainer = styled13.div`
+import { useEffect as useEffect15, useRef as useRef15, useState as useState12 } from "react";
+import styled12 from "styled-components";
+import { Fragment as Fragment16, jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+var AutoContainer = styled12.div`
   //position: relative;
   position: relative;
   width: ${(props) => props.$inputWidth || "320px"};
   height: ${(props) => props.$inputHeight || "51px"};
 `;
-var InputWrapper = styled13.div`
+var InputWrapper = styled12.div`
   width: 100%;
   height: 100%;
 `;
-var Label = styled13.label`
+var Label = styled12.label`
   position: absolute;
   top: 50%;
   left: 10px;
@@ -7917,7 +7831,7 @@ var Label = styled13.label`
   padding: 0 5px;
   background-color: transparent;
 `;
-var Input = styled13.input`
+var Input = styled12.input`
   width: 100%; //this must be 100%, as width inherit inherits the literal expression, not the value
   height: 100%;
   padding: 0.5rem 0.75rem;
@@ -7959,7 +7873,7 @@ var Input = styled13.input`
     color: ${(props) => props.$defaultLabelColor || "#ccc"};
   }
 `;
-var DropDownList = styled13.ul`
+var DropDownList = styled12.ul`
   position: absolute;
   z-index: 5;
   width: 100%;
@@ -7973,7 +7887,7 @@ var DropDownList = styled13.ul`
   overflow: scroll; //necessary for limiting scroll options
   max-height: 390px; //necessary for limiting scroll options, limit to 10 per view
 `;
-var ActiveListItem = styled13.li`
+var ActiveListItem = styled12.li`
   position: relative;
   width: 100%;
   z-index: 9999;
@@ -7990,7 +7904,7 @@ var ActiveListItem = styled13.li`
     background-color: #d8d8d8;
   }
 `;
-var NoHoverListItem = styled13.li`
+var NoHoverListItem = styled12.li`
   position: relative;
   z-index: 9999;
   padding: 10px;
@@ -8023,9 +7937,9 @@ var WavelengthAutoComplete = ({
   placeholder,
   onBlurCallback
 }) => {
-  const inputRef = useRef14(null);
-  const listRef = useRef14(null);
-  const noItemListRef = useRef14(null);
+  const inputRef = useRef15(null);
+  const listRef = useRef15(null);
+  const noItemListRef = useRef15(null);
   const [inputValue, setInputValue] = useState12(placeholder ?? "");
   const [suggestions, setSuggestions] = useState12([]);
   const [isDropdownVisible, setIsDropdownVisible] = useState12(false);
@@ -8033,7 +7947,7 @@ var WavelengthAutoComplete = ({
   const arrayLength = suggestions.length;
   const [focusedIndex, setFocusedIndex] = useState12(0);
   const idName = id ? id : "auto-comp";
-  useEffect14(() => {
+  useEffect15(() => {
     const handleClickOutsideList = (event) => {
       if (listRef.current && !listRef.current.contains(event.target)) {
         setIsDropdownVisible(false);
@@ -8045,7 +7959,7 @@ var WavelengthAutoComplete = ({
     };
   }, [focusedIndex]);
   if (onDataChange !== void 0) {
-    useEffect14(() => {
+    useEffect15(() => {
       onDataChange(inputValue);
     }, [inputValue]);
   }
@@ -8111,8 +8025,8 @@ var WavelengthAutoComplete = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx48(Fragment17, { children: /* @__PURE__ */ jsxs33(AutoContainer, { $inputHeight: height2, $inputWidth: width2, children: [
-    /* @__PURE__ */ jsxs33(InputWrapper, { id: `${idName}-input-wrapper`, $inputHeight: height2, $inputWidth: width2, children: [
+  return /* @__PURE__ */ jsx48(Fragment16, { children: /* @__PURE__ */ jsxs32(AutoContainer, { $inputHeight: height2, $inputWidth: width2, children: [
+    /* @__PURE__ */ jsxs32(InputWrapper, { id: `${idName}-input-wrapper`, $inputHeight: height2, $inputWidth: width2, children: [
       /* @__PURE__ */ jsx48(
         Input,
         {
@@ -8165,10 +8079,10 @@ var WavelengthAutoComplete = ({
 WavelengthAutoComplete.displayName = "WavelengthAutoComplete";
 
 // src/components/inputs/WavelengthDatePicker.tsx
-import { useEffect as useEffect15, useState as useState13 } from "react";
-import styled14 from "styled-components";
-import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
-var Label2 = styled14.label`
+import { useEffect as useEffect16, useState as useState13 } from "react";
+import styled13 from "styled-components";
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+var Label2 = styled13.label`
   position: absolute;
   top: 50%;
   left: 10px;
@@ -8180,7 +8094,7 @@ var Label2 = styled14.label`
   padding: 0 5px;
   background-color: transparent;
 `;
-var InputWrapper2 = styled14.div`
+var InputWrapper2 = styled13.div`
   position: relative;
   width: ${(props) => props.$inputWidth || "320px"};
   height: ${(props) => props.$inputHeight || "51px"};
@@ -8239,7 +8153,7 @@ var WavelengthDatePicker = ({
   const [minAdjusted, setMinAdjusted] = useState13("");
   const [maxAdjusted, setMaxAdjusted] = useState13("");
   const idName = id ? id : "WlDatePick";
-  useEffect15(() => {
+  useEffect16(() => {
     const minDate = new Date(min || "");
     const maxDate = new Date(max || "");
     if (inputTimeType === "datetime-local") {
@@ -8278,7 +8192,7 @@ var WavelengthDatePicker = ({
     setValue(dateString);
     if (OnDataChange !== void 0) OnDataChange(new Date(dateString));
   };
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs33(
     InputWrapper2,
     {
       id: `${idName}-inputWrapper`,
@@ -8322,7 +8236,7 @@ WavelengthDatePicker.displayName = "WavelengthDatePicker";
 import { WavelengthDatePicker as WavelengthDatePicker2 } from "@wavelengthusaf/web-components";
 
 // src/components/inputs/WavelengthCheckbox.tsx
-import { useRef as useRef15, useEffect as useEffect16 } from "react";
+import { useRef as useRef16, useEffect as useEffect17 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var WavelengthCheckbox = ({
@@ -8334,8 +8248,8 @@ var WavelengthCheckbox = ({
   textSize,
   ...rest
 }) => {
-  const ref = useRef15(null);
-  useEffect16(() => {
+  const ref = useRef16(null);
+  useEffect17(() => {
     const el = ref.current;
     if (!el) return;
     if (size !== void 0) {
@@ -8364,7 +8278,7 @@ var WavelengthCheckbox = ({
 WavelengthCheckbox.displayName = "WavelengthCheckbox";
 
 // src/components/samples/SampleComponent.tsx
-import { useRef as useRef16, useEffect as useEffect17 } from "react";
+import { useRef as useRef17, useEffect as useEffect18 } from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
 var SampleComponent = ({
   testProp,
@@ -8374,8 +8288,8 @@ var SampleComponent = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef16(null);
-  useEffect17(() => {
+  const ref = useRef17(null);
+  useEffect18(() => {
     const el = ref.current;
     if (!el) return;
     el.customStyles = customStyle2;
@@ -8388,7 +8302,7 @@ var SampleComponent = ({
 SampleComponent.displayName = "SampleComponent";
 
 // src/components/NotificationPanel/WavelengthNotificationPanel.tsx
-import { useRef as useRef17, useEffect as useEffect18 } from "react";
+import { useRef as useRef18, useEffect as useEffect19 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx52 } from "react/jsx-runtime";
 var WavelengthNotificationPanel = ({
@@ -8399,8 +8313,8 @@ var WavelengthNotificationPanel = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef17(null);
-  useEffect18(() => {
+  const ref = useRef18(null);
+  useEffect19(() => {
     const el = ref.current;
     if (!el) return;
     if (notifications !== void 0) {
@@ -8426,11 +8340,11 @@ var WavelengthNotificationPanel = ({
 import { SampleComponent as SampleComponent2 } from "@wavelengthusaf/web-components";
 
 // src/components/MultiSelect/WavelengthMultiSelectAutocomplete.tsx
-import { useEffect as useEffect19, useRef as useRef18 } from "react";
+import { useEffect as useEffect20, useRef as useRef19 } from "react";
 import { jsx as jsx53 } from "react/jsx-runtime";
-var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Options", label, name, style: style3, onChange, value, ...rest }) => {
-  const componentRef = useRef18(null);
-  useEffect19(() => {
+var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Options", label, name, style: style3, onChange, value, disabled, ...rest }) => {
+  const componentRef = useRef19(null);
+  useEffect20(() => {
     const component = componentRef.current;
     if (!component) return;
     const handleValueChange = (event) => {
@@ -8443,16 +8357,17 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
       component.removeEventListener("change", handleValueChange);
     };
   }, [onChange]);
-  useEffect19(() => {
+  useEffect20(() => {
     const component = componentRef.current;
     if (!component) return;
     if (placeholder) component.setAttribute("placeholder", placeholder);
     if (label) component.setAttribute("label", label);
     if (name) component.setAttribute("name", name);
+    if (disabled) component.setAttribute("disabled", disabled ? "true" : "false");
     if (options) component.autocompleteOptions = options;
     if (style3) component.customStyles = style3;
   }, [options, placeholder, name, label, style3]);
-  useEffect19(() => {
+  useEffect20(() => {
     const component = componentRef.current;
     if (component && value) {
       component.value = value;