@wavelengthusaf/components 4.4.3 → 4.5.0

package/dist/cjs/index.cjs

@@ -5857,34 +5857,38 @@ function WavelengthManyPlanes({ numberOfPlanes = 5, trailDir = "left", color: co
 WavelengthManyPlanes.displayName = "WavelengthManyPlanes";
 
 // src/components/separators/WavelengthPlaneTrail/WavelengthPlaneTrail.tsx
-var _Divider = require('@mui/material/Divider'); var _Divider2 = _interopRequireDefault(_Divider);
 
 
-function WavelengthPlaneTrail({ trailDir = "right", id, color: color2 }) {
-  let direction = "row-reverse";
-  let flippy = "";
-  if (trailDir !== "right") {
-    direction = "row";
-    flippy = "rotate(180)";
-  } else {
-    direction = "row-reverse";
-    flippy = "";
-  }
-  const palette2 = getPalette();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Grid2.default, { container: true, alignItems: "center", flexDirection: direction, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Grid2.default, { item: true, id, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "40", height: "40", viewBox: "0 0 40 40", transform: flippy, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "mask", { id: "mask0_56_851", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "40", height: "40", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "40", width: "40", height: "40", transform: "rotate(90 40 0)", fill: "#D9D9D9" }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { mask: "url(#mask0_56_851)", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "path",
-        {
-          d: "M4.16662 14.8988L5.76079 14.8988L8.16454 18.1359L18.2616 18.1359L14.1291 4.16669L16.2425 4.16669L24.5075 18.1359L33.985 18.1359C34.5022 18.1359 34.9422 18.3172 35.305 18.68C35.6677 19.0428 35.8491 19.4828 35.8491 20C35.8491 20.5172 35.6677 20.9572 35.305 21.32C34.9422 21.6828 34.5022 21.8642 33.985 21.8642L24.5075 21.8642L16.2425 35.8334L14.1291 35.8334L18.2616 21.8642L8.19662 21.8642L5.76079 25.1013L4.16662 25.1013L5.64329 20L4.16662 14.8988Z",
-          fill: color2 ? color2 : palette2.primary
-        }
-      ) })
-    ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Grid2.default, { item: true, style: { width: "75%" }, id: "trailExample", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, { variant: "middle", sx: { bgcolor: color2 ? color2 : palette2.primary } }) })
-  ] });
-}
+
+var WavelengthPlaneTrail = ({
+  trailDir,
+  color: color2,
+  id,
+  children,
+  // Style argument
+  customStyle: customStyle2,
+  ...rest
+  // This rest operator includes className, style, onClick, etc.
+}) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    if (customStyle2 !== void 0) {
+      el.customStyles = customStyle2;
+    }
+    if (trailDir !== void 0) {
+      el.setAttribute("trailDir", trailDir);
+    }
+    if (color2 !== void 0) {
+      el.setAttribute("color", color2);
+    }
+    if (id !== void 0) {
+      el.setAttribute("id", id);
+    }
+  }, [trailDir]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-planetrail", { ref, trailDir, color: color2, id, customStyle: customStyle2, ...rest, children });
+};
 WavelengthPlaneTrail.displayName = "WavelengthPlaneTrail";
 
 // src/components/modals/WavelengthConfirmationModal.tsx
@@ -5957,7 +5961,7 @@ var _Slide = require('@mui/material/Slide'); var _Slide2 = _interopRequireDefaul
 
 
 
-
+var _Divider = require('@mui/material/Divider'); var _Divider2 = _interopRequireDefault(_Divider);
 
 var customStyle = { marginLeft: 16, marginRight: 16, marginTop: 8, marginBottom: 8 };
 var emailStyle = {

package/dist/cjs/index.d.cts

@@ -4,8 +4,8 @@ export { ChildDataTable as ChildDataTableElement, SampleComponent as SampleCompo
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TextFieldVariants } from '@mui/material';
 import { z } from 'zod';
-import { Mark } from '@mui/material/Slider/useSlider.types';
 import { CSSProperties } from 'styled-components';
+import { Mark } from '@mui/material/Slider/useSlider.types';
 
 /**
  * Helper Functions
@@ -588,15 +588,17 @@ declare namespace WavelengthManyPlanes {
     var displayName: string;
 }
 
-interface WavelengthPlaneTrailProps {
-    trailDir?: "right" | "left";
+type StyleProp = {
+    [selector: string]: any;
+} & CSSProperties;
+
+interface WavelengthPlaneTrailProps extends React__default.HTMLAttributes<HTMLElement> {
+    trailDir?: "left" | "right";
     color?: string;
     id?: string;
+    customStyle?: StyleProp;
 }
-declare function WavelengthPlaneTrail({ trailDir, id, color }: WavelengthPlaneTrailProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthPlaneTrail {
-    var displayName: string;
-}
+declare const WavelengthPlaneTrail: React__default.FC<WavelengthPlaneTrailProps>;
 
 type ThemeProperties = {
     name?: string;
@@ -808,10 +810,6 @@ declare namespace WavelengthDefaultPagination {
     var displayName: string;
 }
 
-type StyleProp = {
-    [selector: string]: any;
-} & CSSProperties;
-
 interface WavelengthInputProps extends React__default.HTMLAttributes<HTMLElement> {
     id?: string;
     name?: string;

package/dist/esm/index.d.ts

@@ -4,8 +4,8 @@ export { ChildDataTable as ChildDataTableElement, SampleComponent as SampleCompo
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TextFieldVariants } from '@mui/material';
 import { z } from 'zod';
-import { Mark } from '@mui/material/Slider/useSlider.types';
 import { CSSProperties } from 'styled-components';
+import { Mark } from '@mui/material/Slider/useSlider.types';
 
 /**
  * Helper Functions
@@ -588,15 +588,17 @@ declare namespace WavelengthManyPlanes {
     var displayName: string;
 }
 
-interface WavelengthPlaneTrailProps {
-    trailDir?: "right" | "left";
+type StyleProp = {
+    [selector: string]: any;
+} & CSSProperties;
+
+interface WavelengthPlaneTrailProps extends React__default.HTMLAttributes<HTMLElement> {
+    trailDir?: "left" | "right";
     color?: string;
     id?: string;
+    customStyle?: StyleProp;
 }
-declare function WavelengthPlaneTrail({ trailDir, id, color }: WavelengthPlaneTrailProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthPlaneTrail {
-    var displayName: string;
-}
+declare const WavelengthPlaneTrail: React__default.FC<WavelengthPlaneTrailProps>;
 
 type ThemeProperties = {
     name?: string;
@@ -808,10 +810,6 @@ declare namespace WavelengthDefaultPagination {
     var displayName: string;
 }
 
-type StyleProp = {
-    [selector: string]: any;
-} & CSSProperties;
-
 interface WavelengthInputProps extends React__default.HTMLAttributes<HTMLElement> {
     id?: string;
     name?: string;

package/dist/esm/index.js

@@ -5857,45 +5857,49 @@ function WavelengthManyPlanes({ numberOfPlanes = 5, trailDir = "left", color: co
 WavelengthManyPlanes.displayName = "WavelengthManyPlanes";
 
 // src/components/separators/WavelengthPlaneTrail/WavelengthPlaneTrail.tsx
-import Divider from "@mui/material/Divider";
-import Grid4 from "@mui/material/Grid";
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
-function WavelengthPlaneTrail({ trailDir = "right", id, color: color2 }) {
-  let direction = "row-reverse";
-  let flippy = "";
-  if (trailDir !== "right") {
-    direction = "row";
-    flippy = "rotate(180)";
-  } else {
-    direction = "row-reverse";
-    flippy = "";
-  }
-  const palette2 = getPalette();
-  return /* @__PURE__ */ jsxs18(Grid4, { container: true, alignItems: "center", flexDirection: direction, children: [
-    /* @__PURE__ */ jsx29(Grid4, { item: true, id, children: /* @__PURE__ */ jsxs18("svg", { width: "40", height: "40", viewBox: "0 0 40 40", transform: flippy, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-      /* @__PURE__ */ jsx29("mask", { id: "mask0_56_851", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "40", height: "40", children: /* @__PURE__ */ jsx29("rect", { x: "40", width: "40", height: "40", transform: "rotate(90 40 0)", fill: "#D9D9D9" }) }),
-      /* @__PURE__ */ jsx29("g", { mask: "url(#mask0_56_851)", children: /* @__PURE__ */ jsx29(
-        "path",
-        {
-          d: "M4.16662 14.8988L5.76079 14.8988L8.16454 18.1359L18.2616 18.1359L14.1291 4.16669L16.2425 4.16669L24.5075 18.1359L33.985 18.1359C34.5022 18.1359 34.9422 18.3172 35.305 18.68C35.6677 19.0428 35.8491 19.4828 35.8491 20C35.8491 20.5172 35.6677 20.9572 35.305 21.32C34.9422 21.6828 34.5022 21.8642 33.985 21.8642L24.5075 21.8642L16.2425 35.8334L14.1291 35.8334L18.2616 21.8642L8.19662 21.8642L5.76079 25.1013L4.16662 25.1013L5.64329 20L4.16662 14.8988Z",
-          fill: color2 ? color2 : palette2.primary
-        }
-      ) })
-    ] }) }),
-    /* @__PURE__ */ jsx29(Grid4, { item: true, style: { width: "75%" }, id: "trailExample", children: /* @__PURE__ */ jsx29(Divider, { variant: "middle", sx: { bgcolor: color2 ? color2 : palette2.primary } }) })
-  ] });
-}
+import { useRef as useRef9, useEffect as useEffect8 } from "react";
+import "@wavelengthusaf/web-components";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var WavelengthPlaneTrail = ({
+  trailDir,
+  color: color2,
+  id,
+  children,
+  // Style argument
+  customStyle: customStyle2,
+  ...rest
+  // This rest operator includes className, style, onClick, etc.
+}) => {
+  const ref = useRef9(null);
+  useEffect8(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (customStyle2 !== void 0) {
+      el.customStyles = customStyle2;
+    }
+    if (trailDir !== void 0) {
+      el.setAttribute("trailDir", trailDir);
+    }
+    if (color2 !== void 0) {
+      el.setAttribute("color", color2);
+    }
+    if (id !== void 0) {
+      el.setAttribute("id", id);
+    }
+  }, [trailDir]);
+  return /* @__PURE__ */ jsx29("wavelength-planetrail", { ref, trailDir, color: color2, id, customStyle: customStyle2, ...rest, children });
+};
 WavelengthPlaneTrail.displayName = "WavelengthPlaneTrail";
 
 // src/components/modals/WavelengthConfirmationModal.tsx
 import { Modal, Box as Box2 } from "@mui/material";
-import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 function WavelengthConfirmationModal(props) {
   const { show, setShow, id, name } = props;
   const handleClose = () => {
     setShow(false);
   };
-  return /* @__PURE__ */ jsx30(Modal, { open: show, onClose: handleClose, children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx30(Modal, { open: show, onClose: handleClose, children: /* @__PURE__ */ jsxs18(
     Box2,
     {
       sx: {
@@ -5918,7 +5922,7 @@ function WavelengthConfirmationModal(props) {
       children: [
         /* @__PURE__ */ jsx30("p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: props.textObj?.title }),
         /* @__PURE__ */ jsx30("p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: props.textObj?.dialog }),
-        /* @__PURE__ */ jsxs19("div", { style: { display: "flex", flexDirection: "row", justifyContent: "flex-end", marginTop: "40px", gap: "8px" }, children: [
+        /* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "row", justifyContent: "flex-end", marginTop: "40px", gap: "8px" }, children: [
           props.cancelButton,
           props.submitButton
         ] })
@@ -5931,14 +5935,14 @@ WavelengthConfirmationModal.displayName = "WavelengthConfirmationModal";
 // src/components/modals/WavelengthContentModal.tsx
 import { Button as Button3, Dialog, DialogActions, DialogTitle, DialogContent, Typography as Typography3, IconButton as IconButton4, Box as Box3 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 function WavelengthContentModal(props) {
   const { show, setShow, handleContentModalOnConfirmProp } = props;
   const handleClose = () => {
     setShow(false);
   };
-  return /* @__PURE__ */ jsxs20(Dialog, { "data-testid": "testId-WavelengthContentModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", id: props.id, children: [
-    /* @__PURE__ */ jsx31(DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ jsxs20(Box3, { display: "flex", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs19(Dialog, { "data-testid": "testId-WavelengthContentModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", id: props.id, children: [
+    /* @__PURE__ */ jsx31(DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ jsxs19(Box3, { display: "flex", alignItems: "center", children: [
       /* @__PURE__ */ jsx31(Box3, { flexGrow: 1, children: props.textObj?.title }),
       /* @__PURE__ */ jsx31(Box3, { children: /* @__PURE__ */ jsx31(IconButton4, { onClick: handleClose, children: /* @__PURE__ */ jsx31(CloseIcon, {}) }) })
     ] }) }),
@@ -5949,7 +5953,7 @@ function WavelengthContentModal(props) {
 WavelengthContentModal.displayName = "WavelengthContentModal";
 
 // src/components/modals/WavelengthPopUpMenu.tsx
-import React10 from "react";
+import React11 from "react";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Box4 from "@mui/material/Box";
@@ -5957,8 +5961,8 @@ import Slide from "@mui/material/Slide";
 import { HelpOutline } from "@mui/icons-material";
 import styled6 from "styled-components";
 import IconButton5 from "@mui/material/IconButton";
-import Divider2 from "@mui/material/Divider";
-import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import Divider from "@mui/material/Divider";
+import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 var customStyle = { marginLeft: 16, marginRight: 16, marginTop: 8, marginBottom: 8 };
 var emailStyle = {
   marginLeft: 16,
@@ -5979,7 +5983,7 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
       color: ${({ hoverColor }) => hoverColor || "inherit"};
     }
   `;
-  const [anchorEl, setAnchorEl] = React10.useState(null);
+  const [anchorEl, setAnchorEl] = React11.useState(null);
   const open = Boolean(anchorEl);
   let icon;
   const handleClick = (event) => {
@@ -5995,9 +5999,9 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
   }
   const anchor = menuDirection === "top" || menuDirection === void 0 ? "top" : "bottom";
   const transform = menuDirection === "top" || menuDirection === void 0 ? "bottom" : "top";
-  return /* @__PURE__ */ jsxs21(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs20(Fragment11, { children: [
     /* @__PURE__ */ jsx32(IconButton5, { onClick: handleClick, children: icon }),
-    /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsxs20(
       Menu,
       {
         id,
@@ -6018,37 +6022,37 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
             if (items.end === true) {
               if (items.itemType === "header") {
                 if (items.link) {
-                  return /* @__PURE__ */ jsxs21(Box4, { children: [
+                  return /* @__PURE__ */ jsxs20(Box4, { children: [
                     /* @__PURE__ */ jsx32(MenuItem, { children: /* @__PURE__ */ jsx32("a", { style: { textDecoration: "none", color: "inherit" }, href: items.link, children: /* @__PURE__ */ jsx32("span", { style: { fontWeight: "bold" }, children: items.label }) }) }),
-                    /* @__PURE__ */ jsx32(Divider2, {})
+                    /* @__PURE__ */ jsx32(Divider, {})
                   ] }, index);
                 } else {
-                  return /* @__PURE__ */ jsxs21(Box4, { children: [
+                  return /* @__PURE__ */ jsxs20(Box4, { children: [
                     /* @__PURE__ */ jsx32("p", { style: { marginLeft: 16, marginRight: 16, marginTop: 6, marginBottom: 6 }, children: /* @__PURE__ */ jsx32("span", { style: { fontWeight: "bold" }, children: items.label }) }),
-                    /* @__PURE__ */ jsx32(Divider2, {})
+                    /* @__PURE__ */ jsx32(Divider, {})
                   ] }, index);
                 }
               } else if (items.itemType === "link") {
-                return /* @__PURE__ */ jsxs21(Box4, { children: [
+                return /* @__PURE__ */ jsxs20(Box4, { children: [
                   /* @__PURE__ */ jsx32(MenuItem, { children: /* @__PURE__ */ jsx32(Links, { href: items.link, hoverColor: items.hoverColor, children: items.label }, index) }),
-                  /* @__PURE__ */ jsx32(Divider2, {})
+                  /* @__PURE__ */ jsx32(Divider, {})
                 ] }, index);
               } else {
                 if (items.link) {
-                  return /* @__PURE__ */ jsxs21(Box4, { children: [
+                  return /* @__PURE__ */ jsxs20(Box4, { children: [
                     /* @__PURE__ */ jsx32(MenuItem, { children: /* @__PURE__ */ jsx32("a", { style: { textDecoration: "none", color: "inherit" }, href: items.link, children: items.label }) }),
-                    /* @__PURE__ */ jsx32(Divider2, {})
+                    /* @__PURE__ */ jsx32(Divider, {})
                   ] }, index);
                 } else {
                   if (items.email) {
-                    return /* @__PURE__ */ jsxs21(Box4, { children: [
+                    return /* @__PURE__ */ jsxs20(Box4, { children: [
                       /* @__PURE__ */ jsx32(Links, { href: items.email, style: emailStyle, children: items.label }),
-                      /* @__PURE__ */ jsx32(Divider2, {})
+                      /* @__PURE__ */ jsx32(Divider, {})
                     ] }, index);
                   } else {
-                    return /* @__PURE__ */ jsxs21(Box4, { children: [
+                    return /* @__PURE__ */ jsxs20(Box4, { children: [
                       /* @__PURE__ */ jsx32("p", { style: customStyle, children: items.label }),
-                      /* @__PURE__ */ jsx32(Divider2, {})
+                      /* @__PURE__ */ jsx32(Divider, {})
                     ] }, index);
                   }
                 }
@@ -6083,13 +6087,13 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
 WavelengthPopUpMenu.displayName = "WavelengthPopUpMenu";
 
 // src/components/modals/WavelengthDropdown.tsx
-import { forwardRef, useEffect as useEffect8, useImperativeHandle as useImperativeHandle2, useRef as useRef9 } from "react";
+import { forwardRef, useEffect as useEffect9, useImperativeHandle as useImperativeHandle2, useRef as useRef10 } 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);
+  const elementRef = useRef10(null);
   useImperativeHandle2(ref, () => elementRef.current);
-  useEffect8(() => {
+  useEffect9(() => {
     const el = elementRef.current;
     if (!el || !onChange) return;
     const handler = (e) => {
@@ -6099,7 +6103,7 @@ var WavelengthDropdown = forwardRef((props, ref) => {
     el.addEventListener("change", handler);
     return () => el.removeEventListener("change", handler);
   }, [onChange]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (value !== void 0 && elementRef.current) {
       elementRef.current.value = value;
     }
@@ -6131,7 +6135,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 jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
 function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor, textColor, horryAlign, vertyAlign, durationSb, width: width2, icon, id }) {
   const handleClose = () => {
     setShow(false);
@@ -6159,7 +6163,7 @@ function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor,
             display: "flex",
             width: width2
           },
-          message: /* @__PURE__ */ jsxs22("div", { children: [
+          message: /* @__PURE__ */ jsxs21("div", { children: [
             /* @__PURE__ */ jsx34("span", { children: icon }),
             /* @__PURE__ */ jsx34("span", { id: "snackbar", children: message ? message : "Insert Message Here" })
           ] }),
@@ -6174,7 +6178,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 jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign, durationSb, width: width2, message, customVertyAlign, toggleShow, closeIcon, id }) {
   const handleClose = () => {
     toggleShow(false);
@@ -6210,7 +6214,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
             //color: props.textColor ? props.textColor : palette.secondary,
           },
           sx: { paddingTop: "0px", paddingBottom: "0px" },
-          message: /* @__PURE__ */ jsxs23(
+          message: /* @__PURE__ */ jsxs22(
             "div",
             {
               style: {
@@ -6219,7 +6223,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
                 width: width2
               },
               children: [
-                /* @__PURE__ */ jsxs23("div", { style: { gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }, id: "snackbar", children: [
+                /* @__PURE__ */ jsxs22("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" })
                 ] }),
@@ -6237,11 +6241,11 @@ WavelengthStandardSnackbar.displayName = "WavelengthStandardSnackbar";
 // src/components/snackbars/WavelengthTestSnackbar.tsx
 import Box5 from "@mui/material/Box";
 import Button4 from "@mui/material/Button";
-import { useEffect as useEffect9, useRef as useRef10 } from "react";
-import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useEffect as useEffect10, useRef as useRef11 } from "react";
+import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 var useOutsideClick = (callback) => {
-  const ref = useRef10(null);
-  useEffect9(() => {
+  const ref = useRef11(null);
+  useEffect10(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
@@ -6268,7 +6272,7 @@ function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, custom
   } else if (type === "disabled") {
     bgColor = "#737373";
   }
-  return /* @__PURE__ */ jsx36(Fragment12, { children: isPopUpOpen && /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsx36(Fragment12, { children: isPopUpOpen && /* @__PURE__ */ jsxs23(
     Box5,
     {
       id,
@@ -6342,12 +6346,12 @@ import IconButton7 from "@mui/material/IconButton";
 import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import Typography4 from "@mui/material/Typography";
-import Grid5 from "@mui/material/Grid";
+import Grid4 from "@mui/material/Grid";
 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 jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs24 } 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;
@@ -6364,8 +6368,8 @@ 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__ */ jsxs25(
-    Grid5,
+  return /* @__PURE__ */ jsx38("div", { children: /* @__PURE__ */ jsx38("div", { children: /* @__PURE__ */ jsxs24(
+    Grid4,
     {
       container: true,
       spacing: 1,
@@ -6381,9 +6385,9 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
               maxWidth: adjustCardWidth,
               maxHeight: adjustCardHeight
             },
-            children: /* @__PURE__ */ jsxs25(CardActionArea, { onClick: handleClick, children: [
+            children: /* @__PURE__ */ jsxs24(CardActionArea, { onClick: handleClick, children: [
               /* @__PURE__ */ jsx38(CardMedia, { sx: { height: adjustImageHeight, width: adjustImageWidth }, image: items[currentIndex].image }),
-              /* @__PURE__ */ jsxs25(CardContent, { children: [
+              /* @__PURE__ */ jsxs24(CardContent, { children: [
                 /* @__PURE__ */ jsx38(Typography4, { variant: "h4", children: items[currentIndex].title }),
                 /* @__PURE__ */ jsx38(Typography4, { variant: "body1", children: items[currentIndex].description })
               ] })
@@ -6398,18 +6402,18 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
 DefaultCarousel.displayName = "DefaultCarousel";
 
 // src/components/carousels/WavelengthSliderCarousel.tsx
-import { useState as useState5, useEffect as useEffect11 } from "react";
-import Grid6 from "@mui/material/Grid";
+import { useState as useState5, useEffect as useEffect12 } from "react";
+import Grid5 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 jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var delay = 2500;
 var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
   const [index, setIndex] = useState5(0);
   const [isHovered, setIsHovered] = useState5(false);
-  useEffect11(() => {
+  useEffect12(() => {
     setTimeout(() => setIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1), delay);
     return () => {
     };
@@ -6448,7 +6452,7 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
     }
   };
   return /* @__PURE__ */ jsx39("div", { style: styles.carouselcontainer, children: /* @__PURE__ */ jsx39("div", { className: "my-animation", style: styles.carouselTrackStyle, children: /* @__PURE__ */ jsx39(
-    Grid6,
+    Grid5,
     {
       sx: {
         display: "flex",
@@ -6467,9 +6471,9 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
           },
           onMouseEnter: () => setIsHovered(true),
           onMouseLeave: () => setIsHovered(false),
-          children: /* @__PURE__ */ jsxs26(CardActionArea2, { href: card.path, children: [
+          children: /* @__PURE__ */ jsxs25(CardActionArea2, { href: card.path, children: [
             /* @__PURE__ */ jsx39(CardMedia2, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
-            /* @__PURE__ */ jsxs26(CardContent2, { children: [
+            /* @__PURE__ */ jsxs25(CardContent2, { children: [
               /* @__PURE__ */ jsx39("h3", { children: card.title }),
               /* @__PURE__ */ jsx39("p", { children: card.description })
             ] })
@@ -6490,7 +6494,7 @@ import Button5 from "@mui/material/Button";
 import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import styled7 from "styled-components";
-import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var MyDroplistItems = styled7("li")`
   background-color: white;
   color: #000000;
@@ -6534,14 +6538,14 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
     "&:disabled": { background: "rgb(226, 223, 223)" },
     "&.active": { background: "#8FD8FF" }
   };
-  return /* @__PURE__ */ jsxs27("div", { style: dropstyles.butPagCompDivStyle, id, children: [
+  return /* @__PURE__ */ jsxs26("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__ */ jsxs27("div", { children: [
+        /* @__PURE__ */ jsxs26("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,
@@ -6556,7 +6560,7 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
         ] })
       ) : item === "..." && index === 5 ? (
         //second half ellipse with second half dropdown
-        /* @__PURE__ */ jsxs27("div", { children: [
+        /* @__PURE__ */ jsxs26("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,
@@ -6583,7 +6587,7 @@ import Button6 from "@mui/material/Button";
 import ArrowBackIosNewIcon2 from "@mui/icons-material/ArrowBackIosNew";
 import ArrowForwardIosIcon2 from "@mui/icons-material/ArrowForwardIos";
 import styled8 from "styled-components";
-import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 function WavelengthVariationPagination({ totalPages, current, variant, handleChangePage, itemList, firstEllipseList, secondEllipseList, id }) {
   const [isOpen, setIsOpen] = useState7(false);
   const [isSecOpen, setIsSecOpen] = useState7(false);
@@ -6625,13 +6629,13 @@ function WavelengthVariationPagination({ totalPages, current, variant, handleCha
       setIsSecOpen(!isSecOpen);
     }
   };
-  return /* @__PURE__ */ jsxs28("div", { style: dropstyles.pagination, id, children: [
+  return /* @__PURE__ */ jsxs27("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__ */ jsxs28("div", { children: [
+        /* @__PURE__ */ jsxs27("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,
@@ -6647,7 +6651,7 @@ function WavelengthVariationPagination({ totalPages, current, variant, handleCha
         ] })
       ) : item === "..." && index === 5 ? (
         //second half ellipse with second half dropdown
-        /* @__PURE__ */ jsxs28("div", { children: [
+        /* @__PURE__ */ jsxs27("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,
@@ -6781,7 +6785,7 @@ WavelengthDefaultPagination.displayName = "WavelengthDefaultPagination";
 var WavelengthDefaultPagination_default = WavelengthDefaultPagination;
 
 // src/components/TextField/WavelengthInput.tsx
-import { useRef as useRef11, useEffect as useEffect12, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
+import { useRef as useRef12, useEffect as useEffect13, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx43 } from "react/jsx-runtime";
 var WavelengthInput = forwardRef2(
@@ -6820,12 +6824,12 @@ var WavelengthInput = forwardRef2(
     onBlurCallback,
     ...rest
   }, ref) => {
-    const internalRef = useRef11(null);
+    const internalRef = useRef12(null);
     useImperativeHandle3(ref, () => ({
       ...internalRef.current,
       validate: () => internalRef.current?.validate?.(true)
     }));
-    useEffect12(() => {
+    useEffect13(() => {
       const el = internalRef.current;
       if (!el) return;
       const set = (attr, val) => {
@@ -6896,7 +6900,7 @@ var WavelengthInput = forwardRef2(
       label,
       disabled
     ]);
-    useEffect12(() => {
+    useEffect13(() => {
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
@@ -6908,7 +6912,7 @@ var WavelengthInput = forwardRef2(
       el.addEventListener("blur", handler);
       return () => el.removeEventListener("blur", handler);
     }, [onBlurCallback]);
-    useEffect12(() => {
+    useEffect13(() => {
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
@@ -6938,9 +6942,9 @@ WavelengthInput.displayName = "WavelengthInput";
 import { WavelengthInput as WavelengthInput2 } from "@wavelengthusaf/web-components";
 
 // src/components/DataTable/WavelengthDataTable.tsx
-import { useEffect as useEffect13, useRef as useRef12, useState as useState9 } from "react";
+import { useEffect as useEffect14, useRef as useRef13, useState as useState9 } from "react";
 import styled9 from "styled-components";
-import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 var ModalInputDiv = styled9.div`
   display: flex;
   flex-direction: column; /* Corrected this line */
@@ -7119,8 +7123,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 = useRef12(null);
-  const modalRef = useRef12(null);
+  const menuRef = useRef13(null);
+  const modalRef = useRef13(null);
   function isNumeric(value) {
     return /^\d+$/.test(value);
   }
@@ -7128,7 +7132,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     setSelectedValue(event.target.value);
     setLocalData(copiedArray);
   };
-  useEffect13(() => {
+  useEffect14(() => {
     if (!selectedValue || searchItem === "") {
       setLocalData(copiedArray);
       setNoRowsOpen(false);
@@ -7158,7 +7162,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const closeModal = () => {
     setIsModalOpen(false);
   };
-  useEffect13(() => {
+  useEffect14(() => {
     const handleClickOutside = (event) => {
       if (isModalOpen && modalRef.current && !modalRef.current.contains(event.target)) {
         closeModal();
@@ -7215,9 +7219,9 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     setEditingId(null);
   };
   const headers = columns.map((column, index) => {
-    return /* @__PURE__ */ jsxs29(TableHeadStyle, { children: [
+    return /* @__PURE__ */ jsxs28(TableHeadStyle, { children: [
       column.title,
-      /* @__PURE__ */ jsxs29(KebabMenu, { ref: menuRef, children: [
+      /* @__PURE__ */ jsxs28(KebabMenu, { ref: menuRef, children: [
         /* @__PURE__ */ jsx44(
           KebabIcon,
           {
@@ -7228,25 +7232,25 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
             children: "\u22EE"
           }
         ),
-        isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs29(MenuOptions, { children: [
-          sortOrder === "asc" ? /* @__PURE__ */ jsxs29("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
+        isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs28(MenuOptions, { children: [
+          sortOrder === "asc" ? /* @__PURE__ */ jsxs28("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
             /* @__PURE__ */ jsx44("span", { children: "\u2B06" }),
             " Sort ASC"
-          ] }) : /* @__PURE__ */ jsxs29("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
+          ] }) : /* @__PURE__ */ jsxs28("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
             /* @__PURE__ */ jsx44("span", { children: "\u2B07" }),
             " Sort DESC"
           ] }),
-          /* @__PURE__ */ jsxs29("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
+          /* @__PURE__ */ jsxs28("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
             /* @__PURE__ */ jsx44("span", { children: "\u23F7" }),
             " Filter"
           ] }),
-          isModalOpen && /* @__PURE__ */ jsx44(ModalOverlay, { children: /* @__PURE__ */ jsxs29(ModalWrapper, { ref: modalRef, children: [
+          isModalOpen && /* @__PURE__ */ jsx44(ModalOverlay, { children: /* @__PURE__ */ jsxs28(ModalWrapper, { ref: modalRef, children: [
             /* @__PURE__ */ jsx44(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
-            /* @__PURE__ */ jsxs29(ModalInputDiv, { children: [
+            /* @__PURE__ */ jsxs28(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__ */ jsxs29(ModalInputDiv, { children: [
+            /* @__PURE__ */ jsxs28(ModalInputDiv, { children: [
               /* @__PURE__ */ jsx44("label", { htmlFor: "filterInputId", children: "Values: " }),
               /* @__PURE__ */ jsx44(
                 "input",
@@ -7289,8 +7293,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__ */ jsxs29("div", { id, children: [
-    /* @__PURE__ */ jsx44(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs29(StyledTableTwo, { title: "StyledTable", children: [
+  return /* @__PURE__ */ jsxs28("div", { id, children: [
+    /* @__PURE__ */ jsx44(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs28(StyledTableTwo, { title: "StyledTable", children: [
       /* @__PURE__ */ jsx44("thead", { children: /* @__PURE__ */ jsx44("tr", { children: headers }) }),
       /* @__PURE__ */ jsx44("tbody", { children: rows })
     ] }) }),
@@ -7302,7 +7306,7 @@ WavelengthDataTable.displayName = "WavelengthDataTable";
 // src/components/DataTable/SubRowTable/ChildSubTable.tsx
 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";
+import { Fragment as Fragment14, jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 var TableContainer = styled10.div`
   width: 1200px;
   border-radius: 16px;
@@ -7539,15 +7543,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(Fragment14, { children: /* @__PURE__ */ jsxs30(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+    return sortKey2 === column.key ? sortOrder2 === "asc" ? /* @__PURE__ */ jsx45(Fragment14, { children: /* @__PURE__ */ jsxs29(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(Fragment14, { children: /* @__PURE__ */ jsxs30(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+    ] }) }) : /* @__PURE__ */ jsx45(Fragment14, { children: /* @__PURE__ */ jsxs29(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(Fragment14, { children: /* @__PURE__ */ jsxs30(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+    ] }) }) : /* @__PURE__ */ jsx45(Fragment14, { children: /* @__PURE__ */ jsxs29(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" }) })
@@ -7555,15 +7559,15 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
   };
   const renderSortSubButton = (column, sortSubOrder2, sortSubKey2) => {
     const columnKey = trimBeforePeriod2(column.key);
-    return sortSubKey2 === columnKey ? sortSubOrder2 === "asc" ? /* @__PURE__ */ jsxs30(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+    return sortSubKey2 === columnKey ? sortSubOrder2 === "asc" ? /* @__PURE__ */ jsxs29(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__ */ jsxs30(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+    ] }) : /* @__PURE__ */ jsxs29(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__ */ jsxs30(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+    ] }) : /* @__PURE__ */ jsxs29(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" }) })
@@ -7576,7 +7580,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(Fragment13, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs30(SubDataTableBodyRowContainer, { children: [
+    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx45(Fragment13, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs29(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",
         {
@@ -7593,16 +7597,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__ */ jsxs30(BodyRowContainer, { children: [
+  const dataRows = processedRowData?.map((item, index) => /* @__PURE__ */ jsxs29(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__ */ jsxs30(ButtonStylingRow, { children: [
+    /* @__PURE__ */ jsxs29(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__ */ jsxs30("div", { children: [
-      /* @__PURE__ */ jsxs30(SubDataTable, { children: [
-        /* @__PURE__ */ jsx45(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs30(SubDataTableHeaderRow, { children: [
+    openRow === item.id && /* @__PURE__ */ jsxs29("div", { children: [
+      /* @__PURE__ */ jsxs29(SubDataTable, { children: [
+        /* @__PURE__ */ jsx45(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs29(SubDataTableHeaderRow, { children: [
           /* @__PURE__ */ jsx45("th", {}),
           SubDataHeaders
         ] }) }),
@@ -7611,7 +7615,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__ */ jsxs30(TableContainer, { children: [
+  return /* @__PURE__ */ jsxs29(TableContainer, { children: [
     /* @__PURE__ */ jsx45(TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
     /* @__PURE__ */ jsx45("div", { title: "tablebodies", children: dataRows })
   ] });
@@ -7619,14 +7623,14 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
 ChildDataTable.displayName = "ChildDataTable";
 
 // src/components/DataTable/SubRowTable/ChildDataTable.tsx
-import { useRef as useRef13, useEffect as useEffect14 } from "react";
+import { useRef as useRef14, useEffect as useEffect15 } 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 = useRef13(null);
-  const reactDropdownRoots = useRef13(/* @__PURE__ */ new Map());
-  useEffect14(() => {
+  const tableRef = useRef14(null);
+  const reactDropdownRoots = useRef14(/* @__PURE__ */ new Map());
+  useEffect15(() => {
     const customChildDataTableElement = tableRef.current;
     if (!customChildDataTableElement) return;
     if (columns !== void 0) customChildDataTableElement.setColumns = columns;
@@ -7635,7 +7639,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]);
-  useEffect14(() => {
+  useEffect15(() => {
     const el = tableRef.current;
     if (!el) return;
     const handleReactDropdown = (event) => {
@@ -7682,7 +7686,7 @@ import { ChildDataTable as ChildDataTable3 } from "@wavelengthusaf/web-component
 // src/components/DataTable/NestedDataTable/NestedDataTable.tsx
 import { useState as useState11 } from "react";
 import styled11 from "styled-components";
-import { Fragment as Fragment15, jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
 var TableStyle = styled11.table`
   width: 100%;
   height: 100%;
@@ -7782,12 +7786,12 @@ 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__ */ jsxs31(SubTableStyle, { children: [
+  const childRows = /* @__PURE__ */ jsxs30(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__ */ jsxs31(Fragment15, { children: [
-    /* @__PURE__ */ jsxs31(PrimaryTrRows, { $index: index, children: [
+  const rows = !data?.length ? /* @__PURE__ */ jsx47("tr", { children: /* @__PURE__ */ jsx47("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs30(Fragment15, { children: [
+    /* @__PURE__ */ jsxs30(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}`);
@@ -7795,8 +7799,8 @@ var NestedDataTable = ({ data, columns, id }) => {
     ] }, 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__ */ jsxs31(TableStyle, { children: [
-    /* @__PURE__ */ jsx47("thead", { children: /* @__PURE__ */ jsxs31("tr", { children: [
+  return /* @__PURE__ */ jsx47("div", { id, children: /* @__PURE__ */ jsxs30(TableStyle, { children: [
+    /* @__PURE__ */ jsx47("thead", { children: /* @__PURE__ */ jsxs30("tr", { children: [
       /* @__PURE__ */ jsx47("th", { title: "dropdownth" }),
       headers
     ] }) }),
@@ -7806,9 +7810,9 @@ var NestedDataTable = ({ data, columns, id }) => {
 NestedDataTable.displayName = "NestedDataTable";
 
 // src/components/AutoComplete/WavelengthAutoComplete.tsx
-import { useEffect as useEffect15, useRef as useRef15, useState as useState12 } from "react";
+import { useEffect as useEffect16, useRef as useRef16, useState as useState12 } from "react";
 import styled12 from "styled-components";
-import { Fragment as Fragment16, jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
 var AutoContainer = styled12.div`
   //position: relative;
   position: relative;
@@ -7937,9 +7941,9 @@ var WavelengthAutoComplete = ({
   placeholder,
   onBlurCallback
 }) => {
-  const inputRef = useRef15(null);
-  const listRef = useRef15(null);
-  const noItemListRef = useRef15(null);
+  const inputRef = useRef16(null);
+  const listRef = useRef16(null);
+  const noItemListRef = useRef16(null);
   const [inputValue, setInputValue] = useState12(placeholder ?? "");
   const [suggestions, setSuggestions] = useState12([]);
   const [isDropdownVisible, setIsDropdownVisible] = useState12(false);
@@ -7947,7 +7951,7 @@ var WavelengthAutoComplete = ({
   const arrayLength = suggestions.length;
   const [focusedIndex, setFocusedIndex] = useState12(0);
   const idName = id ? id : "auto-comp";
-  useEffect15(() => {
+  useEffect16(() => {
     const handleClickOutsideList = (event) => {
       if (listRef.current && !listRef.current.contains(event.target)) {
         setIsDropdownVisible(false);
@@ -7959,7 +7963,7 @@ var WavelengthAutoComplete = ({
     };
   }, [focusedIndex]);
   if (onDataChange !== void 0) {
-    useEffect15(() => {
+    useEffect16(() => {
       onDataChange(inputValue);
     }, [inputValue]);
   }
@@ -8025,8 +8029,8 @@ var WavelengthAutoComplete = ({
         break;
     }
   };
-  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: [
+  return /* @__PURE__ */ jsx48(Fragment16, { children: /* @__PURE__ */ jsxs31(AutoContainer, { $inputHeight: height2, $inputWidth: width2, children: [
+    /* @__PURE__ */ jsxs31(InputWrapper, { id: `${idName}-input-wrapper`, $inputHeight: height2, $inputWidth: width2, children: [
       /* @__PURE__ */ jsx48(
         Input,
         {
@@ -8079,9 +8083,9 @@ var WavelengthAutoComplete = ({
 WavelengthAutoComplete.displayName = "WavelengthAutoComplete";
 
 // src/components/inputs/WavelengthDatePicker.tsx
-import { useEffect as useEffect16, useState as useState13 } from "react";
+import { useEffect as useEffect17, useState as useState13 } from "react";
 import styled13 from "styled-components";
-import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
 var Label2 = styled13.label`
   position: absolute;
   top: 50%;
@@ -8153,7 +8157,7 @@ var WavelengthDatePicker = ({
   const [minAdjusted, setMinAdjusted] = useState13("");
   const [maxAdjusted, setMaxAdjusted] = useState13("");
   const idName = id ? id : "WlDatePick";
-  useEffect16(() => {
+  useEffect17(() => {
     const minDate = new Date(min || "");
     const maxDate = new Date(max || "");
     if (inputTimeType === "datetime-local") {
@@ -8192,7 +8196,7 @@ var WavelengthDatePicker = ({
     setValue(dateString);
     if (OnDataChange !== void 0) OnDataChange(new Date(dateString));
   };
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs32(
     InputWrapper2,
     {
       id: `${idName}-inputWrapper`,
@@ -8236,7 +8240,7 @@ WavelengthDatePicker.displayName = "WavelengthDatePicker";
 import { WavelengthDatePicker as WavelengthDatePicker2 } from "@wavelengthusaf/web-components";
 
 // src/components/inputs/WavelengthCheckbox.tsx
-import { useRef as useRef16, useEffect as useEffect17 } from "react";
+import { useRef as useRef17, useEffect as useEffect18 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var WavelengthCheckbox = ({
@@ -8248,8 +8252,8 @@ var WavelengthCheckbox = ({
   textSize,
   ...rest
 }) => {
-  const ref = useRef16(null);
-  useEffect17(() => {
+  const ref = useRef17(null);
+  useEffect18(() => {
     const el = ref.current;
     if (!el) return;
     if (size !== void 0) {
@@ -8278,7 +8282,7 @@ var WavelengthCheckbox = ({
 WavelengthCheckbox.displayName = "WavelengthCheckbox";
 
 // src/components/samples/SampleComponent.tsx
-import { useRef as useRef17, useEffect as useEffect18 } from "react";
+import { useRef as useRef18, useEffect as useEffect19 } from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
 var SampleComponent = ({
   testProp,
@@ -8288,8 +8292,8 @@ var SampleComponent = ({
   ...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;
     el.customStyles = customStyle2;
@@ -8302,7 +8306,7 @@ var SampleComponent = ({
 SampleComponent.displayName = "SampleComponent";
 
 // src/components/NotificationPanel/WavelengthNotificationPanel.tsx
-import { useRef as useRef18, useEffect as useEffect19 } from "react";
+import { useRef as useRef19, useEffect as useEffect20 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx52 } from "react/jsx-runtime";
 var WavelengthNotificationPanel = ({
@@ -8313,8 +8317,8 @@ var WavelengthNotificationPanel = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef18(null);
-  useEffect19(() => {
+  const ref = useRef19(null);
+  useEffect20(() => {
     const el = ref.current;
     if (!el) return;
     if (notifications !== void 0) {
@@ -8340,11 +8344,11 @@ var WavelengthNotificationPanel = ({
 import { SampleComponent as SampleComponent2 } from "@wavelengthusaf/web-components";
 
 // src/components/MultiSelect/WavelengthMultiSelectAutocomplete.tsx
-import { useEffect as useEffect20, useRef as useRef19 } from "react";
+import { useEffect as useEffect21, useRef as useRef20 } from "react";
 import { jsx as jsx53 } from "react/jsx-runtime";
 var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Options", label, name, style: style3, onChange, value, disabled, ...rest }) => {
-  const componentRef = useRef19(null);
-  useEffect20(() => {
+  const componentRef = useRef20(null);
+  useEffect21(() => {
     const component = componentRef.current;
     if (!component) return;
     const handleValueChange = (event) => {
@@ -8357,7 +8361,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
       component.removeEventListener("change", handleValueChange);
     };
   }, [onChange]);
-  useEffect20(() => {
+  useEffect21(() => {
     const component = componentRef.current;
     if (!component) return;
     if (placeholder) component.setAttribute("placeholder", placeholder);
@@ -8367,7 +8371,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
     if (options) component.autocompleteOptions = options;
     if (style3) component.customStyles = style3;
   }, [options, placeholder, name, label, style3]);
-  useEffect20(() => {
+  useEffect21(() => {
     const component = componentRef.current;
     if (component && value) {
       component.value = value;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "4.4.3",
+  "version": "4.5.0",
   "description": "Common component library used by Wavelength developers",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",
@@ -71,7 +71,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.15.7",
-    "@wavelengthusaf/web-components": "^1.6.2",
+    "@wavelengthusaf/web-components": "^1.7.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.26.2",
     "styled-components": "^6.1.12",