@hexure/ui 1.13.63 → 1.13.65

package/dist/cjs/index.js

@@ -139,11 +139,2563 @@ Copy.defaultProps = {
     type: 'default',
 };
 
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
+const oppositeSideMap = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+const oppositeAlignmentMap = {
+  start: 'end',
+  end: 'start'
+};
+function clamp(start, value, end) {
+  return max(start, min(value, end));
+}
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split('-')[0];
+}
+function getAlignment(placement) {
+  return placement.split('-')[1];
+}
+function getOppositeAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+function getAxisLength(axis) {
+  return axis === 'y' ? 'height' : 'width';
+}
+function getSideAxis(placement) {
+  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+}
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
+}
+function getSideList(side, isStart, rtl) {
+  const lr = ['left', 'right'];
+  const rl = ['right', 'left'];
+  const tb = ['top', 'bottom'];
+  const bt = ['bottom', 'top'];
+  switch (side) {
+    case 'top':
+    case 'bottom':
+      if (rtl) return isStart ? rl : lr;
+      return isStart ? lr : rl;
+    case 'left':
+    case 'right':
+      return isStart ? tb : bt;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === 'start', rtl);
+  if (alignment) {
+    list = list.map(side => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
+  return {
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
+  };
+}
+
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === 'y';
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+  let coords;
+  switch (side) {
+    case 'top':
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
+      break;
+    case 'bottom':
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+    case 'right':
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+    case 'left':
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
+      break;
+    default:
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+  switch (getAlignment(placement)) {
+    case 'start':
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+    case 'end':
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+  }
+  return coords;
+}
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a given reference element.
+ *
+ * This export does not have any `platform` interface logic. You will need to
+ * write one for the platform you are using Floating UI with.
+ */
+const computePosition$1 = async (reference, floating, config) => {
+  const {
+    placement = 'bottom',
+    strategy = 'absolute',
+    middleware = [],
+    platform
+  } = config;
+  const validMiddleware = middleware.filter(Boolean);
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
+  let rects = await platform.getElementRects({
+    reference,
+    floating,
+    strategy
+  });
+  let {
+    x,
+    y
+  } = computeCoordsFromPlacement(rects, placement, rtl);
+  let statefulPlacement = placement;
+  let middlewareData = {};
+  let resetCount = 0;
+  for (let i = 0; i < validMiddleware.length; i++) {
+    const {
+      name,
+      fn
+    } = validMiddleware[i];
+    const {
+      x: nextX,
+      y: nextY,
+      data,
+      reset
+    } = await fn({
+      x,
+      y,
+      initialPlacement: placement,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData,
+      rects,
+      platform,
+      elements: {
+        reference,
+        floating
+      }
+    });
+    x = nextX != null ? nextX : x;
+    y = nextY != null ? nextY : y;
+    middlewareData = {
+      ...middlewareData,
+      [name]: {
+        ...middlewareData[name],
+        ...data
+      }
+    };
+    if (reset && resetCount <= 50) {
+      resetCount++;
+      if (typeof reset === 'object') {
+        if (reset.placement) {
+          statefulPlacement = reset.placement;
+        }
+        if (reset.rects) {
+          rects = reset.rects === true ? await platform.getElementRects({
+            reference,
+            floating,
+            strategy
+          }) : reset.rects;
+        }
+        ({
+          x,
+          y
+        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+      }
+      i = -1;
+    }
+  }
+  return {
+    x,
+    y,
+    placement: statefulPlacement,
+    strategy,
+    middlewareData
+  };
+};
+
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow$1 = options => ({
+  name: 'arrow',
+  options,
+  async fn(state) {
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform,
+      elements,
+      middlewareData
+    } = state;
+    // Since `element` is required, we don't Partial<> the type.
+    const {
+      element,
+      padding = 0
+    } = evaluate(options, state) || {};
+    if (element == null) {
+      return {};
+    }
+    const paddingObject = getPaddingObject(padding);
+    const coords = {
+      x,
+      y
+    };
+    const axis = getAlignmentAxis(placement);
+    const length = getAxisLength(axis);
+    const arrowDimensions = await platform.getDimensions(element);
+    const isYAxis = axis === 'y';
+    const minProp = isYAxis ? 'top' : 'left';
+    const maxProp = isYAxis ? 'bottom' : 'right';
+    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
+    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+    const startDiff = coords[axis] - rects.reference[axis];
+    const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
+    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
+
+    // DOM platform can return `window` as the `offsetParent`.
+    if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
+    }
+    const centerToReference = endDiff / 2 - startDiff / 2;
+
+    // If the padding is large enough that it causes the arrow to no longer be
+    // centered, modify the padding so that it is centered.
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
+
+    // Make sure the arrow doesn't overflow the floating element if the center
+    // point is outside the floating element's bounds.
+    const min$1 = minPadding;
+    const max = clientSize - arrowDimensions[length] - maxPadding;
+    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+    const offset = clamp(min$1, center, max);
+
+    // If the reference is small enough that the arrow's padding causes it to
+    // to point to nothing for an aligned placement, adjust the offset of the
+    // floating element itself. To ensure `shift()` continues to take action,
+    // a single reset is performed when this is true.
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
+    return {
+      [axis]: coords[axis] + alignmentOffset,
+      data: {
+        [axis]: offset,
+        centerOffset: center - offset - alignmentOffset,
+        ...(shouldAddOffset && {
+          alignmentOffset
+        })
+      },
+      reset: shouldAddOffset
+    };
+  }
+});
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'flip',
+    options,
+    async fn(state) {
+      var _middlewareData$arrow, _middlewareData$flip;
+      const {
+        placement,
+        middlewareData,
+        rects,
+        initialPlacement,
+        platform,
+        elements
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true,
+        fallbackPlacements: specifiedFallbackPlacements,
+        fallbackStrategy = 'bestFit',
+        fallbackAxisSideDirection = 'none',
+        flipAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+
+      // If a reset by the arrow was caused due to an alignment offset being
+      // added, we should skip any logic now since `flip()` has already done its
+      // work.
+      // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
+      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      const side = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
+      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+      const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
+        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+      }
+      const placements = [initialPlacement, ...fallbackPlacements];
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflows = [];
+      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+      if (checkMainAxis) {
+        overflows.push(overflow[side]);
+      }
+      if (checkCrossAxis) {
+        const sides = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides[0]], overflow[sides[1]]);
+      }
+      overflowsData = [...overflowsData, {
+        placement,
+        overflows
+      }];
+
+      // One or more sides is overflowing.
+      if (!overflows.every(side => side <= 0)) {
+        var _middlewareData$flip2, _overflowsData$filter;
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+        const nextPlacement = placements[nextIndex];
+        if (nextPlacement) {
+          // Try next placement and re-run the lifecycle.
+          return {
+            data: {
+              index: nextIndex,
+              overflows: overflowsData
+            },
+            reset: {
+              placement: nextPlacement
+            }
+          };
+        }
+
+        // First, find the candidates that fit on the mainAxis side of overflow,
+        // then find the placement that fits the best on the main crossAxis side.
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+
+        // Otherwise fallback.
+        if (!resetPlacement) {
+          switch (fallbackStrategy) {
+            case 'bestFit':
+              {
+                var _overflowsData$filter2;
+                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis ||
+                    // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === 'y';
+                  }
+                  return true;
+                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
+                if (placement) {
+                  resetPlacement = placement;
+                }
+                break;
+              }
+            case 'initialPlacement':
+              resetPlacement = initialPlacement;
+              break;
+          }
+        }
+        if (placement !== resetPlacement) {
+          return {
+            reset: {
+              placement: resetPlacement
+            }
+          };
+        }
+      }
+      return {};
+    }
+  };
+};
+
+// For type backwards-compatibility, the `OffsetOptions` type was also
+// Derivable.
+
+async function convertValueToCoords(state, options) {
+  const {
+    placement,
+    platform,
+    elements
+  } = state;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === 'y';
+  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === 'number' ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: rawValue.mainAxis || 0,
+    crossAxis: rawValue.crossAxis || 0,
+    alignmentAxis: rawValue.alignmentAxis
+  };
+  if (alignment && typeof alignmentAxis === 'number') {
+    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
+  }
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset$1 = function (options) {
+  if (options === void 0) {
+    options = 0;
+  }
+  return {
+    name: 'offset',
+    options,
+    async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
+      const {
+        x,
+        y,
+        placement,
+        middlewareData
+      } = state;
+      const diffCoords = await convertValueToCoords(state, options);
+
+      // If the placement is the same and the arrow caused an alignment offset
+      // then we don't need to change the positioning coordinates.
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: {
+          ...diffCoords,
+          placement
+        }
+      };
+    }
+  };
+};
+
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'shift',
+    options,
+    async fn(state) {
+      const {
+        x,
+        y,
+        placement
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = false,
+        limiter = {
+          fn: _ref => {
+            let {
+              x,
+              y
+            } = _ref;
+            return {
+              x,
+              y
+            };
+          }
+        },
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const coords = {
+        x,
+        y
+      };
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const crossAxis = getSideAxis(getSide(placement));
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+      if (checkMainAxis) {
+        const minSide = mainAxis === 'y' ? 'top' : 'left';
+        const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
+        const min = mainAxisCoord + overflow[minSide];
+        const max = mainAxisCoord - overflow[maxSide];
+        mainAxisCoord = clamp(min, mainAxisCoord, max);
+      }
+      if (checkCrossAxis) {
+        const minSide = crossAxis === 'y' ? 'top' : 'left';
+        const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
+        const min = crossAxisCoord + overflow[minSide];
+        const max = crossAxisCoord - overflow[maxSide];
+        crossAxisCoord = clamp(min, crossAxisCoord, max);
+      }
+      const limitedCoords = limiter.fn({
+        ...state,
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      });
+      return {
+        ...limitedCoords,
+        data: {
+          x: limitedCoords.x - x,
+          y: limitedCoords.y - y,
+          enabled: {
+            [mainAxis]: checkMainAxis,
+            [crossAxis]: checkCrossAxis
+          }
+        }
+      };
+    }
+  };
+};
+
+function hasWindow() {
+  return typeof window !== 'undefined';
+}
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+function isHTMLElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  if (!hasWindow() || typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle$1(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+}
+function isTableElement(element) {
+  return ['table', 'td', 'th'].includes(getNodeName(element));
+}
+function isTopLayer(element) {
+  return [':popover-open', ':modal'].some(selector => {
+    try {
+      return element.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
+function isContainingBlock(elementOrCss) {
+  const webkit = isWebKit();
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else if (isTopLayer(currentNode)) {
+      return null;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  return null;
+}
+function isWebKit() {
+  if (typeof CSS === 'undefined' || !CSS.supports) return false;
+  return CSS.supports('-webkit-backdrop-filter', 'none');
+}
+function isLastTraversableNode(node) {
+  return ['html', 'body', '#document'].includes(getNodeName(node));
+}
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+  const result =
+  // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot ||
+  // DOM Element detected.
+  node.parentNode ||
+  // ShadowRoot detected.
+  isShadowRoot(node) && node.host ||
+  // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list, traverseIframes) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+}
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+
+function getCssDimensions(element) {
+  const css = getComputedStyle$1(element);
+  // In testing environments, the `width` and `height` properties are empty
+  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
+  let width = parseFloat(css.width) || 0;
+  let height = parseFloat(css.height) || 0;
+  const hasOffset = isHTMLElement(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    $: shouldFallback
+  };
+}
+function unwrapElement(element) {
+  return !isElement(element) ? element.contextElement : element;
+}
+function getScale(element) {
+  const domElement = unwrapElement(element);
+  if (!isHTMLElement(domElement)) {
+    return createCoords(1);
+  }
+  const rect = domElement.getBoundingClientRect();
+  const {
+    width,
+    height,
+    $
+  } = getCssDimensions(domElement);
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
+
+  // 0, NaN, or Infinity should always fallback to 1.
+
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+  return {
+    x,
+    y
+  };
+}
+const noOffsets = /*#__PURE__*/createCoords(0);
+function getVisualOffsets(element) {
+  const win = getWindow(element);
+  if (!isWebKit() || !win.visualViewport) {
+    return noOffsets;
+  }
+  return {
+    x: win.visualViewport.offsetLeft,
+    y: win.visualViewport.offsetTop
+  };
+}
+function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+    return false;
+  }
+  return isFixed;
+}
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  const clientRect = element.getBoundingClientRect();
+  const domElement = unwrapElement(element);
+  let scale = createCoords(1);
+  if (includeScale) {
+    if (offsetParent) {
+      if (isElement(offsetParent)) {
+        scale = getScale(offsetParent);
+      }
+    } else {
+      scale = getScale(element);
+    }
+  }
+  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
+  let width = clientRect.width / scale.x;
+  let height = clientRect.height / scale.y;
+  if (domElement) {
+    const win = getWindow(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    let currentWin = win;
+    let currentIFrame = getFrameElement(currentWin);
+    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+      const iframeScale = getScale(currentIFrame);
+      const iframeRect = currentIFrame.getBoundingClientRect();
+      const css = getComputedStyle$1(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      x *= iframeScale.x;
+      y *= iframeScale.y;
+      width *= iframeScale.x;
+      height *= iframeScale.y;
+      x += left;
+      y += top;
+      currentWin = getWindow(currentIFrame);
+      currentIFrame = getFrameElement(currentWin);
+    }
+  }
+  return rectToClientRect({
+    width,
+    height,
+    x,
+    y
+  });
+}
+
+// If <html> has a CSS width greater than the viewport, then this will be
+// incorrect for RTL.
+function getWindowScrollBarX(element, rect) {
+  const leftScroll = getNodeScroll(element).scrollLeft;
+  if (!rect) {
+    return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+  }
+  return rect.left + leftScroll;
+}
+function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
+  if (ignoreScrollbarX === void 0) {
+    ignoreScrollbarX = false;
+  }
+  const htmlRect = documentElement.getBoundingClientRect();
+  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
+  // RTL <body> scrollbar.
+  getWindowScrollBarX(documentElement, htmlRect));
+  const y = htmlRect.top + scroll.scrollTop;
+  return {
+    x,
+    y
+  };
+}
+function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+  let {
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  } = _ref;
+  const isFixed = strategy === 'fixed';
+  const documentElement = getDocumentElement(offsetParent);
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
+  if (offsetParent === documentElement || topLayer && isFixed) {
+    return rect;
+  }
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  let scale = createCoords(1);
+  const offsets = createCoords(0);
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isHTMLElement(offsetParent)) {
+      const offsetRect = getBoundingClientRect(offsetParent);
+      scale = getScale(offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    }
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  return {
+    width: rect.width * scale.x,
+    height: rect.height * scale.y,
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
+  };
+}
+function getClientRects(element) {
+  return Array.from(element.getClientRects());
+}
+
+// Gets the entire size of the scrollable document area, even extending outside
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
+function getDocumentRect(element) {
+  const html = getDocumentElement(element);
+  const scroll = getNodeScroll(element);
+  const body = element.ownerDocument.body;
+  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  const y = -scroll.scrollTop;
+  if (getComputedStyle$1(body).direction === 'rtl') {
+    x += max(html.clientWidth, body.clientWidth) - width;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getViewportRect(element, strategy) {
+  const win = getWindow(element);
+  const html = getDocumentElement(element);
+  const visualViewport = win.visualViewport;
+  let width = html.clientWidth;
+  let height = html.clientHeight;
+  let x = 0;
+  let y = 0;
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    const visualViewportBased = isWebKit();
+    if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+// Returns the inner client rect, subtracting scrollbars if present.
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
+  const top = clientRect.top + element.clientTop;
+  const left = clientRect.left + element.clientLeft;
+  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+  const width = element.clientWidth * scale.x;
+  const height = element.clientHeight * scale.y;
+  const x = left * scale.x;
+  const y = top * scale.y;
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+  let rect;
+  if (clippingAncestor === 'viewport') {
+    rect = getViewportRect(element, strategy);
+  } else if (clippingAncestor === 'document') {
+    rect = getDocumentRect(getDocumentElement(element));
+  } else if (isElement(clippingAncestor)) {
+    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+  } else {
+    const visualOffsets = getVisualOffsets(element);
+    rect = {
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y,
+      width: clippingAncestor.width,
+      height: clippingAncestor.height
+    };
+  }
+  return rectToClientRect(rect);
+}
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
+
+// A "clipping ancestor" is an `overflow` element with the characteristic of
+// clipping (or hiding) child elements. This returns all clipping ancestors
+// of the given element up the tree.
+function getClippingElementAncestors(element, cache) {
+  const cachedResult = cache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
+  let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
+  let currentContainingBlockComputedStyle = null;
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
+  let currentNode = elementIsFixed ? getParentNode(element) : element;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    const computedStyle = getComputedStyle$1(currentNode);
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
+      currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
+    } else {
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  cache.set(element, result);
+  return result;
+}
+
+// Gets the maximum area that the element is visible in due to any number of
+// clipping ancestors.
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+  const firstClippingAncestor = clippingAncestors[0];
+  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
+    accRect.top = max(rect.top, accRect.top);
+    accRect.right = min(rect.right, accRect.right);
+    accRect.bottom = min(rect.bottom, accRect.bottom);
+    accRect.left = max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+  return {
+    width: clippingRect.right - clippingRect.left,
+    height: clippingRect.bottom - clippingRect.top,
+    x: clippingRect.left,
+    y: clippingRect.top
+  };
+}
+function getDimensions(element) {
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
+}
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  const isFixed = strategy === 'fixed';
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const offsets = createCoords(0);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } else if (documentElement) {
+      // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
+      // Firefox with layout.scrollbar.side = 3 in about:config to test this.
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
+  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
+  return {
+    x,
+    y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function isStaticPositioned(element) {
+  return getComputedStyle$1(element).position === 'static';
+}
+function getTrueOffsetParent(element, polyfill) {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
+    return null;
+  }
+  if (polyfill) {
+    return polyfill(element);
+  }
+  let rawOffsetParent = element.offsetParent;
+
+  // Firefox returns the <html> element as the offsetParent if it's non-static,
+  // while Chrome and Safari return the <body> element. The <body> element must
+  // be used to perform the correct calculations even if the <html> element is
+  // non-static.
+  if (getDocumentElement(element) === rawOffsetParent) {
+    rawOffsetParent = rawOffsetParent.ownerDocument.body;
+  }
+  return rawOffsetParent;
+}
+
+// Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+function getOffsetParent(element, polyfill) {
+  const win = getWindow(element);
+  if (isTopLayer(element)) {
+    return win;
+  }
+  if (!isHTMLElement(element)) {
+    let svgOffsetParent = getParentNode(element);
+    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+        return svgOffsetParent;
+      }
+      svgOffsetParent = getParentNode(svgOffsetParent);
+    }
+    return win;
+  }
+  let offsetParent = getTrueOffsetParent(element, polyfill);
+  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
+    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+  }
+  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+    return win;
+  }
+  return offsetParent || getContainingBlock(element) || win;
+}
+const getElementRects = async function (data) {
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
+  return {
+    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      width: floatingDimensions.width,
+      height: floatingDimensions.height
+    }
+  };
+};
+function isRTL(element) {
+  return getComputedStyle$1(element).direction === 'rtl';
+}
+const platform = {
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
+  getScale,
+  isElement,
+  isRTL
+};
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
+// https://samthor.au/2021/observing-dom/
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    var _io;
+    clearTimeout(timeoutId);
+    (_io = io) == null || _io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = elementRectForRootMargin;
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 1000);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        // It's possible that even though the ratio is reported as 1, the
+        // element is not actually fully within the IntersectionObserver's root
+        // area anymore. This can happen under performance constraints. This may
+        // be a bug in the browser's IntersectionObserver implementation. To
+        // work around this, we compare the element's bounding rect now with
+        // what it was at the time we created the IntersectionObserver. If they
+        // are not equal then the element moved, so we refresh.
+        refresh();
+      }
+      isFirstUpdate = false;
+    }
+
+    // Older browsers don't support a `document` as the root and will throw an
+    // error.
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        // Handle <iframe>s
+        root: root.ownerDocument
+      });
+    } catch (e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+
+/**
+ * Automatically updates the position of the floating element when necessary.
+ * Should only be called when the floating element is mounted on the DOM or
+ * visible on the screen.
+ * @returns cleanup function that should be invoked when the floating element is
+ * removed from the DOM or hidden from the screen.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = typeof ResizeObserver === 'function',
+    layoutShift = typeof IntersectionObserver === 'function',
+    animationFrame = false
+  } = options;
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach(ancestor => {
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
+  if (elementResize) {
+    resizeObserver = new ResizeObserver(_ref => {
+      let [firstEntry] = _ref;
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+        // Prevent update loops when using the `size` middleware.
+        // https://github.com/floating-ui/floating-ui/issues/1740
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
+        });
+      }
+      update();
+    });
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
+    }
+    resizeObserver.observe(floating);
+  }
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+  if (animationFrame) {
+    frameLoop();
+  }
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference);
+    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
+      update();
+    }
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+  update();
+  return () => {
+    var _resizeObserver2;
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    cleanupIo == null || cleanupIo();
+    (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
+    resizeObserver = null;
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = offset$1;
+
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift = shift$1;
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip = flip$1;
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow = arrow$1;
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a given reference element.
+ */
+const computePosition = (reference, floating, options) => {
+  // This caches the expensive `getClippingElementAncestors` function so that
+  // multiple lifecycle resets re-use the same result. It only lives for a
+  // single call. If other functions become expensive, we can add them as well.
+  const cache = new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = {
+    ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition$1(reference, floating, {
+    ...mergedOptions,
+    platform: platformWithCache
+  });
+};
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var classnames = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function (module) {
+  /* global define */
+
+  (function () {
+
+    var hasOwn = {}.hasOwnProperty;
+    function classNames() {
+      var classes = '';
+      for (var i = 0; i < arguments.length; i++) {
+        var arg = arguments[i];
+        if (arg) {
+          classes = appendClass(classes, parseValue(arg));
+        }
+      }
+      return classes;
+    }
+    function parseValue(arg) {
+      if (typeof arg === 'string' || typeof arg === 'number') {
+        return arg;
+      }
+      if (typeof arg !== 'object') {
+        return '';
+      }
+      if (Array.isArray(arg)) {
+        return classNames.apply(null, arg);
+      }
+      if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+        return arg.toString();
+      }
+      var classes = '';
+      for (var key in arg) {
+        if (hasOwn.call(arg, key) && arg[key]) {
+          classes = appendClass(classes, key);
+        }
+      }
+      return classes;
+    }
+    function appendClass(value, newClass) {
+      if (!newClass) {
+        return value;
+      }
+      if (value) {
+        return value + ' ' + newClass;
+      }
+      return value + newClass;
+    }
+    if (module.exports) {
+      classNames.default = classNames;
+      module.exports = classNames;
+    } else {
+      window.classNames = classNames;
+    }
+  })();
+})(classnames);
+var classnamesExports = classnames.exports;
+var y = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+
+/*
+* React Tooltip
+* {@link https://github.com/ReactTooltip/react-tooltip}
+* @copyright ReactTooltip Team
+* @license MIT
+*/
+const h = "react-tooltip-core-styles",
+  w = "react-tooltip-base-styles",
+  b = {
+    core: !1,
+    base: !1
+  };
+function S({
+  css: e,
+  id: t = w,
+  type: o = "base",
+  ref: l
+}) {
+  var r, n;
+  if (!e || "undefined" == typeof document || b[o]) return;
+  if ("core" === o && "undefined" != typeof process && (null === (r = null === process || void 0 === process ? void 0 : process.env) || void 0 === r ? void 0 : r.REACT_TOOLTIP_DISABLE_CORE_STYLES)) return;
+  if ("base" !== o && "undefined" != typeof process && (null === (n = null === process || void 0 === process ? void 0 : process.env) || void 0 === n ? void 0 : n.REACT_TOOLTIP_DISABLE_BASE_STYLES)) return;
+  "core" === o && (t = h), l || (l = {});
+  const {
+    insertAt: i
+  } = l;
+  if (document.getElementById(t)) return;
+  const c = document.head || document.getElementsByTagName("head")[0],
+    s = document.createElement("style");
+  s.id = t, s.type = "text/css", "top" === i && c.firstChild ? c.insertBefore(s, c.firstChild) : c.appendChild(s), s.styleSheet ? s.styleSheet.cssText = e : s.appendChild(document.createTextNode(e)), b[o] = !0;
+}
+const E = async ({
+    elementReference: e = null,
+    tooltipReference: t = null,
+    tooltipArrowReference: o = null,
+    place: l = "top",
+    offset: r = 10,
+    strategy: n = "absolute",
+    middlewares: i = [offset(Number(r)), flip({
+      fallbackAxisSideDirection: "start"
+    }), shift({
+      padding: 5
+    })],
+    border: c
+  }) => {
+    if (!e) return {
+      tooltipStyles: {},
+      tooltipArrowStyles: {},
+      place: l
+    };
+    if (null === t) return {
+      tooltipStyles: {},
+      tooltipArrowStyles: {},
+      place: l
+    };
+    const s = i;
+    return o ? (s.push(arrow({
+      element: o,
+      padding: 5
+    })), computePosition(e, t, {
+      placement: l,
+      strategy: n,
+      middleware: s
+    }).then(({
+      x: e,
+      y: t,
+      placement: o,
+      middlewareData: l
+    }) => {
+      var r, n;
+      const i = {
+          left: `${e}px`,
+          top: `${t}px`,
+          border: c
+        },
+        {
+          x: s,
+          y: a
+        } = null !== (r = l.arrow) && void 0 !== r ? r : {
+          x: 0,
+          y: 0
+        },
+        u = null !== (n = {
+          top: "bottom",
+          right: "left",
+          bottom: "top",
+          left: "right"
+        }[o.split("-")[0]]) && void 0 !== n ? n : "bottom",
+        d = c && {
+          borderBottom: c,
+          borderRight: c
+        };
+      let p = 0;
+      if (c) {
+        const e = `${c}`.match(/(\d+)px/);
+        p = (null == e ? void 0 : e[1]) ? Number(e[1]) : 1;
+      }
+      return {
+        tooltipStyles: i,
+        tooltipArrowStyles: {
+          left: null != s ? `${s}px` : "",
+          top: null != a ? `${a}px` : "",
+          right: "",
+          bottom: "",
+          ...d,
+          [u]: `-${4 + p}px`
+        },
+        place: o
+      };
+    })) : computePosition(e, t, {
+      placement: "bottom",
+      strategy: n,
+      middleware: s
+    }).then(({
+      x: e,
+      y: t,
+      placement: o
+    }) => ({
+      tooltipStyles: {
+        left: `${e}px`,
+        top: `${t}px`
+      },
+      tooltipArrowStyles: {},
+      place: o
+    }));
+  },
+  A = (e, t) => !("CSS" in window && "supports" in window.CSS) || window.CSS.supports(e, t),
+  _ = (e, t, o) => {
+    let l = null;
+    const r = function (...r) {
+      const n = () => {
+        l = null, o || e.apply(this, r);
+      };
+      o && !l && (e.apply(this, r), l = setTimeout(n, t)), o || (l && clearTimeout(l), l = setTimeout(n, t));
+    };
+    return r.cancel = () => {
+      l && (clearTimeout(l), l = null);
+    }, r;
+  },
+  O = e => null !== e && !Array.isArray(e) && "object" == typeof e,
+  k = (e, t) => {
+    if (e === t) return !0;
+    if (Array.isArray(e) && Array.isArray(t)) return e.length === t.length && e.every((e, o) => k(e, t[o]));
+    if (Array.isArray(e) !== Array.isArray(t)) return !1;
+    if (!O(e) || !O(t)) return e === t;
+    const o = Object.keys(e),
+      l = Object.keys(t);
+    return o.length === l.length && o.every(o => k(e[o], t[o]));
+  },
+  T = e => {
+    if (!(e instanceof HTMLElement || e instanceof SVGElement)) return !1;
+    const t = getComputedStyle(e);
+    return ["overflow", "overflow-x", "overflow-y"].some(e => {
+      const o = t.getPropertyValue(e);
+      return "auto" === o || "scroll" === o;
+    });
+  },
+  L = e => {
+    if (!e) return null;
+    let t = e.parentElement;
+    for (; t;) {
+      if (T(t)) return t;
+      t = t.parentElement;
+    }
+    return document.scrollingElement || document.documentElement;
+  },
+  C = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect,
+  R = e => {
+    e.current && (clearTimeout(e.current), e.current = null);
+  },
+  x = "DEFAULT_TOOLTIP_ID",
+  N = {
+    anchorRefs: new Set(),
+    activeAnchor: {
+      current: null
+    },
+    attach: () => {},
+    detach: () => {},
+    setActiveAnchor: () => {}
+  },
+  $ = React.createContext({
+    getTooltipData: () => N
+  });
+function j(e = x) {
+  return React.useContext($).getTooltipData(e);
+}
+var z = {
+    tooltip: "core-styles-module_tooltip__3vRRp",
+    fixed: "core-styles-module_fixed__pcSol",
+    arrow: "core-styles-module_arrow__cvMwQ",
+    noArrow: "core-styles-module_noArrow__xock6",
+    clickable: "core-styles-module_clickable__ZuTTB",
+    show: "core-styles-module_show__Nt9eE",
+    closing: "core-styles-module_closing__sGnxF"
+  },
+  D = {
+    tooltip: "styles-module_tooltip__mnnfp",
+    arrow: "styles-module_arrow__K0L3T",
+    dark: "styles-module_dark__xNqje",
+    light: "styles-module_light__Z6W-X",
+    success: "styles-module_success__A2AKt",
+    warning: "styles-module_warning__SCK0X",
+    error: "styles-module_error__JvumD",
+    info: "styles-module_info__BWdHW"
+  };
+const q = ({
+    forwardRef: t,
+    id: l,
+    className: i,
+    classNameArrow: c,
+    variant: u = "dark",
+    anchorId: d,
+    anchorSelect: p,
+    place: v = "top",
+    offset: m = 10,
+    events: h = ["hover"],
+    openOnClick: w = !1,
+    positionStrategy: b = "absolute",
+    middlewares: S,
+    wrapper: g,
+    delayShow: A = 0,
+    delayHide: O = 0,
+    float: T = !1,
+    hidden: x = !1,
+    noArrow: N = !1,
+    clickable: $ = !1,
+    closeOnEsc: I = !1,
+    closeOnScroll: B = !1,
+    closeOnResize: q = !1,
+    openEvents: H,
+    closeEvents: M,
+    globalCloseEvents: W,
+    imperativeModeOnly: P,
+    style: V,
+    position: F,
+    afterShow: K,
+    afterHide: U,
+    disableTooltip: X,
+    content: Y,
+    contentWrapperRef: G,
+    isOpen: Z,
+    defaultIsOpen: J = !1,
+    setIsOpen: Q,
+    activeAnchor: ee,
+    setActiveAnchor: te,
+    border: oe,
+    opacity: le,
+    arrowColor: re,
+    role: ne = "tooltip"
+  }) => {
+    var ie;
+    const ce = React.useRef(null),
+      se = React.useRef(null),
+      ae = React.useRef(null),
+      ue = React.useRef(null),
+      de = React.useRef(null),
+      [pe, ve] = React.useState({
+        tooltipStyles: {},
+        tooltipArrowStyles: {},
+        place: v
+      }),
+      [me, fe] = React.useState(!1),
+      [ye, he] = React.useState(!1),
+      [we, be] = React.useState(null),
+      Se = React.useRef(!1),
+      ge = React.useRef(null),
+      {
+        anchorRefs: Ee,
+        setActiveAnchor: Ae
+      } = j(l),
+      _e = React.useRef(!1),
+      [Oe, ke] = React.useState([]),
+      Te = React.useRef(!1),
+      Le = w || h.includes("click"),
+      Ce = Le || (null == H ? void 0 : H.click) || (null == H ? void 0 : H.dblclick) || (null == H ? void 0 : H.mousedown),
+      Re = H ? {
+        ...H
+      } : {
+        mouseover: !0,
+        focus: !0,
+        mouseenter: !1,
+        click: !1,
+        dblclick: !1,
+        mousedown: !1
+      };
+    !H && Le && Object.assign(Re, {
+      mouseenter: !1,
+      focus: !1,
+      mouseover: !1,
+      click: !0
+    });
+    const xe = M ? {
+      ...M
+    } : {
+      mouseout: !0,
+      blur: !0,
+      mouseleave: !1,
+      click: !1,
+      dblclick: !1,
+      mouseup: !1
+    };
+    !M && Le && Object.assign(xe, {
+      mouseleave: !1,
+      blur: !1,
+      mouseout: !1
+    });
+    const Ne = W ? {
+      ...W
+    } : {
+      escape: I || !1,
+      scroll: B || !1,
+      resize: q || !1,
+      clickOutsideAnchor: Ce || !1
+    };
+    P && (Object.assign(Re, {
+      mouseover: !1,
+      focus: !1,
+      mouseenter: !1,
+      click: !1,
+      dblclick: !1,
+      mousedown: !1
+    }), Object.assign(xe, {
+      mouseout: !1,
+      blur: !1,
+      mouseleave: !1,
+      click: !1,
+      dblclick: !1,
+      mouseup: !1
+    }), Object.assign(Ne, {
+      escape: !1,
+      scroll: !1,
+      resize: !1,
+      clickOutsideAnchor: !1
+    })), C(() => (Te.current = !0, () => {
+      Te.current = !1;
+    }), []);
+    const $e = e => {
+      Te.current && (e && he(!0), setTimeout(() => {
+        Te.current && (null == Q || Q(e), void 0 === Z && fe(e));
+      }, 10));
+    };
+    React.useEffect(() => {
+      if (void 0 === Z) return () => null;
+      Z && he(!0);
+      const e = setTimeout(() => {
+        fe(Z);
+      }, 10);
+      return () => {
+        clearTimeout(e);
+      };
+    }, [Z]), React.useEffect(() => {
+      if (me !== Se.current) if (R(de), Se.current = me, me) null == K || K();else {
+        const e = (e => {
+          const t = e.match(/^([\d.]+)(ms|s)$/);
+          if (!t) return 0;
+          const [, o, l] = t;
+          return Number(o) * ("ms" === l ? 1 : 1e3);
+        })(getComputedStyle(document.body).getPropertyValue("--rt-transition-show-delay"));
+        de.current = setTimeout(() => {
+          he(!1), be(null), null == U || U();
+        }, e + 25);
+      }
+    }, [me]);
+    const Ie = e => {
+        ve(t => k(t, e) ? t : e);
+      },
+      je = (e = A) => {
+        R(ae), ye ? $e(!0) : ae.current = setTimeout(() => {
+          $e(!0);
+        }, e);
+      },
+      Be = (e = O) => {
+        R(ue), ue.current = setTimeout(() => {
+          _e.current || $e(!1);
+        }, e);
+      },
+      ze = e => {
+        var t;
+        if (!e) return;
+        const o = null !== (t = e.currentTarget) && void 0 !== t ? t : e.target;
+        if (!(null == o ? void 0 : o.isConnected)) return te(null), void Ae({
+          current: null
+        });
+        A ? je() : $e(!0), te(o), Ae({
+          current: o
+        }), R(ue);
+      },
+      De = () => {
+        $ ? Be(O || 100) : O ? Be() : $e(!1), R(ae);
+      },
+      qe = ({
+        x: e,
+        y: t
+      }) => {
+        var o;
+        const l = {
+          getBoundingClientRect: () => ({
+            x: e,
+            y: t,
+            width: 0,
+            height: 0,
+            top: t,
+            left: e,
+            right: e,
+            bottom: t
+          })
+        };
+        E({
+          place: null !== (o = null == we ? void 0 : we.place) && void 0 !== o ? o : v,
+          offset: m,
+          elementReference: l,
+          tooltipReference: ce.current,
+          tooltipArrowReference: se.current,
+          strategy: b,
+          middlewares: S,
+          border: oe
+        }).then(e => {
+          Ie(e);
+        });
+      },
+      He = e => {
+        if (!e) return;
+        const t = e,
+          o = {
+            x: t.clientX,
+            y: t.clientY
+          };
+        qe(o), ge.current = o;
+      },
+      Me = e => {
+        var t;
+        if (!me) return;
+        const o = e.target;
+        if (!o.isConnected) return;
+        if (null === (t = ce.current) || void 0 === t ? void 0 : t.contains(o)) return;
+        [document.querySelector(`[id='${d}']`), ...Oe].some(e => null == e ? void 0 : e.contains(o)) || ($e(!1), R(ae));
+      },
+      We = _(ze, 50, !0),
+      Pe = _(De, 50, !0),
+      Ve = e => {
+        Pe.cancel(), We(e);
+      },
+      Fe = () => {
+        We.cancel(), Pe();
+      },
+      Ke = React.useCallback(() => {
+        var e, t;
+        const o = null !== (e = null == we ? void 0 : we.position) && void 0 !== e ? e : F;
+        o ? qe(o) : T ? ge.current && qe(ge.current) : (null == ee ? void 0 : ee.isConnected) && E({
+          place: null !== (t = null == we ? void 0 : we.place) && void 0 !== t ? t : v,
+          offset: m,
+          elementReference: ee,
+          tooltipReference: ce.current,
+          tooltipArrowReference: se.current,
+          strategy: b,
+          middlewares: S,
+          border: oe
+        }).then(e => {
+          Te.current && Ie(e);
+        });
+      }, [me, ee, Y, V, v, null == we ? void 0 : we.place, m, b, F, null == we ? void 0 : we.position, T]);
+    React.useEffect(() => {
+      var e, t;
+      const o = new Set(Ee);
+      Oe.forEach(e => {
+        (null == X ? void 0 : X(e)) || o.add({
+          current: e
+        });
+      });
+      const l = document.querySelector(`[id='${d}']`);
+      l && !(null == X ? void 0 : X(l)) && o.add({
+        current: l
+      });
+      const r = () => {
+          $e(!1);
+        },
+        n = L(ee),
+        i = L(ce.current);
+      Ne.scroll && (window.addEventListener("scroll", r), null == n || n.addEventListener("scroll", r), null == i || i.addEventListener("scroll", r));
+      let c = null;
+      Ne.resize ? window.addEventListener("resize", r) : ee && ce.current && (c = autoUpdate(ee, ce.current, Ke, {
+        ancestorResize: !0,
+        elementResize: !0,
+        layoutShift: !0
+      }));
+      const s = e => {
+        "Escape" === e.key && $e(!1);
+      };
+      Ne.escape && window.addEventListener("keydown", s), Ne.clickOutsideAnchor && window.addEventListener("click", Me);
+      const a = [],
+        u = e => Boolean((null == e ? void 0 : e.target) && (null == ee ? void 0 : ee.contains(e.target))),
+        p = e => {
+          me && u(e) || ze(e);
+        },
+        v = e => {
+          me && u(e) && De();
+        },
+        m = ["mouseover", "mouseout", "mouseenter", "mouseleave", "focus", "blur"],
+        y = ["click", "dblclick", "mousedown", "mouseup"];
+      Object.entries(Re).forEach(([e, t]) => {
+        t && (m.includes(e) ? a.push({
+          event: e,
+          listener: Ve
+        }) : y.includes(e) && a.push({
+          event: e,
+          listener: p
+        }));
+      }), Object.entries(xe).forEach(([e, t]) => {
+        t && (m.includes(e) ? a.push({
+          event: e,
+          listener: Fe
+        }) : y.includes(e) && a.push({
+          event: e,
+          listener: v
+        }));
+      }), T && a.push({
+        event: "pointermove",
+        listener: He
+      });
+      const h = () => {
+          _e.current = !0;
+        },
+        w = () => {
+          _e.current = !1, De();
+        },
+        b = $ && (xe.mouseout || xe.mouseleave);
+      return b && (null === (e = ce.current) || void 0 === e || e.addEventListener("mouseover", h), null === (t = ce.current) || void 0 === t || t.addEventListener("mouseout", w)), a.forEach(({
+        event: e,
+        listener: t
+      }) => {
+        o.forEach(o => {
+          var l;
+          null === (l = o.current) || void 0 === l || l.addEventListener(e, t);
+        });
+      }), () => {
+        var e, t;
+        Ne.scroll && (window.removeEventListener("scroll", r), null == n || n.removeEventListener("scroll", r), null == i || i.removeEventListener("scroll", r)), Ne.resize ? window.removeEventListener("resize", r) : null == c || c(), Ne.clickOutsideAnchor && window.removeEventListener("click", Me), Ne.escape && window.removeEventListener("keydown", s), b && (null === (e = ce.current) || void 0 === e || e.removeEventListener("mouseover", h), null === (t = ce.current) || void 0 === t || t.removeEventListener("mouseout", w)), a.forEach(({
+          event: e,
+          listener: t
+        }) => {
+          o.forEach(o => {
+            var l;
+            null === (l = o.current) || void 0 === l || l.removeEventListener(e, t);
+          });
+        });
+      };
+    }, [ee, Ke, ye, Ee, Oe, H, M, W, Le, A, O]), React.useEffect(() => {
+      var e, t;
+      let o = null !== (t = null !== (e = null == we ? void 0 : we.anchorSelect) && void 0 !== e ? e : p) && void 0 !== t ? t : "";
+      !o && l && (o = `[data-tooltip-id='${l.replace(/'/g, "\\'")}']`);
+      const r = new MutationObserver(e => {
+        const t = [],
+          r = [];
+        e.forEach(e => {
+          if ("attributes" === e.type && "data-tooltip-id" === e.attributeName) {
+            e.target.getAttribute("data-tooltip-id") === l ? t.push(e.target) : e.oldValue === l && r.push(e.target);
+          }
+          if ("childList" === e.type) {
+            if (ee) {
+              const t = [...e.removedNodes].filter(e => 1 === e.nodeType);
+              if (o) try {
+                r.push(...t.filter(e => e.matches(o))), r.push(...t.flatMap(e => [...e.querySelectorAll(o)]));
+              } catch (e) {}
+              t.some(e => {
+                var t;
+                return !!(null === (t = null == e ? void 0 : e.contains) || void 0 === t ? void 0 : t.call(e, ee)) && (he(!1), $e(!1), te(null), R(ae), R(ue), !0);
+              });
+            }
+            if (o) try {
+              const l = [...e.addedNodes].filter(e => 1 === e.nodeType);
+              t.push(...l.filter(e => e.matches(o))), t.push(...l.flatMap(e => [...e.querySelectorAll(o)]));
+            } catch (e) {}
+          }
+        }), (t.length || r.length) && ke(e => [...e.filter(e => !r.includes(e)), ...t]);
+      });
+      return r.observe(document.body, {
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["data-tooltip-id"],
+        attributeOldValue: !0
+      }), () => {
+        r.disconnect();
+      };
+    }, [l, p, null == we ? void 0 : we.anchorSelect, ee]), React.useEffect(() => {
+      Ke();
+    }, [Ke]), React.useEffect(() => {
+      if (!(null == G ? void 0 : G.current)) return () => null;
+      const e = new ResizeObserver(() => {
+        setTimeout(() => Ke());
+      });
+      return e.observe(G.current), () => {
+        e.disconnect();
+      };
+    }, [Y, null == G ? void 0 : G.current]), React.useEffect(() => {
+      var e;
+      const t = document.querySelector(`[id='${d}']`),
+        o = [...Oe, t];
+      ee && o.includes(ee) || te(null !== (e = Oe[0]) && void 0 !== e ? e : t);
+    }, [d, Oe, ee]), React.useEffect(() => (J && $e(!0), () => {
+      R(ae), R(ue);
+    }), []), React.useEffect(() => {
+      var e;
+      let t = null !== (e = null == we ? void 0 : we.anchorSelect) && void 0 !== e ? e : p;
+      if (!t && l && (t = `[data-tooltip-id='${l.replace(/'/g, "\\'")}']`), t) try {
+        const e = Array.from(document.querySelectorAll(t));
+        ke(e);
+      } catch (e) {
+        ke([]);
+      }
+    }, [l, p, null == we ? void 0 : we.anchorSelect]), React.useEffect(() => {
+      ae.current && (R(ae), je(A));
+    }, [A]);
+    const Ue = null !== (ie = null == we ? void 0 : we.content) && void 0 !== ie ? ie : Y,
+      Xe = me && Object.keys(pe.tooltipStyles).length > 0;
+    return React.useImperativeHandle(t, () => ({
+      open: e => {
+        if (null == e ? void 0 : e.anchorSelect) try {
+          document.querySelector(e.anchorSelect);
+        } catch (t) {
+          return void console.warn(`[react-tooltip] "${e.anchorSelect}" is not a valid CSS selector`);
+        }
+        be(null != e ? e : null), (null == e ? void 0 : e.delay) ? je(e.delay) : $e(!0);
+      },
+      close: e => {
+        (null == e ? void 0 : e.delay) ? Be(e.delay) : $e(!1);
+      },
+      activeAnchor: ee,
+      place: pe.place,
+      isOpen: Boolean(ye && !x && Ue && Xe)
+    })), ye && !x && Ue ? React.createElement(g, {
+      id: l,
+      role: ne,
+      className: y("react-tooltip", z.tooltip, D.tooltip, D[u], i, `react-tooltip__place-${pe.place}`, z[Xe ? "show" : "closing"], Xe ? "react-tooltip__show" : "react-tooltip__closing", "fixed" === b && z.fixed, $ && z.clickable),
+      onTransitionEnd: e => {
+        R(de), me || "opacity" !== e.propertyName || (he(!1), be(null), null == U || U());
+      },
+      style: {
+        ...V,
+        ...pe.tooltipStyles,
+        opacity: void 0 !== le && Xe ? le : void 0
+      },
+      ref: ce
+    }, Ue, React.createElement(g, {
+      className: y("react-tooltip-arrow", z.arrow, D.arrow, c, N && z.noArrow),
+      style: {
+        ...pe.tooltipArrowStyles,
+        background: re ? `linear-gradient(to right bottom, transparent 50%, ${re} 50%)` : void 0
+      },
+      ref: se
+    })) : null;
+  },
+  H = ({
+    content: t
+  }) => React.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: t
+    }
+  }),
+  M = React.forwardRef(({
+    id: t,
+    anchorId: l,
+    anchorSelect: n,
+    content: i,
+    html: c,
+    render: a,
+    className: u,
+    classNameArrow: d,
+    variant: p = "dark",
+    place: v = "top",
+    offset: m = 10,
+    wrapper: f = "div",
+    children: h = null,
+    events: w = ["hover"],
+    openOnClick: b = !1,
+    positionStrategy: S = "absolute",
+    middlewares: g,
+    delayShow: E = 0,
+    delayHide: _ = 0,
+    float: O = !1,
+    hidden: k = !1,
+    noArrow: T = !1,
+    clickable: L = !1,
+    closeOnEsc: C = !1,
+    closeOnScroll: R = !1,
+    closeOnResize: x = !1,
+    openEvents: N,
+    closeEvents: $,
+    globalCloseEvents: I,
+    imperativeModeOnly: B = !1,
+    style: z,
+    position: D,
+    isOpen: M,
+    defaultIsOpen: W = !1,
+    disableStyleInjection: P = !1,
+    border: V,
+    opacity: F,
+    arrowColor: K,
+    setIsOpen: U,
+    afterShow: X,
+    afterHide: Y,
+    disableTooltip: G,
+    role: Z = "tooltip"
+  }, J) => {
+    const [Q, ee] = React.useState(i),
+      [te, oe] = React.useState(c),
+      [le, re] = React.useState(v),
+      [ne, ie] = React.useState(p),
+      [ce, se] = React.useState(m),
+      [ae, ue] = React.useState(E),
+      [de, pe] = React.useState(_),
+      [ve, me] = React.useState(O),
+      [fe, ye] = React.useState(k),
+      [he, we] = React.useState(f),
+      [be, Se] = React.useState(w),
+      [ge, Ee] = React.useState(S),
+      [Ae, _e] = React.useState(null),
+      [Oe, ke] = React.useState(null),
+      Te = React.useRef(P),
+      {
+        anchorRefs: Le,
+        activeAnchor: Ce
+      } = j(t),
+      Re = e => null == e ? void 0 : e.getAttributeNames().reduce((t, o) => {
+        var l;
+        if (o.startsWith("data-tooltip-")) {
+          t[o.replace(/^data-tooltip-/, "")] = null !== (l = null == e ? void 0 : e.getAttribute(o)) && void 0 !== l ? l : null;
+        }
+        return t;
+      }, {}),
+      xe = e => {
+        const t = {
+          place: e => {
+            var t;
+            re(null !== (t = e) && void 0 !== t ? t : v);
+          },
+          content: e => {
+            ee(null != e ? e : i);
+          },
+          html: e => {
+            oe(null != e ? e : c);
+          },
+          variant: e => {
+            var t;
+            ie(null !== (t = e) && void 0 !== t ? t : p);
+          },
+          offset: e => {
+            se(null === e ? m : Number(e));
+          },
+          wrapper: e => {
+            var t;
+            we(null !== (t = e) && void 0 !== t ? t : f);
+          },
+          events: e => {
+            const t = null == e ? void 0 : e.split(" ");
+            Se(null != t ? t : w);
+          },
+          "position-strategy": e => {
+            var t;
+            Ee(null !== (t = e) && void 0 !== t ? t : S);
+          },
+          "delay-show": e => {
+            ue(null === e ? E : Number(e));
+          },
+          "delay-hide": e => {
+            pe(null === e ? _ : Number(e));
+          },
+          float: e => {
+            me(null === e ? O : "true" === e);
+          },
+          hidden: e => {
+            ye(null === e ? k : "true" === e);
+          },
+          "class-name": e => {
+            _e(e);
+          }
+        };
+        Object.values(t).forEach(e => e(null)), Object.entries(e).forEach(([e, o]) => {
+          var l;
+          null === (l = t[e]) || void 0 === l || l.call(t, o);
+        });
+      };
+    React.useEffect(() => {
+      ee(i);
+    }, [i]), React.useEffect(() => {
+      oe(c);
+    }, [c]), React.useEffect(() => {
+      re(v);
+    }, [v]), React.useEffect(() => {
+      ie(p);
+    }, [p]), React.useEffect(() => {
+      se(m);
+    }, [m]), React.useEffect(() => {
+      ue(E);
+    }, [E]), React.useEffect(() => {
+      pe(_);
+    }, [_]), React.useEffect(() => {
+      me(O);
+    }, [O]), React.useEffect(() => {
+      ye(k);
+    }, [k]), React.useEffect(() => {
+      Ee(S);
+    }, [S]), React.useEffect(() => {
+      Te.current !== P && console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");
+    }, [P]), React.useEffect(() => {
+      "undefined" != typeof window && window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles", {
+        detail: {
+          disableCore: "core" === P,
+          disableBase: P
+        }
+      }));
+    }, []), React.useEffect(() => {
+      var e;
+      const o = new Set(Le);
+      let r = n;
+      if (!r && t && (r = `[data-tooltip-id='${t.replace(/'/g, "\\'")}']`), r) try {
+        document.querySelectorAll(r).forEach(e => {
+          o.add({
+            current: e
+          });
+        });
+      } catch (e) {
+        console.warn(`[react-tooltip] "${r}" is not a valid CSS selector`);
+      }
+      const i = document.querySelector(`[id='${l}']`);
+      if (i && o.add({
+        current: i
+      }), !o.size) return () => null;
+      const c = null !== (e = null != Oe ? Oe : i) && void 0 !== e ? e : Ce.current,
+        s = new MutationObserver(e => {
+          e.forEach(e => {
+            var t;
+            if (!c || "attributes" !== e.type || !(null === (t = e.attributeName) || void 0 === t ? void 0 : t.startsWith("data-tooltip-"))) return;
+            const o = Re(c);
+            xe(o);
+          });
+        }),
+        a = {
+          attributes: !0,
+          childList: !1,
+          subtree: !1
+        };
+      if (c) {
+        const e = Re(c);
+        xe(e), s.observe(c, a);
+      }
+      return () => {
+        s.disconnect();
+      };
+    }, [Le, Ce, Oe, l, n]), React.useEffect(() => {
+      (null == z ? void 0 : z.border) && console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."), V && !A("border", `${V}`) && console.warn(`[react-tooltip] "${V}" is not a valid \`border\`.`), (null == z ? void 0 : z.opacity) && console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."), F && !A("opacity", `${F}`) && console.warn(`[react-tooltip] "${F}" is not a valid \`opacity\`.`);
+    }, []);
+    let Ne = h;
+    const $e = React.useRef(null);
+    if (a) {
+      const t = a({
+        content: (null == Oe ? void 0 : Oe.getAttribute("data-tooltip-content")) || Q || null,
+        activeAnchor: Oe
+      });
+      Ne = t ? React.createElement("div", {
+        ref: $e,
+        className: "react-tooltip-content-wrapper"
+      }, t) : null;
+    } else Q && (Ne = Q);
+    te && (Ne = React.createElement(H, {
+      content: te
+    }));
+    const Ie = {
+      forwardRef: J,
+      id: t,
+      anchorId: l,
+      anchorSelect: n,
+      className: y(u, Ae),
+      classNameArrow: d,
+      content: Ne,
+      contentWrapperRef: $e,
+      place: le,
+      variant: ne,
+      offset: ce,
+      wrapper: he,
+      events: be,
+      openOnClick: b,
+      positionStrategy: ge,
+      middlewares: g,
+      delayShow: ae,
+      delayHide: de,
+      float: ve,
+      hidden: fe,
+      noArrow: T,
+      clickable: L,
+      closeOnEsc: C,
+      closeOnScroll: R,
+      closeOnResize: x,
+      openEvents: N,
+      closeEvents: $,
+      globalCloseEvents: I,
+      imperativeModeOnly: B,
+      style: z,
+      position: D,
+      isOpen: M,
+      defaultIsOpen: W,
+      border: V,
+      opacity: F,
+      arrowColor: K,
+      setIsOpen: U,
+      afterShow: X,
+      afterHide: Y,
+      disableTooltip: G,
+      activeAnchor: Oe,
+      setActiveAnchor: e => ke(e),
+      role: Z
+    };
+    return React.createElement(q, {
+      ...Ie
+    });
+  });
+"undefined" != typeof window && window.addEventListener("react-tooltip-inject-styles", e => {
+  e.detail.disableCore || S({
+    css: `:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s}.core-styles-module_tooltip__3vRRp{position:absolute;top:0;left:0;pointer-events:none;opacity:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay)ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay)ease-in}`,
+    type: "core"
+  }), e.detail.disableBase || S({
+    css: `
+.styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px}[class*='react-tooltip__place-top']>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*='react-tooltip__place-right']>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*='react-tooltip__place-bottom']>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*='react-tooltip__place-left']>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,
+    type: "base"
+  });
+});
+
 const Wrapper$h = styled.div(props => ({
     display: 'inline-block',
     position: 'relative',
     height: props.$height || '16px',
 }));
+const StyledAnchor = styled.a ``;
 const StyledIcon$6 = styled(Icon) `
   width: 16px;
   height: 16px;
@@ -182,9 +2734,30 @@ const positions = {
 };
 const Content$3 = styled.div(props => (Object.assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: props.theme.PRIMARY_COLOR.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 9999 }, positions[props.$position])));
 Content$3.defaultProps = { theme: EditableTheme };
-const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, dataItemid, height, }) => {
+const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, dataItemid, height, auto = false, }) => {
     const [show_content, toggleContent] = React.useState(false);
     const baseId = dataItemid || 'tooltip';
+    if (auto) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("style", null, ` 
+       .custom-tooltip-arrow { 
+          box-shadow: 1px 1px 0 0 #0193D7; /* top border for arrow (matches border) */
+        }
+          .custom-tooltip { 
+            border-radius: 4px;
+            border-width: 1px;
+            border-style: solid;
+            border-color: #0193D7;
+            background: #ffffff;
+            boxShadow: 0px 5px 30px -10px rgba(0, 0, 0, 0.5);
+            color: #000;
+            max-width: ${width};
+        }
+          
+      `),
+            React.createElement(StyledAnchor, { "data-tooltip-html": children, "data-tooltip-id": 'auto-tooltip-data-html' }, trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: js.mdiInformationOutline })),
+            React.createElement(M, { className: 'custom-tooltip', classNameArrow: 'custom-tooltip-arrow', id: 'auto-tooltip-data-html' })));
+    }
     return (React.createElement(Wrapper$h, { "$height": height, "data-itemid": `${baseId}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
         trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: js.mdiInformationOutline }),
         show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, "data-itemid": `${baseId}-content` }, children && (React.createElement(Copy, { "data-itemid": `${baseId}-copy`, type: 'small' }, children)))) : null));
@@ -1790,6 +4363,694 @@ const formatAsMask = (number, mask) => {
     return result;
 };
 
+var textMaskAddons = {exports: {}};
+
+(function (module, exports) {
+  !function (e, t) {
+    module.exports = t() ;
+  }(commonjsGlobal, function () {
+    return function (e) {
+      function t(r) {
+        if (n[r]) return n[r].exports;
+        var i = n[r] = {
+          exports: {},
+          id: r,
+          loaded: !1
+        };
+        return e[r].call(i.exports, i, i.exports, t), i.loaded = !0, i.exports;
+      }
+      var n = {};
+      return t.m = e, t.c = n, t.p = "", t(0);
+    }([function (e, t, n) {
+
+      function r(e) {
+        return e && e.__esModule ? e : {
+          default: e
+        };
+      }
+      Object.defineProperty(t, "__esModule", {
+        value: !0
+      });
+      var i = n(1);
+      Object.defineProperty(t, "createAutoCorrectedDatePipe", {
+        enumerable: !0,
+        get: function () {
+          return r(i).default;
+        }
+      });
+      var o = n(2);
+      Object.defineProperty(t, "createNumberMask", {
+        enumerable: !0,
+        get: function () {
+          return r(o).default;
+        }
+      });
+      var u = n(3);
+      Object.defineProperty(t, "emailMask", {
+        enumerable: !0,
+        get: function () {
+          return r(u).default;
+        }
+      });
+    }, function (e, t) {
+
+      function n() {
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "mm dd yyyy",
+          t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+          n = t.minYear,
+          o = void 0 === n ? 1 : n,
+          u = t.maxYear,
+          a = void 0 === u ? 9999 : u,
+          c = e.split(/[^dmyHMS]+/).sort(function (e, t) {
+            return i.indexOf(e) - i.indexOf(t);
+          });
+        return function (t) {
+          var n = [],
+            i = {
+              dd: 31,
+              mm: 12,
+              yy: 99,
+              yyyy: a,
+              HH: 23,
+              MM: 59,
+              SS: 59
+            },
+            u = {
+              dd: 1,
+              mm: 1,
+              yy: 0,
+              yyyy: o,
+              HH: 0,
+              MM: 0,
+              SS: 0
+            },
+            l = t.split("");
+          c.forEach(function (t) {
+            var r = e.indexOf(t),
+              o = parseInt(i[t].toString().substr(0, 1), 10);
+            parseInt(l[r], 10) > o && (l[r + 1] = l[r], l[r] = 0, n.push(r));
+          });
+          var s = 0,
+            d = c.some(function (n) {
+              var c = e.indexOf(n),
+                l = n.length,
+                d = t.substr(c, l).replace(/\D/g, ""),
+                f = parseInt(d, 10);
+              "mm" === n && (s = f || 0);
+              var p = "dd" === n ? r[s] : i[n];
+              if ("yyyy" === n && (1 !== o || 9999 !== a)) {
+                var v = parseInt(i[n].toString().substring(0, d.length), 10),
+                  y = parseInt(u[n].toString().substring(0, d.length), 10);
+                return f < y || f > v;
+              }
+              return f > p || d.length === l && f < u[n];
+            });
+          return !d && {
+            value: l.join(""),
+            indexesOfPipedChars: n
+          };
+        };
+      }
+      Object.defineProperty(t, "__esModule", {
+        value: !0
+      }), t.default = n;
+      var r = [31, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
+        i = ["yyyy", "yy", "mm", "dd", "HH", "MM", "SS"];
+    }, function (e, t) {
+
+      function n() {
+        function e() {
+          var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : a,
+            t = e.length;
+          if (e === a || e[0] === g[0] && 1 === t) return g.split(a).concat([v]).concat(h.split(a));
+          if (e === P && _) return g.split(a).concat(["0", P, v]).concat(h.split(a));
+          var n = e[0] === s && D;
+          n && (e = e.toString().substr(1));
+          var u = e.lastIndexOf(P),
+            c = u !== -1,
+            l = void 0,
+            m = void 0,
+            b = void 0;
+          if (e.slice($ * -1) === h && (e = e.slice(0, $ * -1)), c && (_ || I) ? (l = e.slice(e.slice(0, N) === g ? N : 0, u), m = e.slice(u + 1, t), m = r(m.replace(f, a))) : l = e.slice(0, N) === g ? e.slice(N) : e, L && ("undefined" == typeof L ? "undefined" : o(L)) === p) {
+            var O = "." === S ? "[.]" : "" + S,
+              M = (l.match(new RegExp(O, "g")) || []).length;
+            l = l.slice(0, L + M * V);
+          }
+          return l = l.replace(f, a), R || (l = l.replace(/^0+(0$|[^0])/, "$1")), l = x ? i(l, S) : l, b = r(l), (c && _ || I === !0) && (e[u - 1] !== P && b.push(y), b.push(P, y), m && (("undefined" == typeof C ? "undefined" : o(C)) === p && (m = m.slice(0, C)), b = b.concat(m)), I === !0 && e[u - 1] === P && b.push(v)), N > 0 && (b = g.split(a).concat(b)), n && (b.length === N && b.push(v), b = [d].concat(b)), h.length > 0 && (b = b.concat(h.split(a))), b;
+        }
+        var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
+          n = t.prefix,
+          g = void 0 === n ? u : n,
+          m = t.suffix,
+          h = void 0 === m ? a : m,
+          b = t.includeThousandsSeparator,
+          x = void 0 === b || b,
+          O = t.thousandsSeparatorSymbol,
+          S = void 0 === O ? c : O,
+          M = t.allowDecimal,
+          _ = void 0 !== M && M,
+          j = t.decimalSymbol,
+          P = void 0 === j ? l : j,
+          w = t.decimalLimit,
+          C = void 0 === w ? 2 : w,
+          H = t.requireDecimal,
+          I = void 0 !== H && H,
+          k = t.allowNegative,
+          D = void 0 !== k && k,
+          E = t.allowLeadingZeroes,
+          R = void 0 !== E && E,
+          A = t.integerLimit,
+          L = void 0 === A ? null : A,
+          N = g && g.length || 0,
+          $ = h && h.length || 0,
+          V = S && S.length || 0;
+        return e.instanceOf = "createNumberMask", e;
+      }
+      function r(e) {
+        return e.split(a).map(function (e) {
+          return v.test(e) ? v : e;
+        });
+      }
+      function i(e, t) {
+        return e.replace(/\B(?=(\d{3})+(?!\d))/g, t);
+      }
+      Object.defineProperty(t, "__esModule", {
+        value: !0
+      });
+      var o = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) {
+        return typeof e;
+      } : function (e) {
+        return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+      };
+      t.default = n;
+      var u = "$",
+        a = "",
+        c = ",",
+        l = ".",
+        s = "-",
+        d = /-/,
+        f = /\D+/g,
+        p = "number",
+        v = /\d/,
+        y = "[]";
+    }, function (e, t, n) {
+
+      function r(e) {
+        return e && e.__esModule ? e : {
+          default: e
+        };
+      }
+      function i(e, t) {
+        e = e.replace(O, v);
+        var n = t.placeholderChar,
+          r = t.currentCaretPosition,
+          i = e.indexOf(y),
+          s = e.lastIndexOf(p),
+          d = s < i ? -1 : s,
+          f = o(e, i + 1, y),
+          g = o(e, d - 1, p),
+          m = u(e, i),
+          h = a(e, i, d, n),
+          b = c(e, d, n, r);
+        m = l(m), h = l(h), b = l(b, !0);
+        var x = m.concat(f).concat(h).concat(g).concat(b);
+        return x;
+      }
+      function o(e, t, n) {
+        var r = [];
+        return e[t] === n ? r.push(n) : r.push(g, n), r.push(g), r;
+      }
+      function u(e, t) {
+        return t === -1 ? e : e.slice(0, t);
+      }
+      function a(e, t, n, r) {
+        var i = v;
+        return t !== -1 && (i = n === -1 ? e.slice(t + 1, e.length) : e.slice(t + 1, n)), i = i.replace(new RegExp("[\\s" + r + "]", h), v), i === y ? f : i.length < 1 ? m : i[i.length - 1] === p ? i.slice(0, i.length - 1) : i;
+      }
+      function c(e, t, n, r) {
+        var i = v;
+        return t !== -1 && (i = e.slice(t + 1, e.length)), i = i.replace(new RegExp("[\\s" + n + ".]", h), v), 0 === i.length ? e[t - 1] === p && r !== e.length ? f : v : i;
+      }
+      function l(e, t) {
+        return e.split(v).map(function (e) {
+          return e === m ? e : t ? x : b;
+        });
+      }
+      Object.defineProperty(t, "__esModule", {
+        value: !0
+      });
+      var s = n(4),
+        d = r(s),
+        f = "*",
+        p = ".",
+        v = "",
+        y = "@",
+        g = "[]",
+        m = " ",
+        h = "g",
+        b = /[^\s]/,
+        x = /[^.\s]/,
+        O = /\s/g;
+      t.default = {
+        mask: i,
+        pipe: d.default
+      };
+    }, function (e, t) {
+
+      function n(e, t) {
+        var n = t.currentCaretPosition,
+          o = t.rawValue,
+          f = t.previousConformedValue,
+          p = t.placeholderChar,
+          v = e;
+        v = r(v);
+        var y = v.indexOf(a),
+          g = null === o.match(new RegExp("[^@\\s." + p + "]"));
+        if (g) return u;
+        if (v.indexOf(l) !== -1 || y !== -1 && n !== y + 1 || o.indexOf(i) === -1 && f !== u && o.indexOf(c) !== -1) return !1;
+        var m = v.indexOf(i),
+          h = v.slice(m + 1, v.length);
+        return (h.match(d) || s).length > 1 && v.substr(-1) === c && n !== o.length && (v = v.slice(0, v.length - 1)), v;
+      }
+      function r(e) {
+        var t = 0;
+        return e.replace(o, function () {
+          return t++, 1 === t ? i : u;
+        });
+      }
+      Object.defineProperty(t, "__esModule", {
+        value: !0
+      }), t.default = n;
+      var i = "@",
+        o = /@/g,
+        u = "",
+        a = "@.",
+        c = ".",
+        l = "..",
+        s = [],
+        d = /\./g;
+    }]);
+  });
+})(textMaskAddons);
+var textMaskAddonsExports = textMaskAddons.exports;
+
+var textMaskCore = {exports: {}};
+
+(function (module, exports) {
+  !function (e, r) {
+    module.exports = r() ;
+  }(commonjsGlobal, function () {
+    return function (e) {
+      function r(n) {
+        if (t[n]) return t[n].exports;
+        var o = t[n] = {
+          exports: {},
+          id: n,
+          loaded: !1
+        };
+        return e[n].call(o.exports, o, o.exports, r), o.loaded = !0, o.exports;
+      }
+      var t = {};
+      return r.m = e, r.c = t, r.p = "", r(0);
+    }([function (e, r, t) {
+
+      function n(e) {
+        return e && e.__esModule ? e : {
+          default: e
+        };
+      }
+      Object.defineProperty(r, "__esModule", {
+        value: !0
+      });
+      var o = t(3);
+      Object.defineProperty(r, "conformToMask", {
+        enumerable: !0,
+        get: function () {
+          return n(o).default;
+        }
+      });
+      var i = t(2);
+      Object.defineProperty(r, "adjustCaretPosition", {
+        enumerable: !0,
+        get: function () {
+          return n(i).default;
+        }
+      });
+      var a = t(5);
+      Object.defineProperty(r, "createTextMaskInputElement", {
+        enumerable: !0,
+        get: function () {
+          return n(a).default;
+        }
+      });
+    }, function (e, r) {
+
+      Object.defineProperty(r, "__esModule", {
+        value: !0
+      }), r.placeholderChar = "_", r.strFunction = "function";
+    }, function (e, r) {
+
+      function t(e) {
+        var r = e.previousConformedValue,
+          t = void 0 === r ? o : r,
+          i = e.previousPlaceholder,
+          a = void 0 === i ? o : i,
+          u = e.currentCaretPosition,
+          l = void 0 === u ? 0 : u,
+          s = e.conformedValue,
+          f = e.rawValue,
+          d = e.placeholderChar,
+          c = e.placeholder,
+          p = e.indexesOfPipedChars,
+          v = void 0 === p ? n : p,
+          h = e.caretTrapIndexes,
+          m = void 0 === h ? n : h;
+        if (0 === l || !f.length) return 0;
+        var y = f.length,
+          g = t.length,
+          b = c.length,
+          C = s.length,
+          P = y - g,
+          k = P > 0,
+          x = 0 === g,
+          O = P > 1 && !k && !x;
+        if (O) return l;
+        var T = k && (t === s || s === c),
+          w = 0,
+          M = void 0,
+          S = void 0;
+        if (T) w = l - P;else {
+          var j = s.toLowerCase(),
+            _ = f.toLowerCase(),
+            V = _.substr(0, l).split(o),
+            A = V.filter(function (e) {
+              return j.indexOf(e) !== -1;
+            });
+          S = A[A.length - 1];
+          var N = a.substr(0, A.length).split(o).filter(function (e) {
+              return e !== d;
+            }).length,
+            E = c.substr(0, A.length).split(o).filter(function (e) {
+              return e !== d;
+            }).length,
+            F = E !== N,
+            R = void 0 !== a[A.length - 1] && void 0 !== c[A.length - 2] && a[A.length - 1] !== d && a[A.length - 1] !== c[A.length - 1] && a[A.length - 1] === c[A.length - 2];
+          !k && (F || R) && N > 0 && c.indexOf(S) > -1 && void 0 !== f[l] && (M = !0, S = f[l]);
+          for (var I = v.map(function (e) {
+              return j[e];
+            }), J = I.filter(function (e) {
+              return e === S;
+            }).length, W = A.filter(function (e) {
+              return e === S;
+            }).length, q = c.substr(0, c.indexOf(d)).split(o).filter(function (e, r) {
+              return e === S && f[r] !== e;
+            }).length, L = q + W + J + (M ? 1 : 0), z = 0, B = 0; B < C; B++) {
+            var D = j[B];
+            if (w = B + 1, D === S && z++, z >= L) break;
+          }
+        }
+        if (k) {
+          for (var G = w, H = w; H <= b; H++) if (c[H] === d && (G = H), c[H] === d || m.indexOf(H) !== -1 || H === b) return G;
+        } else if (M) {
+          for (var K = w - 1; K >= 0; K--) if (s[K] === S || m.indexOf(K) !== -1 || 0 === K) return K;
+        } else for (var Q = w; Q >= 0; Q--) if (c[Q - 1] === d || m.indexOf(Q) !== -1 || 0 === Q) return Q;
+      }
+      Object.defineProperty(r, "__esModule", {
+        value: !0
+      }), r.default = t;
+      var n = [],
+        o = "";
+    }, function (e, r, t) {
+
+      function n() {
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : l,
+          r = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : u,
+          t = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {};
+        if (!(0, i.isArray)(r)) {
+          if (("undefined" == typeof r ? "undefined" : o(r)) !== a.strFunction) throw new Error("Text-mask:conformToMask; The mask property must be an array.");
+          r = r(e, t), r = (0, i.processCaretTraps)(r).maskWithoutCaretTraps;
+        }
+        var n = t.guide,
+          s = void 0 === n || n,
+          f = t.previousConformedValue,
+          d = void 0 === f ? l : f,
+          c = t.placeholderChar,
+          p = void 0 === c ? a.placeholderChar : c,
+          v = t.placeholder,
+          h = void 0 === v ? (0, i.convertMaskToPlaceholder)(r, p) : v,
+          m = t.currentCaretPosition,
+          y = t.keepCharPositions,
+          g = s === !1 && void 0 !== d,
+          b = e.length,
+          C = d.length,
+          P = h.length,
+          k = r.length,
+          x = b - C,
+          O = x > 0,
+          T = m + (O ? -x : 0),
+          w = T + Math.abs(x);
+        if (y === !0 && !O) {
+          for (var M = l, S = T; S < w; S++) h[S] === p && (M += p);
+          e = e.slice(0, T) + M + e.slice(T, b);
+        }
+        for (var j = e.split(l).map(function (e, r) {
+            return {
+              char: e,
+              isNew: r >= T && r < w
+            };
+          }), _ = b - 1; _ >= 0; _--) {
+          var V = j[_].char;
+          if (V !== p) {
+            var A = _ >= T && C === k;
+            V === h[A ? _ - x : _] && j.splice(_, 1);
+          }
+        }
+        var N = l,
+          E = !1;
+        e: for (var F = 0; F < P; F++) {
+          var R = h[F];
+          if (R === p) {
+            if (j.length > 0) for (; j.length > 0;) {
+              var I = j.shift(),
+                J = I.char,
+                W = I.isNew;
+              if (J === p && g !== !0) {
+                N += p;
+                continue e;
+              }
+              if (r[F].test(J)) {
+                if (y === !0 && W !== !1 && d !== l && s !== !1 && O) {
+                  for (var q = j.length, L = null, z = 0; z < q; z++) {
+                    var B = j[z];
+                    if (B.char !== p && B.isNew === !1) break;
+                    if (B.char === p) {
+                      L = z;
+                      break;
+                    }
+                  }
+                  null !== L ? (N += J, j.splice(L, 1)) : F--;
+                } else N += J;
+                continue e;
+              }
+              E = !0;
+            }
+            g === !1 && (N += h.substr(F, P));
+            break;
+          }
+          N += R;
+        }
+        if (g && O === !1) {
+          for (var D = null, G = 0; G < N.length; G++) h[G] === p && (D = G);
+          N = null !== D ? N.substr(0, D + 1) : l;
+        }
+        return {
+          conformedValue: N,
+          meta: {
+            someCharsRejected: E
+          }
+        };
+      }
+      Object.defineProperty(r, "__esModule", {
+        value: !0
+      });
+      var o = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) {
+        return typeof e;
+      } : function (e) {
+        return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+      };
+      r.default = n;
+      var i = t(4),
+        a = t(1),
+        u = [],
+        l = "";
+    }, function (e, r, t) {
+
+      function n() {
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : f,
+          r = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : s.placeholderChar;
+        if (!o(e)) throw new Error("Text-mask:convertMaskToPlaceholder; The mask property must be an array.");
+        if (e.indexOf(r) !== -1) throw new Error("Placeholder character must not be used as part of the mask. Please specify a character that is not present in your mask as your placeholder character.\n\n" + ("The placeholder character that was received is: " + JSON.stringify(r) + "\n\n") + ("The mask that was received is: " + JSON.stringify(e)));
+        return e.map(function (e) {
+          return e instanceof RegExp ? r : e;
+        }).join("");
+      }
+      function o(e) {
+        return Array.isArray && Array.isArray(e) || e instanceof Array;
+      }
+      function i(e) {
+        return "string" == typeof e || e instanceof String;
+      }
+      function a(e) {
+        return "number" == typeof e && void 0 === e.length && !isNaN(e);
+      }
+      function u(e) {
+        return "undefined" == typeof e || null === e;
+      }
+      function l(e) {
+        for (var r = [], t = void 0; t = e.indexOf(d), t !== -1;) r.push(t), e.splice(t, 1);
+        return {
+          maskWithoutCaretTraps: e,
+          indexes: r
+        };
+      }
+      Object.defineProperty(r, "__esModule", {
+        value: !0
+      }), r.convertMaskToPlaceholder = n, r.isArray = o, r.isString = i, r.isNumber = a, r.isNil = u, r.processCaretTraps = l;
+      var s = t(1),
+        f = [],
+        d = "[]";
+    }, function (e, r, t) {
+
+      function n(e) {
+        return e && e.__esModule ? e : {
+          default: e
+        };
+      }
+      function o(e) {
+        var r = {
+          previousConformedValue: void 0,
+          previousPlaceholder: void 0
+        };
+        return {
+          state: r,
+          update: function (t) {
+            var n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : e,
+              o = n.inputElement,
+              s = n.mask,
+              d = n.guide,
+              m = n.pipe,
+              g = n.placeholderChar,
+              b = void 0 === g ? v.placeholderChar : g,
+              C = n.keepCharPositions,
+              P = void 0 !== C && C,
+              k = n.showMask,
+              x = void 0 !== k && k;
+            if ("undefined" == typeof t && (t = o.value), t !== r.previousConformedValue) {
+              ("undefined" == typeof s ? "undefined" : l(s)) === y && void 0 !== s.pipe && void 0 !== s.mask && (m = s.pipe, s = s.mask);
+              var O = void 0,
+                T = void 0;
+              if (s instanceof Array && (O = (0, p.convertMaskToPlaceholder)(s, b)), s !== !1) {
+                var w = a(t),
+                  M = o.selectionEnd,
+                  S = r.previousConformedValue,
+                  j = r.previousPlaceholder,
+                  _ = void 0;
+                if (("undefined" == typeof s ? "undefined" : l(s)) === v.strFunction) {
+                  if (T = s(w, {
+                    currentCaretPosition: M,
+                    previousConformedValue: S,
+                    placeholderChar: b
+                  }), T === !1) return;
+                  var V = (0, p.processCaretTraps)(T),
+                    A = V.maskWithoutCaretTraps,
+                    N = V.indexes;
+                  T = A, _ = N, O = (0, p.convertMaskToPlaceholder)(T, b);
+                } else T = s;
+                var E = {
+                    previousConformedValue: S,
+                    guide: d,
+                    placeholderChar: b,
+                    pipe: m,
+                    placeholder: O,
+                    currentCaretPosition: M,
+                    keepCharPositions: P
+                  },
+                  F = (0, c.default)(w, T, E),
+                  R = F.conformedValue,
+                  I = ("undefined" == typeof m ? "undefined" : l(m)) === v.strFunction,
+                  J = {};
+                I && (J = m(R, u({
+                  rawValue: w
+                }, E)), J === !1 ? J = {
+                  value: S,
+                  rejected: !0
+                } : (0, p.isString)(J) && (J = {
+                  value: J
+                }));
+                var W = I ? J.value : R,
+                  q = (0, f.default)({
+                    previousConformedValue: S,
+                    previousPlaceholder: j,
+                    conformedValue: W,
+                    placeholder: O,
+                    rawValue: w,
+                    currentCaretPosition: M,
+                    placeholderChar: b,
+                    indexesOfPipedChars: J.indexesOfPipedChars,
+                    caretTrapIndexes: _
+                  }),
+                  L = W === O && 0 === q,
+                  z = x ? O : h,
+                  B = L ? z : W;
+                r.previousConformedValue = B, r.previousPlaceholder = O, o.value !== B && (o.value = B, i(o, q));
+              }
+            }
+          }
+        };
+      }
+      function i(e, r) {
+        document.activeElement === e && (g ? b(function () {
+          return e.setSelectionRange(r, r, m);
+        }, 0) : e.setSelectionRange(r, r, m));
+      }
+      function a(e) {
+        if ((0, p.isString)(e)) return e;
+        if ((0, p.isNumber)(e)) return String(e);
+        if (void 0 === e || null === e) return h;
+        throw new Error("The 'value' provided to Text Mask needs to be a string or a number. The value received was:\n\n " + JSON.stringify(e));
+      }
+      Object.defineProperty(r, "__esModule", {
+        value: !0
+      });
+      var u = Object.assign || function (e) {
+          for (var r = 1; r < arguments.length; r++) {
+            var t = arguments[r];
+            for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n]);
+          }
+          return e;
+        },
+        l = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) {
+          return typeof e;
+        } : function (e) {
+          return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+        };
+      r.default = o;
+      var s = t(2),
+        f = n(s),
+        d = t(3),
+        c = n(d),
+        p = t(4),
+        v = t(1),
+        h = "",
+        m = "none",
+        y = "object",
+        g = "undefined" != typeof navigator && /Android/i.test(navigator.userAgent),
+        b = "undefined" != typeof requestAnimationFrame ? requestAnimationFrame : setTimeout;
+    }]);
+  });
+})(textMaskCore);
+var textMaskCoreExports = textMaskCore.exports;
+
 const StyledInput = styled.input `
   border: none !important;
   background: none !important;
@@ -2003,6 +5264,7 @@ const Input$1 = (_a) => {
         if (type === 'number' && max && parseInt(newValue, 10) > parseInt(max, 10)) {
             e.target.value = `${max}`;
         }
+        handleInputMaskChange(newValue);
         setInternalValue(e.target.value);
         if (onChange)
             onChange(e);
@@ -2031,8 +5293,30 @@ const Input$1 = (_a) => {
         formatted_value = formatAsSsn(internalValue);
     }
     if (mask && !format) {
-        formatted_value = formatAsMask(internalValue, mask);
+        if (mask[0] !== '{') {
+            formatted_value = formatAsMask(internalValue, mask);
+        }
     }
+    const inputRef = innerRef ? innerRef : React.useRef(null);
+    const textMask = React.useRef(null); // Explicitly type the ref
+    const numberMask = mask && mask[0] === '{' ? textMaskAddonsExports.createNumberMask(JSON.parse(mask)) : textMaskAddonsExports.createNumberMask({});
+    React.useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        if (inputRef.current) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            textMask.current = textMaskCoreExports.createTextMaskInputElement({
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                inputElement: inputRef.current,
+                mask: numberMask,
+            });
+        }
+    }, [numberMask]);
+    const handleInputMaskChange = (value) => {
+        if (mask && !format && mask[0] === '{' && textMask.current) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+            textMask.current.update(value); // Apply the mask
+        }
+    };
     const baseId = dataItemid || 'input';
     return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper`, style: style },
         React.createElement(StyledTextArea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, autoComplete: autoComplete, maxLength: maxLength, onBlur: readOnly
@@ -2083,7 +5367,7 @@ const Input$1 = (_a) => {
                 }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, onPaste: e => {
                 if (onPaste)
                     onPaste(e);
-            }, placeholder: placeholder, readOnly: readOnly, ref: innerRef, step: step, tabIndex: readOnly ? -1 : tabIndex, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps, { "data-itemid": `${baseId}-input` })),
+            }, placeholder: placeholder, readOnly: readOnly, ref: inputRef, step: step, tabIndex: readOnly ? -1 : tabIndex, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps, { "data-itemid": `${baseId}-input` })),
         loading ? (React.createElement(Loader$1, { "data-itemid": `${baseId}-loader` },
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.mdiLoading, size: '20px', spin: true }))) : null,
         showCharCount ? (React.createElement(CharacterCount, { "data-itemid": `${baseId}-char-count` },
@@ -2212,7 +5496,7 @@ const StepLine = styled.div `
 const Container$2 = styled.div ``;
 const ProgressBarFill = styled.div `
   width: 110px;
-  height: 8px;
+  height: 12px;
   margin-top: 4px;
   background-color: #e7e6e6;
   border-radius: 16px;
@@ -2226,7 +5510,7 @@ const ProgressBarFill = styled.div `
     transform: translate(-50%, -50%);
     color: ${props => (props.$percent >= 83 ? '#fff' : '#757575')};
     font-family: 'Roboto', Helvetica, Arial, sans-serif;
-    font-size: 8px;
+    font-size: 11px;
     font-weight: 600;
     transition: left 0.5s ease-in-out;
   }