@wavelengthusaf/components 5.0.2 → 5.0.5

package/dist/cjs/index.cjs

@@ -92,6 +92,423 @@ WavelengthButton.displayName = "WavelengthButton";
 // src/index.ts
 
 
+// src/components/buttons/WavelengthButton/WavelengthStyledButton.tsx
+var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
+
+var ButtonPresets = {
+  default: {
+    width: "130px",
+    height: "45px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "8px",
+    border: "none",
+    fontSize: "",
+    fontWeight: 600,
+    color: "",
+    margin: "",
+    padding: "",
+    backgroundColor: "",
+    hover: {
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer",
+      width: "",
+      height: "",
+      border: "",
+      fontSize: ""
+    },
+    disabled: {
+      cursor: "",
+      opacity: ""
+    },
+    active: {
+      backgroundColor: "",
+      boxShadow: "",
+      transition: "",
+      border: ""
+    }
+  },
+  ewdms_primary: {
+    width: "130px",
+    height: "45px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "8px",
+    border: "none",
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "white",
+    margin: "",
+    padding: "12px 32px",
+    backgroundColor: "rgba(26, 128, 131, 1)",
+    hover: {
+      backgroundColor: "rgba(38, 186, 190, 1)",
+      color: "rgba(247, 247, 249, 1)",
+      cursor: "pointer",
+      width: "",
+      height: "",
+      border: "",
+      fontSize: ""
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#67a8aa",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  ewdms_secondary: {
+    width: "130px",
+    height: "45px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "8px",
+    border: "1px solid rgba(26, 128, 131, 1)",
+    fontSize: "16px",
+    fontWeight: 600,
+    margin: "",
+    color: "rgba(26, 128, 131, 1)",
+    padding: "12px 32px",
+    backgroundColor: "transparent",
+    hover: {
+      backgroundColor: "rgba(26, 128, 131, 0.1)",
+      color: "rgba(26, 128, 131, 1)",
+      cursor: "pointer",
+      width: "",
+      height: "",
+      border: "",
+      fontSize: ""
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#bad7da",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  ewdms_tertiary: {
+    width: "130px",
+    height: "45px",
+    display: "flex",
+    margin: "",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "8px",
+    border: "none",
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "rgba(26, 128, 131, 1)",
+    padding: "12px 32px",
+    backgroundColor: "transparent",
+    hover: {
+      backgroundColor: "rgba(26, 128, 131, 0.1)",
+      color: "rgba(26, 128, 131, 1)",
+      cursor: "pointer",
+      width: "",
+      height: "",
+      border: "",
+      fontSize: ""
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#445C71",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  channel_one_launch: {
+    width: "62px",
+    height: "24px",
+    display: "flex",
+    margin: "",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "20px",
+    border: "none",
+    fontSize: "10px",
+    fontWeight: 700,
+    color: "white",
+    padding: "0px 0px",
+    backgroundColor: "#24A818",
+    hover: {
+      height: "28px",
+      border: "0.5px solid white",
+      fontSize: "12px",
+      width: "72px",
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#6FC36E",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  channel_one_request: {
+    width: "100px",
+    height: "24px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    margin: "",
+    justifyContent: "center",
+    borderRadius: "20px",
+    border: "none",
+    fontSize: "10px",
+    fontWeight: 700,
+    color: "white",
+    padding: "0px 0px",
+    backgroundColor: "#1D31E4",
+    hover: {
+      height: "28px",
+      border: "0.5px solid white",
+      fontSize: "12px",
+      width: "110px",
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#5D78ED",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  channel_one_pending: {
+    width: "62px",
+    height: "24px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "20px",
+    border: "none",
+    fontSize: "10px",
+    fontWeight: 700,
+    color: "white",
+    padding: "0px 0px",
+    margin: "",
+    backgroundColor: "#F88805",
+    hover: {
+      height: "28px",
+      border: "0.5px solid white",
+      fontSize: "12px",
+      width: "72px",
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#FAAD68",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  channel_one_disabled: {
+    width: "100px",
+    height: "24px",
+    display: "flex",
+    margin: "",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "20px",
+    border: "none",
+    fontSize: "10px",
+    fontWeight: 700,
+    color: "white",
+    padding: "0px 0px",
+    backgroundColor: "#9E9E9E",
+    hover: {
+      height: "",
+      border: "",
+      fontSize: "",
+      width: "",
+      backgroundColor: "",
+      color: "",
+      cursor: ""
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "",
+      boxShadow: "",
+      transition: "",
+      border: ""
+    }
+  },
+  channel_one_transparent: {
+    width: "70px",
+    height: "25px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    margin: "",
+    justifyContent: "center",
+    borderRadius: "6px",
+    border: "1px solid white",
+    fontSize: "10px",
+    fontWeight: 500,
+    color: "white",
+    padding: "0px !important",
+    backgroundColor: "transparent",
+    hover: {
+      height: "",
+      border: "",
+      fontSize: "",
+      width: "",
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "",
+      opacity: ""
+    },
+    active: {
+      backgroundColor: "rgba(255, 255, 255, 0.22)",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  brewery: {
+    width: "138px",
+    height: "44px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "6px",
+    border: "none",
+    fontSize: "16px",
+    margin: "",
+    fontWeight: 500,
+    color: "white",
+    padding: "12px 16px",
+    backgroundColor: "#D16A2F",
+    hover: {
+      height: "",
+      border: "",
+      fontSize: "",
+      width: "",
+      backgroundColor: "#D16A2F",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "",
+      boxShadow: "0 0 5px black",
+      transition: "",
+      border: ""
+    }
+  }
+};
+var Button = _styledcomponents2.default.button`
+  ${({ type }) => {
+  const preset = ButtonPresets[type];
+  return `
+      width: ${preset.width};
+      height: ${preset.height};
+      display: ${preset.display};
+      flex-direction: ${preset.flexDirection};
+      align-items: ${preset.alignItems};
+      justify-content: ${preset.justifyContent};
+      border-radius: ${preset.borderRadius};
+      border: ${preset.border};
+      font-size: ${preset.fontSize};
+      font-weight: ${preset.fontWeight};
+      color: ${preset.color};
+      padding: ${preset.padding};
+      background-color: ${preset.backgroundColor};
+      margin: ${preset.margin};
+
+      &:hover {
+        background-color: ${preset.hover.backgroundColor};
+        color: ${preset.hover.color};
+        cursor: ${preset.hover.cursor};
+        width:${preset.hover.width};
+        height:${preset.hover.height};
+        border:${preset.hover.border};
+        font-size:${preset.hover.fontSize};
+      }
+
+      &:disabled {
+        cursor: ${preset.disabled.cursor};
+        opacity: ${preset.disabled.opacity};
+      }
+      &:active {
+      background-color: ${preset.active.backgroundColor};
+      box-shadow: ${preset.active.boxShadow};
+      border: ${preset.active.border};
+      transition: ${preset.active.transition};
+      }
+    
+    `;
+}}
+
+  ${({ styles }) => styles && { ...styles }}
+  ${({ hoverstyles }) => hoverstyles && {
+  "&:hover": { ...hoverstyles }
+}}
+     ${({ activestyles }) => activestyles && {
+  "&:active": { ...activestyles }
+}}
+   ${({ disabledstyles }) => disabledstyles && {
+  "&:disabled": { ...disabledstyles }
+}}
+`;
+function WavelengthStyledButton({ type = "default", styles, children, disabled = false, hoverstyles, icon, onClick, disabledstyles, activestyles, id, name }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Button, { type, styles, hoverstyles, disabledstyles, disabled, activestyles, onClick, children: [
+    icon,
+    children
+  ] });
+}
+WavelengthStyledButton.displayName = "WavelengthStyledButton";
+
 // src/themes/WavelengthAppTheme.tsx
 
 var WavelengthAppTheme = _react.createContext.call(void 0, {});
@@ -826,121 +1243,175 @@ var WavelengthNavBar = ({ items, bgColor, txtColor, hoverColor, height, padding,
 
 
 
-var WavelengthFileDropZone = ({
-  acceptedTypes,
-  maxSize,
-  multiple,
-  dragText,
-  iconSrc,
-  onFilesSelected,
-  hostDisplay,
-  hostWidth,
-  inputDisplay,
-  borderWidth,
-  borderStyle,
-  borderColor,
-  borderRadius,
-  padding,
-  textAlign,
-  backgroundColor,
-  cursor,
-  transition,
-  display,
-  flexDirection,
-  alignItems,
-  gap,
-  borderHoverColor,
-  backgroundHoverColor,
-  borderActiveColor,
-  backgroundActiveColor,
-  contentDisplay,
-  contentFlexDirection,
-  contentAlignItems,
-  contentGap,
-  textColor,
-  fontFamily,
-  fontStyle,
-  fontSize,
-  lineHeight,
-  letterSpacing,
-  iconSize,
-  errorColor,
-  errorFontFamily,
-  errorFontSize,
-  errorMarginTop,
-  style,
-  children,
-  ...rest
-}) => {
-  const ref = _react.useRef.call(void 0, null);
-  _react.useEffect.call(void 0, () => {
-    const el = ref.current;
-    if (!el) return;
-    if (acceptedTypes !== void 0) el.setAttribute("accepted-types", acceptedTypes);
-    else el.removeAttribute("accepted-types");
-    if (maxSize !== void 0) el.setAttribute("max-size", String(maxSize));
-    else el.removeAttribute("max-size");
-    if (dragText !== void 0) el.setAttribute("drag-text", dragText);
-    else el.removeAttribute("drag-text");
-    if (iconSrc !== void 0) el.setAttribute("icon-src", iconSrc);
-    else el.removeAttribute("icon-src");
-    if (multiple) el.setAttribute("multiple", "");
-    else el.removeAttribute("multiple");
-    const handleFilesSelected = (event) => {
-      const customEvent = event;
-      _optionalChain([onFilesSelected, 'optionalCall', _2 => _2(customEvent.detail.files)]);
-    };
-    el.addEventListener("files-selected", handleFilesSelected);
-    return () => {
-      el.removeEventListener("files-selected", handleFilesSelected);
-    };
-  }, [acceptedTypes, maxSize, multiple, dragText, iconSrc, onFilesSelected]);
-  const mergedStyle = {
-    ...style,
-    "--hostDisplay": hostDisplay,
-    "--hostWidth": hostWidth,
-    "--inputDisplay": inputDisplay,
-    "--borderWidth": borderWidth,
-    "--borderStyle": borderStyle,
-    "--borderColor": borderColor,
-    "--borderRadius": borderRadius,
-    "--padding": padding,
-    "--textAlign": textAlign,
-    "--backgroundColor": backgroundColor,
-    "--cursor": cursor,
-    "--transition": transition,
-    "--display": display,
-    "--flexDirection": flexDirection,
-    "--alignItems": alignItems,
-    "--gap": gap,
-    "--borderHoverColor": borderHoverColor,
-    "--backgroundHoverColor": backgroundHoverColor,
-    "--borderActiveColor": borderActiveColor,
-    "--backgroundActiveColor": backgroundActiveColor,
-    "--contentDisplay": contentDisplay,
-    "--contentFlexDirection": contentFlexDirection,
-    "--contentAlignItems": contentAlignItems,
-    "--contentGap": contentGap,
-    "--textColor": textColor,
-    "--fontFamily": fontFamily,
-    "--fontStyle": fontStyle,
-    "--fontSize": fontSize,
-    "--lineHeight": lineHeight,
-    "--letterSpacing": letterSpacing,
-    "--iconSize": iconSize,
-    "--errorColor": errorColor,
-    "--errorFontFamily": errorFontFamily,
-    "--errorFontSize": errorFontSize,
-    "--errorMarginTop": errorMarginTop
-  };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-file-drop-zone", { ref, style: mergedStyle, ...rest, children });
+var setAttribute = (element, attribute, value) => {
+  if (value === void 0 || value === null) {
+    element.removeAttribute(attribute);
+    return;
+  }
+  element.setAttribute(attribute, String(value));
 };
+var WavelengthFileDropZone = _react.forwardRef.call(void 0, 
+  ({
+    acceptedTypes,
+    maxSize,
+    multiple,
+    dragText,
+    iconSrc,
+    width,
+    onFilesSelected,
+    hostDisplay,
+    hostWidth,
+    inputDisplay,
+    borderWidth,
+    borderStyle,
+    borderColor,
+    borderRadius,
+    padding,
+    textAlign,
+    backgroundColor,
+    cursor,
+    transition,
+    display,
+    flexDirection,
+    alignItems,
+    gap,
+    borderHoverColor,
+    backgroundHoverColor,
+    borderActiveColor,
+    backgroundActiveColor,
+    contentDisplay,
+    contentFlexDirection,
+    contentAlignItems,
+    contentGap,
+    textColor,
+    fontFamily,
+    fontStyle,
+    fontSize,
+    lineHeight,
+    letterSpacing,
+    iconSize,
+    errorColor,
+    errorFontFamily,
+    errorFontSize,
+    errorMarginTop,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const elementRef = _react.useRef.call(void 0, null);
+    _react.useImperativeHandle.call(void 0, ref, () => elementRef.current);
+    _react.useEffect.call(void 0, () => {
+      const element = elementRef.current;
+      if (!element) return;
+      setAttribute(element, "accepted-types", acceptedTypes);
+      setAttribute(element, "max-size", maxSize);
+      setAttribute(element, "drag-text", dragText);
+      setAttribute(element, "icon-src", iconSrc);
+      if (multiple) {
+        element.setAttribute("multiple", "");
+      } else {
+        element.removeAttribute("multiple");
+      }
+    }, [acceptedTypes, maxSize, multiple, dragText, iconSrc]);
+    _react.useEffect.call(void 0, () => {
+      const element = elementRef.current;
+      if (!element || !onFilesSelected) return;
+      const handleFilesSelected = (event) => {
+        const customEvent = event;
+        onFilesSelected(customEvent.detail.files);
+      };
+      element.addEventListener("files-selected", handleFilesSelected);
+      return () => element.removeEventListener("files-selected", handleFilesSelected);
+    }, [onFilesSelected]);
+    const mergedStyle = _react.useMemo.call(void 0, 
+      () => ({
+        ...style,
+        "--hostDisplay": hostDisplay,
+        "--hostWidth": _nullishCoalesce(hostWidth, () => ( width)),
+        "--inputDisplay": inputDisplay,
+        "--borderWidth": borderWidth,
+        "--borderStyle": borderStyle,
+        "--borderColor": borderColor,
+        "--borderRadius": borderRadius,
+        "--padding": padding,
+        "--textAlign": textAlign,
+        "--backgroundColor": backgroundColor,
+        "--cursor": cursor,
+        "--transition": transition,
+        "--display": display,
+        "--flexDirection": flexDirection,
+        "--alignItems": alignItems,
+        "--gap": gap,
+        "--borderHoverColor": borderHoverColor,
+        "--backgroundHoverColor": backgroundHoverColor,
+        "--borderActiveColor": borderActiveColor,
+        "--backgroundActiveColor": backgroundActiveColor,
+        "--contentDisplay": contentDisplay,
+        "--contentFlexDirection": contentFlexDirection,
+        "--contentAlignItems": contentAlignItems,
+        "--contentGap": contentGap,
+        "--textColor": textColor,
+        "--fontFamily": fontFamily,
+        "--fontStyle": fontStyle,
+        "--fontSize": fontSize,
+        "--lineHeight": lineHeight,
+        "--letterSpacing": letterSpacing,
+        "--iconSize": iconSize,
+        "--errorColor": errorColor,
+        "--errorFontFamily": errorFontFamily,
+        "--errorFontSize": errorFontSize,
+        "--errorMarginTop": errorMarginTop
+      }),
+      [
+        style,
+        hostDisplay,
+        hostWidth,
+        width,
+        inputDisplay,
+        borderWidth,
+        borderStyle,
+        borderColor,
+        borderRadius,
+        padding,
+        textAlign,
+        backgroundColor,
+        cursor,
+        transition,
+        display,
+        flexDirection,
+        alignItems,
+        gap,
+        borderHoverColor,
+        backgroundHoverColor,
+        borderActiveColor,
+        backgroundActiveColor,
+        contentDisplay,
+        contentFlexDirection,
+        contentAlignItems,
+        contentGap,
+        textColor,
+        fontFamily,
+        fontStyle,
+        fontSize,
+        lineHeight,
+        letterSpacing,
+        iconSize,
+        errorColor,
+        errorFontFamily,
+        errorFontSize,
+        errorMarginTop
+      ]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-file-drop-zone", { ref: elementRef, style: mergedStyle, ...rest, children });
+  }
+);
+WavelengthFileDropZone.displayName = "WavelengthFileDropZone";
 
-// src/components/SnackBar/WavelengthWebSnackbar.tsx
+// src/components/SnackBar/WavelengthSnackbar.tsx
 
 
 
-var WavelengthWebSnackbar = ({
+var WavelengthSnackbar = ({
   message,
   duration,
   backgroundColor,
@@ -1107,6 +1578,75 @@ function WavelengthPermissionAlert({
 }
 WavelengthPermissionAlert.displayName = "WavelengthPermissionAlert";
 
+// src/components/PageComponents/WavelengthDragAndDrop.tsx
+
+function WavelengthDragAndDrop({
+  width = "550px",
+  height = "230px",
+  onFilesSelected,
+  border,
+  textColor,
+  fontSize = "12px",
+  allowedFileMIME,
+  allowedFileExtensions,
+  backgroundColor = "transparent",
+  dataTestId,
+  id
+}) {
+  const handleFileChange = (event) => {
+    const selectedFiles = event.target.files;
+    if (selectedFiles && selectedFiles.length > 0) {
+      const newFiles = Array.from(selectedFiles);
+      onFilesSelected(newFiles);
+    }
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles.length > 0) {
+      const newFiles = Array.from(droppedFiles);
+      const allowedTypes = allowedFileMIME ? allowedFileMIME : "*/*";
+      const validFiles = newFiles.filter((file) => allowedTypes === "*/*" || allowedTypes.includes(file.type));
+      if (validFiles.length > 0) {
+        onFilesSelected(validFiles);
+      } else {
+        alert(`Invalid file type`);
+      }
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      id,
+      "data-testid": dataTestId,
+      style: {
+        backgroundColor,
+        border: border ? border : "1px dashed rgba(14, 178, 178, 1)",
+        borderRadius: "8px",
+        paddingTop: "10px",
+        boxSizing: "border-box",
+        width,
+        height,
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "scroll"
+      },
+      onDrop: handleDrop,
+      onDragOver: (event) => event.preventDefault(),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize, color: textColor }, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { type: "file", hidden: true, multiple: true, id: "browse", onChange: handleFileChange, accept: allowedFileExtensions }),
+        "Drag File here or",
+        " ",
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "browse", style: { textDecoration: "underline", cursor: "pointer" }, children: "select from files" })
+      ] })
+    }
+  );
+}
+WavelengthDragAndDrop.displayName = "WavelengthDragAndDrop";
+
 // src/components/PageComponents/WavelengthToolTip.tsx
 
 
@@ -1181,7 +1721,7 @@ var WavelengthBadge = ({
     updateAttribute("text-box-border-radius", textBoxBorderRadius);
     updateAttribute("text-box-hover-border-color", textBoxHoverBorderColor);
     updateAttribute("badge-font", badgeFont);
-    updateAttribute("badge-content", _optionalChain([badgeContent, 'optionalAccess', _3 => _3.toString, 'call', _4 => _4()]));
+    updateAttribute("badge-content", _optionalChain([badgeContent, 'optionalAccess', _2 => _2.toString, 'call', _3 => _3()]));
     updateAttribute("badge-size", badgeSize);
   }, [
     variant,
@@ -1276,7 +1816,7 @@ function useStableCallback(fn) {
   _react.useEffect.call(void 0, () => {
     fnRef.current = fn;
   }, [fn]);
-  return (...args) => _optionalChain([fnRef, 'access', _5 => _5.current, 'optionalCall', _6 => _6(...args)]);
+  return (...args) => _optionalChain([fnRef, 'access', _4 => _4.current, 'optionalCall', _5 => _5(...args)]);
 }
 function WavelengthFormInner(props, ref) {
   const {
@@ -1316,7 +1856,7 @@ function WavelengthFormInner(props, ref) {
     if (!el) return;
     let finalSchema = schema;
     if (placeholders) {
-      const shape = _optionalChain([schema, 'optionalAccess', _7 => _7.shape]);
+      const shape = _optionalChain([schema, 'optionalAccess', _6 => _6.shape]);
       if (shape) {
         const overrides = {};
         for (const [key, ph] of Object.entries(placeholders)) {
@@ -1349,15 +1889,15 @@ function WavelengthFormInner(props, ref) {
     if (!el) return;
     const handleChange = (e) => {
       const detail = e.detail;
-      _optionalChain([onChangeStable, 'optionalCall', _8 => _8(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _9 => _9.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _10 => _10.issues]), () => ( [])))]);
+      _optionalChain([onChangeStable, 'optionalCall', _7 => _7(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _8 => _8.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _9 => _9.issues]), () => ( [])))]);
     };
     const handleValid = (e) => {
       const detail = e.detail;
-      _optionalChain([onValidStable, 'optionalCall', _11 => _11(_optionalChain([detail, 'optionalAccess', _12 => _12.value]), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _13 => _13.issues]), () => ( [])))]);
+      _optionalChain([onValidStable, 'optionalCall', _10 => _10(_optionalChain([detail, 'optionalAccess', _11 => _11.value]), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _12 => _12.issues]), () => ( [])))]);
     };
     const handleInvalid = (e) => {
       const detail = e.detail;
-      _optionalChain([onInvalidStable, 'optionalCall', _14 => _14(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _15 => _15.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _16 => _16.issues]), () => ( [])))]);
+      _optionalChain([onInvalidStable, 'optionalCall', _13 => _13(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _14 => _14.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _15 => _15.issues]), () => ( [])))]);
     };
     el.addEventListener("form-change", handleChange);
     el.addEventListener("form-valid", handleValid);
@@ -1379,8 +1919,8 @@ function WavelengthFormInner(props, ref) {
   _react.useImperativeHandle.call(void 0, 
     ref,
     () => ({
-      validate: () => _nullishCoalesce(_optionalChain([hostRef, 'access', _17 => _17.current, 'optionalAccess', _18 => _18.validate, 'optionalCall', _19 => _19()]), () => ( false)),
-      getValue: () => _optionalChain([hostRef, 'access', _20 => _20.current, 'optionalAccess', _21 => _21.value]),
+      validate: () => _nullishCoalesce(_optionalChain([hostRef, 'access', _16 => _16.current, 'optionalAccess', _17 => _17.validate, 'optionalCall', _18 => _18()]), () => ( false)),
+      getValue: () => _optionalChain([hostRef, 'access', _19 => _19.current, 'optionalAccess', _20 => _20.value]),
       setValue: (v) => {
         if (hostRef.current) hostRef.current.value = v;
       }
@@ -1505,7 +2045,7 @@ var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color
       el.spaced = spaced;
     }
   }, [numberOfPlanes, trailDir, opacity, color, gradient, spaced]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-manyplanes", { ref, trailDir, opacity, color, gradient, spaced: _optionalChain([spaced, 'optionalAccess', _22 => _22.toString, 'call', _23 => _23()]), ...rest, children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-manyplanes", { ref, trailDir, opacity, color, gradient, spaced: _optionalChain([spaced, 'optionalAccess', _21 => _21.toString, 'call', _22 => _22()]), ...rest, children });
 };
 WavelengthManyPlanes.displayName = "WavelengthManyPlanes";
 
@@ -1576,8 +2116,8 @@ function WavelengthConfirmationModal(props) {
       "font-family": props.fontFamily,
       "text-color": props.textColor,
       "background-color": props.backgroundColor,
-      "title-text": _optionalChain([props, 'access', _24 => _24.textObj, 'optionalAccess', _25 => _25.title]),
-      "dialog-text": _optionalChain([props, 'access', _26 => _26.textObj, 'optionalAccess', _27 => _27.dialog]),
+      "title-text": _optionalChain([props, 'access', _23 => _23.textObj, 'optionalAccess', _24 => _24.title]),
+      "dialog-text": _optionalChain([props, 'access', _25 => _25.textObj, 'optionalAccess', _26 => _26.dialog]),
       children: [
         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 })
@@ -1837,8 +2377,8 @@ var WavelengthDialog = ({
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el) return;
-    const handleLeft = (e) => _optionalChain([onWlLeftBtnClick, 'optionalCall', _28 => _28(e)]);
-    const handleRight = (e) => _optionalChain([onWlRightBtnClick, 'optionalCall', _29 => _29(e)]);
+    const handleLeft = (e) => _optionalChain([onWlLeftBtnClick, 'optionalCall', _27 => _27(e)]);
+    const handleRight = (e) => _optionalChain([onWlRightBtnClick, 'optionalCall', _28 => _28(e)]);
     el.addEventListener("wl-left-btn-click", handleLeft);
     el.addEventListener("wl-right-btn-click", handleRight);
     return () => {
@@ -1936,8 +2476,8 @@ var WavelengthPagination = ({
     syncAttribute("active-text-color", activeTextColor || "");
     syncAttribute("background-color", backgroundColor || "");
     syncAttribute("disabled-color", disabledColor || "");
-    syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _30 => _30.toString, 'call', _31 => _31()]) || "");
-    syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _32 => _32.toString, 'call', _33 => _33()]) || "");
+    syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _29 => _29.toString, 'call', _30 => _30()]) || "");
+    syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _31 => _31.toString, 'call', _32 => _32()]) || "");
     const handlePageChange = (e) => {
       if (onPageChange) {
         onPageChange(e.detail.page);
@@ -2033,7 +2573,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', _34 => _34.current, 'optionalAccess', _35 => _35.validate, 'optionalCall', _36 => _36(true)])
+      validate: () => _optionalChain([internalRef, 'access', _33 => _33.current, 'optionalAccess', _34 => _34.validate, 'optionalCall', _35 => _35(true)])
     }));
     _react.useEffect.call(void 0, () => {
       const el = internalRef.current;
@@ -2112,7 +2652,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _37 => _37.shadowRoot, 'optionalAccess', _38 => _38.querySelector, 'call', _39 => _39("input, textarea")]);
+        const input = _optionalChain([el, 'access', _36 => _36.shadowRoot, 'optionalAccess', _37 => _37.querySelector, 'call', _38 => _38("input, textarea")]);
         if (input) {
           onBlurCallback();
         }
@@ -2124,7 +2664,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _40 => _40.shadowRoot, 'optionalAccess', _41 => _41.querySelector, 'call', _42 => _42("input, textarea")]);
+        const input = _optionalChain([el, 'access', _39 => _39.shadowRoot, 'optionalAccess', _40 => _40.querySelector, 'call', _41 => _41("input, textarea")]);
         if (input) {
           const synthetic = {
             ...e,
@@ -2151,7 +2691,7 @@ WavelengthInput.displayName = "WavelengthInput";
 
 // src/components/DataTable/WavelengthDataTable.tsx
 
-var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
+
 
 var ModalInputDiv = _styledcomponents2.default.div`
   display: flex;
@@ -2327,7 +2867,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', _43 => _43[0], 'optionalAccess', _44 => _44.key]) || "");
+  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _42 => _42[0], 'optionalAccess', _43 => _43.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);
@@ -2481,7 +3021,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _45 => _45.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', _46 => _46.map, 'call', _47 => _47((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _44 => _44.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', _45 => _45.map, 'call', _46 => _46((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,
       {
@@ -2757,7 +3297,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     }
     if (sortSubOrder) {
       result.map(
-        (item) => _optionalChain([item, 'access', _48 => _48.Details, 'optionalAccess', _49 => _49.fileObjects, 'access', _50 => _50.sort, 'call', _51 => _51((c, d) => {
+        (item) => _optionalChain([item, 'access', _47 => _47.Details, 'optionalAccess', _48 => _48.fileObjects, 'access', _49 => _49.sort, 'call', _50 => _50((c, d) => {
           const valueC = c[sortSubKey];
           const valueD = d[sortSubKey];
           if (typeof valueC === "string" && typeof valueD === "string") {
@@ -2818,24 +3358,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', _52 => _52.Details, 'optionalAccess', _53 => _53.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _54 => _54.Details, 'optionalAccess', _55 => _55.fileObjects, 'access', _56 => _56.map, 'call', _57 => _57((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
+    return processedRowData.filter((item) => _optionalChain([item, 'access', _51 => _51.Details, 'optionalAccess', _52 => _52.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _53 => _53.Details, 'optionalAccess', _54 => _54.fileObjects, 'access', _55 => _55.map, 'call', _56 => _56((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', _58 => _58.Details, 'optionalAccess', _59 => _59.relationId])}-${fileItem.id}`),
+      ) }) }) }, `td-${_optionalChain([item, 'access', _57 => _57.Details, 'optionalAccess', _58 => _58.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', _60 => _60.Details, 'optionalAccess', _61 => _61.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _62 => _62.Details, 'optionalAccess', _63 => _63.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', _59 => _59.Details, 'optionalAccess', _60 => _60.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _61 => _61.Details, 'optionalAccess', _62 => _62.relationId])}-${fileItem.id}-${index}-${column.title}`);
         }
       })
-    ] }, `${item}-${_optionalChain([item, 'access', _64 => _64.Details, 'optionalAccess', _65 => _65.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _66 => _66.Details, 'optionalAccess', _67 => _67.relationId])}`));
+    ] }, `${item}-${_optionalChain([item, 'access', _63 => _63.Details, 'optionalAccess', _64 => _64.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _65 => _65.Details, 'optionalAccess', _66 => _66.relationId])}`));
   };
-  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _68 => _68.map, 'call', _69 => _69((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
+  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _67 => _67.map, 'call', _68 => _68((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" }),
@@ -2929,8 +3469,8 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
         root = _client.createRoot.call(void 0, container);
         dropdownRoots.current.set(container, root);
       }
-      const item = _optionalChain([data, 'optionalAccess', _70 => _70.find, 'call', _71 => _71((i) => String(i.id) === String(itemId))]);
-      if (_optionalChain([item, 'optionalAccess', _72 => _72.dropdown]) && root) {
+      const item = _optionalChain([data, 'optionalAccess', _69 => _69.find, 'call', _70 => _70((i) => String(i.id) === String(itemId))]);
+      if (_optionalChain([item, 'optionalAccess', _71 => _71.dropdown]) && root) {
         root.render(item.dropdown);
       }
     };
@@ -3062,9 +3602,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', _73 => _73.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', _72 => _72.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', _74 => _74.Details, 'optionalAccess', _75 => _75[columnKey]]);
+    const value = _optionalChain([item, 'access', _73 => _73.Details, 'optionalAccess', _74 => _74[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}`);
@@ -3074,7 +3614,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', _76 => _76.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', _77 => _77.map, 'call', _78 => _78((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+  const rows = !_optionalChain([data, 'optionalAccess', _75 => _75.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', _76 => _76.map, 'call', _77 => _77((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) => {
@@ -3604,9 +4144,6 @@ var WavelengthNotificationPanel = ({
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el) return;
-    if (typeof rest.onSignOut === "function") {
-      el.onSignOut = rest.onSignOut;
-    }
     if (username !== void 0) {
       el.username = username;
     }
@@ -3671,10 +4208,10 @@ var WavelengthCheckboxList = ({ label, helperText, checkboxInformation, children
     if (!el) return;
     function verifyAttribute(attribute, value) {
       if (value === void 0 || value === null) {
-        _optionalChain([el, 'optionalAccess', _79 => _79.removeAttribute, 'call', _80 => _80(attribute)]);
+        _optionalChain([el, 'optionalAccess', _78 => _78.removeAttribute, 'call', _79 => _79(attribute)]);
         return;
       }
-      _optionalChain([el, 'optionalAccess', _81 => _81.setAttribute, 'call', _82 => _82(attribute, value)]);
+      _optionalChain([el, 'optionalAccess', _80 => _80.setAttribute, 'call', _81 => _81(attribute, value)]);
     }
     verifyAttribute("label", label);
     verifyAttribute("helper-text", helperText);
@@ -3742,5 +4279,7 @@ WavelengthCheckboxList.displayName = "WavelengthCheckboxList";
 
 
 
-exports.ChildDataTable = ChildDataTable2; exports.ChildDataTableElement = _webcomponents.ChildDataTable; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthBadge = WavelengthBadge; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCard = WavelengthCard; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthCheckboxList = WavelengthCheckboxList; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataGrid = WavelengthDataGrid; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDialog = WavelengthDialog; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDropZone = WavelengthFileDropZone; 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.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSwitch = WavelengthSwitch; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip; exports.WavelengthWebSnackbar = WavelengthWebSnackbar; exports.add = add; exports.concat = concat; exports.useThemeContext = useThemeContext;
+
+
+exports.ChildDataTable = ChildDataTable2; exports.ChildDataTableElement = _webcomponents.ChildDataTable; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthBadge = WavelengthBadge; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCard = WavelengthCard; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthCheckboxList = WavelengthCheckboxList; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataGrid = WavelengthDataGrid; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDialog = WavelengthDialog; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDropZone = WavelengthFileDropZone; 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.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthSwitch = WavelengthSwitch; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip; exports.add = add; exports.concat = concat; exports.useThemeContext = useThemeContext;
 //# sourceMappingURL=index.cjs.map