@wavelengthusaf/components 4.5.2 → 4.6.0

package/dist/cjs/index.cjs

@@ -5866,44 +5866,32 @@ WavelengthDefaultIcon.displayName = "WavelengthDefaultIcon";
 // src/components/CSFD/WavelengthManyPlanes.tsx
 
 
-function WavelengthManyPlanes({ numberOfPlanes = 5, trailDir = "left", color: color2, opacity = 1, gradient = false, id }) {
-  let direction = "row-reverse";
-  let flippy = "";
-  const palette2 = getPalette();
-  const colorish = color2 ? color2 : palette2.primary;
-  if (trailDir !== "right") {
-    direction = "row";
-    flippy = "rotate(180)";
-  }
-  const PlaneGrid = ({ opacity: opacity2 }) => {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Grid2.default, { item: true, 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",
-          fillOpacity: opacity2,
-          fill: colorish
-        }
-      ) })
-    ] }) });
-  };
-  const PlaneGridWrapper = (size, baseOpacity) => {
-    const planes = [];
-    if (gradient) {
-      for (let i = 0; i < size; i++) {
-        const currentOpacity = baseOpacity - i / (size - 1) * (baseOpacity - 0.05);
-        planes.push(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, PlaneGrid, { opacity: currentOpacity }, i));
-      }
-    } else {
-      for (let i = 0; i < size; i++) {
-        planes.push(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, PlaneGrid, { opacity: baseOpacity }, i));
-      }
+var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color: color2, gradient, spaced, ...rest }) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    if (numberOfPlanes !== void 0) {
+      el.setAttribute("number-of-planes", numberOfPlanes);
     }
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Grid2.default, { container: true, alignItems: "center", flexDirection: direction, spacing: 3, id, children: planes });
-  };
-  return PlaneGridWrapper(numberOfPlanes, opacity);
-}
+    if (trailDir !== void 0) {
+      el.setAttribute("trail-dir", trailDir);
+    }
+    if (opacity !== void 0) {
+      el.setAttribute("opacity", opacity);
+    }
+    if (color2 !== void 0) {
+      el.setAttribute("color", color2);
+    }
+    if (gradient !== void 0) {
+      el.setAttribute("gradient", gradient);
+    }
+    if (spaced !== void 0) {
+      el.setAttribute("spaced", spaced);
+    }
+  }, [numberOfPlanes, trailDir, opacity, color2, gradient, spaced]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-manyplanes", { ref, trailDir, opacity, color: color2, gradient, spaced, ...rest, children });
+};
 WavelengthManyPlanes.displayName = "WavelengthManyPlanes";
 
 // src/components/separators/WavelengthPlaneTrail/WavelengthPlaneTrail.tsx
@@ -6140,7 +6128,29 @@ WavelengthPopUpMenu.displayName = "WavelengthPopUpMenu";
 
 
 var WavelengthDropdown = _react.forwardRef.call(void 0, (props, ref) => {
-  const { options, defaultValue, value, fontSize, fontFamily, borderRadius: borderRadius2, width: width2, height: height2, textColor, arrowSize, popupRadius, popupAlign, popupSelectedColor, onChange, ...rest } = props;
+  const {
+    options,
+    defaultValue,
+    value,
+    fontSize,
+    fontFamily,
+    borderColor: borderColor2,
+    borderRadius: borderRadius2,
+    width: width2,
+    height: height2,
+    textColor,
+    arrowSize,
+    arrowColor,
+    popupRadius,
+    popupAlign,
+    popupSelectedColor,
+    popupBackgroundColor,
+    popupTextColor,
+    popupTextAlign,
+    popupHoverBackground,
+    onChange,
+    ...rest
+  } = props;
   const elementRef = _react.useRef.call(void 0, null);
   _react.useImperativeHandle.call(void 0, ref, () => elementRef.current);
   _react.useEffect.call(void 0, () => {
@@ -6166,14 +6176,20 @@ var WavelengthDropdown = _react.forwardRef.call(void 0, (props, ref) => {
       defaultValue,
       "font-size": fontSize,
       "font-family": fontFamily,
+      "border-color": borderColor2,
       "border-radius": borderRadius2,
       width: width2,
       height: height2,
       color: textColor,
       "arrow-size": arrowSize,
+      "arrow-color": arrowColor,
       "popup-radius": popupRadius,
       "popup-align": popupAlign,
       "popup-selected-color": popupSelectedColor,
+      "popup-background-color": popupBackgroundColor,
+      "popup-text-color": popupTextColor,
+      "popup-text-align": popupTextAlign,
+      "popup-hover-background": popupHoverBackground,
       ...rest
     }
   );

package/dist/cjs/index.d.cts

@@ -591,18 +591,15 @@ declare namespace WavelengthDefaultIcon {
     var displayName: string;
 }
 
-interface HeaderProps {
-    numberOfPlanes?: number;
-    trailDir?: "right" | "left";
+interface WavelengthManyPlanesProps extends React__default.HTMLAttributes<HTMLElement> {
+    numberOfPlanes?: string;
+    trailDir?: string;
+    opacity?: string;
     color?: string;
-    opacity?: number;
-    gradient?: boolean;
-    id?: string;
-}
-declare function WavelengthManyPlanes({ numberOfPlanes, trailDir, color, opacity, gradient, id }: HeaderProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthManyPlanes {
-    var displayName: string;
+    gradient?: string;
+    spaced?: string;
 }
+declare const WavelengthManyPlanes: React__default.FC<WavelengthManyPlanesProps>;
 
 type StyleProp = {
     [selector: string]: any;
@@ -686,13 +683,19 @@ interface WavelengthDropdownProps extends React.HTMLAttributes<HTMLElement> {
     textColor?: string;
     fontSize?: string;
     fontFamily?: string;
+    borderColor?: string;
     borderRadius?: string;
     width?: string;
     height?: string;
     arrowSize?: string;
+    arrowColor?: string;
     popupRadius?: string;
     popupAlign?: "left" | "center" | "right";
     popupSelectedColor?: string;
+    popupBackgroundColor?: string;
+    popupTextColor?: string;
+    popupTextAlign?: string;
+    popupHoverBackground?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 declare const WavelengthDropdown: React$1.ForwardRefExoticComponent<WavelengthDropdownProps & React$1.RefAttributes<HTMLElement>>;

package/dist/esm/index.d.ts

@@ -591,18 +591,15 @@ declare namespace WavelengthDefaultIcon {
     var displayName: string;
 }
 
-interface HeaderProps {
-    numberOfPlanes?: number;
-    trailDir?: "right" | "left";
+interface WavelengthManyPlanesProps extends React__default.HTMLAttributes<HTMLElement> {
+    numberOfPlanes?: string;
+    trailDir?: string;
+    opacity?: string;
     color?: string;
-    opacity?: number;
-    gradient?: boolean;
-    id?: string;
-}
-declare function WavelengthManyPlanes({ numberOfPlanes, trailDir, color, opacity, gradient, id }: HeaderProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthManyPlanes {
-    var displayName: string;
+    gradient?: string;
+    spaced?: string;
 }
+declare const WavelengthManyPlanes: React__default.FC<WavelengthManyPlanesProps>;
 
 type StyleProp = {
     [selector: string]: any;
@@ -686,13 +683,19 @@ interface WavelengthDropdownProps extends React.HTMLAttributes<HTMLElement> {
     textColor?: string;
     fontSize?: string;
     fontFamily?: string;
+    borderColor?: string;
     borderRadius?: string;
     width?: string;
     height?: string;
     arrowSize?: string;
+    arrowColor?: string;
     popupRadius?: string;
     popupAlign?: "left" | "center" | "right";
     popupSelectedColor?: string;
+    popupBackgroundColor?: string;
+    popupTextColor?: string;
+    popupTextAlign?: string;
+    popupHoverBackground?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 declare const WavelengthDropdown: React$1.ForwardRefExoticComponent<WavelengthDropdownProps & React$1.RefAttributes<HTMLElement>>;

package/dist/esm/index.js

@@ -5864,50 +5864,38 @@ function WavelengthDefaultIcon({ width: width2 = "180", height: height2 = 140, i
 WavelengthDefaultIcon.displayName = "WavelengthDefaultIcon";
 
 // src/components/CSFD/WavelengthManyPlanes.tsx
-import Grid3 from "@mui/material/Grid";
-import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
-function WavelengthManyPlanes({ numberOfPlanes = 5, trailDir = "left", color: color2, opacity = 1, gradient = false, id }) {
-  let direction = "row-reverse";
-  let flippy = "";
-  const palette2 = getPalette();
-  const colorish = color2 ? color2 : palette2.primary;
-  if (trailDir !== "right") {
-    direction = "row";
-    flippy = "rotate(180)";
-  }
-  const PlaneGrid = ({ opacity: opacity2 }) => {
-    return /* @__PURE__ */ jsx29(Grid3, { item: true, children: /* @__PURE__ */ jsxs17("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",
-          fillOpacity: opacity2,
-          fill: colorish
-        }
-      ) })
-    ] }) });
-  };
-  const PlaneGridWrapper = (size, baseOpacity) => {
-    const planes = [];
-    if (gradient) {
-      for (let i = 0; i < size; i++) {
-        const currentOpacity = baseOpacity - i / (size - 1) * (baseOpacity - 0.05);
-        planes.push(/* @__PURE__ */ jsx29(PlaneGrid, { opacity: currentOpacity }, i));
-      }
-    } else {
-      for (let i = 0; i < size; i++) {
-        planes.push(/* @__PURE__ */ jsx29(PlaneGrid, { opacity: baseOpacity }, i));
-      }
+import { useRef as useRef10, useEffect as useEffect9 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color: color2, gradient, spaced, ...rest }) => {
+  const ref = useRef10(null);
+  useEffect9(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (numberOfPlanes !== void 0) {
+      el.setAttribute("number-of-planes", numberOfPlanes);
     }
-    return /* @__PURE__ */ jsx29(Grid3, { container: true, alignItems: "center", flexDirection: direction, spacing: 3, id, children: planes });
-  };
-  return PlaneGridWrapper(numberOfPlanes, opacity);
-}
+    if (trailDir !== void 0) {
+      el.setAttribute("trail-dir", trailDir);
+    }
+    if (opacity !== void 0) {
+      el.setAttribute("opacity", opacity);
+    }
+    if (color2 !== void 0) {
+      el.setAttribute("color", color2);
+    }
+    if (gradient !== void 0) {
+      el.setAttribute("gradient", gradient);
+    }
+    if (spaced !== void 0) {
+      el.setAttribute("spaced", spaced);
+    }
+  }, [numberOfPlanes, trailDir, opacity, color2, gradient, spaced]);
+  return /* @__PURE__ */ jsx29("wavelength-manyplanes", { ref, trailDir, opacity, color: color2, gradient, spaced, ...rest, children });
+};
 WavelengthManyPlanes.displayName = "WavelengthManyPlanes";
 
 // src/components/separators/WavelengthPlaneTrail/WavelengthPlaneTrail.tsx
-import { useRef as useRef10, useEffect as useEffect9 } from "react";
+import { useRef as useRef11, useEffect as useEffect10 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var WavelengthPlaneTrail = ({
@@ -5920,8 +5908,8 @@ var WavelengthPlaneTrail = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef10(null);
-  useEffect9(() => {
+  const ref = useRef11(null);
+  useEffect10(() => {
     const el = ref.current;
     if (!el) return;
     if (customStyle2 !== void 0) {
@@ -5943,13 +5931,13 @@ WavelengthPlaneTrail.displayName = "WavelengthPlaneTrail";
 
 // src/components/modals/WavelengthConfirmationModal.tsx
 import { Modal, Box as Box2 } from "@mui/material";
-import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 function WavelengthConfirmationModal(props) {
   const { show, setShow, id, name } = props;
   const handleClose = () => {
     setShow(false);
   };
-  return /* @__PURE__ */ jsx31(Modal, { open: show, onClose: handleClose, children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx31(Modal, { open: show, onClose: handleClose, children: /* @__PURE__ */ jsxs17(
     Box2,
     {
       sx: {
@@ -5972,7 +5960,7 @@ function WavelengthConfirmationModal(props) {
       children: [
         /* @__PURE__ */ jsx31("p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: props.textObj?.title }),
         /* @__PURE__ */ jsx31("p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: props.textObj?.dialog }),
-        /* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "row", justifyContent: "flex-end", marginTop: "40px", gap: "8px" }, children: [
+        /* @__PURE__ */ jsxs17("div", { style: { display: "flex", flexDirection: "row", justifyContent: "flex-end", marginTop: "40px", gap: "8px" }, children: [
           props.cancelButton,
           props.submitButton
         ] })
@@ -5985,14 +5973,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 jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 function WavelengthContentModal(props) {
   const { show, setShow, handleContentModalOnConfirmProp } = props;
   const handleClose = () => {
     setShow(false);
   };
-  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__ */ jsx32(DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ jsxs19(Box3, { display: "flex", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs18(Dialog, { "data-testid": "testId-WavelengthContentModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", id: props.id, children: [
+    /* @__PURE__ */ jsx32(DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ jsxs18(Box3, { display: "flex", alignItems: "center", children: [
       /* @__PURE__ */ jsx32(Box3, { flexGrow: 1, children: props.textObj?.title }),
       /* @__PURE__ */ jsx32(Box3, { children: /* @__PURE__ */ jsx32(IconButton4, { onClick: handleClose, children: /* @__PURE__ */ jsx32(CloseIcon, {}) }) })
     ] }) }),
@@ -6003,7 +5991,7 @@ function WavelengthContentModal(props) {
 WavelengthContentModal.displayName = "WavelengthContentModal";
 
 // src/components/modals/WavelengthPopUpMenu.tsx
-import React12 from "react";
+import React13 from "react";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Box4 from "@mui/material/Box";
@@ -6012,7 +6000,7 @@ import { HelpOutline } from "@mui/icons-material";
 import styled6 from "styled-components";
 import IconButton5 from "@mui/material/IconButton";
 import Divider from "@mui/material/Divider";
-import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 var customStyle = { marginLeft: 16, marginRight: 16, marginTop: 8, marginBottom: 8 };
 var emailStyle = {
   marginLeft: 16,
@@ -6033,7 +6021,7 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
       color: ${({ hoverColor }) => hoverColor || "inherit"};
     }
   `;
-  const [anchorEl, setAnchorEl] = React12.useState(null);
+  const [anchorEl, setAnchorEl] = React13.useState(null);
   const open = Boolean(anchorEl);
   let icon;
   const handleClick = (event) => {
@@ -6049,9 +6037,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__ */ jsxs20(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs19(Fragment11, { children: [
     /* @__PURE__ */ jsx33(IconButton5, { onClick: handleClick, children: icon }),
-    /* @__PURE__ */ jsxs20(
+    /* @__PURE__ */ jsxs19(
       Menu,
       {
         id,
@@ -6072,35 +6060,35 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
             if (items.end === true) {
               if (items.itemType === "header") {
                 if (items.link) {
-                  return /* @__PURE__ */ jsxs20(Box4, { children: [
+                  return /* @__PURE__ */ jsxs19(Box4, { children: [
                     /* @__PURE__ */ jsx33(MenuItem, { children: /* @__PURE__ */ jsx33("a", { style: { textDecoration: "none", color: "inherit" }, href: items.link, children: /* @__PURE__ */ jsx33("span", { style: { fontWeight: "bold" }, children: items.label }) }) }),
                     /* @__PURE__ */ jsx33(Divider, {})
                   ] }, index);
                 } else {
-                  return /* @__PURE__ */ jsxs20(Box4, { children: [
+                  return /* @__PURE__ */ jsxs19(Box4, { children: [
                     /* @__PURE__ */ jsx33("p", { style: { marginLeft: 16, marginRight: 16, marginTop: 6, marginBottom: 6 }, children: /* @__PURE__ */ jsx33("span", { style: { fontWeight: "bold" }, children: items.label }) }),
                     /* @__PURE__ */ jsx33(Divider, {})
                   ] }, index);
                 }
               } else if (items.itemType === "link") {
-                return /* @__PURE__ */ jsxs20(Box4, { children: [
+                return /* @__PURE__ */ jsxs19(Box4, { children: [
                   /* @__PURE__ */ jsx33(MenuItem, { children: /* @__PURE__ */ jsx33(Links, { href: items.link, hoverColor: items.hoverColor, children: items.label }, index) }),
                   /* @__PURE__ */ jsx33(Divider, {})
                 ] }, index);
               } else {
                 if (items.link) {
-                  return /* @__PURE__ */ jsxs20(Box4, { children: [
+                  return /* @__PURE__ */ jsxs19(Box4, { children: [
                     /* @__PURE__ */ jsx33(MenuItem, { children: /* @__PURE__ */ jsx33("a", { style: { textDecoration: "none", color: "inherit" }, href: items.link, children: items.label }) }),
                     /* @__PURE__ */ jsx33(Divider, {})
                   ] }, index);
                 } else {
                   if (items.email) {
-                    return /* @__PURE__ */ jsxs20(Box4, { children: [
+                    return /* @__PURE__ */ jsxs19(Box4, { children: [
                       /* @__PURE__ */ jsx33(Links, { href: items.email, style: emailStyle, children: items.label }),
                       /* @__PURE__ */ jsx33(Divider, {})
                     ] }, index);
                   } else {
-                    return /* @__PURE__ */ jsxs20(Box4, { children: [
+                    return /* @__PURE__ */ jsxs19(Box4, { children: [
                       /* @__PURE__ */ jsx33("p", { style: customStyle, children: items.label }),
                       /* @__PURE__ */ jsx33(Divider, {})
                     ] }, index);
@@ -6137,13 +6125,35 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
 WavelengthPopUpMenu.displayName = "WavelengthPopUpMenu";
 
 // src/components/modals/WavelengthDropdown.tsx
-import { forwardRef, useEffect as useEffect10, useImperativeHandle as useImperativeHandle2, useRef as useRef11 } from "react";
+import { forwardRef, useEffect as useEffect11, useImperativeHandle as useImperativeHandle2, useRef as useRef12 } from "react";
 import { jsx as jsx34 } 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 = useRef11(null);
+  const {
+    options,
+    defaultValue,
+    value,
+    fontSize,
+    fontFamily,
+    borderColor: borderColor2,
+    borderRadius: borderRadius2,
+    width: width2,
+    height: height2,
+    textColor,
+    arrowSize,
+    arrowColor,
+    popupRadius,
+    popupAlign,
+    popupSelectedColor,
+    popupBackgroundColor,
+    popupTextColor,
+    popupTextAlign,
+    popupHoverBackground,
+    onChange,
+    ...rest
+  } = props;
+  const elementRef = useRef12(null);
   useImperativeHandle2(ref, () => elementRef.current);
-  useEffect10(() => {
+  useEffect11(() => {
     const el = elementRef.current;
     if (!el || !onChange) return;
     const handler = (e) => {
@@ -6153,7 +6163,7 @@ var WavelengthDropdown = forwardRef((props, ref) => {
     el.addEventListener("change", handler);
     return () => el.removeEventListener("change", handler);
   }, [onChange]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (value !== void 0 && elementRef.current) {
       elementRef.current.value = value;
     }
@@ -6166,14 +6176,20 @@ var WavelengthDropdown = forwardRef((props, ref) => {
       defaultValue,
       "font-size": fontSize,
       "font-family": fontFamily,
+      "border-color": borderColor2,
       "border-radius": borderRadius2,
       width: width2,
       height: height2,
       color: textColor,
       "arrow-size": arrowSize,
+      "arrow-color": arrowColor,
       "popup-radius": popupRadius,
       "popup-align": popupAlign,
       "popup-selected-color": popupSelectedColor,
+      "popup-background-color": popupBackgroundColor,
+      "popup-text-color": popupTextColor,
+      "popup-text-align": popupTextAlign,
+      "popup-hover-background": popupHoverBackground,
       ...rest
     }
   );
@@ -6185,7 +6201,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 jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor, textColor, horryAlign, vertyAlign, durationSb, width: width2, icon, id }) {
   const handleClose = () => {
     setShow(false);
@@ -6213,7 +6229,7 @@ function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor,
             display: "flex",
             width: width2
           },
-          message: /* @__PURE__ */ jsxs21("div", { children: [
+          message: /* @__PURE__ */ jsxs20("div", { children: [
             /* @__PURE__ */ jsx35("span", { children: icon }),
             /* @__PURE__ */ jsx35("span", { id: "snackbar", children: message ? message : "Insert Message Here" })
           ] }),
@@ -6228,7 +6244,7 @@ WavelengthSnackbar.displayName = "WavelengthSnackbar";
 // src/components/snackbars/WavelengthStandardSnackbar.tsx
 import Snackbar2 from "@mui/material/Snackbar";
 import SnackbarContent2 from "@mui/material/SnackbarContent";
-import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign, durationSb, width: width2, message, customVertyAlign, toggleShow, closeIcon, id }) {
   const handleClose = () => {
     toggleShow(false);
@@ -6264,7 +6280,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
             //color: props.textColor ? props.textColor : palette.secondary,
           },
           sx: { paddingTop: "0px", paddingBottom: "0px" },
-          message: /* @__PURE__ */ jsxs22(
+          message: /* @__PURE__ */ jsxs21(
             "div",
             {
               style: {
@@ -6273,7 +6289,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
                 width: width2
               },
               children: [
-                /* @__PURE__ */ jsxs22("div", { style: { gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }, id: "snackbar", children: [
+                /* @__PURE__ */ jsxs21("div", { style: { gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }, id: "snackbar", children: [
                   /* @__PURE__ */ jsx36("div", { style: { marginTop: "5px" }, children: sIcon }),
                   /* @__PURE__ */ jsx36("div", { style: { fontSize: "1rem", marginLeft: "10px" }, children: message ? message : "Insert Message Here" })
                 ] }),
@@ -6291,11 +6307,11 @@ WavelengthStandardSnackbar.displayName = "WavelengthStandardSnackbar";
 // src/components/snackbars/WavelengthTestSnackbar.tsx
 import Box5 from "@mui/material/Box";
 import Button4 from "@mui/material/Button";
-import { useEffect as useEffect11, useRef as useRef12 } from "react";
-import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useEffect as useEffect12, useRef as useRef13 } from "react";
+import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 var useOutsideClick = (callback) => {
-  const ref = useRef12(null);
-  useEffect11(() => {
+  const ref = useRef13(null);
+  useEffect12(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
@@ -6322,7 +6338,7 @@ function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, custom
   } else if (type === "disabled") {
     bgColor = "#737373";
   }
-  return /* @__PURE__ */ jsx37(Fragment12, { children: isPopUpOpen && /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx37(Fragment12, { children: isPopUpOpen && /* @__PURE__ */ jsxs22(
     Box5,
     {
       id,
@@ -6396,12 +6412,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 Grid4 from "@mui/material/Grid";
+import Grid3 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 jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs23 } 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;
@@ -6418,8 +6434,8 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
   const handleClick = () => {
     window.open(items[currentIndex].path, "_blank");
   };
-  return /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsxs24(
-    Grid4,
+  return /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsxs23(
+    Grid3,
     {
       container: true,
       spacing: 1,
@@ -6435,9 +6451,9 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
               maxWidth: adjustCardWidth,
               maxHeight: adjustCardHeight
             },
-            children: /* @__PURE__ */ jsxs24(CardActionArea, { onClick: handleClick, children: [
+            children: /* @__PURE__ */ jsxs23(CardActionArea, { onClick: handleClick, children: [
               /* @__PURE__ */ jsx39(CardMedia, { sx: { height: adjustImageHeight, width: adjustImageWidth }, image: items[currentIndex].image }),
-              /* @__PURE__ */ jsxs24(CardContent, { children: [
+              /* @__PURE__ */ jsxs23(CardContent, { children: [
                 /* @__PURE__ */ jsx39(Typography4, { variant: "h4", children: items[currentIndex].title }),
                 /* @__PURE__ */ jsx39(Typography4, { variant: "body1", children: items[currentIndex].description })
               ] })
@@ -6452,18 +6468,18 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
 DefaultCarousel.displayName = "DefaultCarousel";
 
 // src/components/carousels/WavelengthSliderCarousel.tsx
-import { useState as useState5, useEffect as useEffect13 } from "react";
-import Grid5 from "@mui/material/Grid";
+import { useState as useState5, useEffect as useEffect14 } from "react";
+import Grid4 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 jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
 var delay = 2500;
 var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
   const [index, setIndex] = useState5(0);
   const [isHovered, setIsHovered] = useState5(false);
-  useEffect13(() => {
+  useEffect14(() => {
     setTimeout(() => setIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1), delay);
     return () => {
     };
@@ -6502,7 +6518,7 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
     }
   };
   return /* @__PURE__ */ jsx40("div", { style: styles.carouselcontainer, children: /* @__PURE__ */ jsx40("div", { className: "my-animation", style: styles.carouselTrackStyle, children: /* @__PURE__ */ jsx40(
-    Grid5,
+    Grid4,
     {
       sx: {
         display: "flex",
@@ -6521,9 +6537,9 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
           },
           onMouseEnter: () => setIsHovered(true),
           onMouseLeave: () => setIsHovered(false),
-          children: /* @__PURE__ */ jsxs25(CardActionArea2, { href: card.path, children: [
+          children: /* @__PURE__ */ jsxs24(CardActionArea2, { href: card.path, children: [
             /* @__PURE__ */ jsx40(CardMedia2, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
-            /* @__PURE__ */ jsxs25(CardContent2, { children: [
+            /* @__PURE__ */ jsxs24(CardContent2, { children: [
               /* @__PURE__ */ jsx40("h3", { children: card.title }),
               /* @__PURE__ */ jsx40("p", { children: card.description })
             ] })
@@ -6544,7 +6560,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 jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
 var MyDroplistItems = styled7("li")`
   background-color: white;
   color: #000000;
@@ -6588,14 +6604,14 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
     "&:disabled": { background: "rgb(226, 223, 223)" },
     "&.active": { background: "#8FD8FF" }
   };
-  return /* @__PURE__ */ jsxs26("div", { style: dropstyles.butPagCompDivStyle, id, children: [
+  return /* @__PURE__ */ jsxs25("div", { style: dropstyles.butPagCompDivStyle, id, children: [
     /* @__PURE__ */ jsx41(Button5, { onClick: () => handleChangePage(current - 1), disabled: current === 1, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx41(ArrowBackIosNewIcon, {}) }),
     /* @__PURE__ */ jsx41("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__ */ jsxs26("div", { children: [
+        /* @__PURE__ */ jsxs25("div", { children: [
           /* @__PURE__ */ jsx41(Button5, { onClick: () => toggleDropdown(1), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
           isOpen && /* @__PURE__ */ jsx41("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx41("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx41(
             MyDroplistItems,
@@ -6610,7 +6626,7 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
         ] })
       ) : item === "..." && index === 5 ? (
         //second half ellipse with second half dropdown
-        /* @__PURE__ */ jsxs26("div", { children: [
+        /* @__PURE__ */ jsxs25("div", { children: [
           /* @__PURE__ */ jsx41(Button5, { onClick: () => toggleDropdown(5), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
           isSecOpen && /* @__PURE__ */ jsx41("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx41("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx41(
             MyDroplistItems,
@@ -6637,7 +6653,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 jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
 function WavelengthVariationPagination({ totalPages, current, variant, handleChangePage, itemList, firstEllipseList, secondEllipseList, id }) {
   const [isOpen, setIsOpen] = useState7(false);
   const [isSecOpen, setIsSecOpen] = useState7(false);
@@ -6679,13 +6695,13 @@ function WavelengthVariationPagination({ totalPages, current, variant, handleCha
       setIsSecOpen(!isSecOpen);
     }
   };
-  return /* @__PURE__ */ jsxs27("div", { style: dropstyles.pagination, id, children: [
+  return /* @__PURE__ */ jsxs26("div", { style: dropstyles.pagination, id, children: [
     /* @__PURE__ */ jsx42(Button6, { onClick: () => handleChangePage(current - 1), variant, disabled: current === 1, children: /* @__PURE__ */ jsx42(ArrowBackIosNewIcon2, {}) }),
     /* @__PURE__ */ jsx42("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__ */ jsxs27("div", { children: [
+        /* @__PURE__ */ jsxs26("div", { children: [
           /* @__PURE__ */ jsx42(Button6, { onClick: () => toggleDropdown(1), variant, className: current === index ? "active" : "", children: item }, index),
           isOpen && /* @__PURE__ */ jsx42("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx42("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx42(
             MyDroplistItems2,
@@ -6701,7 +6717,7 @@ function WavelengthVariationPagination({ totalPages, current, variant, handleCha
         ] })
       ) : item === "..." && index === 5 ? (
         //second half ellipse with second half dropdown
-        /* @__PURE__ */ jsxs27("div", { children: [
+        /* @__PURE__ */ jsxs26("div", { children: [
           /* @__PURE__ */ jsx42(Button6, { onClick: () => toggleDropdown(5), variant, className: current === index ? "active" : "", children: item }, index),
           isSecOpen && /* @__PURE__ */ jsx42("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx42("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx42(
             MyDroplistItems2,
@@ -6835,7 +6851,7 @@ WavelengthDefaultPagination.displayName = "WavelengthDefaultPagination";
 var WavelengthDefaultPagination_default = WavelengthDefaultPagination;
 
 // src/components/TextField/WavelengthInput.tsx
-import { useRef as useRef13, useEffect as useEffect14, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
+import { useRef as useRef14, useEffect as useEffect15, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx44 } from "react/jsx-runtime";
 var WavelengthInput = forwardRef2(
@@ -6874,12 +6890,12 @@ var WavelengthInput = forwardRef2(
     onBlurCallback,
     ...rest
   }, ref) => {
-    const internalRef = useRef13(null);
+    const internalRef = useRef14(null);
     useImperativeHandle3(ref, () => ({
       ...internalRef.current,
       validate: () => internalRef.current?.validate?.(true)
     }));
-    useEffect14(() => {
+    useEffect15(() => {
       const el = internalRef.current;
       if (!el) return;
       const set = (attr, val) => {
@@ -6950,7 +6966,7 @@ var WavelengthInput = forwardRef2(
       label,
       disabled
     ]);
-    useEffect14(() => {
+    useEffect15(() => {
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
@@ -6962,7 +6978,7 @@ var WavelengthInput = forwardRef2(
       el.addEventListener("blur", handler);
       return () => el.removeEventListener("blur", handler);
     }, [onBlurCallback]);
-    useEffect14(() => {
+    useEffect15(() => {
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
@@ -6992,9 +7008,9 @@ WavelengthInput.displayName = "WavelengthInput";
 import { WavelengthInput as WavelengthInput2 } from "@wavelengthusaf/web-components";
 
 // src/components/DataTable/WavelengthDataTable.tsx
-import { useEffect as useEffect15, useRef as useRef14, useState as useState9 } from "react";
+import { useEffect as useEffect16, useRef as useRef15, useState as useState9 } from "react";
 import styled9 from "styled-components";
-import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
 var ModalInputDiv = styled9.div`
   display: flex;
   flex-direction: column; /* Corrected this line */
@@ -7173,8 +7189,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 = useRef14(null);
-  const modalRef = useRef14(null);
+  const menuRef = useRef15(null);
+  const modalRef = useRef15(null);
   function isNumeric(value) {
     return /^\d+$/.test(value);
   }
@@ -7182,7 +7198,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     setSelectedValue(event.target.value);
     setLocalData(copiedArray);
   };
-  useEffect15(() => {
+  useEffect16(() => {
     if (!selectedValue || searchItem === "") {
       setLocalData(copiedArray);
       setNoRowsOpen(false);
@@ -7212,7 +7228,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const closeModal = () => {
     setIsModalOpen(false);
   };
-  useEffect15(() => {
+  useEffect16(() => {
     const handleClickOutside = (event) => {
       if (isModalOpen && modalRef.current && !modalRef.current.contains(event.target)) {
         closeModal();
@@ -7269,9 +7285,9 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     setEditingId(null);
   };
   const headers = columns.map((column, index) => {
-    return /* @__PURE__ */ jsxs28(TableHeadStyle, { children: [
+    return /* @__PURE__ */ jsxs27(TableHeadStyle, { children: [
       column.title,
-      /* @__PURE__ */ jsxs28(KebabMenu, { ref: menuRef, children: [
+      /* @__PURE__ */ jsxs27(KebabMenu, { ref: menuRef, children: [
         /* @__PURE__ */ jsx45(
           KebabIcon,
           {
@@ -7282,25 +7298,25 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
             children: "\u22EE"
           }
         ),
-        isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs28(MenuOptions, { children: [
-          sortOrder === "asc" ? /* @__PURE__ */ jsxs28("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
+        isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs27(MenuOptions, { children: [
+          sortOrder === "asc" ? /* @__PURE__ */ jsxs27("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
             /* @__PURE__ */ jsx45("span", { children: "\u2B06" }),
             " Sort ASC"
-          ] }) : /* @__PURE__ */ jsxs28("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
+          ] }) : /* @__PURE__ */ jsxs27("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
             /* @__PURE__ */ jsx45("span", { children: "\u2B07" }),
             " Sort DESC"
           ] }),
-          /* @__PURE__ */ jsxs28("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
+          /* @__PURE__ */ jsxs27("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
             /* @__PURE__ */ jsx45("span", { children: "\u23F7" }),
             " Filter"
           ] }),
-          isModalOpen && /* @__PURE__ */ jsx45(ModalOverlay, { children: /* @__PURE__ */ jsxs28(ModalWrapper, { ref: modalRef, children: [
+          isModalOpen && /* @__PURE__ */ jsx45(ModalOverlay, { children: /* @__PURE__ */ jsxs27(ModalWrapper, { ref: modalRef, children: [
             /* @__PURE__ */ jsx45(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
-            /* @__PURE__ */ jsxs28(ModalInputDiv, { children: [
+            /* @__PURE__ */ jsxs27(ModalInputDiv, { children: [
               /* @__PURE__ */ jsx45("label", { htmlFor: "filterSelectId", children: "Columns: " }),
               /* @__PURE__ */ jsx45("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx45("option", { children: item.key }, item.key)) })
             ] }),
-            /* @__PURE__ */ jsxs28(ModalInputDiv, { children: [
+            /* @__PURE__ */ jsxs27(ModalInputDiv, { children: [
               /* @__PURE__ */ jsx45("label", { htmlFor: "filterInputId", children: "Values: " }),
               /* @__PURE__ */ jsx45(
                 "input",
@@ -7343,8 +7359,8 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       }
     ) : /* @__PURE__ */ jsx45("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__ */ jsxs28("div", { id, children: [
-    /* @__PURE__ */ jsx45(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs28(StyledTableTwo, { title: "StyledTable", children: [
+  return /* @__PURE__ */ jsxs27("div", { id, children: [
+    /* @__PURE__ */ jsx45(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs27(StyledTableTwo, { title: "StyledTable", children: [
       /* @__PURE__ */ jsx45("thead", { children: /* @__PURE__ */ jsx45("tr", { children: headers }) }),
       /* @__PURE__ */ jsx45("tbody", { children: rows })
     ] }) }),
@@ -7356,7 +7372,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 jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
 var TableContainer = styled10.div`
   width: 1200px;
   border-radius: 16px;
@@ -7593,15 +7609,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__ */ jsx46(Fragment14, { children: /* @__PURE__ */ jsxs29(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+    return sortKey2 === column.key ? sortOrder2 === "asc" ? /* @__PURE__ */ jsx46(Fragment14, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
       /* @__PURE__ */ jsx46("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx46("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__ */ jsx46(Fragment14, { children: /* @__PURE__ */ jsxs29(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+    ] }) }) : /* @__PURE__ */ jsx46(Fragment14, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
       /* @__PURE__ */ jsx46("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx46("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__ */ jsx46(Fragment14, { children: /* @__PURE__ */ jsxs29(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+    ] }) }) : /* @__PURE__ */ jsx46(Fragment14, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
       /* @__PURE__ */ jsx46("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx46("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
@@ -7609,15 +7625,15 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
   };
   const renderSortSubButton = (column, sortSubOrder2, sortSubKey2) => {
     const columnKey = trimBeforePeriod2(column.key);
-    return sortSubKey2 === columnKey ? sortSubOrder2 === "asc" ? /* @__PURE__ */ jsxs29(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+    return sortSubKey2 === columnKey ? sortSubOrder2 === "asc" ? /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
       /* @__PURE__ */ jsx46("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx46("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__ */ jsxs29(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+    ] }) : /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
       /* @__PURE__ */ jsx46("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx46("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__ */ jsxs29(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+    ] }) : /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
       /* @__PURE__ */ jsx46("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx46("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
@@ -7630,7 +7646,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     return /* @__PURE__ */ jsx46("th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
   });
   const subDataRows = (itemId) => {
-    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx46(Fragment13, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs29(SubDataTableBodyRowContainer, { children: [
+    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx46(Fragment13, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs28(SubDataTableBodyRowContainer, { children: [
       /* @__PURE__ */ jsx46("td", { children: /* @__PURE__ */ jsx46(DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ jsx46("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx46(
         "path",
         {
@@ -7647,16 +7663,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__ */ jsxs29(BodyRowContainer, { children: [
+  const dataRows = processedRowData?.map((item, index) => /* @__PURE__ */ jsxs28(BodyRowContainer, { children: [
     /* @__PURE__ */ jsx46(TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ jsx46(TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
-    /* @__PURE__ */ jsxs29(ButtonStylingRow, { children: [
+    /* @__PURE__ */ jsxs28(ButtonStylingRow, { children: [
       /* @__PURE__ */ jsx46(DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
       /* @__PURE__ */ jsx46(AddButton, { onClick: addFilesOnClick, children: "Add files" })
     ] }),
     openRow !== item.id && /* @__PURE__ */ jsx46(BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ jsx46("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx46("path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
-    openRow === item.id && /* @__PURE__ */ jsxs29("div", { children: [
-      /* @__PURE__ */ jsxs29(SubDataTable, { children: [
-        /* @__PURE__ */ jsx46(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs29(SubDataTableHeaderRow, { children: [
+    openRow === item.id && /* @__PURE__ */ jsxs28("div", { children: [
+      /* @__PURE__ */ jsxs28(SubDataTable, { children: [
+        /* @__PURE__ */ jsx46(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs28(SubDataTableHeaderRow, { children: [
           /* @__PURE__ */ jsx46("th", {}),
           SubDataHeaders
         ] }) }),
@@ -7665,7 +7681,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
       /* @__PURE__ */ jsx46(BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ jsx46("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx46("path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
     ] })
   ] }, `Bodycontainer-${item.id}-${index}`));
-  return /* @__PURE__ */ jsxs29(TableContainer, { children: [
+  return /* @__PURE__ */ jsxs28(TableContainer, { children: [
     /* @__PURE__ */ jsx46(TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
     /* @__PURE__ */ jsx46("div", { title: "tablebodies", children: dataRows })
   ] });
@@ -7673,14 +7689,14 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
 ChildDataTable.displayName = "ChildDataTable";
 
 // src/components/DataTable/SubRowTable/ChildDataTable.tsx
-import { useRef as useRef15, useEffect as useEffect16 } from "react";
+import { useRef as useRef16, useEffect as useEffect17 } from "react";
 import "@wavelengthusaf/web-components";
 import { createRoot } from "react-dom/client";
 import { jsx as jsx47 } from "react/jsx-runtime";
 var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, ...rest }) => {
-  const tableRef = useRef15(null);
-  const reactDropdownRoots = useRef15(/* @__PURE__ */ new Map());
-  useEffect16(() => {
+  const tableRef = useRef16(null);
+  const reactDropdownRoots = useRef16(/* @__PURE__ */ new Map());
+  useEffect17(() => {
     const customChildDataTableElement = tableRef.current;
     if (!customChildDataTableElement) return;
     if (columns !== void 0) customChildDataTableElement.setColumns = columns;
@@ -7689,7 +7705,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]);
-  useEffect16(() => {
+  useEffect17(() => {
     const el = tableRef.current;
     if (!el) return;
     const handleReactDropdown = (event) => {
@@ -7736,7 +7752,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 jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
 var TableStyle = styled11.table`
   width: 100%;
   height: 100%;
@@ -7836,12 +7852,12 @@ var NestedDataTable = ({ data, columns, id }) => {
       return /* @__PURE__ */ jsx48("td", { children: /* @__PURE__ */ jsx48("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
     }
   }) }, `Sub-${item.id}-${index}`) }));
-  const childRows = /* @__PURE__ */ jsxs30(SubTableStyle, { children: [
+  const childRows = /* @__PURE__ */ jsxs29(SubTableStyle, { children: [
     /* @__PURE__ */ jsx48("thead", { children: /* @__PURE__ */ jsx48("tr", { children: SubDataHeaders }) }),
     /* @__PURE__ */ jsx48("tbody", { children: subDataRows })
   ] });
-  const rows = !data?.length ? /* @__PURE__ */ jsx48("tr", { children: /* @__PURE__ */ jsx48("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs30(Fragment15, { children: [
-    /* @__PURE__ */ jsxs30(PrimaryTrRows, { $index: index, children: [
+  const rows = !data?.length ? /* @__PURE__ */ jsx48("tr", { children: /* @__PURE__ */ jsx48("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs29(Fragment15, { children: [
+    /* @__PURE__ */ jsxs29(PrimaryTrRows, { $index: index, children: [
       /* @__PURE__ */ jsx48(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx48(Fragment15, { children: "\u2227" }) : /* @__PURE__ */ jsx48(Fragment15, { children: "\u2228" }) }),
       HeadColumns.map((column, index2) => {
         return /* @__PURE__ */ jsx48(PrimaryTdSpan, { children: /* @__PURE__ */ jsx48("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
@@ -7849,8 +7865,8 @@ var NestedDataTable = ({ data, columns, id }) => {
     ] }, index),
     isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx48(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx48("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
   ] }));
-  return /* @__PURE__ */ jsx48("div", { id, children: /* @__PURE__ */ jsxs30(TableStyle, { children: [
-    /* @__PURE__ */ jsx48("thead", { children: /* @__PURE__ */ jsxs30("tr", { children: [
+  return /* @__PURE__ */ jsx48("div", { id, children: /* @__PURE__ */ jsxs29(TableStyle, { children: [
+    /* @__PURE__ */ jsx48("thead", { children: /* @__PURE__ */ jsxs29("tr", { children: [
       /* @__PURE__ */ jsx48("th", { title: "dropdownth" }),
       headers
     ] }) }),
@@ -7860,9 +7876,9 @@ var NestedDataTable = ({ data, columns, id }) => {
 NestedDataTable.displayName = "NestedDataTable";
 
 // src/components/AutoComplete/WavelengthAutoComplete.tsx
-import { useEffect as useEffect17, useRef as useRef17, useState as useState12 } from "react";
+import { useEffect as useEffect18, useRef as useRef18, useState as useState12 } from "react";
 import styled12 from "styled-components";
-import { Fragment as Fragment16, jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
 var AutoContainer = styled12.div`
   //position: relative;
   position: relative;
@@ -7991,9 +8007,9 @@ var WavelengthAutoComplete = ({
   placeholder,
   onBlurCallback
 }) => {
-  const inputRef = useRef17(null);
-  const listRef = useRef17(null);
-  const noItemListRef = useRef17(null);
+  const inputRef = useRef18(null);
+  const listRef = useRef18(null);
+  const noItemListRef = useRef18(null);
   const [inputValue, setInputValue] = useState12(placeholder ?? "");
   const [suggestions, setSuggestions] = useState12([]);
   const [isDropdownVisible, setIsDropdownVisible] = useState12(false);
@@ -8001,7 +8017,7 @@ var WavelengthAutoComplete = ({
   const arrayLength = suggestions.length;
   const [focusedIndex, setFocusedIndex] = useState12(0);
   const idName = id ? id : "auto-comp";
-  useEffect17(() => {
+  useEffect18(() => {
     const handleClickOutsideList = (event) => {
       if (listRef.current && !listRef.current.contains(event.target)) {
         setIsDropdownVisible(false);
@@ -8013,7 +8029,7 @@ var WavelengthAutoComplete = ({
     };
   }, [focusedIndex]);
   if (onDataChange !== void 0) {
-    useEffect17(() => {
+    useEffect18(() => {
       onDataChange(inputValue);
     }, [inputValue]);
   }
@@ -8079,8 +8095,8 @@ var WavelengthAutoComplete = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx49(Fragment16, { children: /* @__PURE__ */ jsxs31(AutoContainer, { $inputHeight: height2, $inputWidth: width2, children: [
-    /* @__PURE__ */ jsxs31(InputWrapper, { id: `${idName}-input-wrapper`, $inputHeight: height2, $inputWidth: width2, children: [
+  return /* @__PURE__ */ jsx49(Fragment16, { children: /* @__PURE__ */ jsxs30(AutoContainer, { $inputHeight: height2, $inputWidth: width2, children: [
+    /* @__PURE__ */ jsxs30(InputWrapper, { id: `${idName}-input-wrapper`, $inputHeight: height2, $inputWidth: width2, children: [
       /* @__PURE__ */ jsx49(
         Input,
         {
@@ -8133,9 +8149,9 @@ var WavelengthAutoComplete = ({
 WavelengthAutoComplete.displayName = "WavelengthAutoComplete";
 
 // src/components/inputs/WavelengthDatePicker.tsx
-import { useEffect as useEffect18, useState as useState13 } from "react";
+import { useEffect as useEffect19, useState as useState13 } from "react";
 import styled13 from "styled-components";
-import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
 var Label2 = styled13.label`
   position: absolute;
   top: 50%;
@@ -8207,7 +8223,7 @@ var WavelengthDatePicker = ({
   const [minAdjusted, setMinAdjusted] = useState13("");
   const [maxAdjusted, setMaxAdjusted] = useState13("");
   const idName = id ? id : "WlDatePick";
-  useEffect18(() => {
+  useEffect19(() => {
     const minDate = new Date(min || "");
     const maxDate = new Date(max || "");
     if (inputTimeType === "datetime-local") {
@@ -8246,7 +8262,7 @@ var WavelengthDatePicker = ({
     setValue(dateString);
     if (OnDataChange !== void 0) OnDataChange(new Date(dateString));
   };
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs31(
     InputWrapper2,
     {
       id: `${idName}-inputWrapper`,
@@ -8290,7 +8306,7 @@ WavelengthDatePicker.displayName = "WavelengthDatePicker";
 import { WavelengthDatePicker as WavelengthDatePicker2 } from "@wavelengthusaf/web-components";
 
 // src/components/inputs/WavelengthCheckbox.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 jsx51 } from "react/jsx-runtime";
 var WavelengthCheckbox = ({
@@ -8302,8 +8318,8 @@ var WavelengthCheckbox = ({
   textSize,
   ...rest
 }) => {
-  const ref = useRef18(null);
-  useEffect19(() => {
+  const ref = useRef19(null);
+  useEffect20(() => {
     const el = ref.current;
     if (!el) return;
     if (size !== void 0) {
@@ -8332,7 +8348,7 @@ var WavelengthCheckbox = ({
 WavelengthCheckbox.displayName = "WavelengthCheckbox";
 
 // src/components/samples/SampleComponent.tsx
-import { useRef as useRef19, useEffect as useEffect20 } from "react";
+import { useRef as useRef20, useEffect as useEffect21 } from "react";
 import { jsx as jsx52 } from "react/jsx-runtime";
 var SampleComponent = ({
   testProp,
@@ -8342,8 +8358,8 @@ var SampleComponent = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef19(null);
-  useEffect20(() => {
+  const ref = useRef20(null);
+  useEffect21(() => {
     const el = ref.current;
     if (!el) return;
     el.customStyles = customStyle2;
@@ -8356,7 +8372,7 @@ var SampleComponent = ({
 SampleComponent.displayName = "SampleComponent";
 
 // src/components/NotificationPanel/WavelengthNotificationPanel.tsx
-import { useRef as useRef20, useEffect as useEffect21 } from "react";
+import { useRef as useRef21, useEffect as useEffect22 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx53 } from "react/jsx-runtime";
 var WavelengthNotificationPanel = ({
@@ -8367,8 +8383,8 @@ var WavelengthNotificationPanel = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef20(null);
-  useEffect21(() => {
+  const ref = useRef21(null);
+  useEffect22(() => {
     const el = ref.current;
     if (!el) return;
     if (notifications !== void 0) {
@@ -8394,11 +8410,11 @@ var WavelengthNotificationPanel = ({
 import { SampleComponent as SampleComponent2 } from "@wavelengthusaf/web-components";
 
 // src/components/MultiSelect/WavelengthMultiSelectAutocomplete.tsx
-import { useEffect as useEffect22, useRef as useRef21 } from "react";
+import { useEffect as useEffect23, useRef as useRef22 } from "react";
 import { jsx as jsx54 } from "react/jsx-runtime";
 var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Options", label, name, style: style3, onChange, value, disabled, ...rest }) => {
-  const componentRef = useRef21(null);
-  useEffect22(() => {
+  const componentRef = useRef22(null);
+  useEffect23(() => {
     const component = componentRef.current;
     if (!component) return;
     const handleValueChange = (event) => {
@@ -8411,7 +8427,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
       component.removeEventListener("change", handleValueChange);
     };
   }, [onChange]);
-  useEffect22(() => {
+  useEffect23(() => {
     const component = componentRef.current;
     if (!component) return;
     if (placeholder) component.setAttribute("placeholder", placeholder);
@@ -8421,7 +8437,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
     if (options) component.autocompleteOptions = options;
     if (style3) component.customStyles = style3;
   }, [options, placeholder, name, label, style3]);
-  useEffect22(() => {
+  useEffect23(() => {
     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.5.2",
+  "version": "4.6.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.7.0",
+    "@wavelengthusaf/web-components": "^1.8.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.26.2",
     "styled-components": "^6.1.12",