@wavelengthusaf/components 2.10.2 → 3.0.1

package/README.md

@@ -14,6 +14,30 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 3.0.1
+
+- 5/27/2025
+- Updated `WavelengthProgressBar` to be a web component; added several new props
+
+### 3.0.0
+
+- 5/16/2025
+- Renamed several components to include the word `Wavelength` in front of them. The following components have been renamed accordingly:
+
+<pre>
+    sliderCarousel --------> WavelengthSliderCarousel
+    GreenEllipse ----------> DELETED
+    ManyPlanes ------------> WavelengthManyPlanes
+    AppLogo ---------------> WavelengthAppLogo
+    DefaultIcon -----------> WavelengthDefaultIcon
+    NotAvailablePage ------> WavelengthNotAvailablePage
+    ButtonPagination ------> WavelengthButtonPagination
+    VariationPagination ---> WavelengthVariationPagination
+    WavelengthPagination --> WavelengthDefaultPagination
+    SearchTextField -------> WavelengthSearchTextField
+    TestSnackbar ----------> WavelengthTestSnackbar
+</pre>
+
 ### 2.10.2
 
 - 5/14/2025
@@ -44,7 +68,7 @@ npm install @wavelengthusaf/components
 ### 2.9.1
 
 - 5/02/2025
-- WavelengthButton updated; new props
+- `WavelengthButton` updated; new props
 - Minor bug fixes
 
 ### 2.9.0

package/dist/cjs/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var __create = Object.create;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1503,6 +1503,85 @@ if (!customElements.get("wavelength-button")) {
   customElements.define("wavelength-button", WavelengthButton);
 }
 
+// src/web-components/wavelength-progress-bar.ts
+var template2 = document.createElement("template");
+template2.innerHTML = `
+  <style>
+	.label {
+  	display: flex;
+  	justify-content: space-between;
+  	font-family: Arial, sans-serif;
+  	margin-bottom: 6px;
+	}
+	.progress-bar {
+  	background-color: #e0e0e0;
+  	border: 1px solid black;
+  	border-radius: 12px;
+  	overflow: hidden;
+  	position: relative;
+	}
+	.progress-fill {
+  	background-color: #1976d2;
+  	height: 100%;
+  	transition: width 0.3s ease-in-out;
+  	border-right: 1px solid black;
+	}
+  </style>
+  <div class="container">
+	<div class="label">
+  	<span class="name"></span>
+  	<span class="status"></span>
+	</div>
+	<div class="progress-bar">
+  	<div class="progress-fill"></div>
+	</div>
+  </div>
+`;
+var WavelengthProgressBar = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["value", "width", "height", "font-size", "font-color", "progress-border", "progress-color", "name"];
+  }
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.appendChild(template2.content.cloneNode(true));
+    this.container = shadow.querySelector(".container");
+    this.nameSpan = shadow.querySelector(".name");
+    this.statusSpan = shadow.querySelector(".status");
+    this.progressBar = shadow.querySelector(".progress-bar");
+    this.progressFill = shadow.querySelector(".progress-fill");
+  }
+  connectedCallback() {
+    this.updateRendering();
+  }
+  attributeChangedCallback() {
+    this.updateRendering();
+  }
+  updateRendering() {
+    const value = Number(_nullishCoalesce(this.getAttribute("value"), () => ( "0")));
+    const width2 = _nullishCoalesce(this.getAttribute("width"), () => ( "425px"));
+    const height2 = _nullishCoalesce(this.getAttribute("height"), () => ( "12px"));
+    const fontSize = _nullishCoalesce(this.getAttribute("font-size"), () => ( "inherit"));
+    const fontColor = _nullishCoalesce(this.getAttribute("font-color"), () => ( "#000000"));
+    const progressBorder = _nullishCoalesce(this.getAttribute("progress-border"), () => ( "10px solid black"));
+    const progressColor = _nullishCoalesce(this.getAttribute("progress-color"), () => ( "#1976d2"));
+    const name = _nullishCoalesce(this.getAttribute("name"), () => ( ""));
+    this.container.style.width = width2;
+    this.progressBar.style.width = width2;
+    this.progressBar.style.height = height2;
+    this.progressBar.style.border = progressBorder;
+    this.progressFill.style.width = `${Math.min(value, 100)}%`;
+    this.progressFill.style.backgroundColor = progressColor;
+    this.nameSpan.textContent = name;
+    this.statusSpan.textContent = value === 100 ? `Complete! - ${value}%` : `Uploading - ${value}%`;
+    this.nameSpan.style.fontSize = fontSize;
+    this.nameSpan.style.color = fontColor;
+    this.statusSpan.style.fontSize = fontSize;
+    this.statusSpan.style.color = fontColor;
+  }
+};
+customElements.define("wavelength-progress-bar", WavelengthProgressBar);
+
 // src/styles/fontBase64.tsx
 var goldmanFont = `@font-face {
     font-family: 'Goldman';
@@ -4431,13 +4510,13 @@ function WavelengthSearch({
   return void 0;
 }
 
-// src/components/search/SearchTextField.tsx
+// src/components/search/WavelengthSearchTextField.tsx
 
 
 
-function SearchTextField() {
+function WavelengthSearchTextField() {
   const palette2 = getPalette();
-  const SearchTextFields = _styled2.default.call(void 0, (0, _TextField2.default))(() => ({
+  const WavelengthSearchTextField2 = _styled2.default.call(void 0, (0, _TextField2.default))(() => ({
     "&.MuiTextField-root": {
       "& label.Mui-focused": {
         color: `${palette2.primary}`
@@ -4455,12 +4534,12 @@ function SearchTextField() {
       }
     }
   }));
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchTextFields, {});
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WavelengthSearchTextField2, {});
 }
 
-// src/components/logos/applogo/AppLogo.tsx
+// src/components/logos/applogo/WavelengthAppLogo.tsx
 
-function AppLogo({ width: width2, height: height2, name = "", grayscale, id }) {
+function WavelengthAppLogo({ width: width2, height: height2, name = "", grayscale, id }) {
   let logo;
   {
   }
@@ -4904,17 +4983,17 @@ function AppLogo({ width: width2, height: height2, name = "", grayscale, id }) {
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: logo });
 }
-var AppLogo_default = AppLogo;
+var WavelengthAppLogo_default = WavelengthAppLogo;
 
-// src/components/PageComponents/NotAvailablePage.tsx
+// src/components/PageComponents/WavelengthNotAvailablePage.tsx
 
-function NotAvailablePage({ appLogoName, errorMessage, backgroundColor: backgroundColor2, buttonText, redirectLink, buttonColorOne, buttonColorTwo, id }) {
+function WavelengthNotAvailablePage({ WavelengthAppLogoName, errorMessage, backgroundColor: backgroundColor2, buttonText, redirectLink, buttonColorOne, buttonColorTwo, id }) {
   backgroundColor2 = backgroundColor2 ? backgroundColor2 : "gray";
-  appLogoName = appLogoName ? appLogoName : "563rdpatch";
+  WavelengthAppLogoName = WavelengthAppLogoName ? WavelengthAppLogoName : "563rdpatch";
   buttonColorOne = buttonColorOne ? buttonColorOne : "white";
   buttonColorTwo = buttonColorTwo ? buttonColorTwo : "#0D5288";
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { id, style: { display: "flex", backgroundColor: backgroundColor2, flexDirection: "column", alignItems: "center", height: "100%", justifyContent: "center", gap: 55, padding: "8%" }, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AppLogo_default, { name: appLogoName, width: 300, height: 200, grayscale: true }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WavelengthAppLogo_default, { name: WavelengthAppLogoName, width: 300, height: 200, grayscale: true }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { textAlign: "center", marginBottom: 45, fontSize: 40, color: "white" }, children: `${errorMessage}` }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WavelengthButton2, { "data-testid": "not-available-button", variant: "contained", colorOne: buttonColorOne, colorTwo: buttonColorTwo, href: redirectLink, children: buttonText })
@@ -5154,41 +5233,24 @@ function WavelengthDragAndDrop({
 }
 
 // src/components/PageComponents/WavelengthProgressBar.tsx
-var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
-var _LinearProgress = require('@mui/material/LinearProgress'); var _LinearProgress2 = _interopRequireDefault(_LinearProgress);
 
-function WavelengthProgressBar({ dataTestId, width: width2 = "425px", height: height2 = "12px", backgroundColor: backgroundColor2, borderRadius: borderRadius2 = "24px", progressColor, value, name, textColor = "inherit" }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "row", width: width2, justifyContent: "space-between", color: textColor }, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "", children: name }),
-      value === 100 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: "", children: [
-        "Complete! - ",
-        value,
-        "%"
-      ] }),
-      value !== 100 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: "", children: [
-        "Uploading - ",
-        value,
-        "%"
-      ] })
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { "data-testid": dataTestId, sx: { width: width2, height: "12px", borderRadius: "24px" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _LinearProgress2.default,
-      {
-        variant: "determinate",
-        value,
-        style: { backgroundColor: backgroundColor2, height: height2, borderRadius: borderRadius2, border: "2px solid black" },
-        sx: {
-          "& .MuiLinearProgress-bar": {
-            backgroundColor: progressColor,
-            borderRadius: borderRadius2,
-            border: "1px solid black"
-          }
-        }
-      }
-    ) })
-  ] });
-}
+
+var WavelengthProgressBar2 = ({ name, value, width: width2, height: height2, fontSize, fontColor, progressBorder, progressColor, ...rest }) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (ref.current) {
+      if (name !== void 0) ref.current.setAttribute("name", name);
+      if (value !== void 0) ref.current.setAttribute("value", value.toString());
+      if (width2 !== void 0) ref.current.setAttribute("width", width2);
+      if (height2 !== void 0) ref.current.setAttribute("height", height2);
+      if (fontSize !== void 0) ref.current.setAttribute("font-size", fontSize);
+      if (fontColor !== void 0) ref.current.setAttribute("font-color", fontColor);
+      if (progressBorder !== void 0) ref.current.setAttribute("progress-border", progressBorder);
+      if (progressColor !== void 0) ref.current.setAttribute("progress-color", progressColor);
+    }
+  }, [name, value, width2, height2, fontSize, fontColor, progressBorder, progressColor]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-progress-bar", { ref, ...rest });
+};
 
 // src/components/PageComponents/WavelengthCommentDisplay.tsx
 
@@ -5344,10 +5406,7 @@ function WavelengthAccessAlert({
         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.jsx.call(void 0, "div", { style: { gridArea: "2/1/3/2" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WavelengthAppLogo_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: ",
@@ -5391,7 +5450,8 @@ function WavelengthAccessAlert({
             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.jsx.call(void 0, WavelengthAppLogo_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: [
@@ -5428,7 +5488,7 @@ function WavelengthAccessAlert({
             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.jsx.call(void 0, WavelengthAppLogo_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: [
@@ -5563,7 +5623,7 @@ function WavelengthAlert({
 
 // src/components/footers/WavelengthFooter/WavelengthFooter.tsx
 
-
+var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
 var _Container = require('@mui/material/Container'); var _Container2 = _interopRequireDefault(_Container);
 
 
@@ -5646,10 +5706,42 @@ function WavelengthBanner2({ headerText = "CLASSIFICATION//CONTROL", headerColor
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-banner", { ref });
 }
 
-// src/components/CSFD/ManyPlanes.tsx
+// src/components/logos/default/WavelengthDefaultIcon.tsx
 
+function WavelengthDefaultIcon({ width: width2 = "180", height: height2 = 140 }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: width2, height: height2, viewBox: "0 0 185 140", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: width2, height: height2, fill: "#7A7A7A" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "path",
+      {
+        d: "M63.5 14.618L77.2811 57.0319L77.3934 57.3774H77.7566H122.353L86.2738 83.5906L85.9799 83.8042L86.0922 84.1497L99.8733 126.564L63.7939 100.35L63.5 100.137L63.2061 100.35L27.1267 126.564L40.9078 84.1497L41.0201 83.8042L40.7262 83.5906L4.64675 57.3774H49.2434H49.6066L49.7189 57.0319L63.5 14.618Z",
+        fill: "url(#paint0_linear_3571_2148)",
+        fillOpacity: ".0.5",
+        stroke: "#6B6B6B"
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "102", y: "16", width: "70", height: "115", fill: "#4A4A4A" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "112", y1: "24.5", x2: "142", y2: "24.5", stroke: "#D9D9D9", strokeWidth: "3" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "112", y1: "41.5", x2: "160", y2: "41.5", stroke: "#D9D9D9", strokeWidth: "3" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "112", y1: "51.5", x2: "160", y2: "51.5", stroke: "#D9D9D9", strokeWidth: "3" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "112", y1: "61.5", x2: "160", y2: "61.5", stroke: "#D9D9D9", strokeWidth: "3" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "112", y1: "71.5", x2: "160", y2: "71.5", stroke: "#D9D9D9", strokeWidth: "3" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "112", y1: "81.5", x2: "160", y2: "81.5", stroke: "#D9D9D9", strokeWidth: "3" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "48", cy: "44", r: "28", fill: "#D9D9D9", fillOpacity: "0.5" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M76 44.2478C76 59.5749 63.4645 72 48.0011 72C48.0011 72 49 19.5 49 16C49 16 20 16 20 44.2478C35.4634 44.2478 76 44.2478 76 44.2478Z", fill: "#D9D9D9", fillOpacity: "0.5" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "20", y: "83", width: "56", height: "15", rx: "4", fill: "#D9D9D9" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "20", y: "107", width: "56", height: "15", rx: "4", fill: "#ABABAB" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "linearGradient", { id: "paint0_linear_3571_2148", x1: "63.5", y1: "13", x2: "63.5", y2: "140", gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { stopColor: "#A1A1A1" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "1", stopColor: "#606060" })
+    ] }) })
+  ] }) });
+}
 
-function ManyPlanesComponent({ numberOfPlanes = 5, trailDir = "left", color: color2, opacity = 1, gradient = false }) {
+// src/components/CSFD/WavelengthManyPlanes.tsx
+
+
+function WavelengthManyPlanes({ numberOfPlanes = 5, trailDir = "left", color: color2, opacity = 1, gradient = false }) {
   let direction = "row-reverse";
   let flippy = "";
   const palette2 = getPalette();
@@ -5688,38 +5780,6 @@ function ManyPlanesComponent({ numberOfPlanes = 5, trailDir = "left", color: col
   return PlaneGridWrapper(numberOfPlanes, opacity);
 }
 
-// src/components/logos/default/DefaultDisplay.tsx
-
-function DefaultIcon({ width: width2 = "180", height: height2 = 140 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: width2, height: height2, viewBox: "0 0 185 140", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: width2, height: height2, fill: "#7A7A7A" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "path",
-      {
-        d: "M63.5 14.618L77.2811 57.0319L77.3934 57.3774H77.7566H122.353L86.2738 83.5906L85.9799 83.8042L86.0922 84.1497L99.8733 126.564L63.7939 100.35L63.5 100.137L63.2061 100.35L27.1267 126.564L40.9078 84.1497L41.0201 83.8042L40.7262 83.5906L4.64675 57.3774H49.2434H49.6066L49.7189 57.0319L63.5 14.618Z",
-        fill: "url(#paint0_linear_3571_2148)",
-        fillOpacity: ".0.5",
-        stroke: "#6B6B6B"
-      }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "102", y: "16", width: "70", height: "115", fill: "#4A4A4A" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "112", y1: "24.5", x2: "142", y2: "24.5", stroke: "#D9D9D9", strokeWidth: "3" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "112", y1: "41.5", x2: "160", y2: "41.5", stroke: "#D9D9D9", strokeWidth: "3" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "112", y1: "51.5", x2: "160", y2: "51.5", stroke: "#D9D9D9", strokeWidth: "3" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "112", y1: "61.5", x2: "160", y2: "61.5", stroke: "#D9D9D9", strokeWidth: "3" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "112", y1: "71.5", x2: "160", y2: "71.5", stroke: "#D9D9D9", strokeWidth: "3" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "112", y1: "81.5", x2: "160", y2: "81.5", stroke: "#D9D9D9", strokeWidth: "3" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "48", cy: "44", r: "28", fill: "#D9D9D9", fillOpacity: "0.5" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M76 44.2478C76 59.5749 63.4645 72 48.0011 72C48.0011 72 49 19.5 49 16C49 16 20 16 20 44.2478C35.4634 44.2478 76 44.2478 76 44.2478Z", fill: "#D9D9D9", fillOpacity: "0.5" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "20", y: "83", width: "56", height: "15", rx: "4", fill: "#D9D9D9" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "20", y: "107", width: "56", height: "15", rx: "4", fill: "#ABABAB" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "linearGradient", { id: "paint0_linear_3571_2148", x1: "63.5", y1: "13", x2: "63.5", y2: "140", gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { stopColor: "#A1A1A1" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "1", stopColor: "#606060" })
-    ] }) })
-  ] }) });
-}
-
 // src/components/separators/WavelengthPlaneTrail/WavelengthPlaneTrail.tsx
 var _Divider = require('@mui/material/Divider'); var _Divider2 = _interopRequireDefault(_Divider);
 
@@ -6177,7 +6237,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
   );
 }
 
-// src/components/snackbars/TestSnackbar.tsx
+// src/components/snackbars/WavelengthTestSnackbar.tsx
 
 
 
@@ -6199,7 +6259,7 @@ var useOutsideClick = (callback) => {
   }, [callback]);
   return ref;
 };
-function TestSnackbar({ isPopUpOpen, toggleOpen, type, message, customVertyAlign, width: width2, img }) {
+function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, customVertyAlign, width: width2, img }) {
   const ref = useOutsideClick(() => {
     toggleOpen(false);
   });
@@ -6335,7 +6395,7 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
   ) }) });
 };
 
-// src/components/carousels/sliderCarousel.tsx
+// src/components/carousels/WavelengthSliderCarousel.tsx
 
 
 
@@ -6418,10 +6478,10 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
   ) }) });
 };
 
-// src/components/pagination/WavelengthPagination.tsx
+// src/components/pagination/WavelengthDefaultPagination.tsx
 
 
-// src/components/pagination/ButtonPagination.tsx
+// src/components/pagination/WavelengthButtonPagination.tsx
 
 
 var _ArrowBackIosNew = require('@mui/icons-material/ArrowBackIosNew'); var _ArrowBackIosNew2 = _interopRequireDefault(_ArrowBackIosNew);
@@ -6440,7 +6500,7 @@ var MyDroplistItems = _styledcomponents2.default.call(void 0, "li")`
     background-color: lightgray;
   }
 `;
-function ButtonPagination({ totalPages, current, handleChangePage, itemList, firstEllipseList, secondEllipseList }) {
+function WavelengthButtonPagination({ totalPages, current, handleChangePage, itemList, firstEllipseList, secondEllipseList }) {
   const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
   const [isSecOpen, setIsSecOpen] = _react.useState.call(void 0, false);
   const toggleDropdown = (index) => {
@@ -6530,16 +6590,16 @@ function ButtonPagination({ totalPages, current, handleChangePage, itemList, fir
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, sx: WLButtonPagStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ArrowForwardIos2.default, {}) })
   ] });
 }
-var ButtonPagination_default = ButtonPagination;
+var WavelengthButtonPagination_default = WavelengthButtonPagination;
 
-// src/components/pagination/VariationPagination.tsx
+// src/components/pagination/WavelengthVariationPagination.tsx
 
 
 
 
 
 
-function VariationPagination({ totalPages, current, variant, handleChangePage, itemList, firstEllipseList, secondEllipseList }) {
+function WavelengthVariationPagination({ totalPages, current, variant, handleChangePage, itemList, firstEllipseList, secondEllipseList }) {
   const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
   const [isSecOpen, setIsSecOpen] = _react.useState.call(void 0, false);
   const MyDroplistItems2 = _styledcomponents2.default.call(void 0, "li")`
@@ -6621,9 +6681,9 @@ function VariationPagination({ totalPages, current, variant, handleChangePage, i
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, variant, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ArrowForwardIos2.default, {}) })
   ] });
 }
-var VariationPagination_default = VariationPagination;
+var WavelengthVariationPagination_default = WavelengthVariationPagination;
 
-// src/components/pagination/WavelengthPagination.tsx
+// src/components/pagination/WavelengthDefaultPagination.tsx
 
 var range = (start, end) => {
   const length = end - start + 1;
@@ -6662,10 +6722,20 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     }
   };
   if (style3 === "circular") {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonPagination_default, { totalPages, current, handleChangePage, itemList, firstEllipseList, secondEllipseList });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      WavelengthButtonPagination_default,
+      {
+        totalPages,
+        current,
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
   } else if (style3 === "text") {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      VariationPagination_default,
+      WavelengthVariationPagination_default,
       {
         totalPages,
         current,
@@ -6678,7 +6748,7 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     );
   } else if (style3 === "outlined") {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      VariationPagination_default,
+      WavelengthVariationPagination_default,
       {
         totalPages,
         current,
@@ -6691,7 +6761,7 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     );
   } else if (style3 === "contained") {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      VariationPagination_default,
+      WavelengthVariationPagination_default,
       {
         totalPages,
         current,
@@ -6704,7 +6774,7 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     );
   } else {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      VariationPagination_default,
+      WavelengthVariationPagination_default,
       {
         totalPages,
         current,
@@ -6716,7 +6786,7 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     );
   }
 }
-var WavelengthPagination_default = DefaultPagination;
+var WavelengthDefaultPagination_default = DefaultPagination;
 
 // src/components/TextField/WavelengthTextField.tsx
 
@@ -7211,7 +7281,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
       /* @__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" }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledNavBoxDiv, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WavelengthDefaultPagination_default, { totalPages, currentPageNumber: currentPage, onPageChange: setCurrentPage, style: "circular" }) })
   ] });
 };
 
@@ -7286,7 +7356,7 @@ var SampleComponent2 = ({
 
 
 
-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.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.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultPagination = DefaultPagination; exports.SampleComponent = SampleComponent2; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; 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.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar2; 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.WavelengthTestSnackbar = WavelengthTestSnackbar; 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: