@xy-planning-network/trees 0.4.0-rc-6 → 0.4.1

package/dist/trees.es.js

@@ -1244,7 +1244,7 @@ var RenderStrategy;
   RenderStrategy2[RenderStrategy2["Unmount"] = 0] = "Unmount";
   RenderStrategy2[RenderStrategy2["Hidden"] = 1] = "Hidden";
 })(RenderStrategy || (RenderStrategy = {}));
-function render$7(_ref) {
+function render$8(_ref) {
   var _ref$visible = _ref.visible, visible = _ref$visible === void 0 ? true : _ref$visible, _ref$features = _ref.features, features = _ref$features === void 0 ? Features.None : _ref$features, main2 = _objectWithoutPropertiesLoose(_ref, ["visible", "features"]);
   if (visible)
     return _render(main2);
@@ -1370,7 +1370,7 @@ var ForcePortalRoot = /* @__PURE__ */ defineComponent({
     provide(ForcePortalRootContext, props.force);
     return function() {
       var passThroughProps = _objectWithoutPropertiesLoose(props, ["force"]);
-      return render$7({
+      return render$8({
         props: passThroughProps,
         slot: {},
         slots,
@@ -1430,7 +1430,7 @@ var Portal = /* @__PURE__ */ defineComponent({
       };
       return h(Teleport, {
         to: myTarget.value
-      }, render$7({
+      }, render$8({
         props: _extends({}, props, propsWeControl),
         slot: {},
         attrs,
@@ -1463,7 +1463,7 @@ var PortalGroup = /* @__PURE__ */ defineComponent({
     provide(PortalGroupContext, api);
     return function() {
       var passThroughProps = _objectWithoutPropertiesLoose(props, ["target"]);
-      return render$7({
+      return render$8({
         props: passThroughProps,
         slot: {},
         attrs,
@@ -1551,6 +1551,25 @@ var FocusableMode;
   FocusableMode2[FocusableMode2["Strict"] = 0] = "Strict";
   FocusableMode2[FocusableMode2["Loose"] = 1] = "Loose";
 })(FocusableMode || (FocusableMode = {}));
+function isFocusableElement(element, mode) {
+  var _match;
+  if (mode === void 0) {
+    mode = FocusableMode.Strict;
+  }
+  if (element === document.body)
+    return false;
+  return match(mode, (_match = {}, _match[FocusableMode.Strict] = function() {
+    return element.matches(focusableSelector);
+  }, _match[FocusableMode.Loose] = function() {
+    var next = element;
+    while (next !== null) {
+      if (next.matches(focusableSelector))
+        return true;
+      next = next.parentElement;
+    }
+    return false;
+  }, _match));
+}
 function focusElement(element) {
   element == null ? void 0 : element.focus({
     preventScroll: true
@@ -1895,7 +1914,7 @@ var Dialog = /* @__PURE__ */ defineComponent({
           return h(ForcePortalRoot, {
             force: false
           }, function() {
-            return render$7({
+            return render$8({
               props: _extends({}, passThroughProps, propsWeControl),
               slot,
               attrs: _this.$attrs,
@@ -2068,7 +2087,7 @@ var DialogOverlay = /* @__PURE__ */ defineComponent({
       onClick: this.handleClick
     };
     var passThroughProps = this.$props;
-    return render$7({
+    return render$8({
       props: _extends({}, passThroughProps, propsWeControl),
       slot: {
         open: api.dialogState.value === DialogStates.Open
@@ -2107,7 +2126,7 @@ var DialogTitle = /* @__PURE__ */ defineComponent({
       id: this.id
     };
     var passThroughProps = this.$props;
-    return render$7({
+    return render$8({
       props: _extends({}, passThroughProps, propsWeControl),
       slot: {
         open: api.dialogState.value === DialogStates.Open
@@ -2235,7 +2254,7 @@ var Disclosure = /* @__PURE__ */ defineComponent({
         open: disclosureState.value === DisclosureStates.Open,
         close: api.close
       };
-      return render$7({
+      return render$8({
         props: passThroughProps,
         slot,
         slots,
@@ -2278,7 +2297,7 @@ var DisclosureButton = /* @__PURE__ */ defineComponent({
       onKeydown: this.handleKeyDown,
       onKeyup: this.handleKeyUp
     };
-    return render$7({
+    return render$8({
       props: _extends({}, this.$props, propsWeControl),
       slot,
       attrs: this.$attrs,
@@ -2379,7 +2398,7 @@ var DisclosurePanel = /* @__PURE__ */ defineComponent({
       id: this.id,
       ref: "el"
     };
-    return render$7({
+    return render$8({
       props: _extends({}, this.$props, propsWeControl),
       slot,
       attrs: this.$attrs,
@@ -2623,7 +2642,7 @@ var Menu = /* @__PURE__ */ defineComponent({
       var slot = {
         open: menuState.value === MenuStates.Open
       };
-      return render$7({
+      return render$8({
         props,
         slot,
         slots,
@@ -2662,7 +2681,7 @@ var MenuButton = /* @__PURE__ */ defineComponent({
       onKeyup: this.handleKeyUp,
       onClick: this.handleClick
     };
-    return render$7({
+    return render$8({
       props: _extends({}, this.$props, propsWeControl),
       slot,
       attrs: this.$attrs,
@@ -2782,7 +2801,7 @@ var MenuItems = /* @__PURE__ */ defineComponent({
       ref: "el"
     };
     var passThroughProps = this.$props;
-    return render$7({
+    return render$8({
       props: _extends({}, passThroughProps, propsWeControl),
       slot,
       attrs: this.$attrs,
@@ -3001,7 +3020,7 @@ var MenuItem = /* @__PURE__ */ defineComponent({
         onPointerleave: handleLeave,
         onMouseleave: handleLeave
       };
-      return render$7({
+      return render$8({
         props: _extends({}, props, propsWeControl),
         slot,
         attrs,
@@ -3011,6 +3030,458 @@ var MenuItem = /* @__PURE__ */ defineComponent({
     };
   }
 });
+var PopoverStates;
+(function(PopoverStates2) {
+  PopoverStates2[PopoverStates2["Open"] = 0] = "Open";
+  PopoverStates2[PopoverStates2["Closed"] = 1] = "Closed";
+})(PopoverStates || (PopoverStates = {}));
+var PopoverContext = /* @__PURE__ */ Symbol("PopoverContext");
+function usePopoverContext(component) {
+  var context = inject(PopoverContext, null);
+  if (context === null) {
+    var err = new Error("<" + component + " /> is missing a parent <" + Popover.name + " /> component.");
+    if (Error.captureStackTrace)
+      Error.captureStackTrace(err, usePopoverContext);
+    throw err;
+  }
+  return context;
+}
+var PopoverGroupContext = /* @__PURE__ */ Symbol("PopoverGroupContext");
+function usePopoverGroupContext() {
+  return inject(PopoverGroupContext, null);
+}
+var PopoverPanelContext = /* @__PURE__ */ Symbol("PopoverPanelContext");
+function usePopoverPanelContext() {
+  return inject(PopoverPanelContext, null);
+}
+var Popover = /* @__PURE__ */ defineComponent({
+  name: "Popover",
+  props: {
+    as: {
+      type: [Object, String],
+      "default": "div"
+    }
+  },
+  setup: function setup14(props, _ref) {
+    var slots = _ref.slots, attrs = _ref.attrs;
+    var buttonId = "headlessui-popover-button-" + useId();
+    var panelId = "headlessui-popover-panel-" + useId();
+    var popoverState = ref(PopoverStates.Closed);
+    var button = ref(null);
+    var panel = ref(null);
+    var api = {
+      popoverState,
+      buttonId,
+      panelId,
+      panel,
+      button,
+      togglePopover: function togglePopover() {
+        var _match;
+        popoverState.value = match(popoverState.value, (_match = {}, _match[PopoverStates.Open] = PopoverStates.Closed, _match[PopoverStates.Closed] = PopoverStates.Open, _match));
+      },
+      closePopover: function closePopover() {
+        if (popoverState.value === PopoverStates.Closed)
+          return;
+        popoverState.value = PopoverStates.Closed;
+      },
+      close: function close2(focusableElement) {
+        api.closePopover();
+        var restoreElement = function() {
+          if (!focusableElement)
+            return dom(api.button);
+          if (focusableElement instanceof HTMLElement)
+            return focusableElement;
+          if (focusableElement.value instanceof HTMLElement)
+            return dom(focusableElement);
+          return dom(api.button);
+        }();
+        restoreElement == null ? void 0 : restoreElement.focus();
+      }
+    };
+    provide(PopoverContext, api);
+    useOpenClosedProvider(computed(function() {
+      var _match2;
+      return match(popoverState.value, (_match2 = {}, _match2[PopoverStates.Open] = State.Open, _match2[PopoverStates.Closed] = State.Closed, _match2));
+    }));
+    var registerBag = {
+      buttonId,
+      panelId,
+      close: function close2() {
+        api.closePopover();
+      }
+    };
+    var groupContext = usePopoverGroupContext();
+    var registerPopover = groupContext == null ? void 0 : groupContext.registerPopover;
+    function isFocusWithinPopoverGroup() {
+      var _groupContext$isFocus, _dom, _dom2;
+      return (_groupContext$isFocus = groupContext == null ? void 0 : groupContext.isFocusWithinPopoverGroup()) != null ? _groupContext$isFocus : ((_dom = dom(button)) == null ? void 0 : _dom.contains(document.activeElement)) || ((_dom2 = dom(panel)) == null ? void 0 : _dom2.contains(document.activeElement));
+    }
+    watchEffect(function() {
+      return registerPopover == null ? void 0 : registerPopover(registerBag);
+    });
+    useWindowEvent("focus", function() {
+      if (popoverState.value !== PopoverStates.Open)
+        return;
+      if (isFocusWithinPopoverGroup())
+        return;
+      if (!button)
+        return;
+      if (!panel)
+        return;
+      api.closePopover();
+    }, true);
+    useWindowEvent("mousedown", function(event) {
+      var _dom3, _dom4;
+      var target = event.target;
+      if (popoverState.value !== PopoverStates.Open)
+        return;
+      if ((_dom3 = dom(button)) == null ? void 0 : _dom3.contains(target))
+        return;
+      if ((_dom4 = dom(panel)) == null ? void 0 : _dom4.contains(target))
+        return;
+      api.closePopover();
+      if (!isFocusableElement(target, FocusableMode.Loose)) {
+        var _dom5;
+        event.preventDefault();
+        (_dom5 = dom(button)) == null ? void 0 : _dom5.focus();
+      }
+    });
+    return function() {
+      var slot = {
+        open: popoverState.value === PopoverStates.Open,
+        close: api.close
+      };
+      return render$8({
+        props,
+        slot,
+        slots,
+        attrs,
+        name: "Popover"
+      });
+    };
+  }
+});
+var PopoverButton = /* @__PURE__ */ defineComponent({
+  name: "PopoverButton",
+  props: {
+    as: {
+      type: [Object, String],
+      "default": "button"
+    },
+    disabled: {
+      type: [Boolean],
+      "default": false
+    }
+  },
+  render: function render$18() {
+    var api = usePopoverContext("PopoverButton");
+    var slot = {
+      open: api.popoverState.value === PopoverStates.Open
+    };
+    var propsWeControl = this.isWithinPanel ? {
+      ref: "el",
+      type: this.type,
+      onKeydown: this.handleKeyDown,
+      onClick: this.handleClick
+    } : {
+      ref: "el",
+      id: api.buttonId,
+      type: this.type,
+      "aria-expanded": this.$props.disabled ? void 0 : api.popoverState.value === PopoverStates.Open,
+      "aria-controls": dom(api.panel) ? api.panelId : void 0,
+      disabled: this.$props.disabled ? true : void 0,
+      onKeydown: this.handleKeyDown,
+      onKeyup: this.handleKeyUp,
+      onClick: this.handleClick
+    };
+    return render$8({
+      props: _extends({}, this.$props, propsWeControl),
+      slot,
+      attrs: this.$attrs,
+      slots: this.$slots,
+      name: "PopoverButton"
+    });
+  },
+  setup: function setup15(props, _ref2) {
+    var attrs = _ref2.attrs;
+    var api = usePopoverContext("PopoverButton");
+    var groupContext = usePopoverGroupContext();
+    var closeOthers = groupContext == null ? void 0 : groupContext.closeOthers;
+    var panelContext = usePopoverPanelContext();
+    var isWithinPanel = panelContext === null ? false : panelContext === api.panelId;
+    var activeElementRef = ref(null);
+    var previousActiveElementRef = ref(typeof window === "undefined" ? null : document.activeElement);
+    useWindowEvent("focus", function() {
+      previousActiveElementRef.value = activeElementRef.value;
+      activeElementRef.value = document.activeElement;
+    }, true);
+    var elementRef = ref(null);
+    if (!isWithinPanel) {
+      watchEffect(function() {
+        api.button.value = elementRef.value;
+      });
+    }
+    return {
+      isWithinPanel,
+      el: elementRef,
+      type: useResolveButtonType(computed(function() {
+        return {
+          as: props.as,
+          type: attrs.type
+        };
+      }), elementRef),
+      handleKeyDown: function handleKeyDown(event) {
+        var _dom6, _dom7;
+        if (isWithinPanel) {
+          if (api.popoverState.value === PopoverStates.Closed)
+            return;
+          switch (event.key) {
+            case Keys.Space:
+            case Keys.Enter:
+              event.preventDefault();
+              event.stopPropagation();
+              api.closePopover();
+              (_dom6 = dom(api.button)) == null ? void 0 : _dom6.focus();
+              break;
+          }
+        } else {
+          switch (event.key) {
+            case Keys.Space:
+            case Keys.Enter:
+              event.preventDefault();
+              event.stopPropagation();
+              if (api.popoverState.value === PopoverStates.Closed)
+                closeOthers == null ? void 0 : closeOthers(api.buttonId);
+              api.togglePopover();
+              break;
+            case Keys.Escape:
+              if (api.popoverState.value !== PopoverStates.Open)
+                return closeOthers == null ? void 0 : closeOthers(api.buttonId);
+              if (!dom(api.button))
+                return;
+              if (!((_dom7 = dom(api.button)) == null ? void 0 : _dom7.contains(document.activeElement)))
+                return;
+              event.preventDefault();
+              event.stopPropagation();
+              api.closePopover();
+              break;
+            case Keys.Tab:
+              if (api.popoverState.value !== PopoverStates.Open)
+                return;
+              if (!api.panel)
+                return;
+              if (!api.button)
+                return;
+              if (event.shiftKey) {
+                var _dom8, _dom9;
+                if (!previousActiveElementRef.value)
+                  return;
+                if ((_dom8 = dom(api.button)) == null ? void 0 : _dom8.contains(previousActiveElementRef.value))
+                  return;
+                if ((_dom9 = dom(api.panel)) == null ? void 0 : _dom9.contains(previousActiveElementRef.value))
+                  return;
+                var focusableElements = getFocusableElements();
+                var previousIdx = focusableElements.indexOf(previousActiveElementRef.value);
+                var buttonIdx = focusableElements.indexOf(dom(api.button));
+                if (buttonIdx > previousIdx)
+                  return;
+                event.preventDefault();
+                event.stopPropagation();
+                focusIn(dom(api.panel), Focus$1.Last);
+              } else {
+                event.preventDefault();
+                event.stopPropagation();
+                focusIn(dom(api.panel), Focus$1.First);
+              }
+              break;
+          }
+        }
+      },
+      handleKeyUp: function handleKeyUp(event) {
+        var _dom10, _dom11;
+        if (isWithinPanel)
+          return;
+        if (event.key === Keys.Space) {
+          event.preventDefault();
+        }
+        if (api.popoverState.value !== PopoverStates.Open)
+          return;
+        if (!api.panel)
+          return;
+        if (!api.button)
+          return;
+        switch (event.key) {
+          case Keys.Tab:
+            if (!previousActiveElementRef.value)
+              return;
+            if ((_dom10 = dom(api.button)) == null ? void 0 : _dom10.contains(previousActiveElementRef.value))
+              return;
+            if ((_dom11 = dom(api.panel)) == null ? void 0 : _dom11.contains(previousActiveElementRef.value))
+              return;
+            var focusableElements = getFocusableElements();
+            var previousIdx = focusableElements.indexOf(previousActiveElementRef.value);
+            var buttonIdx = focusableElements.indexOf(dom(api.button));
+            if (buttonIdx > previousIdx)
+              return;
+            event.preventDefault();
+            event.stopPropagation();
+            focusIn(dom(api.panel), Focus$1.Last);
+            break;
+        }
+      },
+      handleClick: function handleClick() {
+        if (props.disabled)
+          return;
+        if (isWithinPanel) {
+          var _dom12;
+          api.closePopover();
+          (_dom12 = dom(api.button)) == null ? void 0 : _dom12.focus();
+        } else {
+          var _dom13;
+          if (api.popoverState.value === PopoverStates.Closed)
+            closeOthers == null ? void 0 : closeOthers(api.buttonId);
+          (_dom13 = dom(api.button)) == null ? void 0 : _dom13.focus();
+          api.togglePopover();
+        }
+      }
+    };
+  }
+});
+var PopoverPanel = /* @__PURE__ */ defineComponent({
+  name: "PopoverPanel",
+  props: {
+    as: {
+      type: [Object, String],
+      "default": "div"
+    },
+    "static": {
+      type: Boolean,
+      "default": false
+    },
+    unmount: {
+      type: Boolean,
+      "default": true
+    },
+    focus: {
+      type: Boolean,
+      "default": false
+    }
+  },
+  render: function render$19() {
+    var api = usePopoverContext("PopoverPanel");
+    var slot = {
+      open: api.popoverState.value === PopoverStates.Open,
+      close: api.close
+    };
+    var propsWeControl = {
+      ref: "el",
+      id: this.id,
+      onKeydown: this.handleKeyDown
+    };
+    return render$8({
+      props: _extends({}, this.$props, propsWeControl),
+      slot,
+      attrs: this.$attrs,
+      slots: this.$slots,
+      features: Features.RenderStrategy | Features.Static,
+      visible: this.visible,
+      name: "PopoverPanel"
+    });
+  },
+  setup: function setup16(props) {
+    var focus = props.focus;
+    var api = usePopoverContext("PopoverPanel");
+    provide(PopoverPanelContext, api.panelId);
+    onUnmounted(function() {
+      api.panel.value = null;
+    });
+    watchEffect(function() {
+      var _dom14;
+      if (!focus)
+        return;
+      if (api.popoverState.value !== PopoverStates.Open)
+        return;
+      if (!api.panel)
+        return;
+      var activeElement = document.activeElement;
+      if ((_dom14 = dom(api.panel)) == null ? void 0 : _dom14.contains(activeElement))
+        return;
+      focusIn(dom(api.panel), Focus$1.First);
+    });
+    useWindowEvent("keydown", function(event) {
+      var _dom15;
+      if (api.popoverState.value !== PopoverStates.Open)
+        return;
+      if (!dom(api.panel))
+        return;
+      if (event.key !== Keys.Tab)
+        return;
+      if (!document.activeElement)
+        return;
+      if (!((_dom15 = dom(api.panel)) == null ? void 0 : _dom15.contains(document.activeElement)))
+        return;
+      event.preventDefault();
+      var result = focusIn(dom(api.panel), event.shiftKey ? Focus$1.Previous : Focus$1.Next);
+      if (result === FocusResult.Underflow) {
+        var _dom16;
+        return (_dom16 = dom(api.button)) == null ? void 0 : _dom16.focus();
+      } else if (result === FocusResult.Overflow) {
+        if (!dom(api.button))
+          return;
+        var elements = getFocusableElements();
+        var buttonIdx = elements.indexOf(dom(api.button));
+        var nextElements = elements.splice(buttonIdx + 1).filter(function(element) {
+          var _dom17;
+          return !((_dom17 = dom(api.panel)) == null ? void 0 : _dom17.contains(element));
+        });
+        if (focusIn(nextElements, Focus$1.First) === FocusResult.Error) {
+          focusIn(document.body, Focus$1.First);
+        }
+      }
+    });
+    useWindowEvent("focus", function() {
+      var _dom18;
+      if (!focus)
+        return;
+      if (api.popoverState.value !== PopoverStates.Open)
+        return;
+      if (!dom(api.panel))
+        return;
+      if ((_dom18 = dom(api.panel)) == null ? void 0 : _dom18.contains(document.activeElement))
+        return;
+      api.closePopover();
+    }, true);
+    var usesOpenClosedState = useOpenClosed();
+    var visible = computed(function() {
+      if (usesOpenClosedState !== null) {
+        return usesOpenClosedState.value === State.Open;
+      }
+      return api.popoverState.value === PopoverStates.Open;
+    });
+    return {
+      id: api.panelId,
+      el: api.panel,
+      handleKeyDown: function handleKeyDown(event) {
+        var _dom19, _dom20;
+        switch (event.key) {
+          case Keys.Escape:
+            if (api.popoverState.value !== PopoverStates.Open)
+              return;
+            if (!dom(api.panel))
+              return;
+            if (!((_dom19 = dom(api.panel)) == null ? void 0 : _dom19.contains(document.activeElement)))
+              return;
+            event.preventDefault();
+            event.stopPropagation();
+            api.closePopover();
+            (_dom20 = dom(api.button)) == null ? void 0 : _dom20.focus();
+            break;
+        }
+      },
+      visible
+    };
+  }
+});
 var GroupContext = /* @__PURE__ */ Symbol("GroupContext");
 var Switch = /* @__PURE__ */ defineComponent({
   name: "Switch",
@@ -3029,7 +3500,7 @@ var Switch = /* @__PURE__ */ defineComponent({
       "default": false
     }
   },
-  render: function render$18() {
+  render: function render$110() {
     var slot = {
       checked: this.$props.modelValue
     };
@@ -3046,7 +3517,7 @@ var Switch = /* @__PURE__ */ defineComponent({
       onKeyup: this.handleKeyUp,
       onKeypress: this.handleKeyPress
     };
-    return render$7({
+    return render$8({
       props: _extends({}, this.$props, propsWeControl),
       slot,
       attrs: this.$attrs,
@@ -3054,7 +3525,7 @@ var Switch = /* @__PURE__ */ defineComponent({
       name: "Switch"
     });
   },
-  setup: function setup14(props, _ref2) {
+  setup: function setup17(props, _ref2) {
     var emit = _ref2.emit, attrs = _ref2.attrs;
     var api = inject(GroupContext, null);
     var id2 = "headlessui-switch-" + useId();
@@ -3373,7 +3844,7 @@ var TransitionChild = /* @__PURE__ */ defineComponent({
       return true;
     }
   },
-  render: function render$19() {
+  render: function render$111() {
     var _this = this;
     if (this.renderAsRoot) {
       return h(TransitionRoot, _extends({}, this.$props, {
@@ -3396,7 +3867,7 @@ var TransitionChild = /* @__PURE__ */ defineComponent({
       ref: "el"
     };
     var passthroughProps = rest;
-    return render$7({
+    return render$8({
       props: _extends({}, passthroughProps, propsWeControl),
       slot: {},
       slots: this.$slots,
@@ -3406,7 +3877,7 @@ var TransitionChild = /* @__PURE__ */ defineComponent({
       name: "TransitionChild"
     });
   },
-  setup: function setup15(props, _ref4) {
+  setup: function setup18(props, _ref4) {
     var emit = _ref4.emit;
     if (!hasTransitionContext() && hasOpenClosed()) {
       return {
@@ -3581,13 +4052,13 @@ var TransitionRoot = /* @__PURE__ */ defineComponent({
       return true;
     }
   },
-  render: function render$110() {
+  render: function render$112() {
     var _this2 = this;
     var _this$$props2 = this.$props, unmount = _this$$props2.unmount, passThroughProps = _objectWithoutPropertiesLoose(_this$$props2, ["show", "appear", "unmount"]);
     var sharedProps = {
       unmount
     };
-    return render$7({
+    return render$8({
       props: _extends({}, sharedProps, {
         as: "template"
       }),
@@ -3616,7 +4087,7 @@ var TransitionRoot = /* @__PURE__ */ defineComponent({
       name: "Transition"
     });
   },
-  setup: function setup16(props) {
+  setup: function setup19(props) {
     var usesOpenClosedState = useOpenClosed();
     var show = computed(function() {
       if (props.show === null && usesOpenClosedState !== null) {
@@ -3661,7 +4132,7 @@ var TransitionRoot = /* @__PURE__ */ defineComponent({
     };
   }
 });
-function render$6(_ctx, _cache) {
+function render$7(_ctx, _cache) {
   return openBlock(), createBlock("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
@@ -3675,7 +4146,7 @@ function render$6(_ctx, _cache) {
     })
   ]);
 }
-function render$5(_ctx, _cache) {
+function render$6(_ctx, _cache) {
   return openBlock(), createBlock("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
@@ -3685,7 +4156,7 @@ function render$5(_ctx, _cache) {
     createVNode("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" })
   ]);
 }
-function render$4(_ctx, _cache) {
+function render$5(_ctx, _cache) {
   return openBlock(), createBlock("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
@@ -3699,10 +4170,10 @@ function render$4(_ctx, _cache) {
     })
   ]);
 }
-const _hoisted_1$o = /* @__PURE__ */ createElementVNode("span", { class: "sr-only" }, "Open options", -1);
-const _hoisted_2$j = { class: "py-1" };
+const _hoisted_1$r = /* @__PURE__ */ createElementVNode("span", { class: "sr-only" }, "Open options", -1);
+const _hoisted_2$k = { class: "py-1" };
 const _hoisted_3$g = ["textContent", "onClick"];
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   props: {
     currentUser: null,
     items: null,
@@ -3743,8 +4214,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             disabled: !hasActionItems.value
           }, {
             default: withCtx(() => [
-              _hoisted_1$o,
-              createVNode(unref(render$5), {
+              _hoisted_1$r,
+              createVNode(unref(render$6), {
                 class: "w-5 h-5",
                 "aria-hidden": "true"
               })
@@ -3762,7 +4233,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createVNode(unref(MenuItems), { class: "z-10 mx-3 origin-top-right absolute right-7 top-0 w-48 mt-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none" }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_2$j, [
+                  createElementVNode("div", _hoisted_2$k, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, idx) => {
                       return openBlock(), createElementBlock(Fragment, { key: idx }, [
                         show(item) ? (openBlock(), createBlock(unref(MenuItem), {
@@ -3797,10 +4268,10 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$n = { class: "px-4 py-5 sm:p-6 text-center" };
-const _hoisted_2$i = ["textContent"];
+const _hoisted_1$q = { class: "px-4 py-5 sm:p-6 text-center" };
+const _hoisted_2$j = ["textContent"];
 const _hoisted_3$f = ["textContent"];
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   props: {
     cards: null
   },
@@ -3814,12 +4285,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             class: "bg-white overflow-hidden shadow rounded-lg",
             key: idx
           }, [
-            createElementVNode("div", _hoisted_1$n, [
+            createElementVNode("div", _hoisted_1$q, [
               createElementVNode("dl", null, [
                 createElementVNode("dd", {
                   class: "mt-1 text-3xl leading-9 font-semibold text-xy-blue",
                   textContent: toDisplayString(card.primary)
-                }, null, 8, _hoisted_2$i),
+                }, null, 8, _hoisted_2$j),
                 createElementVNode("dt", {
                   class: "text-sm leading-5 font-medium text-gray-700 truncate",
                   textContent: toDisplayString(card.secondary)
@@ -3832,16 +4303,16 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$m = { class: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" };
-const _hoisted_2$h = /* @__PURE__ */ createElementVNode("span", {
+const _hoisted_1$p = { class: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" };
+const _hoisted_2$i = /* @__PURE__ */ createElementVNode("span", {
   class: "hidden sm:inline-block sm:align-middle sm:h-screen",
   "aria-hidden": "true"
 }, "\u200B", -1);
 const _hoisted_3$e = { class: "inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6" };
 const _hoisted_4$b = { class: "mt-3 text-center sm:mt-5" };
-const _hoisted_5$a = { class: "mt-2" };
-const _hoisted_6$a = { class: "mt-5 sm:mt-6" };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _hoisted_5$9 = { class: "mt-2" };
+const _hoisted_6$9 = { class: "mt-5 sm:mt-6" };
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: { type: Boolean },
     title: { default: "" }
@@ -3865,7 +4336,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             open: __props.modelValue
           }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$m, [
+              createElementVNode("div", _hoisted_1$p, [
                 createVNode(unref(TransitionChild), {
                   as: "template",
                   enter: "ease-out duration-300",
@@ -3880,7 +4351,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 1
                 }),
-                _hoisted_2$h,
+                _hoisted_2$i,
                 createVNode(unref(TransitionChild), {
                   as: "template",
                   enter: "ease-out duration-300",
@@ -3899,12 +4370,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                             as: "h3",
                             textContent: toDisplayString(__props.title)
                           }, null, 8, ["textContent"]),
-                          createElementVNode("div", _hoisted_5$a, [
+                          createElementVNode("div", _hoisted_5$9, [
                             renderSlot(_ctx.$slots, "default")
                           ])
                         ])
                       ]),
-                      createElementVNode("div", _hoisted_6$a, [
+                      createElementVNode("div", _hoisted_6$9, [
                         createElementVNode("button", {
                           type: "button",
                           class: "inline-flex justify-center w-full xy-btn",
@@ -6018,7 +6489,7 @@ if (typeof window !== "undefined") {
   window.flatpickr = flatpickr;
 }
 var flatpickr_min = "";
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   props: {
     label: { default: "" },
     tag: { default: "label" }
@@ -6036,7 +6507,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   props: {
     tag: { default: "div" },
     text: { default: "" }
@@ -6054,8 +6525,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$l = ["aria-labelledby", "aria-describedby", "id", "placeholder", "type", "value"];
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_1$o = ["aria-labelledby", "aria-describedby", "id", "placeholder", "type", "value"];
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   props: {
     type: null,
     help: { default: "" },
@@ -6086,7 +6557,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$o, {
+        createVNode(_sfc_main$r, {
           class: "block",
           id: `${unref(uuid)}-label`,
           for: unref(uuid),
@@ -6112,8 +6583,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           type: __props.type,
           value: __props.modelValue,
           onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
-        }, _ctx.$attrs), null, 16, _hoisted_1$l),
-        createVNode(_sfc_main$n, {
+        }, _ctx.$attrs), null, 16, _hoisted_1$o),
+        createVNode(_sfc_main$q, {
           id: `${unref(uuid)}-help`,
           text: __props.help
         }, null, 8, ["id", "text"])
@@ -6121,7 +6592,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: null,
     startDate: { default: 0 },
@@ -6158,7 +6629,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       });
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$m, {
+      return openBlock(), createBlock(_sfc_main$p, {
         type: "text",
         placeholder: "mm-dd-yyyy range",
         id: unref(uuid),
@@ -6168,17 +6639,74 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$k = { class: "md:flex md:items-center md:justify-between bg-white mx-auto py-4 border-t border-gray-100" };
+const _hoisted_1$n = ["aria-labelledby", "aria-describedby", "id", "value"];
+const _hoisted_2$h = {
+  key: 0,
+  value: "",
+  disabled: "",
+  selected: ""
+};
+const _hoisted_3$d = ["value", "textContent"];
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  props: {
+    design: { default: "standard" },
+    label: { default: "" },
+    help: { default: "" },
+    placeholder: { default: "Select an option" },
+    options: null,
+    modelValue: null
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const uuid = attrs.id || Uniques.CreateIdAttribute();
+    const classes = computed(() => {
+      return {
+        standard: "mt-1 block w-full border border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
+        compressed: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-600 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+      }[props.design];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_sfc_main$r, {
+          id: `${unref(uuid)}-label`,
+          for: unref(uuid),
+          label: __props.label
+        }, null, 8, ["id", "for", "label"]),
+        createElementVNode("select", mergeProps({
+          "aria-labelledby": __props.label ? `${unref(uuid)}-label` : void 0,
+          "aria-describedby": __props.help ? `${unref(uuid)}-help` : void 0,
+          class: unref(classes),
+          id: unref(uuid),
+          value: __props.modelValue
+        }, __spreadProps(__spreadValues({}, _ctx.$attrs), {
+          onChange: ($event) => {
+            emit("update:modelValue", $event.target.value);
+          }
+        })), [
+          __props.placeholder ? (openBlock(), createElementBlock("option", _hoisted_2$h, toDisplayString(__props.placeholder), 1)) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+            return openBlock(), createElementBlock("option", {
+              value: option.value,
+              textContent: toDisplayString(option.label),
+              key: option.value
+            }, null, 8, _hoisted_3$d);
+          }), 128))
+        ], 16, _hoisted_1$n),
+        createVNode(_sfc_main$q, {
+          id: `${unref(uuid)}-help`,
+          text: __props.help
+        }, null, 8, ["id", "text"])
+      ], 64);
+    };
+  }
+});
+const _hoisted_1$m = { class: "md:flex md:items-center md:justify-between bg-white mx-auto py-4 border-t border-gray-100" };
 const _hoisted_2$g = { class: "flex-1 min-w-0" };
-const _hoisted_3$d = { class: "text-lg leading-6 font-semibold text-gray-900" };
+const _hoisted_3$c = { class: "text-lg leading-6 font-semibold text-gray-900" };
 const _hoisted_4$a = { class: "mt-4 flex md:mt-0 md:ml-4" };
-const _hoisted_5$9 = /* @__PURE__ */ createElementVNode("option", { value: "DESC" }, "Newest-Oldest", -1);
-const _hoisted_6$9 = /* @__PURE__ */ createElementVNode("option", { value: "ASC" }, "Oldest-Newest", -1);
-const _hoisted_7$9 = [
-  _hoisted_5$9,
-  _hoisted_6$9
-];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   props: {
     dateRange: null,
     sortDir: null,
@@ -6188,25 +6716,37 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: emits }) {
     const props = __props;
     const dateRange = ref(props.dateRange);
-    const sortDirChanged = (sortDir) => {
-      emits("sort-dir-changed", sortDir);
+    const sortDir = ref(props.sortDir);
+    const sortOptions = [
+      { label: "Newest-Oldest", value: "DESC" },
+      { label: "Oldest-Newest", value: "ASC" }
+    ];
+    const sortDirChanged = (sortDir2) => {
+      emits("sort-dir-changed", sortDir2);
     };
     const dateRangeChanged = (dateRange2) => {
       emits("date-range-changed", dateRange2);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createElementVNode("div", _hoisted_2$g, [
-          createElementVNode("h1", _hoisted_3$d, toDisplayString(__props.title), 1)
+          createElementVNode("h1", _hoisted_3$c, toDisplayString(__props.title), 1)
         ]),
         createElementVNode("div", _hoisted_4$a, [
-          createElementVNode("select", {
-            onChange: _cache[0] || (_cache[0] = ($event) => sortDirChanged($event.target.value)),
-            class: "block w-full border border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-          }, _hoisted_7$9, 32),
-          createVNode(_sfc_main$l, {
+          createVNode(_sfc_main$n, {
+            modelValue: sortDir.value,
+            "onUpdate:modelValue": [
+              _cache[0] || (_cache[0] = ($event) => sortDir.value = $event),
+              sortDirChanged
+            ],
+            options: sortOptions
+          }, null, 8, ["modelValue"]),
+          createVNode(_sfc_main$o, {
             modelValue: dateRange.value,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => dateRangeChanged($event)),
+            "onUpdate:modelValue": [
+              _cache[1] || (_cache[1] = ($event) => dateRange.value = $event),
+              dateRangeChanged
+            ],
             class: "ml-3"
           }, null, 8, ["modelValue"])
         ])
@@ -6214,9 +6754,9 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$j = { class: "px-4 flex items-center justify-between sm:px-0" };
+const _hoisted_1$l = { class: "px-4 flex items-center justify-between sm:px-0" };
 const _hoisted_2$f = { class: "w-0 flex-1 flex" };
-const _hoisted_3$c = /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_3$b = /* @__PURE__ */ createElementVNode("svg", {
   class: "mr-3 h-5 w-5",
   fill: "currentColor",
   viewBox: "0 0 20 20"
@@ -6229,7 +6769,7 @@ const _hoisted_3$c = /* @__PURE__ */ createElementVNode("svg", {
 ], -1);
 const _hoisted_4$9 = /* @__PURE__ */ createTextVNode(" Previous ");
 const _hoisted_5$8 = [
-  _hoisted_3$c,
+  _hoisted_3$b,
   _hoisted_4$9
 ];
 const _hoisted_6$8 = { class: "hidden md:flex" };
@@ -6251,7 +6791,7 @@ const _hoisted_11$5 = [
   _hoisted_9$8,
   _hoisted_10$8
 ];
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: null
   },
@@ -6287,7 +6827,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return shortcuts;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
         createElementVNode("div", _hoisted_2$f, [
           createElementVNode("a", {
             href: "#",
@@ -6326,11 +6866,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$i = {
+const _hoisted_1$k = {
   key: 0,
   class: "shadow overflow-hidden sm:rounded-md border"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   props: {
     refreshTrigger: { default: 0 },
     reloadTrigger: { default: 0 },
@@ -6385,14 +6925,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     loadAndRender(true);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        createVNode(_sfc_main$k, {
+        createVNode(_sfc_main$m, {
           "date-range": dateRange.value,
           "sort-dir": sortDir.value,
           title: __props.title,
           onSortDirChanged: _cache[0] || (_cache[0] = ($event) => sortDir.value = $event),
           onDateRangeChanged: _cache[1] || (_cache[1] = ($event) => dateRange.value = $event)
         }, null, 8, ["date-range", "sort-dir", "title"]),
-        hasContent.value ? (openBlock(), createElementBlock("div", _hoisted_1$i, [
+        hasContent.value ? (openBlock(), createElementBlock("div", _hoisted_1$k, [
           createElementVNode("ul", null, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, idx) => {
               return openBlock(), createElementBlock("li", {
@@ -6404,7 +6944,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             }), 128))
           ])
         ])) : renderSlot(_ctx.$slots, "empty", { key: 1 }),
-        hasContent.value ? (openBlock(), createBlock(_sfc_main$j, {
+        hasContent.value ? (openBlock(), createBlock(_sfc_main$l, {
           key: 2,
           modelValue: pagination.value,
           "onUpdate:modelValue": [
@@ -6416,8 +6956,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$h = ["href"];
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _hoisted_1$j = ["href"];
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   props: {
     propsData: null,
     attribute: null
@@ -6427,14 +6967,14 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("a", {
         href: __props.propsData[__props.attribute]
       }, [
-        createVNode(unref(render$4), { class: "h-6 w-6 group-hover:text-gray-500 transition" })
-      ], 8, _hoisted_1$h);
+        createVNode(unref(render$5), { class: "h-6 w-6 group-hover:text-gray-500 transition" })
+      ], 8, _hoisted_1$j);
     };
   }
 });
-const _hoisted_1$g = { class: "fixed inset-0 flex flex-col items-end justify-end px-4 py-6 pointer-events-none sm:p-6 z-40" };
+const _hoisted_1$i = { class: "fixed inset-0 flex flex-col items-end justify-end px-4 py-6 pointer-events-none sm:p-6 z-40" };
 const _hoisted_2$e = { class: "rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden" };
-const _hoisted_3$b = { class: "p-4" };
+const _hoisted_3$a = { class: "p-4" };
 const _hoisted_4$8 = { class: "flex items-center" };
 const _hoisted_5$7 = { class: "w-0 flex-1 flex justify-between" };
 const _hoisted_6$7 = ["innerHTML"];
@@ -6454,7 +6994,7 @@ const _hoisted_9$7 = /* @__PURE__ */ createElementVNode("svg", {
 const _hoisted_10$7 = [
   _hoisted_9$7
 ];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const flashes = ref([]);
     const flashTypeBorderClass = {
@@ -6509,7 +7049,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
         createVNode(TransitionGroup, {
           tag: "div",
           class: "max-w-sm w-full",
@@ -6527,7 +7067,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(["bg-white shadow-lg rounded-lg pointer-events-auto border-t-4 transform", [{ "mt-2": idx > 0 }, getFlashClass(flash)]])
               }, [
                 createElementVNode("div", _hoisted_2$e, [
-                  createElementVNode("div", _hoisted_3$b, [
+                  createElementVNode("div", _hoisted_3$a, [
                     createElementVNode("div", _hoisted_4$8, [
                       createElementVNode("div", _hoisted_5$7, [
                         createElementVNode("p", {
@@ -6553,6 +7093,22 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
+function render$4(_ctx, _cache) {
+  return openBlock(), createBlock("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    createVNode("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2",
+      d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    })
+  ]);
+}
 function render$3(_ctx, _cache) {
   return openBlock(), createBlock("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6585,7 +7141,7 @@ function render$2(_ctx, _cache) {
     })
   ]);
 }
-function render$111(_ctx, _cache) {
+function render$113(_ctx, _cache) {
   return openBlock(), createBlock("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -6617,12 +7173,12 @@ function render(_ctx, _cache) {
     })
   ]);
 }
-const _hoisted_1$f = { class: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" };
+const _hoisted_1$h = { class: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" };
 const _hoisted_2$d = /* @__PURE__ */ createElementVNode("span", {
   class: "hidden sm:inline-block sm:align-middle sm:h-screen",
   "aria-hidden": "true"
 }, "\u200B", -1);
-const _hoisted_3$a = { class: "inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl w-full" };
+const _hoisted_3$9 = { class: "inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl w-full" };
 const _hoisted_4$7 = { class: "block absolute top-0 right-0 pt-4 pr-4" };
 const _hoisted_5$6 = /* @__PURE__ */ createElementVNode("span", { class: "sr-only" }, "Close", -1);
 const _hoisted_6$6 = { class: "bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4" };
@@ -6633,7 +7189,7 @@ const _hoisted_9$6 = {
   class: "bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
 };
 const _hoisted_10$6 = ["textContent", "disabled"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   props: {
     destructive: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
@@ -6663,7 +7219,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             open: __props.modelValue
           }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$f, [
+              createElementVNode("div", _hoisted_1$h, [
                 createVNode(unref(TransitionChild), {
                   as: "template",
                   enter: "ease-out duration-300",
@@ -6689,7 +7245,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 }, {
                   default: withCtx(() => [
-                    createElementVNode("div", _hoisted_3$a, [
+                    createElementVNode("div", _hoisted_3$9, [
                       createElementVNode("div", _hoisted_4$7, [
                         createElementVNode("button", {
                           type: "button",
@@ -6745,7 +7301,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$e = {
+const _hoisted_1$g = {
   key: 0,
   class: "fixed top-0 left-0 flex items-center justify-center w-full h-full cursor-not-allowed z-50 bg-gray-50 bg-opacity-50"
 };
@@ -6827,7 +7383,7 @@ const _hoisted_2$c = /* @__PURE__ */ createElementVNode("div", { class: "flex ju
     ])
   ])
 ], -1);
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const idx = ref(0);
     const loading = ref(false);
@@ -6869,7 +7425,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       });
     });
     return (_ctx, _cache) => {
-      return loading.value ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return loading.value ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
         createElementVNode("div", null, [
           _hoisted_2$c,
           withDirectives(createElementVNode("div", null, [
@@ -6899,9 +7455,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = { class: "h-screen flex overflow-hidden bg-gray-100" };
+const _hoisted_1$f = { class: "h-screen flex overflow-hidden bg-gray-100" };
 const _hoisted_2$b = { class: "relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white" };
-const _hoisted_3$9 = { class: "absolute top-0 right-0 -mr-12 pt-2" };
+const _hoisted_3$8 = { class: "absolute top-0 right-0 -mr-12 pt-2" };
 const _hoisted_4$6 = /* @__PURE__ */ createElementVNode("span", { class: "sr-only" }, "Close sidebar", -1);
 const _hoisted_5$5 = { class: "flex-shrink-0 flex justify-center px-4" };
 const _hoisted_6$5 = ["src"];
@@ -6931,7 +7487,7 @@ const _hoisted_26 = /* @__PURE__ */ createElementVNode("span", { class: "sr-only
 const _hoisted_27 = ["href"];
 const _hoisted_28 = { class: "flex-1 relative overflow-y-auto focus:outline-none" };
 const _hoisted_29 = { class: "mx-auto" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   props: {
     activeURL: { default: "" },
     iconURL: null,
@@ -6946,7 +7502,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", _hoisted_1$d, [
+        createElementVNode("div", _hoisted_1$f, [
           createVNode(unref(TransitionRoot), {
             as: "template",
             show: sidebarOpen.value
@@ -6995,7 +7551,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           "leave-to": "opacity-0"
                         }, {
                           default: withCtx(() => [
-                            createElementVNode("div", _hoisted_3$9, [
+                            createElementVNode("div", _hoisted_3$8, [
                               createElementVNode("button", {
                                 class: "ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white",
                                 onClick: _cache[0] || (_cache[0] = ($event) => sidebarOpen.value = false)
@@ -7117,7 +7673,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                         createVNode(unref(MenuButton), { class: "max-w-xs flex items-center text-sm text-white rounded-full hover:bg-blue-500 hover:text-gray-200 focus:outline-none focus:ring focus:text-white" }, {
                           default: withCtx(() => [
                             _hoisted_26,
-                            createVNode(unref(render$6), {
+                            createVNode(unref(render$7), {
                               class: "h-8 w-8",
                               fill: "currentColor"
                             })
@@ -7171,15 +7727,125 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             ])
           ])
         ]),
-        createVNode(_sfc_main$g),
-        createVNode(_sfc_main$e)
+        createVNode(_sfc_main$i),
+        createVNode(_sfc_main$g)
       ], 64);
     };
   }
 });
+const _hoisted_1$e = { class: "flex" };
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  props: {
+    position: { default: "top-center" }
+  },
+  setup(__props) {
+    const props = __props;
+    const positionClasses = computed(() => {
+      let wrapperClasses = "";
+      let contentClasses = "";
+      switch (props.position) {
+        case "top-left":
+          wrapperClasses = "top-0 left-0 -translate-y-full -translate-x-full justify-end";
+          break;
+        case "top-center":
+          wrapperClasses = "top-0 -translate-y-full -translate-x-full left-1/2 justify-end";
+          contentClasses = "translate-x-1/2";
+          break;
+        case "top-right":
+          wrapperClasses = "top-0 -translate-y-full right-0 justify-end";
+          contentClasses = "translate-x-full";
+          break;
+        case "bottom-left":
+          wrapperClasses = "top-full left-0 -translate-x-full justify-end";
+          break;
+        case "bottom-center":
+          wrapperClasses = "top-full -translate-x-full left-1/2 justify-end";
+          contentClasses = "translate-x-1/2";
+          break;
+        case "bottom-right":
+          wrapperClasses = "top-full right-0 justify-end";
+          contentClasses = "translate-x-full";
+          break;
+        case "left":
+          wrapperClasses = "top-1/2 left-0 -translate-y-1/2 -translate-x-full justify-end";
+          break;
+        case "right":
+          wrapperClasses = "top-1/2 -translate-y-1/2 right-0 justify-end";
+          contentClasses = "translate-x-full";
+          break;
+      }
+      return {
+        wrapper: wrapperClasses,
+        content: contentClasses
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+        createVNode(unref(Popover), { class: "relative leading-none" }, {
+          default: withCtx(({ open, close: close2 }) => [
+            createVNode(unref(PopoverButton), null, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "button", {
+                  open,
+                  close: close2
+                })
+              ]),
+              _: 2
+            }, 1024),
+            createVNode(Transition, {
+              "enter-active-class": "transition-opacity transition-faster ease-out-quad",
+              "leave-active-class": "transition-opacity transition-faster ease-in-quad",
+              "enter-from-class": "opacity-0",
+              "enter-to-class": "opacity-100",
+              "leave-from-class": "opacity-100",
+              "leave-to-class": "opacity-0"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(PopoverPanel), null, {
+                  default: withCtx(() => [
+                    createElementVNode("div", {
+                      class: normalizeClass(["absolute z-10 transform w-screen flex", unref(positionClasses).wrapper])
+                    }, [
+                      createElementVNode("div", {
+                        class: normalizeClass(unref(positionClasses).content)
+                      }, [
+                        renderSlot(_ctx.$slots, "default", {
+                          open,
+                          close: close2
+                        })
+                      ], 2)
+                    ], 2)
+                  ]),
+                  _: 2
+                }, 1024)
+              ]),
+              _: 2
+            }, 1024)
+          ]),
+          _: 3
+        })
+      ]);
+    };
+  }
+});
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$d = {};
+const _hoisted_1$d = { class: "max-w-xs bg-white rounded-md p-2 border border-gray-100 shadow-md" };
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$d, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+var PopoverContent = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render]]);
 const _hoisted_1$c = { class: "absolute inset-0 overflow-hidden" };
 const _hoisted_2$a = { class: "fixed inset-y-0 right-0 pl-10 max-w-full flex" };
-const _hoisted_3$8 = { class: "w-screen max-w-md" };
+const _hoisted_3$7 = { class: "w-screen max-w-md" };
 const _hoisted_4$5 = { class: "h-full flex flex-col bg-white shadow-xl overflow-y-scroll" };
 const _hoisted_5$4 = { class: "py-6 px-4 bg-blue-700 sm:px-6" };
 const _hoisted_6$4 = { class: "flex items-center justify-between" };
@@ -7230,7 +7896,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                     "leave-to": "translate-x-full"
                   }, {
                     default: withCtx(() => [
-                      createElementVNode("div", _hoisted_3$8, [
+                      createElementVNode("div", _hoisted_3$7, [
                         createElementVNode("div", _hoisted_4$5, [
                           createElementVNode("div", _hoisted_5$4, [
                             createElementVNode("div", _hoisted_6$4, [
@@ -7279,9 +7945,37 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$b = { class: "min-h-screen bg-gray-100" };
-const _hoisted_2$9 = { class: "mx-auto px-4 sm:px-6 lg:px-8" };
-const _hoisted_3$7 = { class: "flex justify-between h-16" };
+const _hoisted_1$b = { class: "relative" };
+const _hoisted_2$9 = /* @__PURE__ */ createElementVNode("div", { class: "p-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }, null, -1);
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  props: {
+    position: { default: "top-center" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$e, { position: __props.position }, {
+        button: withCtx(() => [
+          createElementVNode("div", _hoisted_1$b, [
+            _hoisted_2$9,
+            createVNode(unref(render$4), { class: "w-4 h-4" })
+          ])
+        ]),
+        default: withCtx(() => [
+          createVNode(PopoverContent, { class: "text-xs leading-tight font-medium" }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 8, ["position"]);
+    };
+  }
+});
+const _hoisted_1$a = { class: "min-h-screen bg-gray-100" };
+const _hoisted_2$8 = { class: "mx-auto px-4 sm:px-6 lg:px-8" };
+const _hoisted_3$6 = { class: "flex justify-between h-16" };
 const _hoisted_4$4 = { class: "flex" };
 const _hoisted_5$3 = { class: "flex-shrink-0 flex items-center" };
 const _hoisted_6$3 = ["src"];
@@ -7304,7 +7998,7 @@ const _hoisted_22$1 = { class: "mt-3 space-y-1" };
 const _hoisted_23$1 = ["href"];
 const _hoisted_24$1 = { class: "mx-auto sm:px-6 lg:px-8" };
 const _hoisted_25 = { class: "px-4 py-8 sm:px-0" };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   props: {
     activeURL: { default: "" },
     currentUser: null,
@@ -7319,14 +8013,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", _hoisted_1$b, [
+        createElementVNode("div", _hoisted_1$a, [
           createVNode(unref(Disclosure), {
             as: "nav",
             class: "bg-white shadow-sm"
           }, {
             default: withCtx(({ open }) => [
-              createElementVNode("div", _hoisted_2$9, [
-                createElementVNode("div", _hoisted_3$7, [
+              createElementVNode("div", _hoisted_2$8, [
+                createElementVNode("div", _hoisted_3$6, [
                   createElementVNode("div", _hoisted_4$4, [
                     createElementVNode("div", _hoisted_5$3, [
                       createElementVNode("img", {
@@ -7359,7 +8053,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                           createVNode(unref(MenuButton), { class: "bg-white flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" }, {
                             default: withCtx(() => [
                               _hoisted_10$3,
-                              createVNode(unref(render$111), { class: "text-gray-500 h-8 w-8 rounded-full" })
+                              createVNode(unref(render$113), { class: "text-gray-500 h-8 w-8 rounded-full" })
                             ]),
                             _: 1
                           })
@@ -7438,13 +8132,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                   createElementVNode("div", _hoisted_16$1, [
                     createElementVNode("div", _hoisted_17$1, [
                       createElementVNode("div", _hoisted_18$1, [
-                        createVNode(unref(render$111), { class: "text-gray-500 h-10 w-10 rounded-full" })
+                        createVNode(unref(render$113), { class: "text-gray-500 h-10 w-10 rounded-full" })
                       ]),
                       createElementVNode("div", _hoisted_19$1, [
-                        createElementVNode("div", {
+                        __props.currentUser.name ? (openBlock(), createElementBlock("div", {
+                          key: 0,
                           class: "text-base font-medium text-gray-800",
                           textContent: toDisplayString(__props.currentUser.name)
-                        }, null, 8, _hoisted_20$1),
+                        }, null, 8, _hoisted_20$1)) : createCommentVNode("", true),
                         createElementVNode("div", {
                           class: "text-sm font-medium text-gray-500",
                           textContent: toDisplayString(__props.currentUser.email)
@@ -7476,15 +8171,15 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             ])
           ])
         ]),
-        createVNode(_sfc_main$g),
-        createVNode(_sfc_main$e)
+        createVNode(_sfc_main$i),
+        createVNode(_sfc_main$g)
       ], 64);
     };
   }
 });
-const _hoisted_1$a = { class: "flex flex-col" };
-const _hoisted_2$8 = { class: "-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8" };
-const _hoisted_3$6 = { class: "inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8" };
+const _hoisted_1$9 = { class: "flex flex-col" };
+const _hoisted_2$7 = { class: "-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8" };
+const _hoisted_3$5 = { class: "inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8" };
 const _hoisted_4$3 = { class: "overflow-hidden border-b border-gray-200 shadow sm:rounded-lg" };
 const _hoisted_5$2 = { class: "min-w-full divide-y divide-gray-200" };
 const _hoisted_6$2 = ["textContent"];
@@ -7492,7 +8187,7 @@ const _hoisted_7$2 = { class: "bg-white divide-y divide-gray-200" };
 const _hoisted_8$2 = ["textContent"];
 const _hoisted_9$2 = { key: 0 };
 const _hoisted_10$2 = ["colspan"];
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   props: {
     tableData: null
   },
@@ -7508,9 +8203,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       return "";
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
-        createElementVNode("div", _hoisted_2$8, [
-          createElementVNode("div", _hoisted_3$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+        createElementVNode("div", _hoisted_2$7, [
+          createElementVNode("div", _hoisted_3$5, [
             createElementVNode("div", _hoisted_4$3, [
               createElementVNode("table", _hoisted_5$2, [
                 createElementVNode("thead", null, [
@@ -7562,9 +8257,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = { class: "flex items-center justify-center space-x-8" };
-const _hoisted_2$7 = { class: "font-medium" };
-const _hoisted_3$5 = { class: "flex items-center space-x-5" };
+const _hoisted_1$8 = { class: "flex items-center justify-center space-x-8" };
+const _hoisted_2$6 = { class: "font-medium" };
+const _hoisted_3$4 = { class: "flex items-center space-x-5" };
 const _hoisted_4$2 = {
   key: 0,
   class: "block w-2.5 h-2.5 bg-xy-green rounded-full hover:bg-green-900 focus:bg-green-900"
@@ -7597,7 +8292,7 @@ const _hoisted_11$1 = {
 const _hoisted_12$1 = ["textContent"];
 const _hoisted_13$1 = { class: "ml-3 inline-flex rounded-md shadow-sm" };
 const _hoisted_14$1 = ["textContent"];
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   props: {
     hideActions: { type: Boolean, default: false },
     hidePrevious: { type: Boolean, default: false },
@@ -7616,9 +8311,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        createElementVNode("nav", _hoisted_1$9, [
-          createElementVNode("p", _hoisted_2$7, "Step " + toDisplayString(__props.step) + " of " + toDisplayString(__props.total), 1),
-          createElementVNode("ul", _hoisted_3$5, [
+        createElementVNode("nav", _hoisted_1$8, [
+          createElementVNode("p", _hoisted_2$6, "Step " + toDisplayString(__props.step) + " of " + toDisplayString(__props.total), 1),
+          createElementVNode("ul", _hoisted_3$4, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.total, (index) => {
               return openBlock(), createElementBlock("li", { key: index }, [
                 __props.step > index ? (openBlock(), createElementBlock("span", _hoisted_4$2)) : __props.step === index ? (openBlock(), createElementBlock("div", _hoisted_5$1, _hoisted_8$1)) : (openBlock(), createElementBlock("span", _hoisted_9$1))
@@ -7648,12 +8343,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = { class: "flex flex-col mb-4 space-y-4 lg:space-y-0 lg:flex-row lg:justify-between" };
-const _hoisted_2$6 = {
+const _hoisted_1$7 = { class: "flex flex-col mb-4 space-y-4 lg:space-y-0 lg:flex-row lg:justify-between" };
+const _hoisted_2$5 = {
   key: 0,
   class: "w-full max-w-lg lg:max-w-xs"
 };
-const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("label", {
+const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("label", {
   for: "search",
   class: "sr-only"
 }, "Search", -1);
@@ -7731,7 +8426,7 @@ const _hoisted_21 = ["onClick"];
 const _hoisted_22 = ["textContent"];
 const _hoisted_23 = { key: 0 };
 const _hoisted_24 = ["colspan"];
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   props: {
     clickable: { type: Boolean, default: false },
     loader: { type: Boolean, default: true },
@@ -7815,9 +8510,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     loadAndRender();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        createElementVNode("div", _hoisted_1$8, [
-          __props.tableData.search ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
-            _hoisted_3$4,
+        createElementVNode("div", _hoisted_1$7, [
+          __props.tableData.search ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
+            _hoisted_3$3,
             createElementVNode("div", _hoisted_4$1, [
               _hoisted_5,
               withDirectives(createElementVNode("input", {
@@ -7837,7 +8532,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             ])
           ])) : createCommentVNode("", true),
           __props.tableData.dateSearch ? (openBlock(), createElementBlock("div", _hoisted_6, [
-            createVNode(_sfc_main$l, {
+            createVNode(_sfc_main$o, {
               modelValue: dateRange.value,
               "onUpdate:modelValue": [
                 _cache[2] || (_cache[2] = ($event) => dateRange.value = $event),
@@ -7902,7 +8597,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             ])
           ])
         ]),
-        unref(hasContent) ? (openBlock(), createBlock(_sfc_main$j, {
+        unref(hasContent) ? (openBlock(), createBlock(_sfc_main$l, {
           key: 0,
           modelValue: pagination.value,
           "onUpdate:modelValue": [
@@ -7914,13 +8609,13 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = /* @__PURE__ */ createElementVNode("label", {
+const _hoisted_1$6 = /* @__PURE__ */ createElementVNode("label", {
   for: "tabs",
   class: "sr-only"
 }, "Select a tab", -1);
-const _hoisted_2$5 = { class: "hidden sm:block" };
-const _hoisted_3$3 = ["textContent", "onClick"];
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _hoisted_2$4 = { class: "hidden sm:block" };
+const _hoisted_3$2 = ["textContent", "onClick"];
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: null,
     pillDesign: { type: Boolean, default: false },
@@ -7962,7 +8657,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(["sm:hidden", { "mb-4": __props.pillDesign }])
         }, [
-          _hoisted_1$7,
+          _hoisted_1$6,
           createVNode(_component_Select, {
             name: "tabs",
             modelValue: __props.modelValue,
@@ -7970,7 +8665,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             options: __props.tabs
           }, null, 8, ["modelValue", "options"])
         ], 2),
-        createElementVNode("div", _hoisted_2$5, [
+        createElementVNode("div", _hoisted_2$4, [
           createElementVNode("div", {
             class: normalizeClass({ "border-b border-gray-200": unref(notPillDesign) })
           }, [
@@ -7984,7 +8679,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                   key: idx,
                   textContent: toDisplayString(tab.label),
                   onClick: withModifiers(($event) => updateModelValue2(tab.value), ["prevent"])
-                }, null, 10, _hoisted_3$3);
+                }, null, 10, _hoisted_3$2);
               }), 128))
             ], 2)
           ], 2)
@@ -7993,8 +8688,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = /* @__PURE__ */ createElementVNode("span", { class: "sr-only" }, "Use", -1);
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = /* @__PURE__ */ createElementVNode("span", { class: "sr-only" }, "Use", -1);
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: { type: Boolean, default: false }
   },
@@ -8010,7 +8705,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emits("update:modelValue", $event))
       }, {
         default: withCtx(() => [
-          _hoisted_1$6,
+          _hoisted_1$5,
           createElementVNode("span", {
             "aria-hidden": "true",
             class: normalizeClass([
@@ -8024,9 +8719,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = { class: "inline-flex items-center" };
-const _hoisted_2$4 = ["aria-labelledby", "checked", "id"];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = { class: "inline-flex items-center" };
+const _hoisted_2$3 = ["aria-labelledby", "checked", "id"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   props: {
     label: { default: "" },
     modelValue: { type: Boolean }
@@ -8037,7 +8732,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const uuid = attrs.id || Uniques.CreateIdAttribute();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        createElementVNode("label", _hoisted_1$5, [
+        createElementVNode("label", _hoisted_1$4, [
           createElementVNode("input", mergeProps({
             "aria-labelledby": __props.label ? `${unref(uuid)}-label` : void 0,
             checked: __props.modelValue,
@@ -8048,8 +8743,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             onChange: ($event) => {
               emits("update:modelValue", $event.target.checked);
             }
-          })), null, 16, _hoisted_2$4),
-          createVNode(_sfc_main$o, {
+          })), null, 16, _hoisted_2$3),
+          createVNode(_sfc_main$r, {
             class: "ml-2",
             id: `${unref(uuid)}-label`,
             for: unref(uuid),
@@ -8061,9 +8756,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = { class: "inline-flex items-center" };
-const _hoisted_2$3 = ["id", "value"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = { class: "inline-flex items-center" };
+const _hoisted_2$2 = ["id", "value"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   props: {
     options: null,
     legend: { default: "" },
@@ -8077,7 +8772,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const model = ref(props.modelValue);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("fieldset", null, [
-        createVNode(_sfc_main$o, {
+        createVNode(_sfc_main$r, {
           class: "block mb-0",
           label: __props.legend,
           tag: "legend"
@@ -8087,7 +8782,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             class: "mt-4",
             key: option.value
           }, [
-            createElementVNode("label", _hoisted_1$4, [
+            createElementVNode("label", _hoisted_1$3, [
               withDirectives(createElementVNode("input", mergeProps({
                 type: "checkbox",
                 class: "focus:ring-blue-500 h-4 w-4 text-xy-blue border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed",
@@ -8098,10 +8793,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 onChange: () => {
                   emits("update:modelValue", model.value);
                 }
-              })), null, 16, _hoisted_2$3), [
+              })), null, 16, _hoisted_2$2), [
                 [vModelCheckbox, model.value]
               ]),
-              createVNode(_sfc_main$o, {
+              createVNode(_sfc_main$r, {
                 class: "ml-2",
                 for: `${unref(uuid)}-${index}`,
                 label: option.label,
@@ -8114,10 +8809,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = { class: "mt-1 space-y-2" };
-const _hoisted_2$2 = ["for"];
-const _hoisted_3$2 = ["checked", "id", "name", "value"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$2 = { class: "mt-1 space-y-2" };
+const _hoisted_2$1 = ["for"];
+const _hoisted_3$1 = ["checked", "id", "name", "value"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   props: {
     options: null,
     legend: { default: "" },
@@ -8130,8 +8825,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const attrs = useAttrs();
     const uuid = attrs.id || Uniques.CreateIdAttribute();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("fieldset", _hoisted_1$3, [
-        createVNode(_sfc_main$o, {
+      return openBlock(), createElementBlock("fieldset", _hoisted_1$2, [
+        createVNode(_sfc_main$r, {
           class: "block",
           label: __props.legend,
           tag: "legend"
@@ -8156,13 +8851,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                   onChange: ($event) => {
                     emits("update:modelValue", $event.target.value);
                   }
-                })), null, 16, _hoisted_3$2),
-                createVNode(_sfc_main$o, {
+                })), null, 16, _hoisted_3$1),
+                createVNode(_sfc_main$r, {
                   class: "ml-2",
                   label: option.label,
                   tag: "span"
                 }, null, 8, ["label"])
-              ], 10, _hoisted_2$2)
+              ], 10, _hoisted_2$1)
             ]),
             _: 2
           }, 1024);
@@ -8171,69 +8866,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = ["aria-labelledby", "aria-describedby", "id", "value"];
-const _hoisted_2$1 = {
-  key: 0,
-  value: "",
-  disabled: "",
-  selected: ""
-};
-const _hoisted_3$1 = ["value", "textContent"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  props: {
-    design: { default: "standard" },
-    label: { default: "" },
-    help: { default: "" },
-    placeholder: { default: "Select an option" },
-    options: null,
-    modelValue: null
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const attrs = useAttrs();
-    const uuid = attrs.id || Uniques.CreateIdAttribute();
-    const classes = computed(() => {
-      return {
-        standard: "mt-1 block w-full border border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
-        compressed: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-600 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-      }[props.design];
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$o, {
-          id: `${unref(uuid)}-label`,
-          for: unref(uuid),
-          label: __props.label
-        }, null, 8, ["id", "for", "label"]),
-        createElementVNode("select", mergeProps({
-          "aria-labelledby": __props.label ? `${unref(uuid)}-label` : void 0,
-          "aria-describedby": __props.help ? `${unref(uuid)}-help` : void 0,
-          class: unref(classes),
-          id: unref(uuid),
-          value: __props.modelValue
-        }, __spreadProps(__spreadValues({}, _ctx.$attrs), {
-          onChange: ($event) => {
-            emit("update:modelValue", $event.target.value);
-          }
-        })), [
-          __props.placeholder ? (openBlock(), createElementBlock("option", _hoisted_2$1, toDisplayString(__props.placeholder), 1)) : createCommentVNode("", true),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
-            return openBlock(), createElementBlock("option", {
-              value: option.value,
-              textContent: toDisplayString(option.label),
-              key: option.value
-            }, null, 8, _hoisted_3$1);
-          }), 128))
-        ], 16, _hoisted_1$2),
-        createVNode(_sfc_main$n, {
-          id: `${unref(uuid)}-help`,
-          text: __props.help
-        }, null, 8, ["id", "text"])
-      ], 64);
-    };
-  }
-});
 const _hoisted_1$1 = ["aria-labelledby", "aria-describedby", "id", "value"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   props: {
@@ -8247,7 +8879,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const uuid = attrs.id || Uniques.CreateIdAttribute();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$o, {
+        createVNode(_sfc_main$r, {
           class: "block",
           id: `${unref(uuid)}-label`,
           for: unref(uuid),
@@ -8271,7 +8903,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           value: __props.modelValue,
           onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
         }, _ctx.$attrs), null, 16, _hoisted_1$1),
-        createVNode(_sfc_main$n, {
+        createVNode(_sfc_main$q, {
           id: `${unref(uuid)}-help`,
           text: __props.help
         }, null, 8, ["id", "text"])
@@ -8302,7 +8934,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("fieldset", null, [
-        createVNode(_sfc_main$o, {
+        createVNode(_sfc_main$r, {
           class: "block",
           label: __props.legend,
           tag: "legend"
@@ -8321,7 +8953,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, __spreadProps(__spreadValues({}, _ctx.$attrs), {
             onChange
           })), null, 16, _hoisted_2),
-          createVNode(_sfc_main$o, {
+          createVNode(_sfc_main$r, {
             class: "ml-2",
             label: "Yes",
             tag: "span"
@@ -8341,7 +8973,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, __spreadProps(__spreadValues({}, _ctx.$attrs), {
             onChange
           })), null, 16, _hoisted_4),
-          createVNode(_sfc_main$o, {
+          createVNode(_sfc_main$r, {
             class: "ml-2",
             label: "No",
             tag: "span"
@@ -8354,32 +8986,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 var components = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
-  ActionsDropdown: _sfc_main$r,
-  Cards: _sfc_main$q,
-  ContentModal: _sfc_main$p,
-  DateFilter: _sfc_main$k,
-  DetailList: _sfc_main$i,
-  DownloadCell: _sfc_main$h,
-  Flash: _sfc_main$g,
-  Modal: _sfc_main$f,
-  SidebarLayout: _sfc_main$d,
+  ActionsDropdown: _sfc_main$u,
+  Cards: _sfc_main$t,
+  ContentModal: _sfc_main$s,
+  DateFilter: _sfc_main$m,
+  DetailList: _sfc_main$k,
+  DownloadCell: _sfc_main$j,
+  Flash: _sfc_main$i,
+  Modal: _sfc_main$h,
+  SidebarLayout: _sfc_main$f,
   Slideover: _sfc_main$c,
-  StackedLayout: _sfc_main$b,
-  Paginator: _sfc_main$j,
-  Spinner: _sfc_main$e,
-  StaticTable: _sfc_main$a,
-  Steps: _sfc_main$9,
-  Table: _sfc_main$8,
-  Tabs: _sfc_main$7,
-  Toggle: _sfc_main$6,
-  BaseInput: _sfc_main$m,
-  Checkbox: _sfc_main$5,
-  DateRangePicker: _sfc_main$l,
-  InputHelp: _sfc_main$n,
-  InputLabel: _sfc_main$o,
-  MultiCheckboxes: _sfc_main$4,
-  Radio: _sfc_main$3,
-  Select: _sfc_main$2,
+  StackedLayout: _sfc_main$a,
+  Popover: _sfc_main$e,
+  PopoverContent,
+  PopoverPosition: _sfc_main$e,
+  Paginator: _sfc_main$l,
+  Spinner: _sfc_main$g,
+  StaticTable: _sfc_main$9,
+  Steps: _sfc_main$8,
+  Table: _sfc_main$7,
+  Tabs: _sfc_main$6,
+  Toggle: _sfc_main$5,
+  Tooltip: _sfc_main$b,
+  BaseInput: _sfc_main$p,
+  Checkbox: _sfc_main$4,
+  DateRangePicker: _sfc_main$o,
+  InputHelp: _sfc_main$q,
+  InputLabel: _sfc_main$r,
+  MultiCheckboxes: _sfc_main$3,
+  Radio: _sfc_main$2,
+  Select: _sfc_main$n,
   TextArea: _sfc_main$1,
   YesOrNoRadio: _sfc_main
 });
@@ -8388,4 +9024,4 @@ const install = function installTrees(app) {
     app.component(componentName, component);
   });
 };
-export { _sfc_main$r as ActionsDropdown, BaseAPI, _sfc_main$m as BaseInput, _sfc_main$q as Cards, _sfc_main$5 as Checkbox, _sfc_main$p as ContentModal, _sfc_main$k as DateFilter, _sfc_main$l as DateRangePicker, _sfc_main$i as DetailList, _sfc_main$h as DownloadCell, _sfc_main$g as Flash, _sfc_main$n as InputHelp, _sfc_main$o as InputLabel, _sfc_main$f as Modal, _sfc_main$4 as MultiCheckboxes, _sfc_main$j as Paginator, _sfc_main$3 as Radio, _sfc_main$2 as Select, _sfc_main$d as SidebarLayout, _sfc_main$c as Slideover, _sfc_main$e as Spinner, _sfc_main$b as StackedLayout, _sfc_main$a as StaticTable, _sfc_main$9 as Steps, _sfc_main$8 as Table, _sfc_main$7 as Tabs, _sfc_main$1 as TextArea, _sfc_main$6 as Toggle, _sfc_main as YesOrNoRadio, install as default };
+export { _sfc_main$u as ActionsDropdown, BaseAPI, _sfc_main$p as BaseInput, _sfc_main$t as Cards, _sfc_main$4 as Checkbox, _sfc_main$s as ContentModal, _sfc_main$m as DateFilter, _sfc_main$o as DateRangePicker, _sfc_main$k as DetailList, _sfc_main$j as DownloadCell, _sfc_main$i as Flash, _sfc_main$q as InputHelp, _sfc_main$r as InputLabel, _sfc_main$h as Modal, _sfc_main$3 as MultiCheckboxes, _sfc_main$l as Paginator, _sfc_main$e as Popover, PopoverContent, _sfc_main$e as PopoverPosition, _sfc_main$2 as Radio, _sfc_main$n as Select, _sfc_main$f as SidebarLayout, _sfc_main$c as Slideover, _sfc_main$g as Spinner, _sfc_main$a as StackedLayout, _sfc_main$9 as StaticTable, _sfc_main$8 as Steps, _sfc_main$7 as Table, _sfc_main$6 as Tabs, _sfc_main$1 as TextArea, _sfc_main$5 as Toggle, _sfc_main$b as Tooltip, _sfc_main as YesOrNoRadio, install as default };