@wavelengthusaf/components 2.7.2 → 2.8.0

package/README.md

@@ -14,44 +14,54 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 2.7.3
+
+- 4/8/2025
+- Updated `WavelengthBanner` with various tweaks; added several props
+
+### 2.7.2
+
+- 4/4/2025
+- Updated `WavelengthTitleBar` to be a standard `<div>` instead of an svg. Also added several props for further customization. 
+
 ### 2.7.1
 
 - 4/1/2025
-- Updated WavelengthTextField component to have another variant.
+- Updated `WavelengthTextField` component to have another variant.
 
 ### 2.7.0
 
 - 3/24/2025
-- Added a Comment Component
+- Added the `WavelengthCommentDisplay` component
 
 ### 2.6.0
 
-- Added a new component, WavelengthProgressBar
+- Added a new component, `WavelengthProgressBar`
 
 ### 2.5.1
 
 - 03/12/2025
-- Added shrink prop to text field component
+- Added shrink prop to `WavelengthTextField` component
 - Changed message prop in the snackbar component to be a react or jsx element
 
 ### 2.5.0
 
 - 03/06/2025
-- Added a new component, WavelengthDragAndDrop
-- Updated WavelengthTextField component to take in a prop called type
+- Added a new component, `WavelengthDragAndDrop`
+- Updated `WavelengthTextField` component to take in a prop called type
 
 ### 2.4.0
 
 - 03/03/2025
-- Added 2 new components, WavelengthStyledButton, and WavelengthTextField
+- Added 2 new components, `WavelengthStyledButton`, and `WavelengthTextField`
 - Updated the confirmation modal to include more props making it more customizable
 - Updated documentation to reflect these changes
 
 ### 2.3.5
 
-- Updated WavelengthDropdown by adding default values to some of the props
+- Updated `WavelengthDropdown` by adding default values to some of the props
 - Fixed bugs related to WavelengthSearchbar, no longer 2 closing icons for some configurations
-- Updated WavelengthPopupMenu , each list item can have a hover color for text, also fixed underlining of link type issue
+- Updated `WavelengthPopupMenu`, each list item can have a hover color for text, also fixed underlining of link type issue
 - Standard Snackbar is not aligned properly, the Snackbars with icons are also aligned properly
 
 ### 2.3.4

package/dist/cjs/index.cjs

@@ -4989,50 +4989,75 @@ function WavelengthTitleBar2({ titleText, subtitleText, textColor, textShadow })
 
 // src/components/headers/WavelengthTitleBar/WavelengthBanner.tsx
 
-function WavelengthBanner({ classification, control, headerColor, textColor, id }) {
-  const palette2 = getPalette();
-  if (classification === "unclassified") {
-    if (control && control.includes("cui")) {
-      headerColor = headerColor ? headerColor : "#502b85";
-      textColor = textColor ? textColor : "white";
-    }
-    headerColor = headerColor ? headerColor : "#007a33";
-    textColor = textColor ? textColor : "white";
-  } else if (classification === "controlled" || classification === "controlled unclassified information" || classification === "cui" || classification === "u") {
-    headerColor = headerColor ? headerColor : "#502b85";
-    textColor = textColor ? textColor : "white";
-  } else if (classification === "confidential" || classification === "c") {
-    headerColor = headerColor ? headerColor : "#0033a0";
-    textColor = textColor ? textColor : "white";
-  } else if (classification === "secret" || classification === "s") {
-    headerColor = headerColor ? headerColor : "#c8102e";
-    textColor = textColor ? textColor : "white";
-  } else if (classification === "top secret" || classification === "ts") {
-    if (control && control.includes("sci")) {
-      headerColor = headerColor ? headerColor : "#fce83a";
-      textColor = textColor ? textColor : "black";
-    }
-    headerColor = headerColor ? headerColor : "#ff8c00";
-    textColor = textColor ? textColor : "black";
-  } else if (classification === "" || classification === null || classification === void 0) {
-    classification = "CLASSIFICATION//CONTROL";
-    headerColor = palette2.primary;
-    textColor = palette2.secondary;
-  } else {
-    headerColor = headerColor ? headerColor : palette2.primary;
-    textColor = textColor ? textColor : palette2.secondary;
+
+// src/web-components/wavelength-banner.tsx
+var WavelengthBanner = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["header-text", "header-color", "text-color", "opacity", "z-index", "id"];
   }
-  if (control && control.length === 0) {
-    classification = `${classification}`;
-  } else if (control && control.length === 1) {
-    classification = `${classification}//${control[0]}`;
-  } else if (control) {
-    classification = `${classification}//${control[0]}`;
-    for (let i = 1; i < control.length; i++) {
-      classification = `${classification}/${control[i]}`;
-    }
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style3 = document.createElement("style");
+    style3.textContent = `
+        :host {
+          display: block;
+          width: 100%;
+        }
+  
+        .banner {
+          width: 100%;
+          text-align: center;
+          font-weight: normal;
+          font-family: sans-serif;
+          font-size: 1rem;
+        }
+      `;
+    this.container = document.createElement("div");
+    this.container.classList.add("banner");
+    this.textElement = document.createElement("p");
+    this.container.appendChild(this.textElement);
+    shadow.appendChild(style3);
+    shadow.appendChild(this.container);
+  }
+  connectedCallback() {
+    this.updateAttributes();
+  }
+  attributeChangedCallback() {
+    this.updateAttributes();
+  }
+  updateAttributes() {
+    const headerText = this.getAttribute("header-text") || "CLASSIFICATION//CONTROL";
+    const headerColor = this.getAttribute("header-color") || "#4373aa";
+    const textColor = this.getAttribute("text-color") || "#ffffff";
+    const opacity = this.getAttribute("opacity") || "1";
+    const zIndex = this.getAttribute("z-index") || "10";
+    const id = this.getAttribute("id");
+    this.container.style.backgroundColor = headerColor;
+    this.container.style.opacity = opacity;
+    this.container.style.zIndex = zIndex;
+    if (id) this.container.id = id;
+    this.textElement.textContent = headerText.toUpperCase();
+    this.textElement.style.color = textColor;
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { width: "100%", backgroundColor: headerColor }, id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { width: "100%", color: textColor, textAlign: "center" }, children: classification.toUpperCase() }) });
+};
+customElements.define("wavelength-banner", WavelengthBanner);
+
+// src/components/headers/WavelengthTitleBar/WavelengthBanner.tsx
+
+function WavelengthBanner2({ headerText = "CLASSIFICATION//CONTROL", headerColor = "#000000", textColor = "#FFFFFF", opacity = 1, zIndex = 10, id }) {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (ref.current) {
+      ref.current.setAttribute("header-text", headerText);
+      ref.current.setAttribute("header-color", headerColor);
+      ref.current.setAttribute("text-color", textColor);
+      ref.current.setAttribute("opacity", String(opacity));
+      ref.current.setAttribute("z-index", String(zIndex));
+      if (id) ref.current.setAttribute("id", id);
+    }
+  }, [headerText, headerColor, textColor, opacity, zIndex, id]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-banner", { ref });
 }
 
 // src/components/CSFD/ManyPlanes.tsx
@@ -6089,6 +6114,7 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     );
   }
 }
+var WavelengthPagination_default = DefaultPagination;
 
 // src/components/TextField/WavelengthTextField.tsx
 
@@ -6222,6 +6248,368 @@ function WavelengthTextField(props) {
   return null;
 }
 
+// src/components/DataTable/WavelengthDataTable.tsx
+
+
+
+var ModalInputDiv = _styledcomponents2.default.div`
+  display: flex;
+  flex-direction: column; /* Corrected this line */
+  gap: 3px;
+  margin: 3px;
+
+  label {
+    align-self: flex-start;
+    color: #c6c7cc;
+  }
+
+  input,
+  select {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    border-bottom: 2px solid #c6c7cc;
+
+    &:hover {
+      border-bottom: 2px solid black;
+    }
+
+    &:focus {
+      border-bottom: 2px solid #8fd8ff;
+    }
+  }
+`;
+var ModalOverlay = _styledcomponents2.default.div`
+  position: fixed;
+  bottom: 19%;
+  right: 15%;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+`;
+var ModalWrapper = _styledcomponents2.default.div`
+  background-color: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  position: relative;
+  min-width: 300px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+`;
+var ModalClose = _styledcomponents2.default.button`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+  cursor: pointer;
+  border: none;
+  background: none;
+  z-index: 2;
+`;
+var TableHeadStyle = _styledcomponents2.default.th`
+  position: relative;
+`;
+var KebabMenu = _styledcomponents2.default.div`
+  display: inline-block;
+  position: absolute;
+  right: 0;
+  top: 2px;
+`;
+var KebabIcon = _styledcomponents2.default.div`
+  cursor: pointer;
+  font-size: 20px;
+  padding: 5px;
+
+  &:hover,
+  &:focus {
+    color: #45beff;
+  }
+  &:active {
+    color: #8fd8ff;
+  }
+`;
+var MenuOptions = _styledcomponents2.default.ul`
+  position: absolute;
+  right: 0;
+  top: 100%;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    padding: 10px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #ddd;
+    }
+  }
+`;
+var StyledBoxDiv = _styledcomponents2.default.div`
+  background-color: white;
+  width: 700px;
+  height: 480px;
+  position: relative;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+`;
+var StyledNavBoxDiv = _styledcomponents2.default.div`
+  background-color: white;
+  width: 700px;
+  display: flex; /* Make parent a flex-container */
+  justify-content: center;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+
+  box-shadow: 0.5px 3px 5px black;
+`;
+var StyledTd = _styledcomponents2.default.td`
+  border-top: 1px solid #c6c7cc;
+  border-bottom: 1px solid #c6c7cc;
+  padding: 10px 15px;
+  vertical-align: middle;
+`;
+var StyledTableTwo = _styledcomponents2.default.table`
+  width: 95%;
+  height: 95%;
+  border-collapse: collapse;
+  background-color: white;
+  color: black;
+
+  margin-left: auto;
+  margin-right: auto;
+
+  th {
+    position: relative; /* Enable absolute positioning of pseudo-elements */
+    padding: 10px 15px;
+
+    /* Create the partial right border */
+    &:not(:last-child):after {
+      content: ""; /* Ensure the pseudo-element is visible */
+      position: absolute;
+      right: 0; /* Position it on the right side of the th */
+      top: 50%; /* Position it in the vertical center */
+      height: 50%; /* Set the height of the border to be half the height of th */
+      border-right: 1px solid #c6c7cc;
+      transform: translateY(-50%); /* Center it vertically */
+    }
+  }
+`;
+var StyledInput = _styledcomponents2.default.input`
+  height: 100%;
+  width: 100%;
+  outline: none;
+  border: none;
+  color: #8fd8ff;
+`;
+var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
+  const [localData, setLocalData] = _react.useState.call(void 0, data || []);
+  const copiedArray = [...data || []];
+  const [editingId, setEditingId] = _react.useState.call(void 0, null);
+  const [editedColumnKey, setEditedColumnKey] = _react.useState.call(void 0, null);
+  const [editedValue, setEditedValue] = _react.useState.call(void 0, "");
+  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', _37 => _37[0], 'optionalAccess', _38 => _38.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);
+  const menuRef = _react.useRef.call(void 0, null);
+  const modalRef = _react.useRef.call(void 0, null);
+  function isNumeric(value) {
+    return /^\d+$/.test(value);
+  }
+  const handleChange = (event) => {
+    setSelectedValue(event.target.value);
+    setLocalData(copiedArray);
+  };
+  _react.useEffect.call(void 0, () => {
+    if (!selectedValue || searchItem === "") {
+      setLocalData(copiedArray);
+      setNoRowsOpen(false);
+      return;
+    }
+    if (isNumeric(searchItem)) {
+      const filteredItems = localData.filter((item) => item[selectedValue].toString().includes(searchItem));
+      setLocalData(filteredItems);
+      if (filteredItems.length === 0) {
+        setNoRowsOpen(true);
+      } else {
+        setNoRowsOpen(false);
+      }
+    } else {
+      const filteredItems = localData.filter((item) => item[selectedValue].toString().toLowerCase().includes(searchItem.toLowerCase()));
+      if (filteredItems.length === 0) {
+        setNoRowsOpen(true);
+      } else {
+        setLocalData(filteredItems);
+        setNoRowsOpen(false);
+      }
+    }
+  }, [selectedValue, searchItem]);
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+  _react.useEffect.call(void 0, () => {
+    const handleClickOutside = (event) => {
+      if (isModalOpen && modalRef.current && !modalRef.current.contains(event.target)) {
+        closeModal();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isModalOpen]);
+  const toggleMenu = (key) => {
+    setIsOpen(!isOpen);
+    setEditingMenuKey(key);
+  };
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentPageData = localData.filter((_, index) => index >= indexOfFirstItem && index < indexOfLastItem);
+  const [sortOrder, setSortOrder] = _react.useState.call(void 0, "asc");
+  const handleSort = (column, sortType) => {
+    const sortedItems = [...localData].sort((a, b) => {
+      const valueA = a[column];
+      const valueB = b[column];
+      if (typeof valueA === "string" && typeof valueB === "string") {
+        if (sortType === "asc") {
+          return valueA.localeCompare(valueB);
+        } else {
+          return valueB.localeCompare(valueA);
+        }
+      } else if (typeof valueA === "number" && typeof valueB === "number") {
+        if (sortType === "asc") {
+          return valueA - valueB;
+        } else {
+          return valueB - valueA;
+        }
+      } else {
+        return 0;
+      }
+    });
+    setLocalData(sortedItems);
+    setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+  };
+  const handleEdit = (id, value, columnKey) => {
+    setEditingId(id);
+    setEditedValue(value);
+    setEditedColumnKey(columnKey);
+  };
+  const saveEdit = (id, editedValue2, columnKey) => {
+    setLocalData(localData.map((item) => id === item.id ? { ...item, [columnKey]: editedValue2 } : item));
+    setEditingId(null);
+  };
+  const handleCancel = () => {
+    setEditingId(null);
+  };
+  const headers = columns.map((column, index) => {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, TableHeadStyle, { children: [
+      column.title,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, KebabMenu, { ref: menuRef, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          KebabIcon,
+          {
+            title: `KebabIcon-${index}`,
+            onClick: () => {
+              toggleMenu(column.key);
+            },
+            children: "\u22EE"
+          }
+        ),
+        isOpen && editingMenuKey === column.key && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, MenuOptions, { children: [
+          sortOrder === "asc" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\u2B06" }),
+            " Sort ASC"
+          ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\u2B07" }),
+            " Sort DESC"
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\u23F7" }),
+            " Filter"
+          ] }),
+          isModalOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalOverlay, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalWrapper, { ref: modalRef, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalInputDiv, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "filterSelectId", children: "Columns: " }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { children: item.key }, item.key)) })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalInputDiv, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "filterInputId", children: "Values: " }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "input",
+                {
+                  title: `Inputfiltertest-${index}`,
+                  id: "filterInputId",
+                  type: isNumeric(searchItem) ? "number" : "text",
+                  value: searchItem,
+                  onKeyDown: (e) => {
+                    if (e.key === "Backspace") {
+                      setLocalData(copiedArray);
+                    }
+                  },
+                  onChange: (e) => setSearchItem(e.target.value)
+                }
+              )
+            ] })
+          ] }) })
+        ] })
+      ] }, index)
+    ] }, `headCell-${index}`);
+  });
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _39 => _39.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', _40 => _40.map, 'call', _41 => _41((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,
+      {
+        title: `styledRow-${item.id}-${column.key}-${index2}`,
+        type: "text",
+        value: editedValue,
+        onChange: (e) => setEditedValue(e.target.value),
+        onBlur: () => saveEdit(item.id, editedValue, column.key),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            saveEdit(item.id, editedValue, column.key);
+          } else if (e.key === "Escape") {
+            handleCancel();
+          }
+        },
+        autoFocus: true
+      }
+    ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => handleEdit(item.id, item[column.key], column.key), children: item[column.key] }) }, index2);
+  }) }, item.id))]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledTableTwo, { title: "StyledTable", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: headers }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: rows })
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledNavBoxDiv, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WavelengthPagination_default, { totalPages, currentPageNumber: currentPage, onPageChange: setCurrentPage, style: "circular" }) })
+  ] });
+};
+
+
 
 
 
@@ -6268,7 +6656,7 @@ function WavelengthTextField(props) {
 
 
 
-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.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; 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;
+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.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; 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: