@wavelengthusaf/components 4.5.2 → 4.7.0

package/dist/cjs/index.cjs

@@ -5600,6 +5600,27 @@ function WavelengthAlert({
 }
 WavelengthAlert.displayName = "WavelengthAlert";
 
+// src/components/PageComponents/WavelengthToolTip.tsx
+
+
+var WavelengthToolTip = ({ color: color2, font, direction, children, textColor, textContent, ...rest }) => {
+  const ref = _react.useRef.call(void 0, null);
+  const syncAttribute = (attribute, value) => {
+    const el = ref.current;
+    if (!el) return;
+    el.setAttribute(attribute, value);
+  };
+  _react.useEffect.call(void 0, () => {
+    syncAttribute("color", color2 || "");
+    syncAttribute("font", font || "");
+    syncAttribute("direction", direction || "");
+    syncAttribute("text-color", textColor || "");
+    syncAttribute("text-content", textContent || "");
+  }, [color2, font, direction, textColor, textContent]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-tooltip", { ref, ...rest, children });
+};
+WavelengthToolTip.displayName = "WavelengthToolTip";
+
 // src/components/footers/WavelengthFooter/WavelengthFooter.tsx
 
 var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
@@ -5866,44 +5887,32 @@ WavelengthDefaultIcon.displayName = "WavelengthDefaultIcon";
 // src/components/CSFD/WavelengthManyPlanes.tsx
 
 
-function WavelengthManyPlanes({ numberOfPlanes = 5, trailDir = "left", color: color2, opacity = 1, gradient = false, id }) {
-  let direction = "row-reverse";
-  let flippy = "";
-  const palette2 = getPalette();
-  const colorish = color2 ? color2 : palette2.primary;
-  if (trailDir !== "right") {
-    direction = "row";
-    flippy = "rotate(180)";
-  }
-  const PlaneGrid = ({ opacity: opacity2 }) => {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Grid2.default, { item: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "40", height: "40", viewBox: "0 0 40 40", transform: flippy, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "mask", { id: "mask0_56_851", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "40", height: "40", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "40", width: "40", height: "40", transform: "rotate(90 40 0)", fill: "#D9D9D9" }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { mask: "url(#mask0_56_851)", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "path",
-        {
-          d: "M4.16662 14.8988L5.76079 14.8988L8.16454 18.1359L18.2616 18.1359L14.1291 4.16669L16.2425 4.16669L24.5075 18.1359L33.985 18.1359C34.5022 18.1359 34.9422 18.3172 35.305 18.68C35.6677 19.0428 35.8491 19.4828 35.8491 20C35.8491 20.5172 35.6677 20.9572 35.305 21.32C34.9422 21.6828 34.5022 21.8642 33.985 21.8642L24.5075 21.8642L16.2425 35.8334L14.1291 35.8334L18.2616 21.8642L8.19662 21.8642L5.76079 25.1013L4.16662 25.1013L5.64329 20L4.16662 14.8988Z",
-          fillOpacity: opacity2,
-          fill: colorish
-        }
-      ) })
-    ] }) });
-  };
-  const PlaneGridWrapper = (size, baseOpacity) => {
-    const planes = [];
-    if (gradient) {
-      for (let i = 0; i < size; i++) {
-        const currentOpacity = baseOpacity - i / (size - 1) * (baseOpacity - 0.05);
-        planes.push(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, PlaneGrid, { opacity: currentOpacity }, i));
-      }
-    } else {
-      for (let i = 0; i < size; i++) {
-        planes.push(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, PlaneGrid, { opacity: baseOpacity }, i));
-      }
+var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color: color2, gradient, spaced, ...rest }) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    if (numberOfPlanes !== void 0) {
+      el.setAttribute("number-of-planes", numberOfPlanes);
     }
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Grid2.default, { container: true, alignItems: "center", flexDirection: direction, spacing: 3, id, children: planes });
-  };
-  return PlaneGridWrapper(numberOfPlanes, opacity);
-}
+    if (trailDir !== void 0) {
+      el.setAttribute("trail-dir", trailDir);
+    }
+    if (opacity !== void 0) {
+      el.setAttribute("opacity", opacity);
+    }
+    if (color2 !== void 0) {
+      el.setAttribute("color", color2);
+    }
+    if (gradient !== void 0) {
+      el.setAttribute("gradient", gradient);
+    }
+    if (spaced !== void 0) {
+      el.setAttribute("spaced", spaced);
+    }
+  }, [numberOfPlanes, trailDir, opacity, color2, gradient, spaced]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-manyplanes", { ref, trailDir, opacity, color: color2, gradient, spaced, ...rest, children });
+};
 WavelengthManyPlanes.displayName = "WavelengthManyPlanes";
 
 // src/components/separators/WavelengthPlaneTrail/WavelengthPlaneTrail.tsx
@@ -6140,7 +6149,29 @@ WavelengthPopUpMenu.displayName = "WavelengthPopUpMenu";
 
 
 var WavelengthDropdown = _react.forwardRef.call(void 0, (props, ref) => {
-  const { options, defaultValue, value, fontSize, fontFamily, borderRadius: borderRadius2, width: width2, height: height2, textColor, arrowSize, popupRadius, popupAlign, popupSelectedColor, onChange, ...rest } = props;
+  const {
+    options,
+    defaultValue,
+    value,
+    fontSize,
+    fontFamily,
+    borderColor: borderColor2,
+    borderRadius: borderRadius2,
+    width: width2,
+    height: height2,
+    textColor,
+    arrowSize,
+    arrowColor,
+    popupRadius,
+    popupAlign,
+    popupSelectedColor,
+    popupBackgroundColor,
+    popupTextColor,
+    popupTextAlign,
+    popupHoverBackground,
+    onChange,
+    ...rest
+  } = props;
   const elementRef = _react.useRef.call(void 0, null);
   _react.useImperativeHandle.call(void 0, ref, () => elementRef.current);
   _react.useEffect.call(void 0, () => {
@@ -6166,14 +6197,20 @@ var WavelengthDropdown = _react.forwardRef.call(void 0, (props, ref) => {
       defaultValue,
       "font-size": fontSize,
       "font-family": fontFamily,
+      "border-color": borderColor2,
       "border-radius": borderRadius2,
       width: width2,
       height: height2,
       color: textColor,
       "arrow-size": arrowSize,
+      "arrow-color": arrowColor,
       "popup-radius": popupRadius,
       "popup-align": popupAlign,
       "popup-selected-color": popupSelectedColor,
+      "popup-background-color": popupBackgroundColor,
+      "popup-text-color": popupTextColor,
+      "popup-text-align": popupTextAlign,
+      "popup-hover-background": popupHoverBackground,
       ...rest
     }
   );
@@ -8505,7 +8542,8 @@ 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.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthMultiSelectAutocompleteElement = _webcomponents.WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; 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.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthWebSnackbar = WavelengthWebSnackbar; 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.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.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthMultiSelectAutocompleteElement = _webcomponents.WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; 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.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip; exports.WavelengthWebSnackbar = WavelengthWebSnackbar; 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:

package/dist/cjs/index.d.cts

@@ -463,6 +463,15 @@ declare namespace WavelengthAlert {
     var displayName: string;
 }
 
+interface WavelengthToolTipProps extends React__default.HTMLAttributes<HTMLElement> {
+    color?: string;
+    font?: string;
+    direction?: string;
+    textColor?: string;
+    textContent?: string;
+}
+declare const WavelengthToolTip: React__default.FC<WavelengthToolTipProps>;
+
 interface WavelengthFooterProps {
     text?: string;
     textColor?: string;
@@ -591,18 +600,15 @@ declare namespace WavelengthDefaultIcon {
     var displayName: string;
 }
 
-interface HeaderProps {
-    numberOfPlanes?: number;
-    trailDir?: "right" | "left";
+interface WavelengthManyPlanesProps extends React__default.HTMLAttributes<HTMLElement> {
+    numberOfPlanes?: string;
+    trailDir?: string;
+    opacity?: string;
     color?: string;
-    opacity?: number;
-    gradient?: boolean;
-    id?: string;
-}
-declare function WavelengthManyPlanes({ numberOfPlanes, trailDir, color, opacity, gradient, id }: HeaderProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthManyPlanes {
-    var displayName: string;
+    gradient?: string;
+    spaced?: string;
 }
+declare const WavelengthManyPlanes: React__default.FC<WavelengthManyPlanesProps>;
 
 type StyleProp = {
     [selector: string]: any;
@@ -686,13 +692,19 @@ interface WavelengthDropdownProps extends React.HTMLAttributes<HTMLElement> {
     textColor?: string;
     fontSize?: string;
     fontFamily?: string;
+    borderColor?: string;
     borderRadius?: string;
     width?: string;
     height?: string;
     arrowSize?: string;
+    arrowColor?: string;
     popupRadius?: string;
     popupAlign?: "left" | "center" | "right";
     popupSelectedColor?: string;
+    popupBackgroundColor?: string;
+    popupTextColor?: string;
+    popupTextAlign?: string;
+    popupHoverBackground?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 declare const WavelengthDropdown: React$1.ForwardRefExoticComponent<WavelengthDropdownProps & React$1.RefAttributes<HTMLElement>>;
@@ -1032,4 +1044,4 @@ interface MultiSelectAutocompleteProps {
 }
 declare const WavelengthMultiSelectAutocomplete: React__default.FC<MultiSelectAutocompleteProps>;
 
-export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDefaultPagination, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTitleBar, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDefaultPagination, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.d.ts

@@ -463,6 +463,15 @@ declare namespace WavelengthAlert {
     var displayName: string;
 }
 
+interface WavelengthToolTipProps extends React__default.HTMLAttributes<HTMLElement> {
+    color?: string;
+    font?: string;
+    direction?: string;
+    textColor?: string;
+    textContent?: string;
+}
+declare const WavelengthToolTip: React__default.FC<WavelengthToolTipProps>;
+
 interface WavelengthFooterProps {
     text?: string;
     textColor?: string;
@@ -591,18 +600,15 @@ declare namespace WavelengthDefaultIcon {
     var displayName: string;
 }
 
-interface HeaderProps {
-    numberOfPlanes?: number;
-    trailDir?: "right" | "left";
+interface WavelengthManyPlanesProps extends React__default.HTMLAttributes<HTMLElement> {
+    numberOfPlanes?: string;
+    trailDir?: string;
+    opacity?: string;
     color?: string;
-    opacity?: number;
-    gradient?: boolean;
-    id?: string;
-}
-declare function WavelengthManyPlanes({ numberOfPlanes, trailDir, color, opacity, gradient, id }: HeaderProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthManyPlanes {
-    var displayName: string;
+    gradient?: string;
+    spaced?: string;
 }
+declare const WavelengthManyPlanes: React__default.FC<WavelengthManyPlanesProps>;
 
 type StyleProp = {
     [selector: string]: any;
@@ -686,13 +692,19 @@ interface WavelengthDropdownProps extends React.HTMLAttributes<HTMLElement> {
     textColor?: string;
     fontSize?: string;
     fontFamily?: string;
+    borderColor?: string;
     borderRadius?: string;
     width?: string;
     height?: string;
     arrowSize?: string;
+    arrowColor?: string;
     popupRadius?: string;
     popupAlign?: "left" | "center" | "right";
     popupSelectedColor?: string;
+    popupBackgroundColor?: string;
+    popupTextColor?: string;
+    popupTextAlign?: string;
+    popupHoverBackground?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 declare const WavelengthDropdown: React$1.ForwardRefExoticComponent<WavelengthDropdownProps & React$1.RefAttributes<HTMLElement>>;
@@ -1032,4 +1044,4 @@ interface MultiSelectAutocompleteProps {
 }
 declare const WavelengthMultiSelectAutocomplete: React__default.FC<MultiSelectAutocompleteProps>;
 
-export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDefaultPagination, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTitleBar, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDefaultPagination, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };