@wavelengthusaf/components 4.13.0 → 4.16.0

package/dist/cjs/index.cjs

@@ -206,7 +206,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment16 = REACT_FRAGMENT_TYPE;
+        var Fragment15 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment16;
+        exports.Fragment = Fragment15;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -3728,7 +3728,7 @@ WavelengthExampleComponent.displayName = "WavelengthExampleComponent";
 
 
 var WavelengthSearch = ({
-  customStyle: customStyle2,
+  customStyle,
   width: width2,
   mode,
   fontSize,
@@ -3761,7 +3761,7 @@ var WavelengthSearch = ({
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el) return;
-    el.customStyles = customStyle2;
+    el.customStyles = customStyle;
     syncAttribute("width", width2);
     syncAttribute("mode", mode);
     syncAttribute("font-size", fontSize);
@@ -3779,7 +3779,7 @@ var WavelengthSearch = ({
     syncAttribute("input-color", inputColor);
     syncAttribute("input-font", inputFont);
   }, [
-    customStyle2,
+    customStyle,
     width2,
     mode,
     fontSize,
@@ -5162,14 +5162,14 @@ var WavelengthBadge = ({
   textBoxHoverBorderColor,
   item,
   children,
-  customStyle: customStyle2,
+  customStyle,
   ...rest
 }) => {
   const ref = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el) return;
-    el.customStyles = customStyle2;
+    el.customStyles = customStyle;
     const updateAttribute = (attr, value) => {
       if (value !== void 0 && value !== null && value !== "") {
         el.setAttribute(attr, value.toString());
@@ -5213,7 +5213,7 @@ var WavelengthBadge = ({
     textBoxBorderRadius,
     textBoxHoverBorderColor,
     item,
-    customStyle2
+    customStyle
   ]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "wavelength-badge", { ref, ...rest, children: [
     badgeContent !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { slot: "badge", children: badgeContent }),
@@ -5526,7 +5526,7 @@ var WavelengthPlaneTrail = ({
   id,
   children,
   // Style argument
-  customStyle: customStyle2,
+  customStyle,
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
@@ -5534,8 +5534,8 @@ var WavelengthPlaneTrail = ({
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el) return;
-    if (customStyle2 !== void 0) {
-      el.customStyles = customStyle2;
+    if (customStyle !== void 0) {
+      el.customStyles = customStyle;
     }
     if (trailDir !== void 0) {
       el.setAttribute("trailDir", trailDir);
@@ -5547,7 +5547,7 @@ var WavelengthPlaneTrail = ({
       el.setAttribute("id", id);
     }
   }, [trailDir]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-planetrail", { ref, trailDir, color: color2, id, customStyle: customStyle2, ...rest, children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-planetrail", { ref, trailDir, color: color2, id, customStyle, ...rest, children });
 };
 WavelengthPlaneTrail.displayName = "WavelengthPlaneTrail";
 
@@ -5556,39 +5556,41 @@ WavelengthPlaneTrail.displayName = "WavelengthPlaneTrail";
 
 function WavelengthConfirmationModal(props) {
   const { show, setShow, id, name } = props;
-  const handleClose = () => {
-    setShow(false);
-  };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Modal, { open: show, onClose: handleClose, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _material.Box,
+  const modalRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const handleClose = () => {
+      setShow(false);
+    };
+    const currentModal = modalRef.current;
+    if (currentModal) {
+      currentModal.addEventListener("close", handleClose);
+    }
+    return () => {
+      if (currentModal) {
+        currentModal.removeEventListener("close", handleClose);
+      }
+    };
+  }, [setShow]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "wavelength-confirmation-modal",
     {
-      sx: {
-        position: "absolute",
-        top: "50%",
-        left: "50%",
-        transform: "translate(-50%, -50%)",
-        width: props.width || "451px",
-        // Custom width
-        height: props.height || "256px",
-        // Custom height
-        boxSizing: "border-box",
-        bgcolor: props.backgroundColor || "background.paper",
-        borderRadius: "16px",
-        color: props.textColor || "black",
-        boxShadow: 24,
-        padding: "32px",
-        overflow: "scroll"
-      },
+      ref: modalRef,
+      show: show ? "true" : void 0,
+      "modal-id": id,
+      "modal-name": name,
+      width: props.width,
+      height: props.height,
+      "font-family": props.fontFamily,
+      "text-color": props.textColor,
+      "background-color": props.backgroundColor,
+      "title-text": _optionalChain([props, 'access', _31 => _31.textObj, 'optionalAccess', _32 => _32.title]),
+      "dialog-text": _optionalChain([props, 'access', _33 => _33.textObj, 'optionalAccess', _34 => _34.dialog]),
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: _optionalChain([props, 'access', _31 => _31.textObj, 'optionalAccess', _32 => _32.title]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: _optionalChain([props, 'access', _33 => _33.textObj, 'optionalAccess', _34 => _34.dialog]) }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "row", justifyContent: "flex-end", marginTop: "40px", gap: "8px" }, children: [
-          props.cancelButton,
-          props.submitButton
-        ] })
+        props.cancelButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { slot: "cancel-button", style: { display: "contents" }, children: props.cancelButton }),
+        props.submitButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { slot: "submit-button", style: { display: "contents" }, children: props.submitButton })
       ]
     }
-  ) });
+  );
 }
 WavelengthConfirmationModal.displayName = "WavelengthConfirmationModal";
 
@@ -5614,136 +5616,34 @@ WavelengthContentModal.displayName = "WavelengthContentModal";
 
 // src/components/modals/WavelengthPopUpMenu.tsx
 
-var _Menu = require('@mui/material/Menu'); var _Menu2 = _interopRequireDefault(_Menu);
-var _MenuItem = require('@mui/material/MenuItem'); var _MenuItem2 = _interopRequireDefault(_MenuItem);
-
-var _Slide = require('@mui/material/Slide'); var _Slide2 = _interopRequireDefault(_Slide);
-
-
-var _IconButton = require('@mui/material/IconButton'); var _IconButton2 = _interopRequireDefault(_IconButton);
-var _Divider = require('@mui/material/Divider'); var _Divider2 = _interopRequireDefault(_Divider);
-
-var customStyle = { marginLeft: 16, marginRight: 16, marginTop: 8, marginBottom: 8 };
-var emailStyle = {
-  marginLeft: 16,
-  marginRight: 16,
-  marginTop: 8,
-  marginBottom: 8
-};
-function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, menuDirection = "top", color: color2, id, border: border2 }) {
-  const Links = _styledcomponents2.default.a`
-    color: inherit;
-    text-decoration: none;
 
-    &:hover,
-    &:focus {
-      color: ${({ hoverColor }) => hoverColor || "inherit"};
-    }
-    &:active {
-      color: ${({ hoverColor }) => hoverColor || "inherit"};
-    }
-  `;
-  const [anchorEl, setAnchorEl] = React2.default.useState(null);
-  const open = Boolean(anchorEl);
-  let icon;
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  if (customIcon) {
-    icon = customIcon;
-  } else {
-    icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.HelpOutline, { fontSize: "medium", sx: { color: color2 } });
-  }
-  const anchor = menuDirection === "top" || menuDirection === void 0 ? "top" : "bottom";
-  const transform = menuDirection === "top" || menuDirection === void 0 ? "bottom" : "top";
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IconButton2.default, { onClick: handleClick, children: icon }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _Menu2.default,
-      {
-        id,
-        open,
-        sx: {
-          width: width2,
-          "& .MuiPaper-root": {
-            border: border2
-          }
-        },
-        onClose: handleClose,
-        anchorEl,
-        TransitionComponent: _Slide2.default,
-        anchorOrigin: { vertical: anchor, horizontal: "center" },
-        transformOrigin: { vertical: transform, horizontal: "center" },
-        children: [
-          ...menuItems.map((items, index) => {
-            if (items.end === true) {
-              if (items.itemType === "header") {
-                if (items.link) {
-                  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { style: { textDecoration: "none", color: "inherit" }, href: items.link, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontWeight: "bold" }, children: items.label }) }) }),
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {})
-                  ] }, index);
-                } else {
-                  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { marginLeft: 16, marginRight: 16, marginTop: 6, marginBottom: 6 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontWeight: "bold" }, children: items.label }) }),
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {})
-                  ] }, index);
-                }
-              } else if (items.itemType === "link") {
-                return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.link, hoverColor: items.hoverColor, children: items.label }, index) }),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {})
-                ] }, index);
-              } else {
-                if (items.link) {
-                  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { style: { textDecoration: "none", color: "inherit" }, href: items.link, children: items.label }) }),
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {})
-                  ] }, index);
-                } else {
-                  if (items.email) {
-                    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { children: [
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.email, style: emailStyle, children: items.label }),
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {})
-                    ] }, index);
-                  } else {
-                    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { children: [
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: customStyle, children: items.label }),
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {})
-                    ] }, index);
-                  }
-                }
-              }
-            } else if (items.end === void 0 || items.end === false || items.end === null) {
-              if (items.itemType === "header") {
-                if (items.link) {
-                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.link, hoverColor: items.hoverColor, children: items.label }) }, index);
-                } else {
-                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: customStyle, children: items.label }, index);
-                }
-              } else if (items.itemType === "link") {
-                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { style: { textDecoration: "none" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.link, hoverColor: items.hoverColor || "", children: items.label }) }, index);
-              } else {
-                if (items.link) {
-                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { href: items.link, children: items.label }, index);
-                } else {
-                  if (items.email) {
-                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: emailStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.email, hoverColor: items.hoverColor || "blue", children: items.label }) }, index);
-                  } else {
-                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: customStyle, children: items.label }, index);
-                  }
-                }
-              }
-            }
-          })
-        ]
+var WavelengthPopUpMenu = React2.default.forwardRef(
+  ({ children, customStyle = {}, variant, trigger, menuDirection, menuOffset, menuItems, badgeLabel, ...rest }, externalRef) => {
+    const internalRef = _react.useRef.call(void 0, null);
+    React2.default.useImperativeHandle(externalRef, () => internalRef.current);
+    _react.useEffect.call(void 0, () => {
+      const el = internalRef.current;
+      if (!el) return;
+      el.customStyles = customStyle;
+      const set = (attr, value) => {
+        if (value !== void 0 && value !== null && value !== "") {
+          el.setAttribute(attr, value.toString());
+        } else {
+          el.removeAttribute(attr);
+        }
+      };
+      set("variant", variant);
+      set("trigger", trigger);
+      set("menu-direction", menuDirection);
+      set("menu-offset", menuOffset);
+      set("badge-label", badgeLabel);
+      if (menuItems !== void 0) {
+        el.setAttribute("menu-items", JSON.stringify(menuItems));
       }
-    )
-  ] });
-}
+    }, [customStyle, variant, trigger, menuDirection, menuOffset, menuItems, badgeLabel]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-popup-menu", { ref: internalRef, ...rest, children });
+  }
+);
 WavelengthPopUpMenu.displayName = "WavelengthPopUpMenu";
 
 // src/components/modals/WavelengthDropdown.tsx
@@ -5886,7 +5786,7 @@ WavelengthMenu.displayName = "WavelengthMenu";
 // src/components/modals/WavelengthSwitch.tsx
 
 
-var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color: color2, labelFont, checked, value, onWavelengthSwitchChange, customStyle: customStyle2, ...rest }) => {
+var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color: color2, labelFont, checked, value, onWavelengthSwitchChange, customStyle, ...rest }) => {
   const ref = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
@@ -5898,7 +5798,7 @@ var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color: color2,
         el.setAttribute(attr, isBool ? "" : val.toString());
       }
     };
-    el.customStyles = customStyle2;
+    el.customStyles = customStyle;
     syncAttribute("checked", checked, true);
     syncAttribute("disabled", disabled, true);
     syncAttribute("label", label);
@@ -5907,7 +5807,7 @@ var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color: color2,
     syncAttribute("color", color2);
     syncAttribute("label-font", labelFont);
     syncAttribute("value", value);
-  }, [checked, label, labelPlacement, size, disabled, color2, labelFont, value, customStyle2]);
+  }, [checked, label, labelPlacement, size, disabled, color2, labelFont, value, customStyle]);
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el || !onWavelengthSwitchChange) return;
@@ -5921,6 +5821,102 @@ var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color: color2,
 };
 WavelengthSwitch.displayName = "WavelengthSwitch";
 
+// src/components/modals/WavelengthDialog.tsx
+
+
+var WavelengthDialog = ({
+  children,
+  customStyle,
+  dialogTitle,
+  leftBtnLabel,
+  rightBtnLabel,
+  boxColor,
+  maxWidth: maxWidth2,
+  maxHeight: maxHeight2,
+  shadow,
+  borderRadius: borderRadius2,
+  borderColor: borderColor2,
+  textColor,
+  leftBtnBg,
+  leftBtnColor,
+  rightBtnBg,
+  rightBtnColor,
+  overlay,
+  fontFamily,
+  open,
+  onWlLeftBtnClick,
+  onWlRightBtnClick,
+  ...rest
+}) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    if (open) el.setAttribute("open", "");
+    else el.removeAttribute("open");
+  }, [open]);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    if (overlay) el.setAttribute("overlay", "");
+    else el.removeAttribute("overlay");
+  }, [overlay]);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    const handleLeft = (e) => _optionalChain([onWlLeftBtnClick, 'optionalCall', _41 => _41(e)]);
+    const handleRight = (e) => _optionalChain([onWlRightBtnClick, 'optionalCall', _42 => _42(e)]);
+    el.addEventListener("wl-left-btn-click", handleLeft);
+    el.addEventListener("wl-right-btn-click", handleRight);
+    return () => {
+      el.removeEventListener("wl-left-btn-click", handleLeft);
+      el.removeEventListener("wl-right-btn-click", handleRight);
+    };
+  }, [onWlLeftBtnClick, onWlRightBtnClick]);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    if (customStyle !== void 0) el.customStyles = customStyle;
+    const setAttr = (attr, value) => {
+      if (value !== void 0) el.setAttribute(attr, value);
+    };
+    setAttr("dialog-title", dialogTitle);
+    setAttr("left-btn-label", leftBtnLabel);
+    setAttr("right-btn-label", rightBtnLabel);
+    setAttr("box-color", boxColor);
+    setAttr("max-width", maxWidth2);
+    setAttr("max-height", maxHeight2);
+    setAttr("shadow", shadow);
+    setAttr("border-radius", borderRadius2);
+    setAttr("border-color", borderColor2);
+    setAttr("text-color", textColor);
+    setAttr("left-btn-bg", leftBtnBg);
+    setAttr("left-btn-color", leftBtnColor);
+    setAttr("right-btn-bg", rightBtnBg);
+    setAttr("right-btn-color", rightBtnColor);
+    setAttr("font-family", fontFamily);
+  }, [
+    customStyle,
+    dialogTitle,
+    leftBtnLabel,
+    rightBtnLabel,
+    boxColor,
+    maxWidth2,
+    maxHeight2,
+    shadow,
+    borderRadius2,
+    borderColor2,
+    textColor,
+    leftBtnBg,
+    leftBtnColor,
+    rightBtnBg,
+    rightBtnColor,
+    fontFamily
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-dialog", { ref, ...rest, children });
+};
+WavelengthDialog.displayName = "WavelengthDialog";
+
 // src/components/modals/WavelengthPagination.tsx
 
 
@@ -5928,7 +5924,7 @@ var WavelengthPagination = ({
   testProp,
   children,
   // Style argument
-  customStyle: customStyle2,
+  customStyle,
   variant,
   textColor,
   font,
@@ -5955,7 +5951,7 @@ var WavelengthPagination = ({
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el) return;
-    el.customStyles = customStyle2;
+    el.customStyles = customStyle;
     syncAttribute("variant", variant || "");
     syncAttribute("text-color", textColor || "");
     syncAttribute("font", font || "");
@@ -5967,8 +5963,8 @@ var WavelengthPagination = ({
     syncAttribute("active-text-color", activeTextColor || "");
     syncAttribute("background-color", backgroundColor2 || "");
     syncAttribute("disabled-color", disabledColor || "");
-    syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _41 => _41.toString, 'call', _42 => _42()]) || "");
-    syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _43 => _43.toString, 'call', _44 => _44()]) || "");
+    syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _43 => _43.toString, 'call', _44 => _44()]) || "");
+    syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _45 => _45.toString, 'call', _46 => _46()]) || "");
     const handlePageChange = (e) => {
       if (onPageChange) {
         onPageChange(e.detail.page);
@@ -6467,37 +6463,41 @@ WavelengthTestSnackbar.displayName = "WavelengthTestSnackbar";
 
 // src/components/sliders/WavelengthSlider.tsx
 
-var _Slider = require('@mui/material/Slider'); var _Slider2 = _interopRequireDefault(_Slider);
 
-function WavelengthSlider({ width: width2 = "300px", color: color2, valueDisplayed, marks, labelColor, value, id, maxVal = 100, minVal, step = 1, labelFunc, handleChange }) {
-  const on = valueDisplayed ? "on" : "off";
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { width: width2 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _Slider2.default,
-    {
-      id,
-      "aria-label": "Custom marks",
+var WavelengthSlider = ({ children, customStyle, value, maxVal, minVal, step, handleChange, labelFunc, valueDisplayed, marks, color: color2, width: width2, ...rest }) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    el.customStyles = customStyle;
+    const attrs = {
       value,
-      getAriaValueText: labelFunc,
+      "max-val": maxVal,
+      "min-val": minVal,
       step,
-      marks,
-      valueLabelDisplay: on,
-      max: maxVal,
-      min: minVal,
-      onChange: handleChange,
-      sx: {
-        color: color2,
-        "& .MuiSlider-markLabel": {
-          color: labelColor
-        }
-      }
-    }
-  ) });
-}
+      marks: marks ? JSON.stringify(marks) : void 0,
+      color: color2,
+      width: width2,
+      "value-displayed": _nullishCoalesce(valueDisplayed, () => ( (labelFunc && value !== void 0 ? labelFunc(value) : void 0)))
+    };
+    Object.entries(attrs).forEach(([key, val]) => {
+      if (val !== void 0) el.setAttribute(key, val.toString());
+    });
+  }, [value, maxVal, minVal, step, marks, customStyle, color2, width2, valueDisplayed, labelFunc]);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el || !handleChange) return;
+    const onSliderChange = (e) => handleChange(e, e.detail.value);
+    el.addEventListener("slider-change", onSliderChange);
+    return () => el.removeEventListener("slider-change", onSliderChange);
+  }, [handleChange]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-slider", { ref, ...rest, children });
+};
 WavelengthSlider.displayName = "WavelengthSlider";
 
 // src/components/carousels/WavelengthDefaultCarousel.tsx
 
-
+var _IconButton = require('@mui/material/IconButton'); var _IconButton2 = _interopRequireDefault(_IconButton);
 var _NavigateBefore = require('@mui/icons-material/NavigateBefore'); var _NavigateBefore2 = _interopRequireDefault(_NavigateBefore);
 var _NavigateNext = require('@mui/icons-material/NavigateNext'); var _NavigateNext2 = _interopRequireDefault(_NavigateNext);
 
@@ -6684,7 +6684,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
     const internalRef = _react.useRef.call(void 0, null);
     _react.useImperativeHandle.call(void 0, ref, () => ({
       ...internalRef.current,
-      validate: () => _optionalChain([internalRef, 'access', _45 => _45.current, 'optionalAccess', _46 => _46.validate, 'optionalCall', _47 => _47(true)])
+      validate: () => _optionalChain([internalRef, 'access', _47 => _47.current, 'optionalAccess', _48 => _48.validate, 'optionalCall', _49 => _49(true)])
     }));
     _react.useEffect.call(void 0, () => {
       const el = internalRef.current;
@@ -6763,7 +6763,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _48 => _48.shadowRoot, 'optionalAccess', _49 => _49.querySelector, 'call', _50 => _50("input, textarea")]);
+        const input = _optionalChain([el, 'access', _50 => _50.shadowRoot, 'optionalAccess', _51 => _51.querySelector, 'call', _52 => _52("input, textarea")]);
         if (input) {
           onBlurCallback();
         }
@@ -6775,7 +6775,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _51 => _51.shadowRoot, 'optionalAccess', _52 => _52.querySelector, 'call', _53 => _53("input, textarea")]);
+        const input = _optionalChain([el, 'access', _53 => _53.shadowRoot, 'optionalAccess', _54 => _54.querySelector, 'call', _55 => _55("input, textarea")]);
         if (input) {
           const synthetic = {
             ...e,
@@ -6978,7 +6978,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const [noRowsOpen, setNoRowsOpen] = _react.useState.call(void 0, false);
   const [isModalOpen, setIsModalOpen] = _react.useState.call(void 0, false);
   const [searchItem, setSearchItem] = _react.useState.call(void 0, "");
-  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _54 => _54[0], 'optionalAccess', _55 => _55.key]) || "");
+  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _56 => _56[0], 'optionalAccess', _57 => _57.key]) || "");
   const [currentPage, setCurrentPage] = _react.useState.call(void 0, 1);
   const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
   const [editingMenuKey, setEditingMenuKey] = _react.useState.call(void 0, null);
@@ -7132,7 +7132,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _56 => _56.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _57 => _57.map, 'call', _58 => _58((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _58 => _58.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _59 => _59.map, 'call', _60 => _60((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       StyledInput,
       {
@@ -7378,7 +7378,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     }
     if (sortSubOrder) {
       result.map(
-        (item) => _optionalChain([item, 'access', _59 => _59.Details, 'optionalAccess', _60 => _60.fileObjects, 'access', _61 => _61.sort, 'call', _62 => _62((c, d) => {
+        (item) => _optionalChain([item, 'access', _61 => _61.Details, 'optionalAccess', _62 => _62.fileObjects, 'access', _63 => _63.sort, 'call', _64 => _64((c, d) => {
           const valueC = c[sortSubKey];
           const valueD = d[sortSubKey];
           if (typeof valueC === "string" && typeof valueD === "string") {
@@ -7439,24 +7439,24 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
   });
   const subDataRows = (itemId) => {
-    return processedRowData.filter((item) => _optionalChain([item, 'access', _63 => _63.Details, 'optionalAccess', _64 => _64.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _65 => _65.Details, 'optionalAccess', _66 => _66.fileObjects, 'access', _67 => _67.map, 'call', _68 => _68((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
+    return processedRowData.filter((item) => _optionalChain([item, 'access', _65 => _65.Details, 'optionalAccess', _66 => _66.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _67 => _67.Details, 'optionalAccess', _68 => _68.fileObjects, 'access', _69 => _69.map, 'call', _70 => _70((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "path",
         {
           d: "M8.5 12L3.5 7L4.9 5.55L7.5 8.15V0H9.5V8.15L12.1 5.55L13.5 7L8.5 12ZM2.5 16C1.95 16 1.47917 15.8042 1.0875 15.4125C0.695833 15.0208 0.5 14.55 0.5 14V11H2.5V14H14.5V11H16.5V14C16.5 14.55 16.3042 15.0208 15.9125 15.4125C15.5208 15.8042 15.05 16 14.5 16H2.5Z",
           fill: "#1C1B1F"
         }
-      ) }) }) }, `td-${_optionalChain([item, 'access', _69 => _69.Details, 'optionalAccess', _70 => _70.relationId])}-${fileItem.id}`),
+      ) }) }) }, `td-${_optionalChain([item, 'access', _71 => _71.Details, 'optionalAccess', _72 => _72.relationId])}-${fileItem.id}`),
       SubDataColumns.map((column) => {
         const columnKey = trimBeforePeriod2(column.key);
         const value = fileItem[columnKey];
         if (value !== void 0) {
-          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableCell, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }, `span-${_optionalChain([item, 'access', _71 => _71.Details, 'optionalAccess', _72 => _72.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _73 => _73.Details, 'optionalAccess', _74 => _74.relationId])}-${fileItem.id}-${index}-${column.title}`);
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableCell, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }, `span-${_optionalChain([item, 'access', _73 => _73.Details, 'optionalAccess', _74 => _74.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _75 => _75.Details, 'optionalAccess', _76 => _76.relationId])}-${fileItem.id}-${index}-${column.title}`);
         }
       })
-    ] }, `${item}-${_optionalChain([item, 'access', _75 => _75.Details, 'optionalAccess', _76 => _76.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _77 => _77.Details, 'optionalAccess', _78 => _78.relationId])}`));
+    ] }, `${item}-${_optionalChain([item, 'access', _77 => _77.Details, 'optionalAccess', _78 => _78.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _79 => _79.Details, 'optionalAccess', _80 => _80.relationId])}`));
   };
-  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _79 => _79.map, 'call', _80 => _80((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
+  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _81 => _81.map, 'call', _82 => _82((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ButtonStylingRow, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
@@ -7510,7 +7510,7 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
         root = _client.createRoot.call(void 0, container);
         reactDropdownRoots.current.set(container, root);
       }
-      const item = _optionalChain([data, 'optionalAccess', _81 => _81.find, 'call', _82 => _82((item2) => String(item2.id) === String(itemId))]);
+      const item = _optionalChain([data, 'optionalAccess', _83 => _83.find, 'call', _84 => _84((item2) => String(item2.id) === String(itemId))]);
       if (item && item.dropdown && root) {
         root.render(item.dropdown);
       }
@@ -7637,9 +7637,9 @@ var NestedDataTable = ({ data, columns, id }) => {
   const SubDataHeaders = SubDataColumns.map((column, index) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !_optionalChain([data, 'optionalAccess', _83 => _83.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+  const subDataRows = !_optionalChain([data, 'optionalAccess', _85 => _85.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
     const columnKey = trimBeforePeriod(column.key);
-    const value = _optionalChain([item, 'access', _84 => _84.Details, 'optionalAccess', _85 => _85[columnKey]]);
+    const value = _optionalChain([item, 'access', _86 => _86.Details, 'optionalAccess', _87 => _87[columnKey]]);
     console.log("value: ", value);
     if (value !== void 0) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }) }, `Span-${item.id}-${colIndex}`);
@@ -7649,7 +7649,7 @@ var NestedDataTable = ({ data, columns, id }) => {
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: SubDataHeaders }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: subDataRows })
   ] });
-  const rows = !_optionalChain([data, 'optionalAccess', _86 => _86.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([data, 'optionalAccess', _87 => _87.map, 'call', _88 => _88((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+  const rows = !_optionalChain([data, 'optionalAccess', _88 => _88.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([data, 'optionalAccess', _89 => _89.map, 'call', _90 => _90((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PrimaryTrRows, { $index: index, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: "\u2227" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: "\u2228" }) }),
       HeadColumns.map((column, index2) => {
@@ -8147,7 +8147,7 @@ var SampleComponent = ({
   testProp,
   children,
   // Style argument
-  customStyle: customStyle2,
+  customStyle,
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
@@ -8155,7 +8155,7 @@ var SampleComponent = ({
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el) return;
-    el.customStyles = customStyle2;
+    el.customStyles = customStyle;
     if (testProp !== void 0) {
       el.setAttribute("test-prop", testProp);
     }
@@ -8318,7 +8318,8 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
 
 
 
-exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.ChildDataTable = ChildDataTable2; exports.ChildDataTableElement = _webcomponents.ChildDataTable; exports.DefaultCarousel = DefaultCarousel; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBadge = WavelengthBadge; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDefaultPagination = WavelengthDefaultPagination; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthForm = WavelengthForm; exports.WavelengthFormElement = _webcomponents.WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthInputElement = _webcomponents.WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthMultiSelectAutocompleteElement = _webcomponents.WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPaginationElement = _webcomponents.WavelengthPagination; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthProgressBarElement = _webcomponents.WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthSwitch = WavelengthSwitch; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip; exports.WavelengthWebSnackbar = WavelengthWebSnackbar; exports.add = add; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+
+exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.ChildDataTable = ChildDataTable2; exports.ChildDataTableElement = _webcomponents.ChildDataTable; exports.DefaultCarousel = DefaultCarousel; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBadge = WavelengthBadge; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDefaultPagination = WavelengthDefaultPagination; exports.WavelengthDialog = WavelengthDialog; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthForm = WavelengthForm; exports.WavelengthFormElement = _webcomponents.WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthInputElement = _webcomponents.WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthMultiSelectAutocompleteElement = _webcomponents.WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPaginationElement = _webcomponents.WavelengthPagination; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthProgressBarElement = _webcomponents.WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthSwitch = WavelengthSwitch; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip; exports.WavelengthWebSnackbar = WavelengthWebSnackbar; exports.add = add; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js: