@wavelengthusaf/components 4.12.0 → 4.15.0

package/dist/cjs/index.cjs

@@ -29,24 +29,24 @@ var require_react_is_production_min = __commonJS({
   "../../../node_modules/prop-types/node_modules/react-is/cjs/react-is.production.min.js"(exports) {
     "use strict";
     var b = "function" === typeof Symbol && Symbol.for;
-    var c = b ? Symbol.for("react.element") : 60103;
-    var d = b ? Symbol.for("react.portal") : 60106;
-    var e = b ? Symbol.for("react.fragment") : 60107;
-    var f = b ? Symbol.for("react.strict_mode") : 60108;
-    var g = b ? Symbol.for("react.profiler") : 60114;
-    var h = b ? Symbol.for("react.provider") : 60109;
-    var k = b ? Symbol.for("react.context") : 60110;
-    var l = b ? Symbol.for("react.async_mode") : 60111;
-    var m = b ? Symbol.for("react.concurrent_mode") : 60111;
-    var n = b ? Symbol.for("react.forward_ref") : 60112;
-    var p = b ? Symbol.for("react.suspense") : 60113;
-    var q = b ? Symbol.for("react.suspense_list") : 60120;
-    var r = b ? Symbol.for("react.memo") : 60115;
-    var t = b ? Symbol.for("react.lazy") : 60116;
-    var v = b ? Symbol.for("react.block") : 60121;
-    var w = b ? Symbol.for("react.fundamental") : 60117;
-    var x = b ? Symbol.for("react.responder") : 60118;
-    var y = b ? Symbol.for("react.scope") : 60119;
+    var c = b ? /* @__PURE__ */ Symbol.for("react.element") : 60103;
+    var d = b ? /* @__PURE__ */ Symbol.for("react.portal") : 60106;
+    var e = b ? /* @__PURE__ */ Symbol.for("react.fragment") : 60107;
+    var f = b ? /* @__PURE__ */ Symbol.for("react.strict_mode") : 60108;
+    var g = b ? /* @__PURE__ */ Symbol.for("react.profiler") : 60114;
+    var h = b ? /* @__PURE__ */ Symbol.for("react.provider") : 60109;
+    var k = b ? /* @__PURE__ */ Symbol.for("react.context") : 60110;
+    var l = b ? /* @__PURE__ */ Symbol.for("react.async_mode") : 60111;
+    var m = b ? /* @__PURE__ */ Symbol.for("react.concurrent_mode") : 60111;
+    var n = b ? /* @__PURE__ */ Symbol.for("react.forward_ref") : 60112;
+    var p = b ? /* @__PURE__ */ Symbol.for("react.suspense") : 60113;
+    var q = b ? /* @__PURE__ */ Symbol.for("react.suspense_list") : 60120;
+    var r = b ? /* @__PURE__ */ Symbol.for("react.memo") : 60115;
+    var t = b ? /* @__PURE__ */ Symbol.for("react.lazy") : 60116;
+    var v = b ? /* @__PURE__ */ Symbol.for("react.block") : 60121;
+    var w = b ? /* @__PURE__ */ Symbol.for("react.fundamental") : 60117;
+    var x = b ? /* @__PURE__ */ Symbol.for("react.responder") : 60118;
+    var y = b ? /* @__PURE__ */ Symbol.for("react.scope") : 60119;
     function z(a) {
       if ("object" === typeof a && null !== a) {
         var u = a.$$typeof;
@@ -145,24 +145,24 @@ var require_react_is_development = __commonJS({
       (function() {
         "use strict";
         var hasSymbol = typeof Symbol === "function" && Symbol.for;
-        var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for("react.element") : 60103;
-        var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for("react.portal") : 60106;
-        var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for("react.fragment") : 60107;
-        var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for("react.strict_mode") : 60108;
-        var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for("react.profiler") : 60114;
-        var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for("react.provider") : 60109;
-        var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for("react.context") : 60110;
-        var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for("react.async_mode") : 60111;
-        var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for("react.concurrent_mode") : 60111;
-        var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for("react.forward_ref") : 60112;
-        var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for("react.suspense") : 60113;
-        var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for("react.suspense_list") : 60120;
-        var REACT_MEMO_TYPE = hasSymbol ? Symbol.for("react.memo") : 60115;
-        var REACT_LAZY_TYPE = hasSymbol ? Symbol.for("react.lazy") : 60116;
-        var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for("react.block") : 60121;
-        var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for("react.fundamental") : 60117;
-        var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for("react.responder") : 60118;
-        var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for("react.scope") : 60119;
+        var REACT_ELEMENT_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.element") : 60103;
+        var REACT_PORTAL_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.portal") : 60106;
+        var REACT_FRAGMENT_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.fragment") : 60107;
+        var REACT_STRICT_MODE_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.strict_mode") : 60108;
+        var REACT_PROFILER_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.profiler") : 60114;
+        var REACT_PROVIDER_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.provider") : 60109;
+        var REACT_CONTEXT_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.context") : 60110;
+        var REACT_ASYNC_MODE_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.async_mode") : 60111;
+        var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.concurrent_mode") : 60111;
+        var REACT_FORWARD_REF_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.forward_ref") : 60112;
+        var REACT_SUSPENSE_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.suspense") : 60113;
+        var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.suspense_list") : 60120;
+        var REACT_MEMO_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.memo") : 60115;
+        var REACT_LAZY_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.lazy") : 60116;
+        var REACT_BLOCK_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.block") : 60121;
+        var REACT_FUNDAMENTAL_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.fundamental") : 60117;
+        var REACT_RESPONDER_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.responder") : 60118;
+        var REACT_SCOPE_TYPE = hasSymbol ? /* @__PURE__ */ Symbol.for("react.scope") : 60119;
         function isValidElementType(type) {
           return typeof type === "string" || typeof type === "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
           type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === "object" && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
@@ -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;
@@ -976,21 +976,20 @@ var require_prop_types = __commonJS({
 var require_react_is_production = __commonJS({
   "../../../node_modules/react-is/cjs/react-is.production.js"(exports) {
     "use strict";
-    var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element");
-    var REACT_PORTAL_TYPE = Symbol.for("react.portal");
-    var REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
-    var REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode");
-    var REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-    Symbol.for("react.provider");
-    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer");
-    var REACT_CONTEXT_TYPE = Symbol.for("react.context");
-    var REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
-    var REACT_SUSPENSE_TYPE = Symbol.for("react.suspense");
-    var REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list");
-    var REACT_MEMO_TYPE = Symbol.for("react.memo");
-    var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-    var REACT_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition");
-    var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
+    var REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for("react.transitional.element");
+    var REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for("react.portal");
+    var REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment");
+    var REACT_STRICT_MODE_TYPE = /* @__PURE__ */ Symbol.for("react.strict_mode");
+    var REACT_PROFILER_TYPE = /* @__PURE__ */ Symbol.for("react.profiler");
+    var REACT_CONSUMER_TYPE = /* @__PURE__ */ Symbol.for("react.consumer");
+    var REACT_CONTEXT_TYPE = /* @__PURE__ */ Symbol.for("react.context");
+    var REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref");
+    var REACT_SUSPENSE_TYPE = /* @__PURE__ */ Symbol.for("react.suspense");
+    var REACT_SUSPENSE_LIST_TYPE = /* @__PURE__ */ Symbol.for("react.suspense_list");
+    var REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo");
+    var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
+    var REACT_VIEW_TRANSITION_TYPE = /* @__PURE__ */ Symbol.for("react.view_transition");
+    var REACT_CLIENT_REFERENCE = /* @__PURE__ */ Symbol.for("react.client.reference");
     function typeOf(object) {
       if ("object" === typeof object && null !== object) {
         var $$typeof = object.$$typeof;
@@ -1113,9 +1112,7 @@ var require_react_is_development2 = __commonJS({
           }
         }
       }
-      var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-      Symbol.for("react.provider");
-      var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
+      var REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = /* @__PURE__ */ Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = /* @__PURE__ */ Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = /* @__PURE__ */ Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = /* @__PURE__ */ Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = /* @__PURE__ */ Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = /* @__PURE__ */ Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo"), REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy"), REACT_VIEW_TRANSITION_TYPE = /* @__PURE__ */ Symbol.for("react.view_transition"), REACT_CLIENT_REFERENCE = /* @__PURE__ */ Symbol.for("react.client.reference");
       exports.ContextConsumer = REACT_CONSUMER_TYPE;
       exports.ContextProvider = REACT_CONTEXT_TYPE;
       exports.Element = REACT_ELEMENT_TYPE;
@@ -3731,7 +3728,7 @@ WavelengthExampleComponent.displayName = "WavelengthExampleComponent";
 
 
 var WavelengthSearch = ({
-  customStyle: customStyle2,
+  customStyle,
   width: width2,
   mode,
   fontSize,
@@ -3764,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);
@@ -3782,7 +3779,7 @@ var WavelengthSearch = ({
     syncAttribute("input-color", inputColor);
     syncAttribute("input-font", inputFont);
   }, [
-    customStyle2,
+    customStyle,
     width2,
     mode,
     fontSize,
@@ -5142,6 +5139,89 @@ var WavelengthToolTip = ({ color: color2, font, direction, children, textColor,
 };
 WavelengthToolTip.displayName = "WavelengthToolTip";
 
+// src/components/PageComponents/WavelengthBadge.tsx
+
+
+var WavelengthBadge = ({
+  variant,
+  badgeBorderRadius,
+  fontSize,
+  href,
+  badgeColor,
+  badgeTextColor,
+  badgeHoverColor,
+  badgeContent,
+  badgeFont,
+  badgeSize,
+  textBoxWidth,
+  textBoxHeight,
+  textBoxBackgroundColor,
+  textBoxTextColor,
+  textBoxBorderColor,
+  textBoxBorderRadius,
+  textBoxHoverBorderColor,
+  item,
+  children,
+  customStyle,
+  ...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 updateAttribute = (attr, value) => {
+      if (value !== void 0 && value !== null && value !== "") {
+        el.setAttribute(attr, value.toString());
+      } else {
+        el.removeAttribute(attr);
+      }
+    };
+    updateAttribute("variant", variant);
+    updateAttribute("badge-border-radius", badgeBorderRadius);
+    updateAttribute("font-size", fontSize);
+    updateAttribute("href", href);
+    updateAttribute("badge-color", badgeColor);
+    updateAttribute("badge-text-color", badgeTextColor);
+    updateAttribute("badge-hover-color", badgeHoverColor);
+    updateAttribute("text-box-width", textBoxWidth);
+    updateAttribute("text-box-height", textBoxHeight);
+    updateAttribute("text-box-background-color", textBoxBackgroundColor);
+    updateAttribute("text-box-text-color", textBoxTextColor);
+    updateAttribute("text-box-border-color", textBoxBorderColor);
+    updateAttribute("text-box-border-radius", textBoxBorderRadius);
+    updateAttribute("text-box-hover-border-color", textBoxHoverBorderColor);
+    updateAttribute("badge-font", badgeFont);
+    updateAttribute("badge-content", _optionalChain([badgeContent, 'optionalAccess', _12 => _12.toString, 'call', _13 => _13()]));
+    updateAttribute("badge-size", badgeSize);
+  }, [
+    variant,
+    badgeBorderRadius,
+    fontSize,
+    href,
+    badgeColor,
+    badgeTextColor,
+    badgeHoverColor,
+    badgeContent,
+    badgeFont,
+    badgeSize,
+    textBoxWidth,
+    textBoxHeight,
+    textBoxBackgroundColor,
+    textBoxTextColor,
+    textBoxBorderColor,
+    textBoxBorderRadius,
+    textBoxHoverBorderColor,
+    item,
+    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 }),
+    item || children
+  ] });
+};
+WavelengthBadge.displayName = "WavelengthBadge";
+
 // src/components/footers/WavelengthFooter/WavelengthFooter.tsx
 
 var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
@@ -5203,7 +5283,7 @@ function useStableCallback(fn) {
   _react.useEffect.call(void 0, () => {
     fnRef.current = fn;
   }, [fn]);
-  return (...args) => _optionalChain([fnRef, 'access', _12 => _12.current, 'optionalCall', _13 => _13(...args)]);
+  return (...args) => _optionalChain([fnRef, 'access', _14 => _14.current, 'optionalCall', _15 => _15(...args)]);
 }
 function WavelengthFormInner(props, ref) {
   const {
@@ -5243,7 +5323,7 @@ function WavelengthFormInner(props, ref) {
     if (!el) return;
     let finalSchema = schema;
     if (placeholders) {
-      const shape2 = _optionalChain([schema, 'optionalAccess', _14 => _14.shape]);
+      const shape2 = _optionalChain([schema, 'optionalAccess', _16 => _16.shape]);
       if (shape2) {
         const overrides = {};
         for (const [key, ph] of Object.entries(placeholders)) {
@@ -5276,15 +5356,15 @@ function WavelengthFormInner(props, ref) {
     if (!el) return;
     const handleChange = (e) => {
       const detail = e.detail;
-      _optionalChain([onChangeStable, 'optionalCall', _15 => _15(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _16 => _16.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _17 => _17.issues]), () => ( [])))]);
+      _optionalChain([onChangeStable, 'optionalCall', _17 => _17(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _18 => _18.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _19 => _19.issues]), () => ( [])))]);
     };
     const handleValid = (e) => {
       const detail = e.detail;
-      _optionalChain([onValidStable, 'optionalCall', _18 => _18(_optionalChain([detail, 'optionalAccess', _19 => _19.value]), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _20 => _20.issues]), () => ( [])))]);
+      _optionalChain([onValidStable, 'optionalCall', _20 => _20(_optionalChain([detail, 'optionalAccess', _21 => _21.value]), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _22 => _22.issues]), () => ( [])))]);
     };
     const handleInvalid = (e) => {
       const detail = e.detail;
-      _optionalChain([onInvalidStable, 'optionalCall', _21 => _21(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _22 => _22.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _23 => _23.issues]), () => ( [])))]);
+      _optionalChain([onInvalidStable, 'optionalCall', _23 => _23(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _24 => _24.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _25 => _25.issues]), () => ( [])))]);
     };
     el.addEventListener("form-change", handleChange);
     el.addEventListener("form-valid", handleValid);
@@ -5306,8 +5386,8 @@ function WavelengthFormInner(props, ref) {
   _react.useImperativeHandle.call(void 0, 
     ref,
     () => ({
-      validate: () => _nullishCoalesce(_optionalChain([hostRef, 'access', _24 => _24.current, 'optionalAccess', _25 => _25.validate, 'optionalCall', _26 => _26()]), () => ( false)),
-      getValue: () => _optionalChain([hostRef, 'access', _27 => _27.current, 'optionalAccess', _28 => _28.value]),
+      validate: () => _nullishCoalesce(_optionalChain([hostRef, 'access', _26 => _26.current, 'optionalAccess', _27 => _27.validate, 'optionalCall', _28 => _28()]), () => ( false)),
+      getValue: () => _optionalChain([hostRef, 'access', _29 => _29.current, 'optionalAccess', _30 => _30.value]),
       setValue: (v) => {
         if (hostRef.current) hostRef.current.value = v;
       }
@@ -5446,7 +5526,7 @@ var WavelengthPlaneTrail = ({
   id,
   children,
   // Style argument
-  customStyle: customStyle2,
+  customStyle,
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
@@ -5454,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);
@@ -5467,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";
 
@@ -5476,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', _29 => _29.textObj, 'optionalAccess', _30 => _30.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', _31 => _31.textObj, 'optionalAccess', _32 => _32.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";
 
@@ -5523,147 +5605,45 @@ function WavelengthContentModal(props) {
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Dialog, { "data-testid": "testId-WavelengthContentModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", id: props.id, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { display: "flex", alignItems: "center", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _33 => _33.textObj, 'optionalAccess', _34 => _34.title]) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _35 => _35.textObj, 'optionalAccess', _36 => _36.title]) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) }) })
     ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _35 => _35.textObj, 'optionalAccess', _36 => _36.dialog]) }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _37 => _37.textObj, 'optionalAccess', _38 => _38.purpose]) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _37 => _37.textObj, 'optionalAccess', _38 => _38.dialog]) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _39 => _39.textObj, 'optionalAccess', _40 => _40.purpose]) }) })
   ] });
 }
 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
@@ -5806,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;
@@ -5818,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);
@@ -5827,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;
@@ -5841,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
 
 
@@ -5848,7 +5924,7 @@ var WavelengthPagination = ({
   testProp,
   children,
   // Style argument
-  customStyle: customStyle2,
+  customStyle,
   variant,
   textColor,
   font,
@@ -5875,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 || "");
@@ -5887,8 +5963,8 @@ var WavelengthPagination = ({
     syncAttribute("active-text-color", activeTextColor || "");
     syncAttribute("background-color", backgroundColor2 || "");
     syncAttribute("disabled-color", disabledColor || "");
-    syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _39 => _39.toString, 'call', _40 => _40()]) || "");
-    syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _41 => _41.toString, 'call', _42 => _42()]) || "");
+    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);
@@ -6417,7 +6493,7 @@ 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);
 
@@ -6583,6 +6659,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
     required,
     forceError,
     disabled,
+    multiLine,
     width: width2,
     height: height2,
     padding: padding2,
@@ -6603,7 +6680,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', _43 => _43.current, 'optionalAccess', _44 => _44.validate, 'optionalCall', _45 => _45(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;
@@ -6645,6 +6722,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       set("helper-color", helperColor);
       set("label", label);
       set("disabled", disabled ? "" : void 0);
+      set("multi-line", multiLine ? "" : void 0);
     }, [
       id,
       name,
@@ -6674,13 +6752,14 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       focusColor,
       helperColor,
       label,
-      disabled
+      disabled,
+      multiLine
     ]);
     _react.useEffect.call(void 0, () => {
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _46 => _46.shadowRoot, 'optionalAccess', _47 => _47.querySelector, 'call', _48 => _48("input")]);
+        const input = _optionalChain([el, 'access', _50 => _50.shadowRoot, 'optionalAccess', _51 => _51.querySelector, 'call', _52 => _52("input, textarea")]);
         if (input) {
           onBlurCallback();
         }
@@ -6692,7 +6771,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _49 => _49.shadowRoot, 'optionalAccess', _50 => _50.querySelector, 'call', _51 => _51("input")]);
+        const input = _optionalChain([el, 'access', _53 => _53.shadowRoot, 'optionalAccess', _54 => _54.querySelector, 'call', _55 => _55("input, textarea")]);
         if (input) {
           const synthetic = {
             ...e,
@@ -6895,7 +6974,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', _52 => _52[0], 'optionalAccess', _53 => _53.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);
@@ -7049,7 +7128,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _54 => _54.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', _55 => _55.map, 'call', _56 => _56((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,
       {
@@ -7295,7 +7374,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     }
     if (sortSubOrder) {
       result.map(
-        (item) => _optionalChain([item, 'access', _57 => _57.Details, 'optionalAccess', _58 => _58.fileObjects, 'access', _59 => _59.sort, 'call', _60 => _60((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") {
@@ -7356,24 +7435,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', _61 => _61.Details, 'optionalAccess', _62 => _62.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _63 => _63.Details, 'optionalAccess', _64 => _64.fileObjects, 'access', _65 => _65.map, 'call', _66 => _66((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', _67 => _67.Details, 'optionalAccess', _68 => _68.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', _69 => _69.Details, 'optionalAccess', _70 => _70.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _71 => _71.Details, 'optionalAccess', _72 => _72.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', _73 => _73.Details, 'optionalAccess', _74 => _74.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _75 => _75.Details, 'optionalAccess', _76 => _76.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', _77 => _77.map, 'call', _78 => _78((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" }),
@@ -7427,7 +7506,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', _79 => _79.find, 'call', _80 => _80((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);
       }
@@ -7554,9 +7633,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', _81 => _81.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', _82 => _82.Details, 'optionalAccess', _83 => _83[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}`);
@@ -7566,7 +7645,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', _84 => _84.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', _85 => _85.map, 'call', _86 => _86((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) => {
@@ -8064,7 +8143,7 @@ var SampleComponent = ({
   testProp,
   children,
   // Style argument
-  customStyle: customStyle2,
+  customStyle,
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
@@ -8072,7 +8151,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);
     }
@@ -8234,7 +8313,9 @@ 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.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: