@wavelengthusaf/components 2.9.3 → 2.10.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 Fragment14 = REACT_FRAGMENT_TYPE;
+        var Fragment13 = 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 = Fragment14;
+        exports.Fragment = Fragment13;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -1182,6 +1182,48 @@ var require_react_is2 = __commonJS({
   }
 });
 
+// src/web-components/sample-component.ts
+var template = document.createElement("template");
+template.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      /* Define component defaults here */
+    }
+  </style>
+  <div class="content">
+    <slot></slot> <!-- Enables user-defined inner HTML -->
+  </div>
+`;
+var SampleComponent = class extends HTMLElement {
+  // List of attributes to observe for changes
+  static get observedAttributes() {
+    return ["test-prop"];
+  }
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.append(template.content.cloneNode(true));
+  }
+  // Called when component is inserted into the DOM
+  connectedCallback() {
+    this.updateComponent();
+  }
+  // Called when observed attributes change
+  attributeChangedCallback() {
+    this.updateComponent();
+  }
+  // Main update logic; Your component's functionality will go here and/or in other methods that you have below
+  updateComponent() {
+    const prop = this.getAttribute("test-prop") || "";
+    const container = this.shadow.querySelector(".content");
+    if (container) container.textContent = prop;
+  }
+};
+if (!customElements.get("sample-component")) {
+  customElements.define("sample-component", SampleComponent);
+}
+
 // src/web-components/wavelength-banner.ts
 var WavelengthBanner = class extends HTMLElement {
   static get observedAttributes() {
@@ -1238,6 +1280,78 @@ if (!customElements.get("wavelength-banner")) {
 }
 
 // src/web-components/wavelength-button.ts
+var buttonTemplate = document.createElement("template");
+buttonTemplate.innerHTML = `
+  <style>
+	:host {
+  	display: inline-flex;
+	}
+
+	button {
+  	display: inline-flex;
+  	align-items: center;
+  	justify-content: center;
+  	position: relative;
+  	overflow: hidden;
+  	border: none;
+  	border-radius: 0.25rem;
+  	cursor: pointer;
+  	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  	font-weight: 500;
+  	font-size: 0.875rem;
+  	letter-spacing: 0.02857rem;
+  	text-transform: uppercase;
+  	user-select: none;
+  	white-space: normal;
+  	word-break: break-word;
+  	text-align: center;
+  	height: auto;
+	}
+
+	button .ripple {
+  	position: absolute;
+  	border-radius: 50%;
+  	transform: scale(0);
+  	animation: ripple 600ms linear;
+  	pointer-events: none;
+  	z-index: 0;
+	}
+
+	button .label {
+  	position: relative;
+  	z-index: 1;
+  	display: block;
+  	width: 100%;
+	}
+
+	@keyframes ripple {
+  	to {
+    	transform: scale(4);
+    	opacity: 0;
+  	}
+	}
+
+	button.contained {
+  	box-shadow: 0rem 0.125rem 0.25rem -0.063rem #000000;
+	}
+
+	button.contained:hover,
+	button.outlined:hover,
+	button.text:hover {
+  	opacity: 0.96;
+  	transition: background-color 300ms ease-in-out;
+	}
+
+	button:disabled {
+  	opacity: 0.5;
+  	pointer-events: none;
+	}
+  </style>
+
+  <button>
+	<span class="label"><slot>LABEL</slot></span>
+  </button>
+`;
 var WavelengthButton = class extends HTMLElement {
   constructor() {
     super();
@@ -1246,76 +1360,14 @@ var WavelengthButton = class extends HTMLElement {
     this.handleHoverOut = () => {
     };
     const shadow = this.attachShadow({ mode: "open" });
-    this.button = document.createElement("button");
-    const style3 = document.createElement("style");
-    style3.textContent = `
-  	:host {
-    	display: inline-flex;
-  	}
-
-  	button {
-    	display: inline-flex;
-    	align-items: center;
-    	justify-content: center;
-    	position: relative;
-    	overflow: hidden;
-    	border: none;
-    	border-radius: 0.25rem;
-    	cursor: pointer;
-    	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-    	font-weight: 500;
-    	font-size: 0.875rem;
-    	letter-spacing: 0.02857rem;
-    	text-transform: uppercase;
-    	user-select: none;
-    	white-space: normal;
-    	word-break: break-word;
-    	text-align: center;
-    	height: auto;
-  	}
-
-  	button .ripple {
-    	position: absolute;
-    	border-radius: 50%;
-    	transform: scale(0);
-    	animation: ripple 600ms linear;
-    	pointer-events: none;
-    	z-index: 0;
-  	}
-
-  	button .label {
-    	position: relative;
-    	z-index: 1;
-    	display: block;
-    	width: 100%;
-  	}
-
-  	@keyframes ripple {
-    	to {
-      	transform: scale(4);
-      	opacity: 0;
-    	}
-  	}
-
-  	button.contained {
-    	box-shadow: 0rem 0.125rem 0.25rem -0.063rem #000000;
-  	}
-
-  	button.contained:hover,
-  	button.outlined:hover,
-  	button.text:hover {
-    	opacity: 0.96;
-    	transition: background-color 300ms ease-in-out;
-  	}
-
-  	button:disabled {
-    	opacity: 0.5;
-    	pointer-events: none;
-  	}
-	`;
-    this.button.addEventListener("click", this.handleRipple.bind(this));
-    shadow.appendChild(style3);
-    shadow.appendChild(this.button);
+    shadow.appendChild(buttonTemplate.content.cloneNode(true));
+    this.button = shadow.querySelector("button");
+    this.button.addEventListener("click", (event) => {
+      this.handleRipple(event);
+      if (!this.getAttribute("href")) {
+        this.dispatchEvent(new MouseEvent("click", { bubbles: true, composed: true }));
+      }
+    });
   }
   static get observedAttributes() {
     return ["variant", "size", "margin", "padding", "color-one", "color-two", "font-size", "disabled", "border-radius", "href", "width", "height", "box-shadow", "target"];
@@ -1352,15 +1404,8 @@ var WavelengthButton = class extends HTMLElement {
     } else {
       this.applyPresetSize(size);
     }
-    if (width2) {
-      this.button.style.width = width2;
-    }
-    if (height2) {
-      this.button.style.height = height2;
-    } else {
-      this.button.style.height = "auto";
-    }
-    this.button.innerHTML = `<span class="label"><slot>LABEL</slot></span>`;
+    if (width2) this.button.style.width = width2;
+    this.button.style.height = height2;
     if (variant === "contained") {
       this.button.style.backgroundColor = colorOne;
       this.button.style.color = colorTwo;
@@ -1371,7 +1416,7 @@ var WavelengthButton = class extends HTMLElement {
       this.button.style.color = colorOne;
       this.button.style.border = `0.063rem solid ${colorOne}`;
       this.button.style.boxShadow = boxShadow || "none";
-    } else if (variant === "text") {
+    } else {
       this.button.style.backgroundColor = "transparent";
       this.button.style.color = colorOne;
       this.button.style.border = "none";
@@ -1388,7 +1433,7 @@ var WavelengthButton = class extends HTMLElement {
     this.handleHoverIn = () => {
       if (variant === "contained") {
         this.button.style.backgroundColor = this.shadeColor(colorOne, -15);
-      } else if (variant === "outlined" || variant === "text") {
+      } else {
         this.button.style.backgroundColor = this.hexToRgba(colorOne, 0.05);
       }
     };
@@ -1441,24 +1486,17 @@ var WavelengthButton = class extends HTMLElement {
     if (this.button.disabled) return;
     const variant = this.getAttribute("variant") || "outlined";
     const colorOne = this.getAttribute("color-one") || "#1976D2";
-    let rippleColor = "rgba(0,0,0,0.2)";
-    if (variant === "contained") {
-      rippleColor = this.hexToRgba(this.shadeColor(colorOne, 40), 0.6);
-    } else {
-      rippleColor = this.hexToRgba(this.shadeColor(colorOne, -40), 0.3);
-    }
     const ripple = document.createElement("span");
     ripple.className = "ripple";
-    ripple.style.backgroundColor = rippleColor;
+    const color2 = variant === "contained" ? this.hexToRgba(this.shadeColor(colorOne, 40), 0.6) : this.hexToRgba(this.shadeColor(colorOne, -40), 0.3);
+    ripple.style.backgroundColor = color2;
     const rect = this.button.getBoundingClientRect();
     const size = Math.max(rect.width, rect.height);
     ripple.style.width = ripple.style.height = `${size}px`;
     ripple.style.left = `${event.clientX - rect.left - size / 2}px`;
     ripple.style.top = `${event.clientY - rect.top - size / 2}px`;
     this.button.appendChild(ripple);
-    setTimeout(() => {
-      ripple.remove();
-    }, 600);
+    setTimeout(() => ripple.remove(), 600);
   }
 };
 if (!customElements.get("wavelength-button")) {
@@ -1675,13 +1713,14 @@ var WavelengthButton2 = ({
     setAttr("href", href);
     setAttr("target", target);
     setAttr("box-shadow", boxShadow);
-    disabled ? el.setAttribute("disabled", "") : el.removeAttribute("disabled");
+    if (disabled) el.setAttribute("disabled", "");
+    else el.removeAttribute("disabled");
     const handleClick = (e) => {
       _optionalChain([onClick, 'optionalCall', _17 => _17(e)]);
     };
     el.addEventListener("click", handleClick);
     return () => el.removeEventListener("click", handleClick);
-  }, [variant, size, height2, width2, margin2, padding2, colorOne, colorTwo, fontSize, borderRadius2, disabled, href, onClick]);
+  }, [variant, size, height2, width2, margin2, padding2, colorOne, colorTwo, fontSize, borderRadius2, disabled, href, onClick, boxShadow, target]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-button", { ref, className, style: style3, ...rest, children });
 };
 
@@ -3707,7 +3746,6 @@ function WavelengthStyledButton({ type = "default", styles, children, disabled =
     children
   ] });
 }
-var WavelengthStyledButton_default = WavelengthStyledButton;
 
 // src/themes/WavelengthAppTheme.tsx
 
@@ -5208,325 +5246,6 @@ function WavelengthCommentDisplay(props) {
   );
 }
 
-// src/components/PageComponents/WavelengthPermissionAlert.tsx
-
-function WavelengthPermissionAlert({
-  dataTestId,
-  height: height2 = "112px",
-  width: width2 = "314px",
-  backgroundColor: backgroundColor2 = "white",
-  permission,
-  applicationName,
-  requestorName,
-  dateOfRequest,
-  onDismiss,
-  unit = "No Unit"
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "div",
-    {
-      "data-testid": dataTestId,
-      style: {
-        width: width2,
-        height: height2,
-        backgroundColor: backgroundColor2,
-        border: "1px solid #5F5F5F",
-        borderRadius: "12px",
-        display: "flex",
-        flexDirection: "column",
-        padding: "8px 12px",
-        gap: "8px",
-        fontSize: "14px",
-        fontWeight: 400,
-        boxSizing: "border-box",
-        fontFamily: "roboto"
-      },
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "20px", fontWeight: 400 }, children: permission }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { letterSpacing: "-6%" }, children: [
-          "Application: ",
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontWeight: 600, marginLeft: "4px" }, children: applicationName })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { letterSpacing: "-6%" }, children: [
-          "Requestor:",
-          " ",
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: { fontWeight: 600, marginLeft: "4px" }, children: [
-            requestorName,
-            ", ",
-            "" + unit
-          ] })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "row", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { letterSpacing: "-6%" }, children: [
-            "Date of Request: ",
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontWeight: 600, marginLeft: "4px" }, children: dateOfRequest })
-          ] }),
-          " ",
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href: "", style: { color: "black", fontWeight: 600 }, onClick: onDismiss, children: "Dismiss" }),
-          " "
-        ] })
-      ]
-    }
-  ) });
-}
-
-// src/components/PageComponents/WavelengthAccessAlert.tsx
-var _Check = require('@mui/icons-material/Check'); var _Check2 = _interopRequireDefault(_Check);
-var _NotInterested = require('@mui/icons-material/NotInterested'); var _NotInterested2 = _interopRequireDefault(_NotInterested);
-
-function WavelengthAccessAlert({
-  height: height2 = "100px",
-  dataTestId,
-  width: width2 = "244px",
-  time = "2m ago",
-  access = "Access Request",
-  appNickname = "App Nickname",
-  appLogo = "wings",
-  appAdmin = "app.admin.1",
-  requestorName = "joes.user.1"
-}) {
-  if (access === "Access Request") {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "div",
-      {
-        "data-testid": dataTestId,
-        style: {
-          width: width2,
-          height: height2,
-          border: "1px solid rgba(0, 0, 0, 0.6)",
-          borderRadius: "6px",
-          position: "relative",
-          padding: "8px 10px 2px 10px",
-          display: "grid",
-          gridTemplateColumns: "1fr 3fr 2fr",
-          gridTemplateRows: "1fr 1fr 1fr",
-          boxSizing: "border-box"
-        },
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "8px", fontWeight: 400, position: "absolute", top: "5px", right: "12px" }, children: time }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontWeight: 700, fontSize: "12px", color: "rgba(248, 136, 5, 1)", marginTop: "5px", marginLeft: "5px", gridArea: "1/2/1/3" }, children: access }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { gridArea: "2/1/3/2" }, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AppLogo_default, { name: appLogo, width: 22 }),
-            " "
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "column", gridArea: "2/2/3/4", fontSize: "10px", gap: "4px", marginLeft: "5px" }, children: [
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: "", children: [
-              "Requestor: ",
-              requestorName
-            ] }),
-            " ",
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "", children: appNickname })
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            WavelengthStyledButton_default,
-            {
-              type: "default",
-              styles: { backgroundColor: "rgba(143, 143, 143, 1)", marginTop: "5px", borderRadius: "5px", height: "22px", width: "44px", gridArea: "3/4/3/4", color: "white" },
-              children: "clear"
-            }
-          )
-        ]
-      }
-    );
-  } else if (access === "Access Granted") {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "div",
-      {
-        "data-testid": dataTestId,
-        style: {
-          width: width2,
-          height: height2,
-          border: "1px solid rgba(0, 0, 0, 0.6)",
-          borderRadius: "6px",
-          position: "relative",
-          padding: "8px 10px 2px 10px",
-          display: "grid",
-          gridTemplateColumns: "1fr 3fr 2fr",
-          gridTemplateRows: "1fr 1fr 1fr",
-          boxSizing: "border-box"
-        },
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "8px", fontWeight: 400, position: "absolute", top: "5px", right: "12px" }, children: time }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontWeight: 700, fontSize: "12px", marginTop: "5px", marginLeft: "5px", gridArea: "1/2/1/4", display: "flex", alignItems: "center" }, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Check2.default, { fontSize: "small", sx: { color: "rgba(36, 226, 32, 1)", width: "16px" } }),
-            access
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { gridArea: "2/1/3/2" }, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AppLogo_default, { name: appLogo, width: 22 }),
-            " "
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "column", gridArea: "2/2/3/4", fontSize: "10px", marginLeft: "5px" }, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontWeight: 700, fontSize: "10px" }, children: appNickname }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "", style: { marginTop: "5px" }, children: appAdmin }),
-            " ",
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "", children: "Added you as a user" })
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WavelengthStyledButton_default, { type: "default", styles: { backgroundColor: "rgba(143, 143, 143, 1)", borderRadius: "5px", height: "22px", width: "44px", gridArea: "3/4/3/4", color: "white" }, children: "clear" })
-        ]
-      }
-    );
-  } else {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "div",
-      {
-        "data-testid": dataTestId,
-        style: {
-          width: width2,
-          height: height2,
-          border: "1px solid rgba(0, 0, 0, 0.6)",
-          borderRadius: "6px",
-          position: "relative",
-          padding: "8px 10px 2px 10px",
-          display: "grid",
-          gridTemplateColumns: "1fr 3fr 2fr",
-          gridTemplateRows: "1fr 1fr 1fr",
-          boxSizing: "border-box"
-        },
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "8px", fontWeight: 400, position: "absolute", top: "5px", right: "12px" }, children: time }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontWeight: 700, fontSize: "12px", marginTop: "5px", marginLeft: "5px", gridArea: "1/2/1/4", display: "flex", alignItems: "center" }, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _NotInterested2.default, { fontSize: "small", sx: { color: "rgba(234, 30, 30, 1)", width: "16px" } }),
-            access
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { gridArea: "2/1/3/2" }, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AppLogo_default, { name: appLogo, width: 22 }),
-            " "
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "column", gridArea: "2/2/3/4", fontSize: "10px", marginLeft: "5px" }, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontWeight: 700, fontSize: "10px" }, children: appNickname }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "", style: { marginTop: "5px" }, children: appAdmin }),
-            " ",
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "", children: "Denied your request" })
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WavelengthStyledButton_default, { type: "default", styles: { backgroundColor: "rgba(143, 143, 143, 1)", borderRadius: "5px", height: "22px", width: "44px", gridArea: "3/4/3/4", color: "white" }, children: "clear" })
-        ]
-      }
-    );
-  }
-}
-
-// src/components/PageComponents/WavelengthAlert.tsx
-var _Close = require('@mui/icons-material/Close'); var _Close2 = _interopRequireDefault(_Close);
-
-var _Notifications = require('@mui/icons-material/Notifications'); var _Notifications2 = _interopRequireDefault(_Notifications);
-
-function WavelengthAlert({
-  viewed,
-  width: width2 = "320px",
-  height: height2,
-  backgroundColor: backgroundColor2 = "#FBFBFB",
-  appName,
-  alertType = "Access Requested",
-  alertDescription = "Keenan Ray has requested to be added as a User to your App",
-  datatestid,
-  variant,
-  timeStamp,
-  url,
-  initiator,
-  id,
-  onClose
-}) {
-  const viewedStyles = viewed ? {
-    backgroundColor: "#DFDCDC",
-    border: "1px solid #A0A2A3",
-    iconColor: "#A0A2A3"
-  } : {
-    backgroundColor: backgroundColor2,
-    border: "1px solid rgba(2, 136, 209, 1)",
-    iconColor: "rgba(2, 136, 209, 1)"
-  };
-  const baseContainerStyle = {
-    width: width2,
-    height: height2 || "fit-content",
-    backgroundColor: viewedStyles.backgroundColor,
-    fontFamily: "Roboto, sans-serif",
-    border: viewedStyles.border,
-    borderRadius: "4px",
-    display: "flex",
-    flexDirection: "row",
-    boxSizing: "border-box",
-    alignItems: "flex-start",
-    padding: "12px 16px 10px 16px",
-    color: "#1E4620",
-    position: variant === "civilized" ? "relative" : void 0
-  };
-  const iconStyle = {
-    width: "24px",
-    padding: "0px",
-    color: viewedStyles.iconColor
-  };
-  if (variant === "caveman") {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { role: "alert", id, "data-testid": datatestid, style: baseContainerStyle, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Notifications2.default, { sx: iconStyle }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "a", { href: url, style: { display: "flex", flexDirection: "column", gap: "4px", width: "250px", marginLeft: "12px", textDecoration: "none", color: baseContainerStyle.color }, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { style: { fontSize: "1rem", lineHeight: "150%", letterSpacing: "0.15px", fontWeight: 550 }, children: timeStamp }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "div",
-          {
-            style: {
-              fontSize: ".875rem",
-              fontWeight: 400,
-              lineHeight: "143%",
-              display: "-webkit-box",
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: "vertical",
-              overflow: "hidden",
-              textOverflow: "ellipsis"
-            },
-            children: alertType
-          }
-        )
-      ] }),
-      onClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { sx: { padding: "0px", width: "20px" }, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) })
-    ] });
-  } else if (variant === "basic") {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { role: "alert", id, "data-testid": datatestid, style: baseContainerStyle, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Notifications2.default, { sx: iconStyle }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "a", { href: url, style: { display: "flex", flexDirection: "column", gap: "4px", width: "250px", marginLeft: "12px", textDecoration: "none", color: baseContainerStyle.color }, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { style: { fontSize: "14px", lineHeight: "150%", letterSpacing: "0.15px", fontWeight: 500 }, children: timeStamp }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "16px", fontWeight: 550, lineHeight: "24px" }, children: alertType }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 }, children: [
-          "App: ",
-          appName
-        ] })
-      ] }),
-      onClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { sx: { padding: "0px", width: "20px" }, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) })
-    ] });
-  } else {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { role: "alert", id, "data-testid": datatestid, style: baseContainerStyle, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Notifications2.default, { sx: iconStyle }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "a", { href: url, style: { display: "flex", flexDirection: "column", gap: "7px", width: "250px", marginLeft: "12px", textDecoration: "none", color: baseContainerStyle.color }, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { style: { fontSize: "16px", lineHeight: "24px", letterSpacing: "0.15px", fontWeight: 550 }, children: alertType }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "14px", fontWeight: 400, lineHeight: "20px", letterSpacing: "0.25px", width: "200px" }, children: alertDescription }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 }, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontWeight: 550 }, children: "Initiator: " }),
-          " ",
-          initiator
-        ] })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        "div",
-        {
-          style: {
-            textAlign: "center",
-            display: "flex",
-            flexDirection: "column",
-            position: "absolute",
-            right: "15px",
-            bottom: "12px"
-          },
-          className: "icon-btn-container",
-          children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { sx: { padding: "3px" }, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.SvgIcon, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#4E4E4F", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" }) }) }) }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "11px" }, children: "Dismiss" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { top: "6px", right: "15px", position: "absolute", fontSize: "11px", color: "#797979" }, children: timeStamp })
-    ] });
-  }
-}
-
 // src/components/footers/WavelengthFooter/WavelengthFooter.tsx
 
 
@@ -5758,7 +5477,7 @@ function WavelengthConfirmationModal(props) {
 
 // src/components/modals/WavelengthContentModal.tsx
 
-
+var _Close = require('@mui/icons-material/Close'); var _Close2 = _interopRequireDefault(_Close);
 
 function WavelengthContentModal(props) {
   const { show, setShow, handleContentModalOnConfirmProp } = props;
@@ -7177,7 +6896,25 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
   ] });
 };
 
+// src/components/samples/SampleComponent.tsx
+
 
+var SampleComponent2 = ({
+  testProp,
+  children,
+  ...rest
+  // This rest operator includes className, style, onClick, etc.
+}) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    if (testProp !== void 0) {
+      el.setAttribute("test-prop", testProp);
+    }
+  }, [testProp]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "sample-component", { ref, ...rest, children });
+};
 
 
 
@@ -7227,7 +6964,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
 
 
 
-exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton2; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar2; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SampleComponent = SampleComponent2; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton2; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar2; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js: