mytek-components 1.0.7 → 1.0.8

package/dist/main.es.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import * as React from "react";
-import React__default, { useState, useRef, useEffect, isValidElement, cloneElement, Children, useContext, useMemo, useCallback, useLayoutEffect, createContext } from "react";
+import React__default, { useState, useRef, useEffect, isValidElement, cloneElement, Children, useCallback, useContext, useMemo, useLayoutEffect, createContext } from "react";
 import emStyled from "@emotion/styled";
 import { keyframes } from "@emotion/react";
 import ReactDOM from "react-dom";
@@ -10529,6 +10529,187 @@ const RadioButton = ({
     }
   );
 };
+function FaCheck(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" }, "child": [] }] })(props);
+}
+function FaChevronDown(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" }, "child": [] }] })(props);
+}
+function FaChevronUp(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" }, "child": [] }] })(props);
+}
+const ComboDropdown = ({
+  label,
+  options = [],
+  placeholder = "",
+  onChange,
+  name,
+  value,
+  error,
+  disabled,
+  height: height2 = "40px",
+  isPassword = false,
+  mode = "both",
+  isRequired = false,
+  optionLabelKey = "label",
+  optionValueKey = "value"
+}) => {
+  const [inputValue, setInputValue] = useState("");
+  const [filteredOptions, setFilteredOptions] = useState([]);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [highlightIndex, setHighlightIndex] = useState(-1);
+  const inputRef = useRef();
+  const wrapperRef = useRef();
+  useEffect(() => {
+    const selected = options.find(
+      (opt) => (typeof opt === "object" ? opt[optionValueKey] : opt) === value
+    );
+    if (selected) {
+      const label2 = typeof selected === "object" ? selected[optionLabelKey] : selected;
+      setInputValue(label2);
+    } else {
+      setInputValue("");
+    }
+  }, [value, options, optionLabelKey, optionValueKey]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setShowDropdown(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const normalizeOptions = (opts) => opts.map((opt) => {
+    if (typeof opt === "string") return { label: opt, value: opt };
+    return {
+      label: opt[optionLabelKey],
+      value: opt[optionValueKey]
+    };
+  });
+  const handleInputChange = (e) => {
+    const val = e.target.value;
+    setInputValue(val);
+    if (mode !== "select" && onChange) {
+      onChange(name, val);
+    }
+    if (mode !== "type") {
+      const normalized = normalizeOptions(options);
+      const filtered = normalized.filter(
+        (opt) => {
+          var _a;
+          return (_a = opt.label) == null ? void 0 : _a.toLowerCase().includes(val.toLowerCase());
+        }
+      );
+      setFilteredOptions(filtered);
+      setShowDropdown(true);
+      setHighlightIndex(-1);
+    }
+  };
+  const handleSelect = (val, label2) => {
+    setInputValue(label2);
+    if (onChange) {
+      onChange(name, val);
+    }
+    setShowDropdown(false);
+    setHighlightIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    if (!showDropdown || filteredOptions.length === 0) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0);
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightIndex((prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1);
+    }
+    if (e.key === "Enter" && highlightIndex >= 0) {
+      e.preventDefault();
+      const selected = filteredOptions[highlightIndex];
+      handleSelect(selected.value, selected.label);
+    }
+  };
+  const getPlaceholder = () => {
+    if (placeholder) return placeholder;
+    if (mode === "select") return "Select an option...";
+    if (mode === "type") return "Type a value...";
+    return "Select or type...";
+  };
+  const toggleDropdown = () => {
+    if (disabled) return;
+    if (!showDropdown && mode !== "type") {
+      setFilteredOptions(normalizeOptions(options));
+    }
+    setShowDropdown((prev) => {
+      var _a;
+      if (!prev) (_a = inputRef.current) == null ? void 0 : _a.focus();
+      return !prev;
+    });
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: wrapperRef, className: "mb-4 w-full relative", children: [
+    label && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: [
+      label,
+      " ",
+      isRequired && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex items-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: isPassword ? "password" : "text",
+          placeholder: getPlaceholder(),
+          className: `w-full border rounded-sm px-3 pr-8 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-green-200 ${error ? "border-red-500" : "border-green-500"} ${disabled ? "bg-gray-100 cursor-not-allowed" : ""}`,
+          name,
+          value: inputValue,
+          onChange: handleInputChange,
+          onFocus: () => {
+            if (mode !== "type") {
+              setFilteredOptions(normalizeOptions(options));
+              setShowDropdown(true);
+            }
+          },
+          onClick: () => {
+            if (mode !== "type") {
+              setFilteredOptions(normalizeOptions(options));
+              setShowDropdown(true);
+            }
+          },
+          onKeyDown: handleKeyDown,
+          disabled,
+          readOnly: mode === "select",
+          autoComplete: "off",
+          style: { height: height2 }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          onClick: toggleDropdown,
+          onMouseDown: (e) => e.preventDefault(),
+          className: "absolute right-2 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-600",
+          children: showDropdown ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaChevronUp, { size: 12 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(FaChevronDown, { size: 12 })
+        }
+      )
+    ] }),
+    showDropdown && filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md max-h-52 overflow-y-auto shadow-md", children: filteredOptions.map((opt, index) => {
+      const isSelected = opt.value === value;
+      const isHighlighted = index === highlightIndex;
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "li",
+        {
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => handleSelect(opt.value, opt.label),
+          className: `px-3 py-2 text-sm cursor-pointer ${isHighlighted ? "bg-gray-200" : isSelected ? "" : "bg-white"} ${isSelected ? "bg-[#dee2e6] text-black" : ""}`,
+          children: opt.label
+        },
+        index
+      );
+    }) }),
+    error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error })
+  ] });
+};
 var classnames = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
@@ -10594,34 +10775,23 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const propTypes$1 = {
-  /**
-   * Specify whether the feedback is for valid or invalid fields
-   *
-   * @type {('valid'|'invalid')}
-   */
-  type: PropTypes.string,
-  /** Display feedback as a tooltip. */
-  tooltip: PropTypes.bool,
-  as: PropTypes.elementType
-};
-const Feedback = /* @__PURE__ */ React.forwardRef(
-  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
-  ({
-    as: Component = "div",
-    className,
-    type = "valid",
-    tooltip = false,
-    ...props
-  }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
-    ...props,
-    ref,
-    className: classNames(className, `${type}-${tooltip ? "tooltip" : "feedback"}`)
-  })
-);
-Feedback.displayName = "Feedback";
-Feedback.propTypes = propTypes$1;
-const FormContext = /* @__PURE__ */ React.createContext({});
+function useUncontrolledProp(propValue, defaultValue, handler) {
+  var wasPropRef = useRef(propValue !== void 0);
+  var _useState = useState(defaultValue), stateValue = _useState[0], setState = _useState[1];
+  var isProp = propValue !== void 0;
+  var wasProp = wasPropRef.current;
+  wasPropRef.current = isProp;
+  if (!isProp && wasProp && stateValue !== defaultValue) {
+    setState(defaultValue);
+  }
+  return [isProp ? propValue : stateValue, useCallback(function(value) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    if (handler) handler.apply(void 0, [value].concat(args));
+    setState(value);
+  }, [handler])];
+}
 const DEFAULT_BREAKPOINTS = ["xxl", "xl", "lg", "md", "sm", "xs"];
 const DEFAULT_MIN_BREAKPOINT = "xs";
 const ThemeContext = /* @__PURE__ */ React.createContext({
@@ -10657,1286 +10827,715 @@ function useIsRTL() {
   } = useContext(ThemeContext);
   return dir === "rtl";
 }
-const FormCheckInput = /* @__PURE__ */ React.forwardRef(({
-  id,
-  bsPrefix,
-  className,
-  type = "checkbox",
-  isValid = false,
-  isInvalid = false,
-  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
-  as: Component = "input",
-  ...props
-}, ref) => {
-  const {
-    controlId
-  } = useContext(FormContext);
-  bsPrefix = useBootstrapPrefix(bsPrefix, "form-check-input");
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
-    ...props,
-    ref,
-    type,
-    id: id || controlId,
-    className: classNames(className, bsPrefix, isValid && "is-valid", isInvalid && "is-invalid")
-  });
-});
-FormCheckInput.displayName = "FormCheckInput";
-const FormCheckLabel = /* @__PURE__ */ React.forwardRef(({
-  bsPrefix,
-  className,
-  htmlFor,
-  ...props
-}, ref) => {
-  const {
-    controlId
-  } = useContext(FormContext);
-  bsPrefix = useBootstrapPrefix(bsPrefix, "form-check-label");
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("label", {
-    ...props,
-    ref,
-    htmlFor: htmlFor || controlId,
-    className: classNames(className, bsPrefix)
-  });
-});
-FormCheckLabel.displayName = "FormCheckLabel";
-function hasChildOfType(children, type) {
-  return React.Children.toArray(children).some((child) => /* @__PURE__ */ React.isValidElement(child) && child.type === type);
+function ownerDocument(node) {
+  return node && node.ownerDocument || document;
 }
-const FormCheck = /* @__PURE__ */ React.forwardRef(({
-  id,
-  bsPrefix,
-  bsSwitchPrefix,
-  inline = false,
-  reverse = false,
-  disabled = false,
-  isValid = false,
-  isInvalid = false,
-  feedbackTooltip = false,
-  feedback,
-  feedbackType,
-  className,
-  style: style2,
-  title = "",
-  type = "checkbox",
-  label,
-  children,
-  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
-  as = "input",
-  ...props
-}, ref) => {
-  bsPrefix = useBootstrapPrefix(bsPrefix, "form-check");
-  bsSwitchPrefix = useBootstrapPrefix(bsSwitchPrefix, "form-switch");
-  const {
-    controlId
-  } = useContext(FormContext);
-  const innerFormContext = useMemo(() => ({
-    controlId: id || controlId
-  }), [controlId, id]);
-  const hasLabel = !children && label != null && label !== false || hasChildOfType(children, FormCheckLabel);
-  const input = /* @__PURE__ */ jsxRuntimeExports.jsx(FormCheckInput, {
-    ...props,
-    type: type === "switch" ? "checkbox" : type,
-    ref,
-    isValid,
-    isInvalid,
-    disabled,
-    as
-  });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormContext.Provider, {
-    value: innerFormContext,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-      style: style2,
-      className: classNames(className, hasLabel && bsPrefix, inline && `${bsPrefix}-inline`, reverse && `${bsPrefix}-reverse`, type === "switch" && bsSwitchPrefix),
-      children: children || /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-        children: [input, hasLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(FormCheckLabel, {
-          title,
-          children: label
-        }), feedback && /* @__PURE__ */ jsxRuntimeExports.jsx(Feedback, {
-          type: feedbackType,
-          tooltip: feedbackTooltip,
-          children: feedback
-        })]
-      })
-    })
-  });
-});
-FormCheck.displayName = "FormCheck";
-const FormCheck$1 = Object.assign(FormCheck, {
-  Input: FormCheckInput,
-  Label: FormCheckLabel
-});
-var warning_1;
-var hasRequiredWarning;
-function requireWarning() {
-  if (hasRequiredWarning) return warning_1;
-  hasRequiredWarning = 1;
-  var __DEV__ = process.env.NODE_ENV !== "production";
-  var warning2 = function() {
-  };
-  if (__DEV__) {
-    var printWarning = function printWarning2(format, args) {
-      var len = arguments.length;
-      args = new Array(len > 1 ? len - 1 : 0);
-      for (var key = 1; key < len; key++) {
-        args[key - 1] = arguments[key];
-      }
-      var argIndex = 0;
-      var message = "Warning: " + format.replace(/%s/g, function() {
-        return args[argIndex++];
-      });
-      if (typeof console !== "undefined") {
-        console.error(message);
-      }
-      try {
-        throw new Error(message);
-      } catch (x) {
-      }
-    };
-    warning2 = function(condition, format, args) {
-      var len = arguments.length;
-      args = new Array(len > 2 ? len - 2 : 0);
-      for (var key = 2; key < len; key++) {
-        args[key - 2] = arguments[key];
-      }
-      if (format === void 0) {
-        throw new Error(
-          "`warning(condition, format, ...args)` requires a warning message argument"
-        );
-      }
-      if (!condition) {
-        printWarning.apply(null, [format].concat(args));
-      }
-    };
-  }
-  warning_1 = warning2;
-  return warning_1;
+function ownerWindow(node) {
+  var doc = ownerDocument(node);
+  return doc && doc.defaultView || window;
 }
-var warningExports = requireWarning();
-const warning = /* @__PURE__ */ getDefaultExportFromCjs(warningExports);
-const FormControl = /* @__PURE__ */ React.forwardRef(({
-  bsPrefix,
-  type,
-  size,
-  htmlSize,
-  id,
-  className,
-  isValid = false,
-  isInvalid = false,
-  plaintext,
-  readOnly,
-  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
-  as: Component = "input",
-  ...props
-}, ref) => {
-  const {
-    controlId
-  } = useContext(FormContext);
-  bsPrefix = useBootstrapPrefix(bsPrefix, "form-control");
-  process.env.NODE_ENV !== "production" ? warning(controlId == null || !id, "`controlId` is ignored on `<FormControl>` when `id` is specified.") : void 0;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
-    ...props,
-    type,
-    size: htmlSize,
-    ref,
-    readOnly,
-    id: id || controlId,
-    className: classNames(className, plaintext ? `${bsPrefix}-plaintext` : bsPrefix, size && `${bsPrefix}-${size}`, type === "color" && `${bsPrefix}-color`, isValid && "is-valid", isInvalid && "is-invalid")
-  });
-});
-FormControl.displayName = "FormControl";
-const FormControl$1 = Object.assign(FormControl, {
-  Feedback
-});
-const FormFloating = /* @__PURE__ */ React.forwardRef(({
-  className,
-  bsPrefix,
-  as: Component = "div",
-  ...props
-}, ref) => {
-  bsPrefix = useBootstrapPrefix(bsPrefix, "form-floating");
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
-    ref,
-    className: classNames(className, bsPrefix),
-    ...props
-  });
-});
-FormFloating.displayName = "FormFloating";
-const FormGroup = /* @__PURE__ */ React.forwardRef(({
-  controlId,
-  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
-  as: Component = "div",
-  ...props
-}, ref) => {
-  const context2 = useMemo(() => ({
-    controlId
-  }), [controlId]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormContext.Provider, {
-    value: context2,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
-      ...props,
-      ref
-    })
-  });
-});
-FormGroup.displayName = "FormGroup";
-function useCol({
-  as,
-  bsPrefix,
-  className,
-  ...props
-}) {
-  bsPrefix = useBootstrapPrefix(bsPrefix, "col");
-  const breakpoints = useBootstrapBreakpoints();
-  const minBreakpoint = useBootstrapMinBreakpoint();
-  const spans = [];
-  const classes = [];
-  breakpoints.forEach((brkPoint) => {
-    const propValue = props[brkPoint];
-    delete props[brkPoint];
-    let span;
-    let offset2;
-    let order2;
-    if (typeof propValue === "object" && propValue != null) {
-      ({
-        span,
-        offset: offset2,
-        order: order2
-      } = propValue);
+function getComputedStyle(node, psuedoElement) {
+  return ownerWindow(node).getComputedStyle(node, psuedoElement);
+}
+var rUpper = /([A-Z])/g;
+function hyphenate(string) {
+  return string.replace(rUpper, "-$1").toLowerCase();
+}
+var msPattern = /^ms-/;
+function hyphenateStyleName(string) {
+  return hyphenate(string).replace(msPattern, "-ms-");
+}
+var supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i;
+function isTransform(value) {
+  return !!(value && supportedTransforms.test(value));
+}
+function style(node, property) {
+  var css = "";
+  var transforms = "";
+  if (typeof property === "string") {
+    return node.style.getPropertyValue(hyphenateStyleName(property)) || getComputedStyle(node).getPropertyValue(hyphenateStyleName(property));
+  }
+  Object.keys(property).forEach(function(key) {
+    var value = property[key];
+    if (!value && value !== 0) {
+      node.style.removeProperty(hyphenateStyleName(key));
+    } else if (isTransform(key)) {
+      transforms += key + "(" + value + ") ";
     } else {
-      span = propValue;
+      css += hyphenateStyleName(key) + ": " + value + ";";
     }
-    const infix = brkPoint !== minBreakpoint ? `-${brkPoint}` : "";
-    if (span) spans.push(span === true ? `${bsPrefix}${infix}` : `${bsPrefix}${infix}-${span}`);
-    if (order2 != null) classes.push(`order${infix}-${order2}`);
-    if (offset2 != null) classes.push(`offset${infix}-${offset2}`);
   });
-  return [{
-    ...props,
-    className: classNames(className, ...spans, ...classes)
-  }, {
-    as,
-    bsPrefix,
-    spans
-  }];
+  if (transforms) {
+    css += "transform: " + transforms + ";";
+  }
+  node.style.cssText += ";" + css;
 }
-const Col = /* @__PURE__ */ React.forwardRef(
-  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
-  (props, ref) => {
-    const [{
-      className,
-      ...colProps
-    }, {
-      as: Component = "div",
-      bsPrefix,
-      spans
-    }] = useCol(props);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
-      ...colProps,
-      ref,
-      className: classNames(className, !spans.length && bsPrefix)
-    });
+function isEscKey(e) {
+  return e.code === "Escape" || e.keyCode === 27;
+}
+function getReactVersion() {
+  const parts = React.version.split(".");
+  return {
+    major: +parts[0],
+    minor: +parts[1],
+    patch: +parts[2]
+  };
+}
+function getChildRef(element) {
+  if (!element || typeof element === "function") {
+    return null;
   }
-);
-Col.displayName = "Col";
-const FormLabel = /* @__PURE__ */ React.forwardRef(({
-  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
-  as: Component = "label",
-  bsPrefix,
-  column = false,
-  visuallyHidden = false,
-  className,
-  htmlFor,
-  ...props
-}, ref) => {
   const {
-    controlId
-  } = useContext(FormContext);
-  bsPrefix = useBootstrapPrefix(bsPrefix, "form-label");
-  let columnClass = "col-form-label";
-  if (typeof column === "string") columnClass = `${columnClass} ${columnClass}-${column}`;
-  const classes = classNames(className, bsPrefix, visuallyHidden && "visually-hidden", column && columnClass);
-  process.env.NODE_ENV !== "production" ? warning(controlId == null || !htmlFor, "`controlId` is ignored on `<FormLabel>` when `htmlFor` is specified.") : void 0;
-  htmlFor = htmlFor || controlId;
-  if (column) return /* @__PURE__ */ jsxRuntimeExports.jsx(Col, {
-    ref,
-    as: "label",
-    className: classes,
-    htmlFor,
-    ...props
-  });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
-    ref,
-    className: classes,
-    htmlFor,
-    ...props
+    major
+  } = getReactVersion();
+  const childRef = major >= 19 ? element.props.ref : element.ref;
+  return childRef;
+}
+const canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+var optionsSupported = false;
+var onceSupported = false;
+try {
+  var options = {
+    get passive() {
+      return optionsSupported = true;
+    },
+    get once() {
+      return onceSupported = optionsSupported = true;
+    }
+  };
+  if (canUseDOM) {
+    window.addEventListener("test", options, options);
+    window.removeEventListener("test", options, true);
+  }
+} catch (e) {
+}
+function addEventListener(node, eventName, handler, options) {
+  if (options && typeof options !== "boolean" && !onceSupported) {
+    var once = options.once, capture = options.capture;
+    var wrappedHandler = handler;
+    if (!onceSupported && once) {
+      wrappedHandler = handler.__once || function onceHandler(event) {
+        this.removeEventListener(eventName, onceHandler, capture);
+        handler.call(this, event);
+      };
+      handler.__once = wrappedHandler;
+    }
+    node.addEventListener(eventName, wrappedHandler, optionsSupported ? options : capture);
+  }
+  node.addEventListener(eventName, handler, options);
+}
+function removeEventListener(node, eventName, handler, options) {
+  var capture = options && typeof options !== "boolean" ? options.capture : options;
+  node.removeEventListener(eventName, handler, capture);
+  if (handler.__once) {
+    node.removeEventListener(eventName, handler.__once, capture);
+  }
+}
+function listen(node, eventName, handler, options) {
+  addEventListener(node, eventName, handler, options);
+  return function() {
+    removeEventListener(node, eventName, handler, options);
+  };
+}
+function triggerEvent(node, eventName, bubbles, cancelable) {
+  if (cancelable === void 0) {
+    cancelable = true;
+  }
+  if (node) {
+    var event = document.createEvent("HTMLEvents");
+    event.initEvent(eventName, bubbles, cancelable);
+    node.dispatchEvent(event);
+  }
+}
+function parseDuration$1(node) {
+  var str = style(node, "transitionDuration") || "";
+  var mult = str.indexOf("ms") === -1 ? 1e3 : 1;
+  return parseFloat(str) * mult;
+}
+function emulateTransitionEnd(element, duration2, padding2) {
+  if (padding2 === void 0) {
+    padding2 = 5;
+  }
+  var called = false;
+  var handle = setTimeout(function() {
+    if (!called) triggerEvent(element, "transitionend", true);
+  }, duration2 + padding2);
+  var remove = listen(element, "transitionend", function() {
+    called = true;
+  }, {
+    once: true
   });
-});
-FormLabel.displayName = "FormLabel";
-const FormRange = /* @__PURE__ */ React.forwardRef(({
-  bsPrefix,
-  className,
-  id,
+  return function() {
+    clearTimeout(handle);
+    remove();
+  };
+}
+function transitionEnd(element, handler, duration2, padding2) {
+  if (duration2 == null) duration2 = parseDuration$1(element) || 0;
+  var removeEmulate = emulateTransitionEnd(element, duration2, padding2);
+  var remove = listen(element, "transitionend", handler);
+  return function() {
+    removeEmulate();
+    remove();
+  };
+}
+function parseDuration(node, property) {
+  const str = style(node, property) || "";
+  const mult = str.indexOf("ms") === -1 ? 1e3 : 1;
+  return parseFloat(str) * mult;
+}
+function transitionEndListener(element, handler) {
+  const duration2 = parseDuration(element, "transitionDuration");
+  const delay = parseDuration(element, "transitionDelay");
+  const remove = transitionEnd(element, (e) => {
+    if (e.target === element) {
+      remove();
+      handler(e);
+    }
+  }, duration2 + delay);
+}
+function triggerBrowserReflow(node) {
+  node.offsetHeight;
+}
+const toFnRef$1 = (ref) => !ref || typeof ref === "function" ? ref : (value) => {
+  ref.current = value;
+};
+function mergeRefs$1(refA, refB) {
+  const a = toFnRef$1(refA);
+  const b = toFnRef$1(refB);
+  return (value) => {
+    if (a) a(value);
+    if (b) b(value);
+  };
+}
+function useMergedRefs$1(refA, refB) {
+  return useMemo(() => mergeRefs$1(refA, refB), [refA, refB]);
+}
+function safeFindDOMNode(componentOrElement) {
+  if (componentOrElement && "setState" in componentOrElement) {
+    return ReactDOM.findDOMNode(componentOrElement);
+  }
+  return componentOrElement != null ? componentOrElement : null;
+}
+const TransitionWrapper = /* @__PURE__ */ React__default.forwardRef(({
+  onEnter,
+  onEntering,
+  onEntered,
+  onExit,
+  onExiting,
+  onExited,
+  addEndListener,
+  children,
+  childRef,
   ...props
 }, ref) => {
-  const {
-    controlId
-  } = useContext(FormContext);
-  bsPrefix = useBootstrapPrefix(bsPrefix, "form-range");
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("input", {
-    ...props,
-    type: "range",
+  const nodeRef = useRef(null);
+  const mergedRef = useMergedRefs$1(nodeRef, childRef);
+  const attachRef = (r2) => {
+    mergedRef(safeFindDOMNode(r2));
+  };
+  const normalize = (callback) => (param) => {
+    if (callback && nodeRef.current) {
+      callback(nodeRef.current, param);
+    }
+  };
+  const handleEnter = useCallback(normalize(onEnter), [onEnter]);
+  const handleEntering = useCallback(normalize(onEntering), [onEntering]);
+  const handleEntered = useCallback(normalize(onEntered), [onEntered]);
+  const handleExit = useCallback(normalize(onExit), [onExit]);
+  const handleExiting = useCallback(normalize(onExiting), [onExiting]);
+  const handleExited = useCallback(normalize(onExited), [onExited]);
+  const handleAddEndListener = useCallback(normalize(addEndListener), [addEndListener]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Transition, {
     ref,
-    className: classNames(className, bsPrefix),
-    id: id || controlId
-  });
-});
-FormRange.displayName = "FormRange";
-const FormSelect = /* @__PURE__ */ React.forwardRef(({
-  bsPrefix,
-  size,
-  htmlSize,
-  className,
-  isValid = false,
-  isInvalid = false,
-  id,
-  ...props
-}, ref) => {
-  const {
-    controlId
-  } = useContext(FormContext);
-  bsPrefix = useBootstrapPrefix(bsPrefix, "form-select");
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("select", {
     ...props,
-    size: htmlSize,
-    ref,
-    className: classNames(className, bsPrefix, size && `${bsPrefix}-${size}`, isValid && `is-valid`, isInvalid && `is-invalid`),
-    id: id || controlId
+    onEnter: handleEnter,
+    onEntered: handleEntered,
+    onEntering: handleEntering,
+    onExit: handleExit,
+    onExited: handleExited,
+    onExiting: handleExiting,
+    addEndListener: handleAddEndListener,
+    nodeRef,
+    children: typeof children === "function" ? (status, innerProps) => (
+      // TODO: Types for RTG missing innerProps, so need to cast.
+      children(status, {
+        ...innerProps,
+        ref: attachRef
+      })
+    ) : /* @__PURE__ */ React__default.cloneElement(children, {
+      ref: attachRef
+    })
   });
 });
-FormSelect.displayName = "FormSelect";
-const FormText = /* @__PURE__ */ React.forwardRef(
-  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
-  ({
-    bsPrefix,
-    className,
-    as: Component = "small",
-    muted,
-    ...props
-  }, ref) => {
-    bsPrefix = useBootstrapPrefix(bsPrefix, "form-text");
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
-      ...props,
-      ref,
-      className: classNames(className, bsPrefix, muted && "text-muted")
-    });
-  }
-);
-FormText.displayName = "FormText";
-const Switch = /* @__PURE__ */ React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormCheck$1, {
-  ...props,
-  ref,
-  type: "switch"
-}));
-Switch.displayName = "Switch";
-const Switch$1 = Object.assign(Switch, {
-  Input: FormCheck$1.Input,
-  Label: FormCheck$1.Label
-});
-const FloatingLabel = /* @__PURE__ */ React.forwardRef(({
-  bsPrefix,
+TransitionWrapper.displayName = "TransitionWrapper";
+function useCommittedRef$1(value) {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+function useEventCallback$1(fn2) {
+  const ref = useCommittedRef$1(fn2);
+  return useCallback(function(...args) {
+    return ref.current && ref.current(...args);
+  }, [ref]);
+}
+function useCallbackRef() {
+  return useState(null);
+}
+function useCommittedRef(value) {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+function useEventCallback(fn2) {
+  const ref = useCommittedRef(fn2);
+  return useCallback(function(...args) {
+    return ref.current && ref.current(...args);
+  }, [ref]);
+}
+function useMounted$1() {
+  const mounted = useRef(true);
+  const isMounted = useRef(() => mounted.current);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  return isMounted.current;
+}
+const isReactNative$1 = typeof global !== "undefined" && // @ts-ignore
+global.navigator && // @ts-ignore
+global.navigator.product === "ReactNative";
+const isDOM$1 = typeof document !== "undefined";
+const useIsomorphicEffect$1 = isDOM$1 || isReactNative$1 ? useLayoutEffect : useEffect;
+const fadeStyles = {
+  [ENTERING]: "show",
+  [ENTERED]: "show"
+};
+const Fade = /* @__PURE__ */ React.forwardRef(({
   className,
   children,
-  controlId,
-  label,
-  ...props
+  transitionClasses = {},
+  onEnter,
+  ...rest
 }, ref) => {
-  bsPrefix = useBootstrapPrefix(bsPrefix, "form-floating");
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormGroup, {
+  const props = {
+    in: false,
+    timeout: 300,
+    mountOnEnter: false,
+    unmountOnExit: false,
+    appear: false,
+    ...rest
+  };
+  const handleEnter = useCallback((node, isAppearing) => {
+    triggerBrowserReflow(node);
+    onEnter == null || onEnter(node, isAppearing);
+  }, [onEnter]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TransitionWrapper, {
     ref,
-    className: classNames(className, bsPrefix),
-    controlId,
+    addEndListener: transitionEndListener,
     ...props,
-    children: [children, /* @__PURE__ */ jsxRuntimeExports.jsx("label", {
-      htmlFor: controlId,
-      children: label
-    })]
+    onEnter: handleEnter,
+    childRef: getChildRef(children),
+    children: (status, innerProps) => /* @__PURE__ */ React.cloneElement(children, {
+      ...innerProps,
+      className: classNames("fade", className, children.props.className, fadeStyles[status], transitionClasses[status])
+    })
   });
 });
-FloatingLabel.displayName = "FloatingLabel";
-const propTypes = {
-  /**
-   * The Form `ref` will be forwarded to the underlying element,
-   * which means, unless it's rendered `as` a composite component,
-   * it will be a DOM node, when resolved.
-   *
-   * @type {ReactRef}
-   * @alias ref
-   */
-  _ref: PropTypes.any,
-  /**
-   * Mark a form as having been validated. Setting it to `true` will
-   * toggle any validation styles on the forms elements.
-   */
-  validated: PropTypes.bool,
-  as: PropTypes.elementType
-};
-const Form = /* @__PURE__ */ React.forwardRef(({
-  className,
-  validated,
-  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
-  as: Component = "form",
-  ...props
-}, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
-  ...props,
-  ref,
-  className: classNames(className, validated && "was-validated")
-}));
-Form.displayName = "Form";
-Form.propTypes = propTypes;
-const Form$1 = Object.assign(Form, {
-  Group: FormGroup,
-  Control: FormControl$1,
-  Floating: FormFloating,
-  Check: FormCheck$1,
-  Switch: Switch$1,
-  Label: FormLabel,
-  Text: FormText,
-  Range: FormRange,
-  Select: FormSelect,
-  FloatingLabel
-});
-function FaCheck(props) {
-  return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" }, "child": [] }] })(props);
+Fade.displayName = "Fade";
+function useMounted() {
+  const mounted = useRef(true);
+  const isMounted = useRef(() => mounted.current);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  return isMounted.current;
 }
-function FaChevronDown(props) {
-  return GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" }, "child": [] }] })(props);
+function useUpdatedRef(value) {
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  return valueRef;
 }
-function FaChevronUp(props) {
-  return GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" }, "child": [] }] })(props);
+function useWillUnmount(fn2) {
+  const onUnmount = useUpdatedRef(fn2);
+  useEffect(() => () => onUnmount.current(), []);
 }
-const ComboDropdown = ({
-  label,
-  options = [],
-  placeholder = "",
-  onChange,
-  name,
-  value,
-  error,
-  disabled,
-  height: height2 = "40px",
-  isPassword = false,
-  mode = "both",
-  // 'select' | 'type' | 'both'
-  isRequired = false,
-  selectedBgColor = "#dee2e6",
-  selectedTextColor = "black",
-  optionLabelKey = "label",
-  optionValueKey = "value"
-}) => {
-  const [inputValue, setInputValue] = useState("");
-  const [filteredOptions, setFilteredOptions] = useState([]);
-  const [showDropdown, setShowDropdown] = useState(false);
-  const [highlightIndex, setHighlightIndex] = useState(-1);
-  const inputRef = useRef();
-  const wrapperRef = useRef();
-  useEffect(() => {
-    const matchedOption = options.find(
-      (opt) => typeof opt === "string" ? opt === value : opt[optionValueKey] === value
-    );
-    const label2 = typeof matchedOption === "string" ? matchedOption : (matchedOption == null ? void 0 : matchedOption[optionLabelKey]) || "";
-    setInputValue(label2);
-    if (mode !== "type") {
-      setFilteredOptions(normalizeOptions(options));
-    }
-  }, [value, options]);
-  const normalizeOptions = (opts) => {
-    return opts.map((opt) => {
-      if (typeof opt === "string") {
-        return { label: opt, value: opt };
-      }
-      return {
-        label: opt[optionLabelKey],
-        value: opt[optionValueKey]
-      };
-    });
-  };
-  const handleInputChange = (e) => {
-    const val = e.target.value;
-    setInputValue(val);
-    if (mode !== "select") {
-      if (name) onChange(name, val);
-      else onChange(val);
-    }
-    if (mode !== "type") {
-      const normalized = normalizeOptions(options);
-      const filtered = normalized.filter(
-        (opt) => {
-          var _a;
-          return (_a = opt.label) == null ? void 0 : _a.toLowerCase().includes(val.toLowerCase());
-        }
-      );
-      setFilteredOptions(filtered);
-      setShowDropdown(true);
-      setHighlightIndex(-1);
-    }
-  };
-  const handleSelect = (val, label2) => {
-    setInputValue(label2);
-    if (name) {
-      onChange(name, val);
-    } else {
-      onChange(val);
-    }
-    setShowDropdown(false);
-    setHighlightIndex(-1);
-  };
-  const handleKeyDown = (e) => {
-    if (!showDropdown || filteredOptions.length === 0) return;
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setHighlightIndex(
-        (prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0
-      );
-    }
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setHighlightIndex(
-        (prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1
-      );
-    }
-    if (e.key === "Enter") {
-      e.preventDefault();
-      if (highlightIndex >= 0) {
-        const selected = filteredOptions[highlightIndex];
-        handleSelect(selected.value, selected.label);
+const MAX_DELAY_MS = 2 ** 31 - 1;
+function setChainedTimeout(handleRef, fn2, timeoutAtMs) {
+  const delayMs = timeoutAtMs - Date.now();
+  handleRef.current = delayMs <= MAX_DELAY_MS ? setTimeout(fn2, delayMs) : setTimeout(() => setChainedTimeout(handleRef, fn2, timeoutAtMs), MAX_DELAY_MS);
+}
+function useTimeout() {
+  const isMounted = useMounted();
+  const handleRef = useRef();
+  useWillUnmount(() => clearTimeout(handleRef.current));
+  return useMemo(() => {
+    const clear = () => clearTimeout(handleRef.current);
+    function set(fn2, delayMs = 0) {
+      if (!isMounted()) return;
+      clear();
+      if (delayMs <= MAX_DELAY_MS) {
+        handleRef.current = setTimeout(fn2, delayMs);
+      } else {
+        setChainedTimeout(handleRef, fn2, Date.now() + delayMs);
       }
     }
-  };
-  const getPlaceholder = () => {
-    if (placeholder) return placeholder;
-    if (mode === "select") return "Select an option...";
-    if (mode === "type") return "Type a value...";
-    return "Select or type...";
-  };
-  const toggleDropdown = () => {
-    if (disabled) return;
-    if (!showDropdown && mode !== "type") {
-      setFilteredOptions(normalizeOptions(options));
-    }
-    setShowDropdown((prev) => {
-      var _a;
-      const willShow = !prev;
-      if (willShow) (_a = inputRef.current) == null ? void 0 : _a.focus();
-      return willShow;
-    });
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Form$1.Group, { ref: wrapperRef, className: "mb-3 position-relative", children: [
-    label && /* @__PURE__ */ jsxRuntimeExports.jsxs(Form$1.Label, { style: { display: "flex", fontWeight: "500", fontSize: "14px", lineHeight: "20px", color: "#212529", textTransform: "capitalize", marginBottom: "0.5rem" }, children: [
-      label,
-      isRequired && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "red" }, children: "*" })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "d-flex position-relative", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Form$1.Control,
-        {
-          ref: inputRef,
-          type: isPassword ? "password" : "text",
-          placeholder: getPlaceholder(),
-          style: {
-            borderColor: "#12AB5B",
-            height: height2,
-            paddingRight: "2rem"
-          },
-          name,
-          value: inputValue,
-          onChange: handleInputChange,
-          onFocus: () => {
-            if (mode !== "type") {
-              setFilteredOptions(normalizeOptions(options));
-              setShowDropdown(true);
-            }
-          },
-          onClick: () => {
-            if (mode !== "type") {
-              setFilteredOptions(normalizeOptions(options));
-              setShowDropdown(true);
-            }
-          },
-          onKeyDown: handleKeyDown,
-          isInvalid: !!error,
-          disabled,
-          readOnly: mode === "select",
-          autoComplete: "off"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: "position-absolute end-0 top-0 d-flex align-items-center justify-content-center",
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: toggleDropdown,
-          style: {
-            width: "2rem",
-            height: height2,
-            cursor: "pointer",
-            border: "1px solid #12AB5B",
-            borderLeft: "none",
-            borderTopRightRadius: "0.375rem",
-            borderBottomRightRadius: "0.375rem",
-            background: "#fff"
-          },
-          children: showDropdown ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaChevronUp, { size: 12 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(FaChevronDown, { size: 12 })
-        }
-      )
-    ] }),
-    showDropdown && filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "ul",
-      {
-        className: "list-group position-absolute w-100 z-3",
-        style: { maxHeight: "200px", overflowY: "auto", boxShadow: "5px 5px 15px lightgray" },
-        children: filteredOptions.map((opt, index) => {
-          const isSelected = opt.value === value;
-          const isHighlighted = index === highlightIndex;
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "li",
-            {
-              className: "list-group-item list-group-item-action",
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: () => handleSelect(opt.value, opt.label),
-              style: {
-                cursor: "pointer",
-                fontSize: "12px",
-                textAlign: "left",
-                backgroundColor: isHighlighted ? "#e9ecef" : isSelected ? selectedBgColor : "white",
-                color: isSelected ? selectedTextColor : "black",
-                padding: "8px 12px"
-              },
-              children: opt.label
-            },
-            index
-          );
-        })
-      }
-    ),
-    error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "invalid-feedback d-block", children: error })
-  ] });
-};
-function useUncontrolledProp(propValue, defaultValue, handler) {
-  var wasPropRef = useRef(propValue !== void 0);
-  var _useState = useState(defaultValue), stateValue = _useState[0], setState = _useState[1];
-  var isProp = propValue !== void 0;
-  var wasProp = wasPropRef.current;
-  wasPropRef.current = isProp;
-  if (!isProp && wasProp && stateValue !== defaultValue) {
-    setState(defaultValue);
-  }
-  return [isProp ? propValue : stateValue, useCallback(function(value) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-    if (handler) handler.apply(void 0, [value].concat(args));
-    setState(value);
-  }, [handler])];
-}
-function ownerDocument(node) {
-  return node && node.ownerDocument || document;
-}
-function ownerWindow(node) {
-  var doc = ownerDocument(node);
-  return doc && doc.defaultView || window;
-}
-function getComputedStyle(node, psuedoElement) {
-  return ownerWindow(node).getComputedStyle(node, psuedoElement);
-}
-var rUpper = /([A-Z])/g;
-function hyphenate(string) {
-  return string.replace(rUpper, "-$1").toLowerCase();
-}
-var msPattern = /^ms-/;
-function hyphenateStyleName(string) {
-  return hyphenate(string).replace(msPattern, "-ms-");
+    return {
+      set,
+      clear,
+      handleRef
+    };
+  }, []);
 }
-var supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i;
-function isTransform(value) {
-  return !!(value && supportedTransforms.test(value));
+function hasChildOfType(children, type) {
+  return React.Children.toArray(children).some((child) => /* @__PURE__ */ React.isValidElement(child) && child.type === type);
 }
-function style(node, property) {
-  var css = "";
-  var transforms = "";
-  if (typeof property === "string") {
-    return node.style.getPropertyValue(hyphenateStyleName(property)) || getComputedStyle(node).getPropertyValue(hyphenateStyleName(property));
-  }
-  Object.keys(property).forEach(function(key) {
-    var value = property[key];
-    if (!value && value !== 0) {
-      node.style.removeProperty(hyphenateStyleName(key));
-    } else if (isTransform(key)) {
-      transforms += key + "(" + value + ") ";
+function useCol({
+  as,
+  bsPrefix,
+  className,
+  ...props
+}) {
+  bsPrefix = useBootstrapPrefix(bsPrefix, "col");
+  const breakpoints = useBootstrapBreakpoints();
+  const minBreakpoint = useBootstrapMinBreakpoint();
+  const spans = [];
+  const classes = [];
+  breakpoints.forEach((brkPoint) => {
+    const propValue = props[brkPoint];
+    delete props[brkPoint];
+    let span;
+    let offset2;
+    let order2;
+    if (typeof propValue === "object" && propValue != null) {
+      ({
+        span,
+        offset: offset2,
+        order: order2
+      } = propValue);
     } else {
-      css += hyphenateStyleName(key) + ": " + value + ";";
+      span = propValue;
     }
+    const infix = brkPoint !== minBreakpoint ? `-${brkPoint}` : "";
+    if (span) spans.push(span === true ? `${bsPrefix}${infix}` : `${bsPrefix}${infix}-${span}`);
+    if (order2 != null) classes.push(`order${infix}-${order2}`);
+    if (offset2 != null) classes.push(`offset${infix}-${offset2}`);
   });
-  if (transforms) {
-    css += "transform: " + transforms + ";";
-  }
-  node.style.cssText += ";" + css;
-}
-function isEscKey(e) {
-  return e.code === "Escape" || e.keyCode === 27;
-}
-function getReactVersion() {
-  const parts = React.version.split(".");
-  return {
-    major: +parts[0],
-    minor: +parts[1],
-    patch: +parts[2]
-  };
+  return [{
+    ...props,
+    className: classNames(className, ...spans, ...classes)
+  }, {
+    as,
+    bsPrefix,
+    spans
+  }];
 }
-function getChildRef(element) {
-  if (!element || typeof element === "function") {
-    return null;
+const Col = /* @__PURE__ */ React.forwardRef(
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  (props, ref) => {
+    const [{
+      className,
+      ...colProps
+    }, {
+      as: Component = "div",
+      bsPrefix,
+      spans
+    }] = useCol(props);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
+      ...colProps,
+      ref,
+      className: classNames(className, !spans.length && bsPrefix)
+    });
   }
-  const {
-    major
-  } = getReactVersion();
-  const childRef = major >= 19 ? element.props.ref : element.ref;
-  return childRef;
-}
-const canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
-var optionsSupported = false;
-var onceSupported = false;
-try {
-  var options = {
-    get passive() {
-      return optionsSupported = true;
-    },
-    get once() {
-      return onceSupported = optionsSupported = true;
-    }
-  };
-  if (canUseDOM) {
-    window.addEventListener("test", options, options);
-    window.removeEventListener("test", options, true);
+);
+Col.displayName = "Col";
+var has = Object.prototype.hasOwnProperty;
+function find(iter, tar, key) {
+  for (key of iter.keys()) {
+    if (dequal(key, tar)) return key;
   }
-} catch (e) {
 }
-function addEventListener(node, eventName, handler, options) {
-  if (options && typeof options !== "boolean" && !onceSupported) {
-    var once = options.once, capture = options.capture;
-    var wrappedHandler = handler;
-    if (!onceSupported && once) {
-      wrappedHandler = handler.__once || function onceHandler(event) {
-        this.removeEventListener(eventName, onceHandler, capture);
-        handler.call(this, event);
-      };
-      handler.__once = wrappedHandler;
+function dequal(foo, bar) {
+  var ctor, len, tmp;
+  if (foo === bar) return true;
+  if (foo && bar && (ctor = foo.constructor) === bar.constructor) {
+    if (ctor === Date) return foo.getTime() === bar.getTime();
+    if (ctor === RegExp) return foo.toString() === bar.toString();
+    if (ctor === Array) {
+      if ((len = foo.length) === bar.length) {
+        while (len-- && dequal(foo[len], bar[len])) ;
+      }
+      return len === -1;
+    }
+    if (ctor === Set) {
+      if (foo.size !== bar.size) {
+        return false;
+      }
+      for (len of foo) {
+        tmp = len;
+        if (tmp && typeof tmp === "object") {
+          tmp = find(bar, tmp);
+          if (!tmp) return false;
+        }
+        if (!bar.has(tmp)) return false;
+      }
+      return true;
+    }
+    if (ctor === Map) {
+      if (foo.size !== bar.size) {
+        return false;
+      }
+      for (len of foo) {
+        tmp = len[0];
+        if (tmp && typeof tmp === "object") {
+          tmp = find(bar, tmp);
+          if (!tmp) return false;
+        }
+        if (!dequal(len[1], bar.get(tmp))) {
+          return false;
+        }
+      }
+      return true;
+    }
+    if (ctor === ArrayBuffer) {
+      foo = new Uint8Array(foo);
+      bar = new Uint8Array(bar);
+    } else if (ctor === DataView) {
+      if ((len = foo.byteLength) === bar.byteLength) {
+        while (len-- && foo.getInt8(len) === bar.getInt8(len)) ;
+      }
+      return len === -1;
+    }
+    if (ArrayBuffer.isView(foo)) {
+      if ((len = foo.byteLength) === bar.byteLength) {
+        while (len-- && foo[len] === bar[len]) ;
+      }
+      return len === -1;
+    }
+    if (!ctor || typeof foo === "object") {
+      len = 0;
+      for (ctor in foo) {
+        if (has.call(foo, ctor) && ++len && !has.call(bar, ctor)) return false;
+        if (!(ctor in bar) || !dequal(foo[ctor], bar[ctor])) return false;
+      }
+      return Object.keys(bar).length === len;
     }
-    node.addEventListener(eventName, wrappedHandler, optionsSupported ? options : capture);
-  }
-  node.addEventListener(eventName, handler, options);
-}
-function removeEventListener(node, eventName, handler, options) {
-  var capture = options && typeof options !== "boolean" ? options.capture : options;
-  node.removeEventListener(eventName, handler, capture);
-  if (handler.__once) {
-    node.removeEventListener(eventName, handler.__once, capture);
-  }
-}
-function listen(node, eventName, handler, options) {
-  addEventListener(node, eventName, handler, options);
-  return function() {
-    removeEventListener(node, eventName, handler, options);
-  };
-}
-function triggerEvent(node, eventName, bubbles, cancelable) {
-  if (cancelable === void 0) {
-    cancelable = true;
-  }
-  if (node) {
-    var event = document.createEvent("HTMLEvents");
-    event.initEvent(eventName, bubbles, cancelable);
-    node.dispatchEvent(event);
   }
+  return foo !== foo && bar !== bar;
 }
-function parseDuration$1(node) {
-  var str = style(node, "transitionDuration") || "";
-  var mult = str.indexOf("ms") === -1 ? 1e3 : 1;
-  return parseFloat(str) * mult;
+function useSafeState(state) {
+  const isMounted = useMounted$1();
+  return [state[0], useCallback((nextState) => {
+    if (!isMounted()) return;
+    return state[1](nextState);
+  }, [isMounted, state[1]])];
 }
-function emulateTransitionEnd(element, duration2, padding2) {
-  if (padding2 === void 0) {
-    padding2 = 5;
+const createPopper = popperGenerator({
+  defaultModifiers: [hide$1, popperOffsets$1, computeStyles$1, eventListeners, offset$1, flip$1, preventOverflow$1, arrow$1]
+});
+const _excluded$2 = ["enabled", "placement", "strategy", "modifiers"];
+function _objectWithoutPropertiesLoose$2(r2, e) {
+  if (null == r2) return {};
+  var t = {};
+  for (var n in r2) if ({}.hasOwnProperty.call(r2, n)) {
+    if (e.indexOf(n) >= 0) continue;
+    t[n] = r2[n];
   }
-  var called = false;
-  var handle = setTimeout(function() {
-    if (!called) triggerEvent(element, "transitionend", true);
-  }, duration2 + padding2);
-  var remove = listen(element, "transitionend", function() {
-    called = true;
-  }, {
-    once: true
-  });
-  return function() {
-    clearTimeout(handle);
-    remove();
-  };
-}
-function transitionEnd(element, handler, duration2, padding2) {
-  if (duration2 == null) duration2 = parseDuration$1(element) || 0;
-  var removeEmulate = emulateTransitionEnd(element, duration2, padding2);
-  var remove = listen(element, "transitionend", handler);
-  return function() {
-    removeEmulate();
-    remove();
-  };
-}
-function parseDuration(node, property) {
-  const str = style(node, property) || "";
-  const mult = str.indexOf("ms") === -1 ? 1e3 : 1;
-  return parseFloat(str) * mult;
-}
-function transitionEndListener(element, handler) {
-  const duration2 = parseDuration(element, "transitionDuration");
-  const delay = parseDuration(element, "transitionDelay");
-  const remove = transitionEnd(element, (e) => {
-    if (e.target === element) {
-      remove();
-      handler(e);
-    }
-  }, duration2 + delay);
-}
-function triggerBrowserReflow(node) {
-  node.offsetHeight;
+  return t;
 }
-const toFnRef$1 = (ref) => !ref || typeof ref === "function" ? ref : (value) => {
-  ref.current = value;
+const disabledApplyStylesModifier = {
+  name: "applyStyles",
+  enabled: false,
+  phase: "afterWrite",
+  fn: () => void 0
 };
-function mergeRefs$1(refA, refB) {
-  const a = toFnRef$1(refA);
-  const b = toFnRef$1(refB);
-  return (value) => {
-    if (a) a(value);
-    if (b) b(value);
-  };
-}
-function useMergedRefs$1(refA, refB) {
-  return useMemo(() => mergeRefs$1(refA, refB), [refA, refB]);
-}
-function safeFindDOMNode(componentOrElement) {
-  if (componentOrElement && "setState" in componentOrElement) {
-    return ReactDOM.findDOMNode(componentOrElement);
+const ariaDescribedByModifier = {
+  name: "ariaDescribedBy",
+  enabled: true,
+  phase: "afterWrite",
+  effect: ({
+    state
+  }) => () => {
+    const {
+      reference: reference2,
+      popper: popper2
+    } = state.elements;
+    if ("removeAttribute" in reference2) {
+      const ids = (reference2.getAttribute("aria-describedby") || "").split(",").filter((id) => id.trim() !== popper2.id);
+      if (!ids.length) reference2.removeAttribute("aria-describedby");
+      else reference2.setAttribute("aria-describedby", ids.join(","));
+    }
+  },
+  fn: ({
+    state
+  }) => {
+    var _popper$getAttribute;
+    const {
+      popper: popper2,
+      reference: reference2
+    } = state.elements;
+    const role = (_popper$getAttribute = popper2.getAttribute("role")) == null ? void 0 : _popper$getAttribute.toLowerCase();
+    if (popper2.id && role === "tooltip" && "setAttribute" in reference2) {
+      const ids = reference2.getAttribute("aria-describedby");
+      if (ids && ids.split(",").indexOf(popper2.id) !== -1) {
+        return;
+      }
+      reference2.setAttribute("aria-describedby", ids ? `${ids},${popper2.id}` : popper2.id);
+    }
   }
-  return componentOrElement != null ? componentOrElement : null;
-}
-const TransitionWrapper = /* @__PURE__ */ React__default.forwardRef(({
-  onEnter,
-  onEntering,
-  onEntered,
-  onExit,
-  onExiting,
-  onExited,
-  addEndListener,
-  children,
-  childRef,
-  ...props
-}, ref) => {
-  const nodeRef = useRef(null);
-  const mergedRef = useMergedRefs$1(nodeRef, childRef);
-  const attachRef = (r2) => {
-    mergedRef(safeFindDOMNode(r2));
-  };
-  const normalize = (callback) => (param) => {
-    if (callback && nodeRef.current) {
-      callback(nodeRef.current, param);
+};
+const EMPTY_MODIFIERS = [];
+function usePopper(referenceElement, popperElement, _ref = {}) {
+  let {
+    enabled = true,
+    placement = "bottom",
+    strategy = "absolute",
+    modifiers = EMPTY_MODIFIERS
+  } = _ref, config2 = _objectWithoutPropertiesLoose$2(_ref, _excluded$2);
+  const prevModifiers = useRef(modifiers);
+  const popperInstanceRef = useRef();
+  const update = useCallback(() => {
+    var _popperInstanceRef$cu;
+    (_popperInstanceRef$cu = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu.update();
+  }, []);
+  const forceUpdate = useCallback(() => {
+    var _popperInstanceRef$cu2;
+    (_popperInstanceRef$cu2 = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu2.forceUpdate();
+  }, []);
+  const [popperState, setState] = useSafeState(useState({
+    placement,
+    update,
+    forceUpdate,
+    attributes: {},
+    styles: {
+      popper: {},
+      arrow: {}
     }
-  };
-  const handleEnter = useCallback(normalize(onEnter), [onEnter]);
-  const handleEntering = useCallback(normalize(onEntering), [onEntering]);
-  const handleEntered = useCallback(normalize(onEntered), [onEntered]);
-  const handleExit = useCallback(normalize(onExit), [onExit]);
-  const handleExiting = useCallback(normalize(onExiting), [onExiting]);
-  const handleExited = useCallback(normalize(onExited), [onExited]);
-  const handleAddEndListener = useCallback(normalize(addEndListener), [addEndListener]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Transition, {
-    ref,
-    ...props,
-    onEnter: handleEnter,
-    onEntered: handleEntered,
-    onEntering: handleEntering,
-    onExit: handleExit,
-    onExited: handleExited,
-    onExiting: handleExiting,
-    addEndListener: handleAddEndListener,
-    nodeRef,
-    children: typeof children === "function" ? (status, innerProps) => (
-      // TODO: Types for RTG missing innerProps, so need to cast.
-      children(status, {
-        ...innerProps,
-        ref: attachRef
-      })
-    ) : /* @__PURE__ */ React__default.cloneElement(children, {
-      ref: attachRef
-    })
-  });
-});
-TransitionWrapper.displayName = "TransitionWrapper";
-function useCommittedRef$1(value) {
-  const ref = useRef(value);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref;
-}
-function useEventCallback$1(fn2) {
-  const ref = useCommittedRef$1(fn2);
-  return useCallback(function(...args) {
-    return ref.current && ref.current(...args);
-  }, [ref]);
-}
-function useCallbackRef() {
-  return useState(null);
-}
-function useCommittedRef(value) {
-  const ref = useRef(value);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref;
-}
-function useEventCallback(fn2) {
-  const ref = useCommittedRef(fn2);
-  return useCallback(function(...args) {
-    return ref.current && ref.current(...args);
-  }, [ref]);
-}
-function useMounted$1() {
-  const mounted = useRef(true);
-  const isMounted = useRef(() => mounted.current);
+  }));
+  const updateModifier = useMemo(() => ({
+    name: "updateStateModifier",
+    enabled: true,
+    phase: "write",
+    requires: ["computeStyles"],
+    fn: ({
+      state
+    }) => {
+      const styles = {};
+      const attributes = {};
+      Object.keys(state.elements).forEach((element) => {
+        styles[element] = state.styles[element];
+        attributes[element] = state.attributes[element];
+      });
+      setState({
+        state,
+        styles,
+        attributes,
+        update,
+        forceUpdate,
+        placement: state.placement
+      });
+    }
+  }), [update, forceUpdate, setState]);
+  const nextModifiers = useMemo(() => {
+    if (!dequal(prevModifiers.current, modifiers)) {
+      prevModifiers.current = modifiers;
+    }
+    return prevModifiers.current;
+  }, [modifiers]);
   useEffect(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-  return isMounted.current;
-}
-const isReactNative$1 = typeof global !== "undefined" && // @ts-ignore
-global.navigator && // @ts-ignore
-global.navigator.product === "ReactNative";
-const isDOM$1 = typeof document !== "undefined";
-const useIsomorphicEffect$1 = isDOM$1 || isReactNative$1 ? useLayoutEffect : useEffect;
-const fadeStyles = {
-  [ENTERING]: "show",
-  [ENTERED]: "show"
-};
-const Fade = /* @__PURE__ */ React.forwardRef(({
-  className,
-  children,
-  transitionClasses = {},
-  onEnter,
-  ...rest
-}, ref) => {
-  const props = {
-    in: false,
-    timeout: 300,
-    mountOnEnter: false,
-    unmountOnExit: false,
-    appear: false,
-    ...rest
-  };
-  const handleEnter = useCallback((node, isAppearing) => {
-    triggerBrowserReflow(node);
-    onEnter == null || onEnter(node, isAppearing);
-  }, [onEnter]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(TransitionWrapper, {
-    ref,
-    addEndListener: transitionEndListener,
-    ...props,
-    onEnter: handleEnter,
-    childRef: getChildRef(children),
-    children: (status, innerProps) => /* @__PURE__ */ React.cloneElement(children, {
-      ...innerProps,
-      className: classNames("fade", className, children.props.className, fadeStyles[status], transitionClasses[status])
-    })
-  });
-});
-Fade.displayName = "Fade";
-function useMounted() {
-  const mounted = useRef(true);
-  const isMounted = useRef(() => mounted.current);
+    if (!popperInstanceRef.current || !enabled) return;
+    popperInstanceRef.current.setOptions({
+      placement,
+      strategy,
+      modifiers: [...nextModifiers, updateModifier, disabledApplyStylesModifier]
+    });
+  }, [strategy, placement, updateModifier, enabled, nextModifiers]);
   useEffect(() => {
-    mounted.current = true;
+    if (!enabled || referenceElement == null || popperElement == null) {
+      return void 0;
+    }
+    popperInstanceRef.current = createPopper(referenceElement, popperElement, Object.assign({}, config2, {
+      placement,
+      strategy,
+      modifiers: [...nextModifiers, ariaDescribedByModifier, updateModifier]
+    }));
     return () => {
-      mounted.current = false;
-    };
-  }, []);
-  return isMounted.current;
-}
-function useUpdatedRef(value) {
-  const valueRef = useRef(value);
-  valueRef.current = value;
-  return valueRef;
-}
-function useWillUnmount(fn2) {
-  const onUnmount = useUpdatedRef(fn2);
-  useEffect(() => () => onUnmount.current(), []);
-}
-const MAX_DELAY_MS = 2 ** 31 - 1;
-function setChainedTimeout(handleRef, fn2, timeoutAtMs) {
-  const delayMs = timeoutAtMs - Date.now();
-  handleRef.current = delayMs <= MAX_DELAY_MS ? setTimeout(fn2, delayMs) : setTimeout(() => setChainedTimeout(handleRef, fn2, timeoutAtMs), MAX_DELAY_MS);
-}
-function useTimeout() {
-  const isMounted = useMounted();
-  const handleRef = useRef();
-  useWillUnmount(() => clearTimeout(handleRef.current));
-  return useMemo(() => {
-    const clear = () => clearTimeout(handleRef.current);
-    function set(fn2, delayMs = 0) {
-      if (!isMounted()) return;
-      clear();
-      if (delayMs <= MAX_DELAY_MS) {
-        handleRef.current = setTimeout(fn2, delayMs);
-      } else {
-        setChainedTimeout(handleRef, fn2, Date.now() + delayMs);
+      if (popperInstanceRef.current != null) {
+        popperInstanceRef.current.destroy();
+        popperInstanceRef.current = void 0;
+        setState((s) => Object.assign({}, s, {
+          attributes: {},
+          styles: {
+            popper: {}
+          }
+        }));
       }
-    }
-    return {
-      set,
-      clear,
-      handleRef
     };
-  }, []);
+  }, [enabled, referenceElement, popperElement]);
+  return popperState;
 }
-var has = Object.prototype.hasOwnProperty;
-function find(iter, tar, key) {
-  for (key of iter.keys()) {
-    if (dequal(key, tar)) return key;
-  }
+function contains(context2, node) {
+  if (context2.contains) return context2.contains(node);
+  if (context2.compareDocumentPosition) return context2 === node || !!(context2.compareDocumentPosition(node) & 16);
 }
-function dequal(foo, bar) {
-  var ctor, len, tmp;
-  if (foo === bar) return true;
-  if (foo && bar && (ctor = foo.constructor) === bar.constructor) {
-    if (ctor === Date) return foo.getTime() === bar.getTime();
-    if (ctor === RegExp) return foo.toString() === bar.toString();
-    if (ctor === Array) {
-      if ((len = foo.length) === bar.length) {
-        while (len-- && dequal(foo[len], bar[len])) ;
+var warning_1;
+var hasRequiredWarning;
+function requireWarning() {
+  if (hasRequiredWarning) return warning_1;
+  hasRequiredWarning = 1;
+  var __DEV__ = process.env.NODE_ENV !== "production";
+  var warning2 = function() {
+  };
+  if (__DEV__) {
+    var printWarning = function printWarning2(format, args) {
+      var len = arguments.length;
+      args = new Array(len > 1 ? len - 1 : 0);
+      for (var key = 1; key < len; key++) {
+        args[key - 1] = arguments[key];
       }
-      return len === -1;
-    }
-    if (ctor === Set) {
-      if (foo.size !== bar.size) {
-        return false;
+      var argIndex = 0;
+      var message = "Warning: " + format.replace(/%s/g, function() {
+        return args[argIndex++];
+      });
+      if (typeof console !== "undefined") {
+        console.error(message);
       }
-      for (len of foo) {
-        tmp = len;
-        if (tmp && typeof tmp === "object") {
-          tmp = find(bar, tmp);
-          if (!tmp) return false;
-        }
-        if (!bar.has(tmp)) return false;
+      try {
+        throw new Error(message);
+      } catch (x) {
       }
-      return true;
-    }
-    if (ctor === Map) {
-      if (foo.size !== bar.size) {
-        return false;
+    };
+    warning2 = function(condition, format, args) {
+      var len = arguments.length;
+      args = new Array(len > 2 ? len - 2 : 0);
+      for (var key = 2; key < len; key++) {
+        args[key - 2] = arguments[key];
       }
-      for (len of foo) {
-        tmp = len[0];
-        if (tmp && typeof tmp === "object") {
-          tmp = find(bar, tmp);
-          if (!tmp) return false;
-        }
-        if (!dequal(len[1], bar.get(tmp))) {
-          return false;
-        }
+      if (format === void 0) {
+        throw new Error(
+          "`warning(condition, format, ...args)` requires a warning message argument"
+        );
       }
-      return true;
-    }
-    if (ctor === ArrayBuffer) {
-      foo = new Uint8Array(foo);
-      bar = new Uint8Array(bar);
-    } else if (ctor === DataView) {
-      if ((len = foo.byteLength) === bar.byteLength) {
-        while (len-- && foo.getInt8(len) === bar.getInt8(len)) ;
-      }
-      return len === -1;
-    }
-    if (ArrayBuffer.isView(foo)) {
-      if ((len = foo.byteLength) === bar.byteLength) {
-        while (len-- && foo[len] === bar[len]) ;
-      }
-      return len === -1;
-    }
-    if (!ctor || typeof foo === "object") {
-      len = 0;
-      for (ctor in foo) {
-        if (has.call(foo, ctor) && ++len && !has.call(bar, ctor)) return false;
-        if (!(ctor in bar) || !dequal(foo[ctor], bar[ctor])) return false;
-      }
-      return Object.keys(bar).length === len;
-    }
-  }
-  return foo !== foo && bar !== bar;
-}
-function useSafeState(state) {
-  const isMounted = useMounted$1();
-  return [state[0], useCallback((nextState) => {
-    if (!isMounted()) return;
-    return state[1](nextState);
-  }, [isMounted, state[1]])];
-}
-const createPopper = popperGenerator({
-  defaultModifiers: [hide$1, popperOffsets$1, computeStyles$1, eventListeners, offset$1, flip$1, preventOverflow$1, arrow$1]
-});
-const _excluded$2 = ["enabled", "placement", "strategy", "modifiers"];
-function _objectWithoutPropertiesLoose$2(r2, e) {
-  if (null == r2) return {};
-  var t = {};
-  for (var n in r2) if ({}.hasOwnProperty.call(r2, n)) {
-    if (e.indexOf(n) >= 0) continue;
-    t[n] = r2[n];
-  }
-  return t;
-}
-const disabledApplyStylesModifier = {
-  name: "applyStyles",
-  enabled: false,
-  phase: "afterWrite",
-  fn: () => void 0
-};
-const ariaDescribedByModifier = {
-  name: "ariaDescribedBy",
-  enabled: true,
-  phase: "afterWrite",
-  effect: ({
-    state
-  }) => () => {
-    const {
-      reference: reference2,
-      popper: popper2
-    } = state.elements;
-    if ("removeAttribute" in reference2) {
-      const ids = (reference2.getAttribute("aria-describedby") || "").split(",").filter((id) => id.trim() !== popper2.id);
-      if (!ids.length) reference2.removeAttribute("aria-describedby");
-      else reference2.setAttribute("aria-describedby", ids.join(","));
-    }
-  },
-  fn: ({
-    state
-  }) => {
-    var _popper$getAttribute;
-    const {
-      popper: popper2,
-      reference: reference2
-    } = state.elements;
-    const role = (_popper$getAttribute = popper2.getAttribute("role")) == null ? void 0 : _popper$getAttribute.toLowerCase();
-    if (popper2.id && role === "tooltip" && "setAttribute" in reference2) {
-      const ids = reference2.getAttribute("aria-describedby");
-      if (ids && ids.split(",").indexOf(popper2.id) !== -1) {
-        return;
-      }
-      reference2.setAttribute("aria-describedby", ids ? `${ids},${popper2.id}` : popper2.id);
-    }
-  }
-};
-const EMPTY_MODIFIERS = [];
-function usePopper(referenceElement, popperElement, _ref = {}) {
-  let {
-    enabled = true,
-    placement = "bottom",
-    strategy = "absolute",
-    modifiers = EMPTY_MODIFIERS
-  } = _ref, config2 = _objectWithoutPropertiesLoose$2(_ref, _excluded$2);
-  const prevModifiers = useRef(modifiers);
-  const popperInstanceRef = useRef();
-  const update = useCallback(() => {
-    var _popperInstanceRef$cu;
-    (_popperInstanceRef$cu = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu.update();
-  }, []);
-  const forceUpdate = useCallback(() => {
-    var _popperInstanceRef$cu2;
-    (_popperInstanceRef$cu2 = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu2.forceUpdate();
-  }, []);
-  const [popperState, setState] = useSafeState(useState({
-    placement,
-    update,
-    forceUpdate,
-    attributes: {},
-    styles: {
-      popper: {},
-      arrow: {}
-    }
-  }));
-  const updateModifier = useMemo(() => ({
-    name: "updateStateModifier",
-    enabled: true,
-    phase: "write",
-    requires: ["computeStyles"],
-    fn: ({
-      state
-    }) => {
-      const styles = {};
-      const attributes = {};
-      Object.keys(state.elements).forEach((element) => {
-        styles[element] = state.styles[element];
-        attributes[element] = state.attributes[element];
-      });
-      setState({
-        state,
-        styles,
-        attributes,
-        update,
-        forceUpdate,
-        placement: state.placement
-      });
-    }
-  }), [update, forceUpdate, setState]);
-  const nextModifiers = useMemo(() => {
-    if (!dequal(prevModifiers.current, modifiers)) {
-      prevModifiers.current = modifiers;
-    }
-    return prevModifiers.current;
-  }, [modifiers]);
-  useEffect(() => {
-    if (!popperInstanceRef.current || !enabled) return;
-    popperInstanceRef.current.setOptions({
-      placement,
-      strategy,
-      modifiers: [...nextModifiers, updateModifier, disabledApplyStylesModifier]
-    });
-  }, [strategy, placement, updateModifier, enabled, nextModifiers]);
-  useEffect(() => {
-    if (!enabled || referenceElement == null || popperElement == null) {
-      return void 0;
-    }
-    popperInstanceRef.current = createPopper(referenceElement, popperElement, Object.assign({}, config2, {
-      placement,
-      strategy,
-      modifiers: [...nextModifiers, ariaDescribedByModifier, updateModifier]
-    }));
-    return () => {
-      if (popperInstanceRef.current != null) {
-        popperInstanceRef.current.destroy();
-        popperInstanceRef.current = void 0;
-        setState((s) => Object.assign({}, s, {
-          attributes: {},
-          styles: {
-            popper: {}
-          }
-        }));
+      if (!condition) {
+        printWarning.apply(null, [format].concat(args));
       }
     };
-  }, [enabled, referenceElement, popperElement]);
-  return popperState;
-}
-function contains(context2, node) {
-  if (context2.contains) return context2.contains(node);
-  if (context2.compareDocumentPosition) return context2 === node || !!(context2.compareDocumentPosition(node) & 16);
+  }
+  warning_1 = warning2;
+  return warning_1;
 }
+var warningExports = requireWarning();
+const warning = /* @__PURE__ */ getDefaultExportFromCjs(warningExports);
 const noop$1 = () => {
 };
 function isLeftClickEvent(event) {
@@ -12079,6 +11678,372 @@ const isDOM = typeof document !== "undefined";
 const useIsomorphicEffect = isDOM || isReactNative ? useLayoutEffect : useEffect;
 const context = /* @__PURE__ */ React.createContext(null);
 context.displayName = "InputGroupContext";
+const propTypes$1 = {
+  /**
+   * Specify whether the feedback is for valid or invalid fields
+   *
+   * @type {('valid'|'invalid')}
+   */
+  type: PropTypes.string,
+  /** Display feedback as a tooltip. */
+  tooltip: PropTypes.bool,
+  as: PropTypes.elementType
+};
+const Feedback = /* @__PURE__ */ React.forwardRef(
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  ({
+    as: Component = "div",
+    className,
+    type = "valid",
+    tooltip = false,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
+    ...props,
+    ref,
+    className: classNames(className, `${type}-${tooltip ? "tooltip" : "feedback"}`)
+  })
+);
+Feedback.displayName = "Feedback";
+Feedback.propTypes = propTypes$1;
+const FormContext = /* @__PURE__ */ React.createContext({});
+const FormCheckInput = /* @__PURE__ */ React.forwardRef(({
+  id,
+  bsPrefix,
+  className,
+  type = "checkbox",
+  isValid = false,
+  isInvalid = false,
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  as: Component = "input",
+  ...props
+}, ref) => {
+  const {
+    controlId
+  } = useContext(FormContext);
+  bsPrefix = useBootstrapPrefix(bsPrefix, "form-check-input");
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
+    ...props,
+    ref,
+    type,
+    id: id || controlId,
+    className: classNames(className, bsPrefix, isValid && "is-valid", isInvalid && "is-invalid")
+  });
+});
+FormCheckInput.displayName = "FormCheckInput";
+const FormCheckLabel = /* @__PURE__ */ React.forwardRef(({
+  bsPrefix,
+  className,
+  htmlFor,
+  ...props
+}, ref) => {
+  const {
+    controlId
+  } = useContext(FormContext);
+  bsPrefix = useBootstrapPrefix(bsPrefix, "form-check-label");
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("label", {
+    ...props,
+    ref,
+    htmlFor: htmlFor || controlId,
+    className: classNames(className, bsPrefix)
+  });
+});
+FormCheckLabel.displayName = "FormCheckLabel";
+const FormCheck = /* @__PURE__ */ React.forwardRef(({
+  id,
+  bsPrefix,
+  bsSwitchPrefix,
+  inline = false,
+  reverse = false,
+  disabled = false,
+  isValid = false,
+  isInvalid = false,
+  feedbackTooltip = false,
+  feedback,
+  feedbackType,
+  className,
+  style: style2,
+  title = "",
+  type = "checkbox",
+  label,
+  children,
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  as = "input",
+  ...props
+}, ref) => {
+  bsPrefix = useBootstrapPrefix(bsPrefix, "form-check");
+  bsSwitchPrefix = useBootstrapPrefix(bsSwitchPrefix, "form-switch");
+  const {
+    controlId
+  } = useContext(FormContext);
+  const innerFormContext = useMemo(() => ({
+    controlId: id || controlId
+  }), [controlId, id]);
+  const hasLabel = !children && label != null && label !== false || hasChildOfType(children, FormCheckLabel);
+  const input = /* @__PURE__ */ jsxRuntimeExports.jsx(FormCheckInput, {
+    ...props,
+    type: type === "switch" ? "checkbox" : type,
+    ref,
+    isValid,
+    isInvalid,
+    disabled,
+    as
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormContext.Provider, {
+    value: innerFormContext,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+      style: style2,
+      className: classNames(className, hasLabel && bsPrefix, inline && `${bsPrefix}-inline`, reverse && `${bsPrefix}-reverse`, type === "switch" && bsSwitchPrefix),
+      children: children || /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+        children: [input, hasLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(FormCheckLabel, {
+          title,
+          children: label
+        }), feedback && /* @__PURE__ */ jsxRuntimeExports.jsx(Feedback, {
+          type: feedbackType,
+          tooltip: feedbackTooltip,
+          children: feedback
+        })]
+      })
+    })
+  });
+});
+FormCheck.displayName = "FormCheck";
+const FormCheck$1 = Object.assign(FormCheck, {
+  Input: FormCheckInput,
+  Label: FormCheckLabel
+});
+const FormControl = /* @__PURE__ */ React.forwardRef(({
+  bsPrefix,
+  type,
+  size,
+  htmlSize,
+  id,
+  className,
+  isValid = false,
+  isInvalid = false,
+  plaintext,
+  readOnly,
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  as: Component = "input",
+  ...props
+}, ref) => {
+  const {
+    controlId
+  } = useContext(FormContext);
+  bsPrefix = useBootstrapPrefix(bsPrefix, "form-control");
+  process.env.NODE_ENV !== "production" ? warning(controlId == null || !id, "`controlId` is ignored on `<FormControl>` when `id` is specified.") : void 0;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
+    ...props,
+    type,
+    size: htmlSize,
+    ref,
+    readOnly,
+    id: id || controlId,
+    className: classNames(className, plaintext ? `${bsPrefix}-plaintext` : bsPrefix, size && `${bsPrefix}-${size}`, type === "color" && `${bsPrefix}-color`, isValid && "is-valid", isInvalid && "is-invalid")
+  });
+});
+FormControl.displayName = "FormControl";
+const FormControl$1 = Object.assign(FormControl, {
+  Feedback
+});
+const FormFloating = /* @__PURE__ */ React.forwardRef(({
+  className,
+  bsPrefix,
+  as: Component = "div",
+  ...props
+}, ref) => {
+  bsPrefix = useBootstrapPrefix(bsPrefix, "form-floating");
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
+    ref,
+    className: classNames(className, bsPrefix),
+    ...props
+  });
+});
+FormFloating.displayName = "FormFloating";
+const FormGroup = /* @__PURE__ */ React.forwardRef(({
+  controlId,
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  as: Component = "div",
+  ...props
+}, ref) => {
+  const context2 = useMemo(() => ({
+    controlId
+  }), [controlId]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormContext.Provider, {
+    value: context2,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
+      ...props,
+      ref
+    })
+  });
+});
+FormGroup.displayName = "FormGroup";
+const FormLabel = /* @__PURE__ */ React.forwardRef(({
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  as: Component = "label",
+  bsPrefix,
+  column = false,
+  visuallyHidden = false,
+  className,
+  htmlFor,
+  ...props
+}, ref) => {
+  const {
+    controlId
+  } = useContext(FormContext);
+  bsPrefix = useBootstrapPrefix(bsPrefix, "form-label");
+  let columnClass = "col-form-label";
+  if (typeof column === "string") columnClass = `${columnClass} ${columnClass}-${column}`;
+  const classes = classNames(className, bsPrefix, visuallyHidden && "visually-hidden", column && columnClass);
+  process.env.NODE_ENV !== "production" ? warning(controlId == null || !htmlFor, "`controlId` is ignored on `<FormLabel>` when `htmlFor` is specified.") : void 0;
+  htmlFor = htmlFor || controlId;
+  if (column) return /* @__PURE__ */ jsxRuntimeExports.jsx(Col, {
+    ref,
+    as: "label",
+    className: classes,
+    htmlFor,
+    ...props
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
+    ref,
+    className: classes,
+    htmlFor,
+    ...props
+  });
+});
+FormLabel.displayName = "FormLabel";
+const FormRange = /* @__PURE__ */ React.forwardRef(({
+  bsPrefix,
+  className,
+  id,
+  ...props
+}, ref) => {
+  const {
+    controlId
+  } = useContext(FormContext);
+  bsPrefix = useBootstrapPrefix(bsPrefix, "form-range");
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("input", {
+    ...props,
+    type: "range",
+    ref,
+    className: classNames(className, bsPrefix),
+    id: id || controlId
+  });
+});
+FormRange.displayName = "FormRange";
+const FormSelect = /* @__PURE__ */ React.forwardRef(({
+  bsPrefix,
+  size,
+  htmlSize,
+  className,
+  isValid = false,
+  isInvalid = false,
+  id,
+  ...props
+}, ref) => {
+  const {
+    controlId
+  } = useContext(FormContext);
+  bsPrefix = useBootstrapPrefix(bsPrefix, "form-select");
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("select", {
+    ...props,
+    size: htmlSize,
+    ref,
+    className: classNames(className, bsPrefix, size && `${bsPrefix}-${size}`, isValid && `is-valid`, isInvalid && `is-invalid`),
+    id: id || controlId
+  });
+});
+FormSelect.displayName = "FormSelect";
+const FormText = /* @__PURE__ */ React.forwardRef(
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  ({
+    bsPrefix,
+    className,
+    as: Component = "small",
+    muted,
+    ...props
+  }, ref) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, "form-text");
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
+      ...props,
+      ref,
+      className: classNames(className, bsPrefix, muted && "text-muted")
+    });
+  }
+);
+FormText.displayName = "FormText";
+const Switch = /* @__PURE__ */ React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormCheck$1, {
+  ...props,
+  ref,
+  type: "switch"
+}));
+Switch.displayName = "Switch";
+const Switch$1 = Object.assign(Switch, {
+  Input: FormCheck$1.Input,
+  Label: FormCheck$1.Label
+});
+const FloatingLabel = /* @__PURE__ */ React.forwardRef(({
+  bsPrefix,
+  className,
+  children,
+  controlId,
+  label,
+  ...props
+}, ref) => {
+  bsPrefix = useBootstrapPrefix(bsPrefix, "form-floating");
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormGroup, {
+    ref,
+    className: classNames(className, bsPrefix),
+    controlId,
+    ...props,
+    children: [children, /* @__PURE__ */ jsxRuntimeExports.jsx("label", {
+      htmlFor: controlId,
+      children: label
+    })]
+  });
+});
+FloatingLabel.displayName = "FloatingLabel";
+const propTypes = {
+  /**
+   * The Form `ref` will be forwarded to the underlying element,
+   * which means, unless it's rendered `as` a composite component,
+   * it will be a DOM node, when resolved.
+   *
+   * @type {ReactRef}
+   * @alias ref
+   */
+  _ref: PropTypes.any,
+  /**
+   * Mark a form as having been validated. Setting it to `true` will
+   * toggle any validation styles on the forms elements.
+   */
+  validated: PropTypes.bool,
+  as: PropTypes.elementType
+};
+const Form = /* @__PURE__ */ React.forwardRef(({
+  className,
+  validated,
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  as: Component = "form",
+  ...props
+}, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {
+  ...props,
+  ref,
+  className: classNames(className, validated && "was-validated")
+}));
+Form.displayName = "Form";
+Form.propTypes = propTypes;
+const Form$1 = Object.assign(Form, {
+  Group: FormGroup,
+  Control: FormControl$1,
+  Floating: FormFloating,
+  Check: FormCheck$1,
+  Switch: Switch$1,
+  Label: FormLabel,
+  Text: FormText,
+  Range: FormRange,
+  Select: FormSelect,
+  FloatingLabel
+});
 const InputGroupText = /* @__PURE__ */ React.forwardRef(({
   className,
   bsPrefix,