@wavelengthusaf/components 2.10.1 → 3.0.0

package/README.md

@@ -14,6 +14,31 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 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
+- Updated Wavelength Alert
+- Updated Textfield to include inputRef as a prop
+
 ### 2.10.1
 
 - 5/13/2025

package/dist/cjs/index.cjs

@@ -4431,13 +4431,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 +4455,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 +4904,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 })
@@ -5344,10 +5344,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 +5388,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 +5426,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: [
@@ -5461,7 +5459,6 @@ function WavelengthAlert({
   variant,
   timeStamp,
   url,
-  initiator,
   id,
   onClose
 }) {
@@ -5536,12 +5533,8 @@ function WavelengthAlert({
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Notifications2.default, { sx: iconStyle }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "a", { href: url, style: { display: "flex", flexDirection: "column", gap: "7px", width: "250px", marginLeft: "12px", textDecoration: "none", color: baseContainerStyle.color }, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { style: { fontSize: "16px", lineHeight: "24px", letterSpacing: "0.15px", fontWeight: 550 }, children: alertType }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "14px", fontWeight: 400, lineHeight: "20px", letterSpacing: "0.25px", width: "200px" }, children: alertDescription }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 }, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontWeight: 550 }, children: "Initiator: " }),
-          " ",
-          initiator
-        ] })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "14px", fontWeight: 400, lineHeight: "20px", letterSpacing: "0.25px", width: "200px" }, children: appName }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 }, children: alertDescription })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "div",
@@ -5651,10 +5644,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();
@@ -5693,38 +5718,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);
 
@@ -6182,7 +6175,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
   );
 }
 
-// src/components/snackbars/TestSnackbar.tsx
+// src/components/snackbars/WavelengthTestSnackbar.tsx
 
 
 
@@ -6204,7 +6197,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);
   });
@@ -6340,7 +6333,7 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
   ) }) });
 };
 
-// src/components/carousels/sliderCarousel.tsx
+// src/components/carousels/WavelengthSliderCarousel.tsx
 
 
 
@@ -6423,10 +6416,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);
@@ -6445,7 +6438,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) => {
@@ -6535,16 +6528,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")`
@@ -6626,9 +6619,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;
@@ -6667,10 +6660,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,
@@ -6683,7 +6686,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,
@@ -6696,7 +6699,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,
@@ -6709,7 +6712,7 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     );
   } else {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      VariationPagination_default,
+      WavelengthVariationPagination_default,
       {
         totalPages,
         current,
@@ -6721,7 +6724,7 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     );
   }
 }
-var WavelengthPagination_default = DefaultPagination;
+var WavelengthDefaultPagination_default = DefaultPagination;
 
 // src/components/TextField/WavelengthTextField.tsx
 
@@ -6790,6 +6793,8 @@ function WavelengthTextField(props) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _TextField2.default,
       {
+        value: props.value,
+        inputRef: props.inputRef,
         type: props.type,
         required: props.required,
         label: props.label,
@@ -6832,6 +6837,8 @@ function WavelengthTextField(props) {
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         StandardTextField,
         {
+          value: props.value,
+          ref: props.inputRef,
           type: props.type,
           id: "custom-input",
           placeholder: props.placeholder,
@@ -7212,7 +7219,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" }) })
   ] });
 };
 
@@ -7287,7 +7294,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 = 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.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: