@histoire/controls 0.2.2 → 0.2.3

package/dist/index.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { pushScopeId, popScopeId, defineComponent, nextTick, openBlock, createBlock, withScopeId, resolveComponent, createElementBlock, normalizeClass, normalizeStyle, withKeys, createElementVNode, Fragment, renderSlot, createCommentVNode, mergeProps, withCtx, createVNode, ref, createApp, h, toDisplayString, withDirectives, createTextVNode, unref, computed, watch, withModifiers, onUnmounted, isRef, vModelText } from "vue";
+import { pushScopeId, popScopeId, defineComponent, nextTick, openBlock, createBlock, withScopeId, resolveComponent, createElementBlock, normalizeClass, normalizeStyle, withKeys, createElementVNode, Fragment, renderSlot, createCommentVNode, mergeProps, withCtx, createVNode, ref, createApp, h, toDisplayString, withDirectives, createTextVNode, unref, computed, watch, withModifiers, onUnmounted, isRef, vModelText, getCurrentScope, onScopeDispose, renderList } from "vue";
 function getBasePlacement(placement) {
   return placement.split("-")[0];
 }
@@ -355,11 +355,11 @@ const autoPlacement = function(options) {
         middlewareData,
         placement
       } = middlewareArguments;
-      const _a = options, {
+      const _a2 = options, {
         alignment = null,
         allowedPlacements = allPlacements,
         autoAlignment = true
-      } = _a, detectOverflowOptions = __objRest(_a, [
+      } = _a2, detectOverflowOptions = __objRest(_a2, [
         "alignment",
         "allowedPlacements",
         "autoAlignment"
@@ -441,13 +441,13 @@ const flip = function(options) {
       if ((_middlewareData$flip = middlewareData.flip) != null && _middlewareData$flip.skip) {
         return {};
       }
-      const _a = options, {
+      const _a2 = options, {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true,
         fallbackPlacements: specifiedFallbackPlacements,
         fallbackStrategy = "bestFit",
         flipAlignment = true
-      } = _a, detectOverflowOptions = __objRest(_a, [
+      } = _a2, detectOverflowOptions = __objRest(_a2, [
         "mainAxis",
         "crossAxis",
         "fallbackPlacements",
@@ -589,7 +589,7 @@ const shift = function(options) {
         y,
         placement
       } = middlewareArguments;
-      const _a = options, {
+      const _a2 = options, {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = false,
         limiter = {
@@ -604,7 +604,7 @@ const shift = function(options) {
             };
           }
         }
-      } = _a, detectOverflowOptions = __objRest(_a, [
+      } = _a2, detectOverflowOptions = __objRest(_a2, [
         "mainAxis",
         "crossAxis",
         "limiter"
@@ -659,9 +659,9 @@ const size = function(options) {
         rects,
         middlewareData
       } = middlewareArguments;
-      const _a = options, {
+      const _a2 = options, {
         apply
-      } = _a, detectOverflowOptions = __objRest(_a, [
+      } = _a2, detectOverflowOptions = __objRest(_a2, [
         "apply"
       ]);
       if ((_middlewareData$size = middlewareData.size) != null && _middlewareData$size.skip) {
@@ -1098,7 +1098,7 @@ var __spreadValues2 = (a, b) => {
   return a;
 };
 var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
-const config = {
+const config$1 = {
   disabled: false,
   distance: 5,
   skidding: 0,
@@ -1146,16 +1146,16 @@ const config = {
   }
 };
 function getDefaultConfig(theme, key) {
-  let themeConfig = config.themes[theme] || {};
+  let themeConfig = config$1.themes[theme] || {};
   let value;
   do {
     value = themeConfig[key];
     if (typeof value === "undefined") {
       if (themeConfig.$extend) {
-        themeConfig = config.themes[themeConfig.$extend] || {};
+        themeConfig = config$1.themes[themeConfig.$extend] || {};
       } else {
         themeConfig = null;
-        value = config[key];
+        value = config$1[key];
       }
     } else {
       themeConfig = null;
@@ -1165,17 +1165,30 @@ function getDefaultConfig(theme, key) {
 }
 function getThemeClasses(theme) {
   const result = [theme];
-  let themeConfig = config.themes[theme] || {};
+  let themeConfig = config$1.themes[theme] || {};
   do {
     if (themeConfig.$extend && !themeConfig.$resetCss) {
       result.push(themeConfig.$extend);
-      themeConfig = config.themes[themeConfig.$extend] || {};
+      themeConfig = config$1.themes[themeConfig.$extend] || {};
     } else {
       themeConfig = null;
     }
   } while (themeConfig);
   return result.map((c) => `v-popper--theme-${c}`);
 }
+function getAllParentThemes(theme) {
+  const result = [theme];
+  let themeConfig = config$1.themes[theme] || {};
+  do {
+    if (themeConfig.$extend) {
+      result.push(themeConfig.$extend);
+      themeConfig = config$1.themes[themeConfig.$extend] || {};
+    } else {
+      themeConfig = null;
+    }
+  } while (themeConfig);
+  return result;
+}
 let supportsPassive = false;
 if (typeof window !== "undefined") {
   supportsPassive = false;
@@ -1223,6 +1236,14 @@ function nextFrame() {
 }
 const shownPoppers = [];
 let hidingPopper = null;
+const shownPoppersByTheme = {};
+function getShownPoppersByTheme(theme) {
+  let list = shownPoppersByTheme[theme];
+  if (!list) {
+    list = shownPoppersByTheme[theme] = [];
+  }
+  return list;
+}
 let Element = function() {
 };
 if (typeof window !== "undefined") {
@@ -1233,8 +1254,19 @@ function defaultPropFactory(prop) {
     return getDefaultConfig(props.theme, prop);
   };
 }
+const PROVIDE_KEY = "__floating-vue__popper";
 var PrivatePopper = () => defineComponent({
   name: "VPopper",
+  provide() {
+    return {
+      [PROVIDE_KEY]: {
+        parentPopper: this
+      }
+    };
+  },
+  inject: {
+    [PROVIDE_KEY]: { default: null }
+  },
   props: {
     theme: {
       type: String,
@@ -1428,7 +1460,8 @@ var PrivatePopper = () => defineComponent({
           centerOffset: 0
         },
         transformOrigin: null
-      }
+      },
+      shownChildren: /* @__PURE__ */ new Set()
     };
   },
   computed: {
@@ -1454,6 +1487,14 @@ var PrivatePopper = () => defineComponent({
         }),
         result: this.positioningDisabled ? null : this.result
       };
+    },
+    parentPopper() {
+      var _a2;
+      return (_a2 = this[PROVIDE_KEY]) == null ? void 0 : _a2.parentPopper;
+    },
+    hasPopperShowTriggerHover() {
+      var _a2, _b2;
+      return ((_a2 = this.popperTriggers) == null ? void 0 : _a2.includes("hover")) || ((_b2 = this.popperShowTriggers) == null ? void 0 : _b2.includes("hover"));
     }
   },
   watch: __spreadValues2(__spreadValues2({
@@ -1518,7 +1559,14 @@ var PrivatePopper = () => defineComponent({
   },
   methods: {
     show({ event = null, skipDelay = false, force = false } = {}) {
+      var _a2, _b2;
+      if (((_a2 = this.parentPopper) == null ? void 0 : _a2.lockedChild) && this.parentPopper.lockedChild !== this)
+        return;
+      this.$_pendingHide = false;
       if (force || !this.disabled) {
+        if (((_b2 = this.parentPopper) == null ? void 0 : _b2.lockedChild) === this) {
+          this.parentPopper.lockedChild = null;
+        }
         this.$_scheduleShow(event, skipDelay);
         this.$emit("show");
         this.$_showFrameLocked = true;
@@ -1529,8 +1577,30 @@ var PrivatePopper = () => defineComponent({
       this.$emit("update:shown", true);
     },
     hide({ event = null, skipDelay = false } = {}) {
+      var _a2;
       if (this.$_hideInProgress)
         return;
+      if (this.shownChildren.size > 0) {
+        this.$_pendingHide = true;
+        return;
+      }
+      if (this.hasPopperShowTriggerHover && this.$_isAimingPopper()) {
+        if (this.parentPopper) {
+          this.parentPopper.lockedChild = this;
+          clearTimeout(this.parentPopper.lockedChildTimer);
+          this.parentPopper.lockedChildTimer = setTimeout(() => {
+            if (this.parentPopper.lockedChild === this) {
+              this.parentPopper.lockedChild.hide({ skipDelay });
+              this.parentPopper.lockedChild = null;
+            }
+          }, 1e3);
+        }
+        return;
+      }
+      if (((_a2 = this.parentPopper) == null ? void 0 : _a2.lockedChild) === this) {
+        this.parentPopper.lockedChild = null;
+      }
+      this.$_pendingHide = false;
       this.$_scheduleHide(event, skipDelay);
       this.$emit("hide");
       this.$emit("update:shown", false);
@@ -1565,6 +1635,7 @@ var PrivatePopper = () => defineComponent({
       this.$_detachPopperNode();
       this.isMounted = false;
       this.isShown = false;
+      this.$_updateParentShownChildren(false);
       this.$_swapTargetAttrs("data-original-title", "title");
       this.$emit("dispose");
     },
@@ -1575,7 +1646,7 @@ var PrivatePopper = () => defineComponent({
       }
     },
     async $_computePosition() {
-      var _a;
+      var _a2;
       if (this.$_isDisposed || this.positioningDisabled)
         return;
       const options2 = {
@@ -1591,7 +1662,7 @@ var PrivatePopper = () => defineComponent({
       const isPlacementAuto = this.placement.startsWith("auto");
       if (isPlacementAuto) {
         options2.middleware.push(autoPlacement({
-          alignment: (_a = this.placement.split("-")[1]) != null ? _a : ""
+          alignment: (_a2 = this.placement.split("-")[1]) != null ? _a2 : ""
         }));
       } else {
         options2.placement = this.placement;
@@ -1639,8 +1710,8 @@ var PrivatePopper = () => defineComponent({
         options2.middleware.push({
           name: "autoSize",
           fn: ({ rects, placement, middlewareData }) => {
-            var _a2;
-            if ((_a2 = middlewareData.autoSize) == null ? void 0 : _a2.skip) {
+            var _a22;
+            if ((_a22 = middlewareData.autoSize) == null ? void 0 : _a22.skip) {
               return {};
             }
             let width;
@@ -1685,9 +1756,10 @@ var PrivatePopper = () => defineComponent({
       });
     },
     $_scheduleShow(event = null, skipDelay = false) {
+      this.$_updateParentShownChildren(true);
       this.$_hideInProgress = false;
       clearTimeout(this.$_scheduleTimer);
-      if (hidingPopper && this.instantMove && hidingPopper.instantMove) {
+      if (hidingPopper && this.instantMove && hidingPopper.instantMove && hidingPopper !== this.parentPopper) {
         hidingPopper.$_applyHide(true);
         this.$_applyShow(true);
         return;
@@ -1699,6 +1771,11 @@ var PrivatePopper = () => defineComponent({
       }
     },
     $_scheduleHide(event = null, skipDelay = false) {
+      if (this.shownChildren.size > 0) {
+        this.$_pendingHide = true;
+        return;
+      }
+      this.$_updateParentShownChildren(false);
       this.$_hideInProgress = true;
       clearTimeout(this.$_scheduleTimer);
       if (this.isShown) {
@@ -1762,6 +1839,11 @@ var PrivatePopper = () => defineComponent({
         }
       }
       shownPoppers.push(this);
+      document.body.classList.add("v-popper--some-open");
+      for (const theme of getAllParentThemes(this.theme)) {
+        getShownPoppersByTheme(theme).push(this);
+        document.body.classList.add(`v-popper--some-open--${theme}`);
+      }
       this.$emit("apply-show");
       this.classes.showFrom = true;
       this.classes.showTo = false;
@@ -1770,14 +1852,30 @@ var PrivatePopper = () => defineComponent({
       await nextFrame();
       this.classes.showFrom = false;
       this.classes.showTo = true;
+      this.$_popperNode.focus();
     },
     async $_applyHide(skipTransition = false) {
+      if (this.shownChildren.size > 0) {
+        this.$_pendingHide = true;
+        this.$_hideInProgress = false;
+        return;
+      }
       clearTimeout(this.$_scheduleTimer);
       if (!this.isShown) {
         return;
       }
       this.skipTransition = skipTransition;
       removeFromArray(shownPoppers, this);
+      if (shownPoppers.length === 0) {
+        document.body.classList.remove("v-popper--some-open");
+      }
+      for (const theme of getAllParentThemes(this.theme)) {
+        const list = getShownPoppersByTheme(theme);
+        removeFromArray(list, this);
+        if (list.length === 0) {
+          document.body.classList.remove(`v-popper--some-open--${theme}`);
+        }
+      }
       if (hidingPopper === this) {
         hidingPopper = null;
       }
@@ -1922,6 +2020,34 @@ var PrivatePopper = () => defineComponent({
           }
         }
       }
+    },
+    $_updateParentShownChildren(value) {
+      let parent = this.parentPopper;
+      while (parent) {
+        if (value) {
+          parent.shownChildren.add(this.randomId);
+        } else {
+          parent.shownChildren.delete(this.randomId);
+          if (parent.$_pendingHide) {
+            parent.hide();
+          }
+        }
+        parent = parent.parentPopper;
+      }
+    },
+    $_isAimingPopper() {
+      const referenceBounds = this.$_referenceNode.getBoundingClientRect();
+      if (mouseX >= referenceBounds.left && mouseX <= referenceBounds.right && mouseY >= referenceBounds.top && mouseY <= referenceBounds.bottom) {
+        const popperBounds = this.$_popperNode.getBoundingClientRect();
+        const vectorX = mouseX - mousePreviousX;
+        const vectorY = mouseY - mousePreviousY;
+        const distance = popperBounds.left + popperBounds.width / 2 - mousePreviousX + (popperBounds.top + popperBounds.height / 2) - mousePreviousY;
+        const newVectorLength = distance + popperBounds.width + popperBounds.height;
+        const edgeX = mousePreviousX + vectorX * newVectorLength;
+        const edgeY = mousePreviousY + vectorY * newVectorLength;
+        return lineIntersectsLine(mousePreviousX, mousePreviousY, edgeX, edgeY, popperBounds.left, popperBounds.top, popperBounds.left, popperBounds.bottom) || lineIntersectsLine(mousePreviousX, mousePreviousY, edgeX, edgeY, popperBounds.left, popperBounds.top, popperBounds.right, popperBounds.top) || lineIntersectsLine(mousePreviousX, mousePreviousY, edgeX, edgeY, popperBounds.right, popperBounds.top, popperBounds.right, popperBounds.bottom) || lineIntersectsLine(mousePreviousX, mousePreviousY, edgeX, edgeY, popperBounds.left, popperBounds.bottom, popperBounds.right, popperBounds.bottom);
+      }
+      return false;
     }
   },
   render() {
@@ -1961,26 +2087,73 @@ function handleGlobalTouchend(event) {
   handleGlobalClose(event, true);
 }
 function handleGlobalClose(event, touch = false) {
-  for (let i = 0; i < shownPoppers.length; i++) {
+  const preventClose = {};
+  for (let i = shownPoppers.length - 1; i >= 0; i--) {
     const popper = shownPoppers[i];
     try {
-      const popperContent = popper.popperNode();
-      const contains2 = popper.$_mouseDownContains || popperContent.contains(event.target);
+      const contains2 = popper.$_containsGlobalTarget = isContainingEventTarget(popper, event);
+      popper.$_pendingHide = false;
       requestAnimationFrame(() => {
-        if (event.closeAllPopover || event.closePopover && contains2 || popper.autoHide && !contains2) {
+        popper.$_pendingHide = false;
+        if (preventClose[popper.randomId])
+          return;
+        if (shouldAutoHide(popper, contains2, event)) {
           popper.$_handleGlobalClose(event, touch);
+          if (!event.closeAllPopover && event.closePopover && contains2) {
+            let parent2 = popper.parentPopper;
+            while (parent2) {
+              preventClose[parent2.randomId] = true;
+              parent2 = parent2.parentPopper;
+            }
+            return;
+          }
+          let parent = popper.parentPopper;
+          while (parent) {
+            if (shouldAutoHide(parent, parent.$_containsGlobalTarget, event)) {
+              parent.$_handleGlobalClose(event, touch);
+            } else {
+              break;
+            }
+            parent = parent.parentPopper;
+          }
         }
       });
     } catch (e) {
     }
   }
 }
+function isContainingEventTarget(popper, event) {
+  const popperContent = popper.popperNode();
+  return popper.$_mouseDownContains || popperContent.contains(event.target);
+}
+function shouldAutoHide(popper, contains2, event) {
+  return event.closeAllPopover || event.closePopover && contains2 || popper.autoHide && !contains2;
+}
 function computePositionAllShownPoppers(event) {
   for (let i = 0; i < shownPoppers.length; i++) {
     const popper = shownPoppers[i];
     popper.$_computePosition(event);
   }
 }
+let mousePreviousX = 0;
+let mousePreviousY = 0;
+let mouseX = 0;
+let mouseY = 0;
+if (typeof window !== "undefined") {
+  window.addEventListener("mousemove", (event) => {
+    mousePreviousX = mouseX;
+    mousePreviousY = mouseY;
+    mouseX = event.clientX;
+    mouseY = event.clientY;
+  }, supportsPassive ? {
+    passive: true
+  } : void 0);
+}
+function lineIntersectsLine(x1, y1, x2, y2, x3, y3, x4, y4) {
+  const uA = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
+  const uB = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
+  return uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1;
+}
 function getInternetExplorerVersion() {
   var ua = window.navigator.userAgent;
   var msie = ua.indexOf("MSIE ");
@@ -2087,10 +2260,10 @@ const _hoisted_1$2$1 = {
   tabindex: "-1"
 };
 popScopeId();
-const render = /* @__PURE__ */ _withId((_ctx, _cache, $props, $setup, $data, $options) => {
+const render$1 = /* @__PURE__ */ _withId((_ctx, _cache, $props, $setup, $data, $options) => {
   return openBlock(), createBlock("div", _hoisted_1$2$1);
 });
-script.render = render;
+script.render = render$1;
 script.__scopeId = "data-v-b329ee4c";
 script.__file = "src/components/ResizeObserver.vue";
 var PrivateThemeClass = (prop = "theme") => ({
@@ -2107,7 +2280,7 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$5 = defineComponent({
+const _sfc_main$5$1 = defineComponent({
   name: "VPopperContent",
   components: {
     ResizeObserver: script
@@ -2144,11 +2317,11 @@ const _hoisted_2$1$1 = {
   ref: "inner",
   class: "v-popper__inner"
 };
-const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-outer" }, null, -1);
-const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-inner" }, null, -1);
-const _hoisted_5 = [
-  _hoisted_3$2,
-  _hoisted_4
+const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-outer" }, null, -1);
+const _hoisted_4$1 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-inner" }, null, -1);
+const _hoisted_5$1 = [
+  _hoisted_3$3,
+  _hoisted_4$1
 ];
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ResizeObserver = resolveComponent("ResizeObserver");
@@ -2207,11 +2380,11 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
           left: _ctx.toPx(_ctx.result.arrow.x),
           top: _ctx.toPx(_ctx.result.arrow.y)
         } : void 0)
-      }, _hoisted_5, 4)
+      }, _hoisted_5$1, 4)
     ], 4)
   ], 46, _hoisted_1$1$1);
 }
-var PrivatePopperContent = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$2]]);
+var PrivatePopperContent = /* @__PURE__ */ _export_sfc(_sfc_main$5$1, [["render", _sfc_render$2]]);
 var PrivatePopperMethods = {
   methods: {
     show(...args) {
@@ -2247,8 +2420,8 @@ const _sfc_main$4$1 = defineComponent({
   },
   computed: {
     finalTheme() {
-      var _a;
-      return (_a = this.theme) != null ? _a : this.$options.vPopperTheme;
+      var _a2;
+      return (_a2 = this.theme) != null ? _a2 : this.$options.vPopperTheme;
     },
     popperAttrs() {
       const result = __spreadValues2({}, this.$attrs);
@@ -2341,7 +2514,7 @@ defineComponent(__spreadProps2(__spreadValues2({}, PrivatePopperWrapper), {
   name: "VTooltip",
   vPopperTheme: "tooltip"
 }));
-const _sfc_main$6 = defineComponent({
+const _sfc_main$7 = defineComponent({
   name: "VTooltipDirective",
   components: {
     Popper: PrivatePopper(),
@@ -2432,8 +2605,8 @@ const _sfc_main$6 = defineComponent({
     }
   }
 });
-const _hoisted_1$4 = ["innerHTML"];
-const _hoisted_2$2 = ["textContent"];
+const _hoisted_1$5 = ["innerHTML"];
+const _hoisted_2$3 = ["textContent"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PopperContent = resolveComponent("PopperContent");
   const _component_Popper = resolveComponent("Popper");
@@ -2476,10 +2649,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.html ? (openBlock(), createElementBlock("div", {
             key: 0,
             innerHTML: _ctx.finalContent
-          }, null, 8, _hoisted_1$4)) : (openBlock(), createElementBlock("div", {
+          }, null, 8, _hoisted_1$5)) : (openBlock(), createElementBlock("div", {
             key: 1,
             textContent: toDisplayString(_ctx.finalContent)
-          }, null, 8, _hoisted_2$2))
+          }, null, 8, _hoisted_2$3))
         ]),
         _: 2
       }, 1032, ["class", "popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
@@ -2487,7 +2660,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 16, ["theme", "popper-node", "onApplyShow", "onApplyHide"]);
 }
-var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render]]);
+var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render]]);
 const TARGET_CLASS = "v-popper--has-tooltip";
 function getPlacement(options2, modifiers) {
   let result = options2.placement;
@@ -2535,7 +2708,7 @@ function ensureDirectiveApp() {
     render() {
       return this.directives.map((directive) => {
         return h(PrivateTooltipDirective, __spreadProps2(__spreadValues2({}, directive.options), {
-          shown: directive.shown.value || directive.options.shown,
+          shown: directive.shown || directive.options.shown,
           key: directive.id
         }));
       });
@@ -2586,7 +2759,7 @@ function destroyTooltip(el) {
     el.classList.remove(TARGET_CLASS);
   }
 }
-function bind(el, { value, oldValue, modifiers }) {
+function bind(el, { value, modifiers }) {
   const options2 = getOptions(el, value, modifiers);
   if (!options2.content || getDefaultConfig(options2.theme || "tooltip", "disabled")) {
     destroyTooltip(el);
@@ -2612,20 +2785,20 @@ var PrivateVTooltip = {
   }
 };
 const VTooltip = PrivateVTooltip;
-const _hoisted_1$3 = { class: "htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap" };
-const _hoisted_2$1 = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" };
-const _hoisted_3$1 = { class: "htw-block htw-grow" };
-const __default__$4 = {
+const _hoisted_1$4 = { class: "htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap" };
+const _hoisted_2$2 = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" };
+const _hoisted_3$2 = { class: "htw-block htw-grow" };
+const __default__$6 = {
   name: "HstWrapper"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
+const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$6), {
   props: {
     title: null
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$3, [
-        withDirectives((openBlock(), createElementBlock("span", _hoisted_2$1, [
+      return openBlock(), createElementBlock("label", _hoisted_1$4, [
+        withDirectives((openBlock(), createElementBlock("span", _hoisted_2$2, [
           createTextVNode(toDisplayString(__props.title), 1)
         ])), [
           [unref(VTooltip), {
@@ -2634,25 +2807,25 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             distance: 12
           }]
         ]),
-        createElementVNode("span", _hoisted_3$1, [
+        createElementVNode("span", _hoisted_3$2, [
           renderSlot(_ctx.$slots, "default")
         ])
       ]);
     };
   }
 }));
-const _hoisted_1$2 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
-const _hoisted_2 = {
+const _hoisted_1$3 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
+const _hoisted_2$1 = {
   width: "16",
   height: "16",
   viewBox: "0 0 24 24",
   class: "htw-relative htw-z-10"
 };
-const _hoisted_3 = ["stroke-dasharray", "stroke-dashoffset"];
-const __default__$3 = {
+const _hoisted_3$1 = ["stroke-dasharray", "stroke-dashoffset"];
+const __default__$5 = {
   name: "HstCheckbox"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
+const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$5), {
   props: {
     modelValue: { type: Boolean },
     title: null
@@ -2672,11 +2845,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const dashoffset = computed(() => (1 - progress.value) * dasharray.value);
     const animationEnabled = ref(false);
     watch(path, (value) => {
-      var _a, _b, _c;
-      dasharray.value = (_c = (_b = (_a = path.value).getTotalLength) == null ? void 0 : _b.call(_a)) != null ? _c : 21.21;
+      var _a2, _b2, _c;
+      dasharray.value = (_c = (_b2 = (_a2 = path.value).getTotalLength) == null ? void 0 : _b2.call(_a2)) != null ? _c : 21.21;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$4, {
+      return openBlock(), createBlock(_sfc_main$6, {
         role: "checkbox",
         tabindex: "0",
         class: "htw-cursor-pointer htw-items-center",
@@ -2688,13 +2861,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         ]
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$2, [
+          createElementVNode("div", _hoisted_1$3, [
             createElementVNode("div", {
               class: normalizeClass(["htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out", [
                 __props.modelValue ? "htw-border-primary-500 htw-border-8" : "htw-border-black/25 dark:htw-border-white/25 htw-delay-150"
               ]])
             }, null, 2),
-            (openBlock(), createElementBlock("svg", _hoisted_2, [
+            (openBlock(), createElementBlock("svg", _hoisted_2$1, [
               createElementVNode("path", {
                 ref_key: "path",
                 ref: path,
@@ -2708,7 +2881,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                 ]]),
                 "stroke-dasharray": dasharray.value,
                 "stroke-dashoffset": unref(dashoffset)
-              }, null, 10, _hoisted_3)
+              }, null, 10, _hoisted_3$1)
             ]))
           ])
         ]),
@@ -2717,11 +2890,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1$1 = ["value"];
-const __default__$2 = {
+const _hoisted_1$2 = ["value"];
+const __default__$4 = {
   name: "HstText"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
+const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
   props: {
     title: null,
     modelValue: null
@@ -2732,7 +2905,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$4, {
+      return openBlock(), createBlock(_sfc_main$6, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
@@ -2747,18 +2920,18 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             value: __props.modelValue,
             class: "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm",
             onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
-          }), null, 16, _hoisted_1$1)
+          }), null, 16, _hoisted_1$2)
         ]),
         _: 1
       }, 8, ["title", "class", "style"]);
     };
   }
 }));
-const __default__$1 = {
+const __default__$3 = {
   name: "HstNumber",
   inheritAttrs: false
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
   props: {
     title: null,
     modelValue: null
@@ -2805,7 +2978,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       stopDragging();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$4, {
+      return openBlock(), createBlock(_sfc_main$6, {
         class: normalizeClass(["htw-cursor-ew-resize htw-items-center", [
           _ctx.$attrs.class,
           { "htw-select-none": isDragging.value }
@@ -2839,12 +3012,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1 = ["value"];
-const __default__ = {
+const _hoisted_1$1 = ["value"];
+const __default__$2 = {
   name: "HstTextarea",
   inheritAttrs: false
 };
-const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
   props: {
     title: null,
     modelValue: null
@@ -2855,7 +3028,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$4, {
+      return openBlock(), createBlock(_sfc_main$6, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
@@ -2869,21 +3042,2077 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
             value: __props.modelValue,
             class: "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-box-border htw-resize-y htw-min-h-[26px]",
             onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
-          }), null, 16, _hoisted_1)
+          }), null, 16, _hoisted_1$1)
         ]),
         _: 1
       }, 8, ["title", "class", "style"]);
     };
   }
 }));
-const HstCheckbox = _sfc_main$3;
-const HstText = _sfc_main$2;
-const HstNumber = _sfc_main$1;
-const HstTextarea = _sfc_main;
+const matchName = /^[a-z0-9]+(-[a-z0-9]+)*$/;
+const iconDefaults = Object.freeze({
+  left: 0,
+  top: 0,
+  width: 16,
+  height: 16,
+  rotate: 0,
+  vFlip: false,
+  hFlip: false
+});
+function fullIcon(data) {
+  return __spreadValues(__spreadValues({}, iconDefaults), data);
+}
+const stringToIcon = (value, validate, allowSimpleName, provider = "") => {
+  const colonSeparated = value.split(":");
+  if (value.slice(0, 1) === "@") {
+    if (colonSeparated.length < 2 || colonSeparated.length > 3) {
+      return null;
+    }
+    provider = colonSeparated.shift().slice(1);
+  }
+  if (colonSeparated.length > 3 || !colonSeparated.length) {
+    return null;
+  }
+  if (colonSeparated.length > 1) {
+    const name2 = colonSeparated.pop();
+    const prefix = colonSeparated.pop();
+    const result = {
+      provider: colonSeparated.length > 0 ? colonSeparated[0] : provider,
+      prefix,
+      name: name2
+    };
+    return validate && !validateIcon(result) ? null : result;
+  }
+  const name = colonSeparated[0];
+  const dashSeparated = name.split("-");
+  if (dashSeparated.length > 1) {
+    const result = {
+      provider,
+      prefix: dashSeparated.shift(),
+      name: dashSeparated.join("-")
+    };
+    return validate && !validateIcon(result) ? null : result;
+  }
+  if (allowSimpleName && provider === "") {
+    const result = {
+      provider,
+      prefix: "",
+      name
+    };
+    return validate && !validateIcon(result, allowSimpleName) ? null : result;
+  }
+  return null;
+};
+const validateIcon = (icon, allowSimpleName) => {
+  if (!icon) {
+    return false;
+  }
+  return !!((icon.provider === "" || icon.provider.match(matchName)) && (allowSimpleName && icon.prefix === "" || icon.prefix.match(matchName)) && icon.name.match(matchName));
+};
+function mergeIconData(icon, alias) {
+  const result = __spreadValues({}, icon);
+  for (const key in iconDefaults) {
+    const prop = key;
+    if (alias[prop] !== void 0) {
+      const value = alias[prop];
+      if (result[prop] === void 0) {
+        result[prop] = value;
+        continue;
+      }
+      switch (prop) {
+        case "rotate":
+          result[prop] = (result[prop] + value) % 4;
+          break;
+        case "hFlip":
+        case "vFlip":
+          result[prop] = value !== result[prop];
+          break;
+        default:
+          result[prop] = value;
+      }
+    }
+  }
+  return result;
+}
+function getIconData$1(data, name, full = false) {
+  function getIcon(name2, iteration) {
+    if (data.icons[name2] !== void 0) {
+      return Object.assign({}, data.icons[name2]);
+    }
+    if (iteration > 5) {
+      return null;
+    }
+    const aliases = data.aliases;
+    if (aliases && aliases[name2] !== void 0) {
+      const item = aliases[name2];
+      const result2 = getIcon(item.parent, iteration + 1);
+      if (result2) {
+        return mergeIconData(result2, item);
+      }
+      return result2;
+    }
+    const chars = data.chars;
+    if (!iteration && chars && chars[name2] !== void 0) {
+      return getIcon(chars[name2], iteration + 1);
+    }
+    return null;
+  }
+  const result = getIcon(name, 0);
+  if (result) {
+    for (const key in iconDefaults) {
+      if (result[key] === void 0 && data[key] !== void 0) {
+        result[key] = data[key];
+      }
+    }
+  }
+  return result && full ? fullIcon(result) : result;
+}
+function isVariation(item) {
+  for (const key in iconDefaults) {
+    if (item[key] !== void 0) {
+      return true;
+    }
+  }
+  return false;
+}
+function parseIconSet(data, callback, options) {
+  options = options || {};
+  const names = [];
+  if (typeof data !== "object" || typeof data.icons !== "object") {
+    return names;
+  }
+  if (data.not_found instanceof Array) {
+    data.not_found.forEach((name) => {
+      callback(name, null);
+      names.push(name);
+    });
+  }
+  const icons = data.icons;
+  Object.keys(icons).forEach((name) => {
+    const iconData = getIconData$1(data, name, true);
+    if (iconData) {
+      callback(name, iconData);
+      names.push(name);
+    }
+  });
+  const parseAliases = options.aliases || "all";
+  if (parseAliases !== "none" && typeof data.aliases === "object") {
+    const aliases = data.aliases;
+    Object.keys(aliases).forEach((name) => {
+      if (parseAliases === "variations" && isVariation(aliases[name])) {
+        return;
+      }
+      const iconData = getIconData$1(data, name, true);
+      if (iconData) {
+        callback(name, iconData);
+        names.push(name);
+      }
+    });
+  }
+  return names;
+}
+const optionalProperties = {
+  provider: "string",
+  aliases: "object",
+  not_found: "object"
+};
+for (const prop in iconDefaults) {
+  optionalProperties[prop] = typeof iconDefaults[prop];
+}
+function quicklyValidateIconSet(obj) {
+  if (typeof obj !== "object" || obj === null) {
+    return null;
+  }
+  const data = obj;
+  if (typeof data.prefix !== "string" || !obj.icons || typeof obj.icons !== "object") {
+    return null;
+  }
+  for (const prop in optionalProperties) {
+    if (obj[prop] !== void 0 && typeof obj[prop] !== optionalProperties[prop]) {
+      return null;
+    }
+  }
+  const icons = data.icons;
+  for (const name in icons) {
+    const icon = icons[name];
+    if (!name.match(matchName) || typeof icon.body !== "string") {
+      return null;
+    }
+    for (const prop in iconDefaults) {
+      if (icon[prop] !== void 0 && typeof icon[prop] !== typeof iconDefaults[prop]) {
+        return null;
+      }
+    }
+  }
+  const aliases = data.aliases;
+  if (aliases) {
+    for (const name in aliases) {
+      const icon = aliases[name];
+      const parent = icon.parent;
+      if (!name.match(matchName) || typeof parent !== "string" || !icons[parent] && !aliases[parent]) {
+        return null;
+      }
+      for (const prop in iconDefaults) {
+        if (icon[prop] !== void 0 && typeof icon[prop] !== typeof iconDefaults[prop]) {
+          return null;
+        }
+      }
+    }
+  }
+  return data;
+}
+const storageVersion = 1;
+let storage$1 = /* @__PURE__ */ Object.create(null);
+try {
+  const w = window || self;
+  if (w && w._iconifyStorage.version === storageVersion) {
+    storage$1 = w._iconifyStorage.storage;
+  }
+} catch (err) {
+}
+function newStorage(provider, prefix) {
+  return {
+    provider,
+    prefix,
+    icons: /* @__PURE__ */ Object.create(null),
+    missing: /* @__PURE__ */ Object.create(null)
+  };
+}
+function getStorage(provider, prefix) {
+  if (storage$1[provider] === void 0) {
+    storage$1[provider] = /* @__PURE__ */ Object.create(null);
+  }
+  const providerStorage = storage$1[provider];
+  if (providerStorage[prefix] === void 0) {
+    providerStorage[prefix] = newStorage(provider, prefix);
+  }
+  return providerStorage[prefix];
+}
+function addIconSet(storage2, data) {
+  if (!quicklyValidateIconSet(data)) {
+    return [];
+  }
+  const t = Date.now();
+  return parseIconSet(data, (name, icon) => {
+    if (icon) {
+      storage2.icons[name] = icon;
+    } else {
+      storage2.missing[name] = t;
+    }
+  });
+}
+function addIconToStorage(storage2, name, icon) {
+  try {
+    if (typeof icon.body === "string") {
+      storage2.icons[name] = Object.freeze(fullIcon(icon));
+      return true;
+    }
+  } catch (err) {
+  }
+  return false;
+}
+function getIconFromStorage(storage2, name) {
+  const value = storage2.icons[name];
+  return value === void 0 ? null : value;
+}
+let simpleNames = false;
+function allowSimpleNames(allow) {
+  if (typeof allow === "boolean") {
+    simpleNames = allow;
+  }
+  return simpleNames;
+}
+function getIconData(name) {
+  const icon = typeof name === "string" ? stringToIcon(name, true, simpleNames) : name;
+  return icon ? getIconFromStorage(getStorage(icon.provider, icon.prefix), icon.name) : null;
+}
+function addIcon(name, data) {
+  const icon = stringToIcon(name, true, simpleNames);
+  if (!icon) {
+    return false;
+  }
+  const storage2 = getStorage(icon.provider, icon.prefix);
+  return addIconToStorage(storage2, icon.name, data);
+}
+function addCollection(data, provider) {
+  if (typeof data !== "object") {
+    return false;
+  }
+  if (typeof provider !== "string") {
+    provider = typeof data.provider === "string" ? data.provider : "";
+  }
+  if (simpleNames && provider === "" && (typeof data.prefix !== "string" || data.prefix === "")) {
+    let added = false;
+    if (quicklyValidateIconSet(data)) {
+      data.prefix = "";
+      parseIconSet(data, (name, icon) => {
+        if (icon && addIcon(name, icon)) {
+          added = true;
+        }
+      });
+    }
+    return added;
+  }
+  if (typeof data.prefix !== "string" || !validateIcon({
+    provider,
+    prefix: data.prefix,
+    name: "a"
+  })) {
+    return false;
+  }
+  const storage2 = getStorage(provider, data.prefix);
+  return !!addIconSet(storage2, data);
+}
+const defaults = Object.freeze({
+  inline: false,
+  width: null,
+  height: null,
+  hAlign: "center",
+  vAlign: "middle",
+  slice: false,
+  hFlip: false,
+  vFlip: false,
+  rotate: 0
+});
+function mergeCustomisations(defaults2, item) {
+  const result = {};
+  for (const key in defaults2) {
+    const attr = key;
+    result[attr] = defaults2[attr];
+    if (item[attr] === void 0) {
+      continue;
+    }
+    const value = item[attr];
+    switch (attr) {
+      case "inline":
+      case "slice":
+        if (typeof value === "boolean") {
+          result[attr] = value;
+        }
+        break;
+      case "hFlip":
+      case "vFlip":
+        if (value === true) {
+          result[attr] = !result[attr];
+        }
+        break;
+      case "hAlign":
+      case "vAlign":
+        if (typeof value === "string" && value !== "") {
+          result[attr] = value;
+        }
+        break;
+      case "width":
+      case "height":
+        if (typeof value === "string" && value !== "" || typeof value === "number" && value || value === null) {
+          result[attr] = value;
+        }
+        break;
+      case "rotate":
+        if (typeof value === "number") {
+          result[attr] += value;
+        }
+        break;
+    }
+  }
+  return result;
+}
+const unitsSplit = /(-?[0-9.]*[0-9]+[0-9.]*)/g;
+const unitsTest = /^-?[0-9.]*[0-9]+[0-9.]*$/g;
+function calculateSize(size2, ratio, precision) {
+  if (ratio === 1) {
+    return size2;
+  }
+  precision = precision === void 0 ? 100 : precision;
+  if (typeof size2 === "number") {
+    return Math.ceil(size2 * ratio * precision) / precision;
+  }
+  if (typeof size2 !== "string") {
+    return size2;
+  }
+  const oldParts = size2.split(unitsSplit);
+  if (oldParts === null || !oldParts.length) {
+    return size2;
+  }
+  const newParts = [];
+  let code = oldParts.shift();
+  let isNumber = unitsTest.test(code);
+  while (true) {
+    if (isNumber) {
+      const num = parseFloat(code);
+      if (isNaN(num)) {
+        newParts.push(code);
+      } else {
+        newParts.push(Math.ceil(num * ratio * precision) / precision);
+      }
+    } else {
+      newParts.push(code);
+    }
+    code = oldParts.shift();
+    if (code === void 0) {
+      return newParts.join("");
+    }
+    isNumber = !isNumber;
+  }
+}
+function preserveAspectRatio(props) {
+  let result = "";
+  switch (props.hAlign) {
+    case "left":
+      result += "xMin";
+      break;
+    case "right":
+      result += "xMax";
+      break;
+    default:
+      result += "xMid";
+  }
+  switch (props.vAlign) {
+    case "top":
+      result += "YMin";
+      break;
+    case "bottom":
+      result += "YMax";
+      break;
+    default:
+      result += "YMid";
+  }
+  result += props.slice ? " slice" : " meet";
+  return result;
+}
+function iconToSVG(icon, customisations) {
+  const box = {
+    left: icon.left,
+    top: icon.top,
+    width: icon.width,
+    height: icon.height
+  };
+  let body = icon.body;
+  [icon, customisations].forEach((props) => {
+    const transformations = [];
+    const hFlip = props.hFlip;
+    const vFlip = props.vFlip;
+    let rotation = props.rotate;
+    if (hFlip) {
+      if (vFlip) {
+        rotation += 2;
+      } else {
+        transformations.push("translate(" + (box.width + box.left).toString() + " " + (0 - box.top).toString() + ")");
+        transformations.push("scale(-1 1)");
+        box.top = box.left = 0;
+      }
+    } else if (vFlip) {
+      transformations.push("translate(" + (0 - box.left).toString() + " " + (box.height + box.top).toString() + ")");
+      transformations.push("scale(1 -1)");
+      box.top = box.left = 0;
+    }
+    let tempValue;
+    if (rotation < 0) {
+      rotation -= Math.floor(rotation / 4) * 4;
+    }
+    rotation = rotation % 4;
+    switch (rotation) {
+      case 1:
+        tempValue = box.height / 2 + box.top;
+        transformations.unshift("rotate(90 " + tempValue.toString() + " " + tempValue.toString() + ")");
+        break;
+      case 2:
+        transformations.unshift("rotate(180 " + (box.width / 2 + box.left).toString() + " " + (box.height / 2 + box.top).toString() + ")");
+        break;
+      case 3:
+        tempValue = box.width / 2 + box.left;
+        transformations.unshift("rotate(-90 " + tempValue.toString() + " " + tempValue.toString() + ")");
+        break;
+    }
+    if (rotation % 2 === 1) {
+      if (box.left !== 0 || box.top !== 0) {
+        tempValue = box.left;
+        box.left = box.top;
+        box.top = tempValue;
+      }
+      if (box.width !== box.height) {
+        tempValue = box.width;
+        box.width = box.height;
+        box.height = tempValue;
+      }
+    }
+    if (transformations.length) {
+      body = '<g transform="' + transformations.join(" ") + '">' + body + "</g>";
+    }
+  });
+  let width, height;
+  if (customisations.width === null && customisations.height === null) {
+    height = "1em";
+    width = calculateSize(height, box.width / box.height);
+  } else if (customisations.width !== null && customisations.height !== null) {
+    width = customisations.width;
+    height = customisations.height;
+  } else if (customisations.height !== null) {
+    height = customisations.height;
+    width = calculateSize(height, box.width / box.height);
+  } else {
+    width = customisations.width;
+    height = calculateSize(width, box.height / box.width);
+  }
+  if (width === "auto") {
+    width = box.width;
+  }
+  if (height === "auto") {
+    height = box.height;
+  }
+  width = typeof width === "string" ? width : width.toString() + "";
+  height = typeof height === "string" ? height : height.toString() + "";
+  const result = {
+    attributes: {
+      width,
+      height,
+      preserveAspectRatio: preserveAspectRatio(customisations),
+      viewBox: box.left.toString() + " " + box.top.toString() + " " + box.width.toString() + " " + box.height.toString()
+    },
+    body
+  };
+  if (customisations.inline) {
+    result.inline = true;
+  }
+  return result;
+}
+const regex = /\sid="(\S+)"/g;
+const randomPrefix = "IconifyId" + Date.now().toString(16) + (Math.random() * 16777216 | 0).toString(16);
+let counter = 0;
+function replaceIDs(body, prefix = randomPrefix) {
+  const ids = [];
+  let match;
+  while (match = regex.exec(body)) {
+    ids.push(match[1]);
+  }
+  if (!ids.length) {
+    return body;
+  }
+  ids.forEach((id) => {
+    const newID = typeof prefix === "function" ? prefix(id) : prefix + (counter++).toString();
+    const escapedID = id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    body = body.replace(new RegExp('([#;"])(' + escapedID + ')([")]|\\.[a-z])', "g"), "$1" + newID + "$3");
+  });
+  return body;
+}
+const storage = /* @__PURE__ */ Object.create(null);
+function setAPIModule(provider, item) {
+  storage[provider] = item;
+}
+function getAPIModule(provider) {
+  return storage[provider] || storage[""];
+}
+function createAPIConfig(source) {
+  let resources;
+  if (typeof source.resources === "string") {
+    resources = [source.resources];
+  } else {
+    resources = source.resources;
+    if (!(resources instanceof Array) || !resources.length) {
+      return null;
+    }
+  }
+  const result = {
+    resources,
+    path: source.path === void 0 ? "/" : source.path,
+    maxURL: source.maxURL ? source.maxURL : 500,
+    rotate: source.rotate ? source.rotate : 750,
+    timeout: source.timeout ? source.timeout : 5e3,
+    random: source.random === true,
+    index: source.index ? source.index : 0,
+    dataAfterTimeout: source.dataAfterTimeout !== false
+  };
+  return result;
+}
+const configStorage = /* @__PURE__ */ Object.create(null);
+const fallBackAPISources = [
+  "https://api.simplesvg.com",
+  "https://api.unisvg.com"
+];
+const fallBackAPI = [];
+while (fallBackAPISources.length > 0) {
+  if (fallBackAPISources.length === 1) {
+    fallBackAPI.push(fallBackAPISources.shift());
+  } else {
+    if (Math.random() > 0.5) {
+      fallBackAPI.push(fallBackAPISources.shift());
+    } else {
+      fallBackAPI.push(fallBackAPISources.pop());
+    }
+  }
+}
+configStorage[""] = createAPIConfig({
+  resources: ["https://api.iconify.design"].concat(fallBackAPI)
+});
+function addAPIProvider(provider, customConfig) {
+  const config2 = createAPIConfig(customConfig);
+  if (config2 === null) {
+    return false;
+  }
+  configStorage[provider] = config2;
+  return true;
+}
+function getAPIConfig(provider) {
+  return configStorage[provider];
+}
+const mergeParams = (base, params) => {
+  let result = base, hasParams = result.indexOf("?") !== -1;
+  function paramToString(value) {
+    switch (typeof value) {
+      case "boolean":
+        return value ? "true" : "false";
+      case "number":
+        return encodeURIComponent(value);
+      case "string":
+        return encodeURIComponent(value);
+      default:
+        throw new Error("Invalid parameter");
+    }
+  }
+  Object.keys(params).forEach((key) => {
+    let value;
+    try {
+      value = paramToString(params[key]);
+    } catch (err) {
+      return;
+    }
+    result += (hasParams ? "&" : "?") + encodeURIComponent(key) + "=" + value;
+    hasParams = true;
+  });
+  return result;
+};
+const maxLengthCache = {};
+const pathCache = {};
+const detectFetch = () => {
+  let callback;
+  try {
+    callback = fetch;
+    if (typeof callback === "function") {
+      return callback;
+    }
+  } catch (err) {
+  }
+  return null;
+};
+let fetchModule = detectFetch();
+function calculateMaxLength(provider, prefix) {
+  const config2 = getAPIConfig(provider);
+  if (!config2) {
+    return 0;
+  }
+  let result;
+  if (!config2.maxURL) {
+    result = 0;
+  } else {
+    let maxHostLength = 0;
+    config2.resources.forEach((item) => {
+      const host = item;
+      maxHostLength = Math.max(maxHostLength, host.length);
+    });
+    const url = mergeParams(prefix + ".json", {
+      icons: ""
+    });
+    result = config2.maxURL - maxHostLength - config2.path.length - url.length;
+  }
+  const cacheKey = provider + ":" + prefix;
+  pathCache[provider] = config2.path;
+  maxLengthCache[cacheKey] = result;
+  return result;
+}
+function shouldAbort(status) {
+  return status === 404;
+}
+const prepare = (provider, prefix, icons) => {
+  const results = [];
+  let maxLength = maxLengthCache[prefix];
+  if (maxLength === void 0) {
+    maxLength = calculateMaxLength(provider, prefix);
+  }
+  const type = "icons";
+  let item = {
+    type,
+    provider,
+    prefix,
+    icons: []
+  };
+  let length = 0;
+  icons.forEach((name, index) => {
+    length += name.length + 1;
+    if (length >= maxLength && index > 0) {
+      results.push(item);
+      item = {
+        type,
+        provider,
+        prefix,
+        icons: []
+      };
+      length = name.length;
+    }
+    item.icons.push(name);
+  });
+  results.push(item);
+  return results;
+};
+function getPath(provider) {
+  if (typeof provider === "string") {
+    if (pathCache[provider] === void 0) {
+      const config2 = getAPIConfig(provider);
+      if (!config2) {
+        return "/";
+      }
+      pathCache[provider] = config2.path;
+    }
+    return pathCache[provider];
+  }
+  return "/";
+}
+const send = (host, params, callback) => {
+  if (!fetchModule) {
+    callback("abort", 424);
+    return;
+  }
+  let path = getPath(params.provider);
+  switch (params.type) {
+    case "icons": {
+      const prefix = params.prefix;
+      const icons = params.icons;
+      const iconsList = icons.join(",");
+      path += mergeParams(prefix + ".json", {
+        icons: iconsList
+      });
+      break;
+    }
+    case "custom": {
+      const uri = params.uri;
+      path += uri.slice(0, 1) === "/" ? uri.slice(1) : uri;
+      break;
+    }
+    default:
+      callback("abort", 400);
+      return;
+  }
+  let defaultError = 503;
+  fetchModule(host + path).then((response) => {
+    const status = response.status;
+    if (status !== 200) {
+      setTimeout(() => {
+        callback(shouldAbort(status) ? "abort" : "next", status);
+      });
+      return;
+    }
+    defaultError = 501;
+    return response.json();
+  }).then((data) => {
+    if (typeof data !== "object" || data === null) {
+      setTimeout(() => {
+        callback("next", defaultError);
+      });
+      return;
+    }
+    setTimeout(() => {
+      callback("success", data);
+    });
+  }).catch(() => {
+    callback("next", defaultError);
+  });
+};
+const fetchAPIModule = {
+  prepare,
+  send
+};
+function sortIcons(icons) {
+  const result = {
+    loaded: [],
+    missing: [],
+    pending: []
+  };
+  const storage2 = /* @__PURE__ */ Object.create(null);
+  icons.sort((a, b) => {
+    if (a.provider !== b.provider) {
+      return a.provider.localeCompare(b.provider);
+    }
+    if (a.prefix !== b.prefix) {
+      return a.prefix.localeCompare(b.prefix);
+    }
+    return a.name.localeCompare(b.name);
+  });
+  let lastIcon = {
+    provider: "",
+    prefix: "",
+    name: ""
+  };
+  icons.forEach((icon) => {
+    if (lastIcon.name === icon.name && lastIcon.prefix === icon.prefix && lastIcon.provider === icon.provider) {
+      return;
+    }
+    lastIcon = icon;
+    const provider = icon.provider;
+    const prefix = icon.prefix;
+    const name = icon.name;
+    if (storage2[provider] === void 0) {
+      storage2[provider] = /* @__PURE__ */ Object.create(null);
+    }
+    const providerStorage = storage2[provider];
+    if (providerStorage[prefix] === void 0) {
+      providerStorage[prefix] = getStorage(provider, prefix);
+    }
+    const localStorage = providerStorage[prefix];
+    let list;
+    if (localStorage.icons[name] !== void 0) {
+      list = result.loaded;
+    } else if (prefix === "" || localStorage.missing[name] !== void 0) {
+      list = result.missing;
+    } else {
+      list = result.pending;
+    }
+    const item = {
+      provider,
+      prefix,
+      name
+    };
+    list.push(item);
+  });
+  return result;
+}
+const callbacks = /* @__PURE__ */ Object.create(null);
+const pendingUpdates = /* @__PURE__ */ Object.create(null);
+function removeCallback(sources, id) {
+  sources.forEach((source) => {
+    const provider = source.provider;
+    if (callbacks[provider] === void 0) {
+      return;
+    }
+    const providerCallbacks = callbacks[provider];
+    const prefix = source.prefix;
+    const items = providerCallbacks[prefix];
+    if (items) {
+      providerCallbacks[prefix] = items.filter((row) => row.id !== id);
+    }
+  });
+}
+function updateCallbacks(provider, prefix) {
+  if (pendingUpdates[provider] === void 0) {
+    pendingUpdates[provider] = /* @__PURE__ */ Object.create(null);
+  }
+  const providerPendingUpdates = pendingUpdates[provider];
+  if (!providerPendingUpdates[prefix]) {
+    providerPendingUpdates[prefix] = true;
+    setTimeout(() => {
+      providerPendingUpdates[prefix] = false;
+      if (callbacks[provider] === void 0 || callbacks[provider][prefix] === void 0) {
+        return;
+      }
+      const items = callbacks[provider][prefix].slice(0);
+      if (!items.length) {
+        return;
+      }
+      const storage2 = getStorage(provider, prefix);
+      let hasPending = false;
+      items.forEach((item) => {
+        const icons = item.icons;
+        const oldLength = icons.pending.length;
+        icons.pending = icons.pending.filter((icon) => {
+          if (icon.prefix !== prefix) {
+            return true;
+          }
+          const name = icon.name;
+          if (storage2.icons[name] !== void 0) {
+            icons.loaded.push({
+              provider,
+              prefix,
+              name
+            });
+          } else if (storage2.missing[name] !== void 0) {
+            icons.missing.push({
+              provider,
+              prefix,
+              name
+            });
+          } else {
+            hasPending = true;
+            return true;
+          }
+          return false;
+        });
+        if (icons.pending.length !== oldLength) {
+          if (!hasPending) {
+            removeCallback([
+              {
+                provider,
+                prefix
+              }
+            ], item.id);
+          }
+          item.callback(icons.loaded.slice(0), icons.missing.slice(0), icons.pending.slice(0), item.abort);
+        }
+      });
+    });
+  }
+}
+let idCounter = 0;
+function storeCallback(callback, icons, pendingSources) {
+  const id = idCounter++;
+  const abort = removeCallback.bind(null, pendingSources, id);
+  if (!icons.pending.length) {
+    return abort;
+  }
+  const item = {
+    id,
+    icons,
+    callback,
+    abort
+  };
+  pendingSources.forEach((source) => {
+    const provider = source.provider;
+    const prefix = source.prefix;
+    if (callbacks[provider] === void 0) {
+      callbacks[provider] = /* @__PURE__ */ Object.create(null);
+    }
+    const providerCallbacks = callbacks[provider];
+    if (providerCallbacks[prefix] === void 0) {
+      providerCallbacks[prefix] = [];
+    }
+    providerCallbacks[prefix].push(item);
+  });
+  return abort;
+}
+function listToIcons(list, validate = true, simpleNames2 = false) {
+  const result = [];
+  list.forEach((item) => {
+    const icon = typeof item === "string" ? stringToIcon(item, false, simpleNames2) : item;
+    if (!validate || validateIcon(icon, simpleNames2)) {
+      result.push({
+        provider: icon.provider,
+        prefix: icon.prefix,
+        name: icon.name
+      });
+    }
+  });
+  return result;
+}
+var defaultConfig = {
+  resources: [],
+  index: 0,
+  timeout: 2e3,
+  rotate: 750,
+  random: false,
+  dataAfterTimeout: false
+};
+function sendQuery(config2, payload, query, done) {
+  const resourcesCount = config2.resources.length;
+  const startIndex = config2.random ? Math.floor(Math.random() * resourcesCount) : config2.index;
+  let resources;
+  if (config2.random) {
+    let list = config2.resources.slice(0);
+    resources = [];
+    while (list.length > 1) {
+      const nextIndex = Math.floor(Math.random() * list.length);
+      resources.push(list[nextIndex]);
+      list = list.slice(0, nextIndex).concat(list.slice(nextIndex + 1));
+    }
+    resources = resources.concat(list);
+  } else {
+    resources = config2.resources.slice(startIndex).concat(config2.resources.slice(0, startIndex));
+  }
+  const startTime = Date.now();
+  let status = "pending";
+  let queriesSent = 0;
+  let lastError;
+  let timer = null;
+  let queue = [];
+  let doneCallbacks = [];
+  if (typeof done === "function") {
+    doneCallbacks.push(done);
+  }
+  function resetTimer() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+  function abort() {
+    if (status === "pending") {
+      status = "aborted";
+    }
+    resetTimer();
+    queue.forEach((item) => {
+      if (item.status === "pending") {
+        item.status = "aborted";
+      }
+    });
+    queue = [];
+  }
+  function subscribe(callback, overwrite) {
+    if (overwrite) {
+      doneCallbacks = [];
+    }
+    if (typeof callback === "function") {
+      doneCallbacks.push(callback);
+    }
+  }
+  function getQueryStatus() {
+    return {
+      startTime,
+      payload,
+      status,
+      queriesSent,
+      queriesPending: queue.length,
+      subscribe,
+      abort
+    };
+  }
+  function failQuery() {
+    status = "failed";
+    doneCallbacks.forEach((callback) => {
+      callback(void 0, lastError);
+    });
+  }
+  function clearQueue() {
+    queue.forEach((item) => {
+      if (item.status === "pending") {
+        item.status = "aborted";
+      }
+    });
+    queue = [];
+  }
+  function moduleResponse(item, response, data) {
+    const isError = response !== "success";
+    queue = queue.filter((queued) => queued !== item);
+    switch (status) {
+      case "pending":
+        break;
+      case "failed":
+        if (isError || !config2.dataAfterTimeout) {
+          return;
+        }
+        break;
+      default:
+        return;
+    }
+    if (response === "abort") {
+      lastError = data;
+      failQuery();
+      return;
+    }
+    if (isError) {
+      lastError = data;
+      if (!queue.length) {
+        if (!resources.length) {
+          failQuery();
+        } else {
+          execNext();
+        }
+      }
+      return;
+    }
+    resetTimer();
+    clearQueue();
+    if (!config2.random) {
+      const index = config2.resources.indexOf(item.resource);
+      if (index !== -1 && index !== config2.index) {
+        config2.index = index;
+      }
+    }
+    status = "completed";
+    doneCallbacks.forEach((callback) => {
+      callback(data);
+    });
+  }
+  function execNext() {
+    if (status !== "pending") {
+      return;
+    }
+    resetTimer();
+    const resource = resources.shift();
+    if (resource === void 0) {
+      if (queue.length) {
+        timer = setTimeout(() => {
+          resetTimer();
+          if (status === "pending") {
+            clearQueue();
+            failQuery();
+          }
+        }, config2.timeout);
+        return;
+      }
+      failQuery();
+      return;
+    }
+    const item = {
+      status: "pending",
+      resource,
+      callback: (status2, data) => {
+        moduleResponse(item, status2, data);
+      }
+    };
+    queue.push(item);
+    queriesSent++;
+    timer = setTimeout(execNext, config2.rotate);
+    query(resource, payload, item.callback);
+  }
+  setTimeout(execNext);
+  return getQueryStatus;
+}
+function setConfig(config2) {
+  if (typeof config2 !== "object" || typeof config2.resources !== "object" || !(config2.resources instanceof Array) || !config2.resources.length) {
+    throw new Error("Invalid Reduncancy configuration");
+  }
+  const newConfig = /* @__PURE__ */ Object.create(null);
+  let key;
+  for (key in defaultConfig) {
+    if (config2[key] !== void 0) {
+      newConfig[key] = config2[key];
+    } else {
+      newConfig[key] = defaultConfig[key];
+    }
+  }
+  return newConfig;
+}
+function initRedundancy(cfg) {
+  const config2 = setConfig(cfg);
+  let queries = [];
+  function cleanup() {
+    queries = queries.filter((item) => item().status === "pending");
+  }
+  function query(payload, queryCallback, doneCallback) {
+    const query2 = sendQuery(config2, payload, queryCallback, (data, error) => {
+      cleanup();
+      if (doneCallback) {
+        doneCallback(data, error);
+      }
+    });
+    queries.push(query2);
+    return query2;
+  }
+  function find(callback) {
+    const result = queries.find((value) => {
+      return callback(value);
+    });
+    return result !== void 0 ? result : null;
+  }
+  const instance = {
+    query,
+    find,
+    setIndex: (index) => {
+      config2.index = index;
+    },
+    getIndex: () => config2.index,
+    cleanup
+  };
+  return instance;
+}
+function emptyCallback$1() {
+}
+const redundancyCache = /* @__PURE__ */ Object.create(null);
+function getRedundancyCache(provider) {
+  if (redundancyCache[provider] === void 0) {
+    const config2 = getAPIConfig(provider);
+    if (!config2) {
+      return;
+    }
+    const redundancy = initRedundancy(config2);
+    const cachedReundancy = {
+      config: config2,
+      redundancy
+    };
+    redundancyCache[provider] = cachedReundancy;
+  }
+  return redundancyCache[provider];
+}
+function sendAPIQuery(target, query, callback) {
+  let redundancy;
+  let send2;
+  if (typeof target === "string") {
+    const api = getAPIModule(target);
+    if (!api) {
+      callback(void 0, 424);
+      return emptyCallback$1;
+    }
+    send2 = api.send;
+    const cached = getRedundancyCache(target);
+    if (cached) {
+      redundancy = cached.redundancy;
+    }
+  } else {
+    const config2 = createAPIConfig(target);
+    if (config2) {
+      redundancy = initRedundancy(config2);
+      const moduleKey = target.resources ? target.resources[0] : "";
+      const api = getAPIModule(moduleKey);
+      if (api) {
+        send2 = api.send;
+      }
+    }
+  }
+  if (!redundancy || !send2) {
+    callback(void 0, 424);
+    return emptyCallback$1;
+  }
+  return redundancy.query(query, send2, callback)().abort;
+}
+const cache = {};
+function emptyCallback() {
+}
+const pendingIcons = /* @__PURE__ */ Object.create(null);
+const iconsToLoad = /* @__PURE__ */ Object.create(null);
+const loaderFlags = /* @__PURE__ */ Object.create(null);
+const queueFlags = /* @__PURE__ */ Object.create(null);
+function loadedNewIcons(provider, prefix) {
+  if (loaderFlags[provider] === void 0) {
+    loaderFlags[provider] = /* @__PURE__ */ Object.create(null);
+  }
+  const providerLoaderFlags = loaderFlags[provider];
+  if (!providerLoaderFlags[prefix]) {
+    providerLoaderFlags[prefix] = true;
+    setTimeout(() => {
+      providerLoaderFlags[prefix] = false;
+      updateCallbacks(provider, prefix);
+    });
+  }
+}
+const errorsCache = /* @__PURE__ */ Object.create(null);
+function loadNewIcons(provider, prefix, icons) {
+  function err() {
+    const key = (provider === "" ? "" : "@" + provider + ":") + prefix;
+    const time = Math.floor(Date.now() / 6e4);
+    if (errorsCache[key] < time) {
+      errorsCache[key] = time;
+      console.error('Unable to retrieve icons for "' + key + '" because API is not configured properly.');
+    }
+  }
+  if (iconsToLoad[provider] === void 0) {
+    iconsToLoad[provider] = /* @__PURE__ */ Object.create(null);
+  }
+  const providerIconsToLoad = iconsToLoad[provider];
+  if (queueFlags[provider] === void 0) {
+    queueFlags[provider] = /* @__PURE__ */ Object.create(null);
+  }
+  const providerQueueFlags = queueFlags[provider];
+  if (pendingIcons[provider] === void 0) {
+    pendingIcons[provider] = /* @__PURE__ */ Object.create(null);
+  }
+  const providerPendingIcons = pendingIcons[provider];
+  if (providerIconsToLoad[prefix] === void 0) {
+    providerIconsToLoad[prefix] = icons;
+  } else {
+    providerIconsToLoad[prefix] = providerIconsToLoad[prefix].concat(icons).sort();
+  }
+  if (!providerQueueFlags[prefix]) {
+    providerQueueFlags[prefix] = true;
+    setTimeout(() => {
+      providerQueueFlags[prefix] = false;
+      const icons2 = providerIconsToLoad[prefix];
+      delete providerIconsToLoad[prefix];
+      const api = getAPIModule(provider);
+      if (!api) {
+        err();
+        return;
+      }
+      const params = api.prepare(provider, prefix, icons2);
+      params.forEach((item) => {
+        sendAPIQuery(provider, item, (data, error) => {
+          const storage2 = getStorage(provider, prefix);
+          if (typeof data !== "object") {
+            if (error !== 404) {
+              return;
+            }
+            const t = Date.now();
+            item.icons.forEach((name) => {
+              storage2.missing[name] = t;
+            });
+          } else {
+            try {
+              const parsed = addIconSet(storage2, data);
+              if (!parsed.length) {
+                return;
+              }
+              const pending = providerPendingIcons[prefix];
+              parsed.forEach((name) => {
+                delete pending[name];
+              });
+              if (cache.store) {
+                cache.store(provider, data);
+              }
+            } catch (err2) {
+              console.error(err2);
+            }
+          }
+          loadedNewIcons(provider, prefix);
+        });
+      });
+    });
+  }
+}
+const loadIcons = (icons, callback) => {
+  const cleanedIcons = listToIcons(icons, true, allowSimpleNames());
+  const sortedIcons = sortIcons(cleanedIcons);
+  if (!sortedIcons.pending.length) {
+    let callCallback = true;
+    if (callback) {
+      setTimeout(() => {
+        if (callCallback) {
+          callback(sortedIcons.loaded, sortedIcons.missing, sortedIcons.pending, emptyCallback);
+        }
+      });
+    }
+    return () => {
+      callCallback = false;
+    };
+  }
+  const newIcons = /* @__PURE__ */ Object.create(null);
+  const sources = [];
+  let lastProvider, lastPrefix;
+  sortedIcons.pending.forEach((icon) => {
+    const provider = icon.provider;
+    const prefix = icon.prefix;
+    if (prefix === lastPrefix && provider === lastProvider) {
+      return;
+    }
+    lastProvider = provider;
+    lastPrefix = prefix;
+    sources.push({
+      provider,
+      prefix
+    });
+    if (pendingIcons[provider] === void 0) {
+      pendingIcons[provider] = /* @__PURE__ */ Object.create(null);
+    }
+    const providerPendingIcons = pendingIcons[provider];
+    if (providerPendingIcons[prefix] === void 0) {
+      providerPendingIcons[prefix] = /* @__PURE__ */ Object.create(null);
+    }
+    if (newIcons[provider] === void 0) {
+      newIcons[provider] = /* @__PURE__ */ Object.create(null);
+    }
+    const providerNewIcons = newIcons[provider];
+    if (providerNewIcons[prefix] === void 0) {
+      providerNewIcons[prefix] = [];
+    }
+  });
+  const time = Date.now();
+  sortedIcons.pending.forEach((icon) => {
+    const provider = icon.provider;
+    const prefix = icon.prefix;
+    const name = icon.name;
+    const pendingQueue = pendingIcons[provider][prefix];
+    if (pendingQueue[name] === void 0) {
+      pendingQueue[name] = time;
+      newIcons[provider][prefix].push(name);
+    }
+  });
+  sources.forEach((source) => {
+    const provider = source.provider;
+    const prefix = source.prefix;
+    if (newIcons[provider][prefix].length) {
+      loadNewIcons(provider, prefix, newIcons[provider][prefix]);
+    }
+  });
+  return callback ? storeCallback(callback, sortedIcons, sources) : emptyCallback;
+};
+const cacheVersion = "iconify2";
+const cachePrefix = "iconify";
+const countKey = cachePrefix + "-count";
+const versionKey = cachePrefix + "-version";
+const hour = 36e5;
+const cacheExpiration = 168;
+const config = {
+  local: true,
+  session: true
+};
+let loaded = false;
+const count = {
+  local: 0,
+  session: 0
+};
+const emptyList = {
+  local: [],
+  session: []
+};
+let _window = typeof window === "undefined" ? {} : window;
+function getGlobal(key) {
+  const attr = key + "Storage";
+  try {
+    if (_window && _window[attr] && typeof _window[attr].length === "number") {
+      return _window[attr];
+    }
+  } catch (err) {
+  }
+  config[key] = false;
+  return null;
+}
+function setCount(storage2, key, value) {
+  try {
+    storage2.setItem(countKey, value.toString());
+    count[key] = value;
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+function getCount(storage2) {
+  const count2 = storage2.getItem(countKey);
+  if (count2) {
+    const total = parseInt(count2);
+    return total ? total : 0;
+  }
+  return 0;
+}
+function initCache(storage2, key) {
+  try {
+    storage2.setItem(versionKey, cacheVersion);
+  } catch (err) {
+  }
+  setCount(storage2, key, 0);
+}
+function destroyCache(storage2) {
+  try {
+    const total = getCount(storage2);
+    for (let i = 0; i < total; i++) {
+      storage2.removeItem(cachePrefix + i.toString());
+    }
+  } catch (err) {
+  }
+}
+const loadCache = () => {
+  if (loaded) {
+    return;
+  }
+  loaded = true;
+  const minTime = Math.floor(Date.now() / hour) - cacheExpiration;
+  function load(key) {
+    const func = getGlobal(key);
+    if (!func) {
+      return;
+    }
+    const getItem = (index) => {
+      const name = cachePrefix + index.toString();
+      const item = func.getItem(name);
+      if (typeof item !== "string") {
+        return false;
+      }
+      let valid = true;
+      try {
+        const data = JSON.parse(item);
+        if (typeof data !== "object" || typeof data.cached !== "number" || data.cached < minTime || typeof data.provider !== "string" || typeof data.data !== "object" || typeof data.data.prefix !== "string") {
+          valid = false;
+        } else {
+          const provider = data.provider;
+          const prefix = data.data.prefix;
+          const storage2 = getStorage(provider, prefix);
+          valid = addIconSet(storage2, data.data).length > 0;
+        }
+      } catch (err) {
+        valid = false;
+      }
+      if (!valid) {
+        func.removeItem(name);
+      }
+      return valid;
+    };
+    try {
+      const version = func.getItem(versionKey);
+      if (version !== cacheVersion) {
+        if (version) {
+          destroyCache(func);
+        }
+        initCache(func, key);
+        return;
+      }
+      let total = getCount(func);
+      for (let i = total - 1; i >= 0; i--) {
+        if (!getItem(i)) {
+          if (i === total - 1) {
+            total--;
+          } else {
+            emptyList[key].push(i);
+          }
+        }
+      }
+      setCount(func, key, total);
+    } catch (err) {
+    }
+  }
+  for (const key in config) {
+    load(key);
+  }
+};
+const storeCache = (provider, data) => {
+  if (!loaded) {
+    loadCache();
+  }
+  function store(key) {
+    if (!config[key]) {
+      return false;
+    }
+    const func = getGlobal(key);
+    if (!func) {
+      return false;
+    }
+    let index = emptyList[key].shift();
+    if (index === void 0) {
+      index = count[key];
+      if (!setCount(func, key, index + 1)) {
+        return false;
+      }
+    }
+    try {
+      const item = {
+        cached: Math.floor(Date.now() / hour),
+        provider,
+        data
+      };
+      func.setItem(cachePrefix + index.toString(), JSON.stringify(item));
+    } catch (err) {
+      return false;
+    }
+    return true;
+  }
+  if (!Object.keys(data.icons).length) {
+    return;
+  }
+  if (data.not_found) {
+    data = Object.assign({}, data);
+    delete data.not_found;
+  }
+  if (!store("local")) {
+    store("session");
+  }
+};
+const separator = /[\s,]+/;
+function flipFromString(custom, flip2) {
+  flip2.split(separator).forEach((str) => {
+    const value = str.trim();
+    switch (value) {
+      case "horizontal":
+        custom.hFlip = true;
+        break;
+      case "vertical":
+        custom.vFlip = true;
+        break;
+    }
+  });
+}
+function alignmentFromString(custom, align) {
+  align.split(separator).forEach((str) => {
+    const value = str.trim();
+    switch (value) {
+      case "left":
+      case "center":
+      case "right":
+        custom.hAlign = value;
+        break;
+      case "top":
+      case "middle":
+      case "bottom":
+        custom.vAlign = value;
+        break;
+      case "slice":
+      case "crop":
+        custom.slice = true;
+        break;
+      case "meet":
+        custom.slice = false;
+    }
+  });
+}
+function rotateFromString(value, defaultValue = 0) {
+  const units = value.replace(/^-?[0-9.]*/, "");
+  function cleanup(value2) {
+    while (value2 < 0) {
+      value2 += 4;
+    }
+    return value2 % 4;
+  }
+  if (units === "") {
+    const num = parseInt(value);
+    return isNaN(num) ? 0 : cleanup(num);
+  } else if (units !== value) {
+    let split = 0;
+    switch (units) {
+      case "%":
+        split = 25;
+        break;
+      case "deg":
+        split = 90;
+    }
+    if (split) {
+      let num = parseFloat(value.slice(0, value.length - units.length));
+      if (isNaN(num)) {
+        return 0;
+      }
+      num = num / split;
+      return num % 1 === 0 ? cleanup(num) : 0;
+    }
+  }
+  return defaultValue;
+}
+const svgDefaults = {
+  "xmlns": "http://www.w3.org/2000/svg",
+  "xmlns:xlink": "http://www.w3.org/1999/xlink",
+  "aria-hidden": true,
+  "role": "img"
+};
+let customisationAliases = {};
+["horizontal", "vertical"].forEach((prefix) => {
+  ["Align", "Flip"].forEach((suffix) => {
+    const attr = prefix.slice(0, 1) + suffix;
+    const value = {
+      attr,
+      boolean: suffix === "Flip"
+    };
+    customisationAliases[prefix + "-" + suffix.toLowerCase()] = value;
+    customisationAliases[prefix.slice(0, 1) + "-" + suffix.toLowerCase()] = value;
+    customisationAliases[prefix + suffix] = value;
+  });
+});
+const render = (icon, props) => {
+  const customisations = mergeCustomisations(defaults, props);
+  const componentProps = __spreadValues({}, svgDefaults);
+  let style = typeof props.style === "object" && !(props.style instanceof Array) ? __spreadValues({}, props.style) : {};
+  for (let key in props) {
+    const value = props[key];
+    if (value === void 0) {
+      continue;
+    }
+    switch (key) {
+      case "icon":
+      case "style":
+      case "onLoad":
+        break;
+      case "inline":
+      case "hFlip":
+      case "vFlip":
+        customisations[key] = value === true || value === "true" || value === 1;
+        break;
+      case "flip":
+        if (typeof value === "string") {
+          flipFromString(customisations, value);
+        }
+        break;
+      case "align":
+        if (typeof value === "string") {
+          alignmentFromString(customisations, value);
+        }
+        break;
+      case "color":
+        style.color = value;
+        break;
+      case "rotate":
+        if (typeof value === "string") {
+          customisations[key] = rotateFromString(value);
+        } else if (typeof value === "number") {
+          customisations[key] = value;
+        }
+        break;
+      case "ariaHidden":
+      case "aria-hidden":
+        if (value !== true && value !== "true") {
+          delete componentProps["aria-hidden"];
+        }
+        break;
+      default:
+        if (customisationAliases[key] !== void 0) {
+          if (customisationAliases[key].boolean && (value === true || value === "true" || value === 1)) {
+            customisations[customisationAliases[key].attr] = true;
+          } else if (!customisationAliases[key].boolean && typeof value === "string" && value !== "") {
+            customisations[customisationAliases[key].attr] = value;
+          }
+        } else if (defaults[key] === void 0) {
+          componentProps[key] = value;
+        }
+    }
+  }
+  const item = iconToSVG(icon, customisations);
+  for (let key in item.attributes) {
+    componentProps[key] = item.attributes[key];
+  }
+  if (item.inline && style.verticalAlign === void 0 && style["vertical-align"] === void 0) {
+    style.verticalAlign = "-0.125em";
+  }
+  let localCounter = 0;
+  let id = props.id;
+  if (typeof id === "string") {
+    id = id.replace(/-/g, "_");
+  }
+  componentProps["innerHTML"] = replaceIDs(item.body, id ? () => id + "ID" + localCounter++ : "iconifyVue");
+  if (Object.keys(style).length > 0) {
+    componentProps["style"] = style;
+  }
+  return h("svg", componentProps);
+};
+allowSimpleNames(true);
+setAPIModule("", fetchAPIModule);
+if (typeof document !== "undefined" && typeof window !== "undefined") {
+  cache.store = storeCache;
+  loadCache();
+  const _window2 = window;
+  if (_window2.IconifyPreload !== void 0) {
+    const preload = _window2.IconifyPreload;
+    const err = "Invalid IconifyPreload syntax.";
+    if (typeof preload === "object" && preload !== null) {
+      (preload instanceof Array ? preload : [preload]).forEach((item) => {
+        try {
+          if (typeof item !== "object" || item === null || item instanceof Array || typeof item.icons !== "object" || typeof item.prefix !== "string" || !addCollection(item)) {
+            console.error(err);
+          }
+        } catch (e) {
+          console.error(err);
+        }
+      });
+    }
+  }
+  if (_window2.IconifyProviders !== void 0) {
+    const providers = _window2.IconifyProviders;
+    if (typeof providers === "object" && providers !== null) {
+      for (let key in providers) {
+        const err = "IconifyProviders[" + key + "] is invalid.";
+        try {
+          const value = providers[key];
+          if (typeof value !== "object" || !value || value.resources === void 0) {
+            continue;
+          }
+          if (!addAPIProvider(key, value)) {
+            console.error(err);
+          }
+        } catch (e) {
+          console.error(err);
+        }
+      }
+    }
+  }
+}
+const emptyIcon = fullIcon({
+  body: ""
+});
+const Icon = defineComponent({
+  inheritAttrs: false,
+  data() {
+    return {
+      iconMounted: false,
+      counter: 0
+    };
+  },
+  mounted() {
+    this._name = "";
+    this._loadingIcon = null;
+    this.iconMounted = true;
+  },
+  unmounted() {
+    this.abortLoading();
+  },
+  methods: {
+    abortLoading() {
+      if (this._loadingIcon) {
+        this._loadingIcon.abort();
+        this._loadingIcon = null;
+      }
+    },
+    getIcon(icon, onload) {
+      if (typeof icon === "object" && icon !== null && typeof icon.body === "string") {
+        this._name = "";
+        this.abortLoading();
+        return {
+          data: fullIcon(icon)
+        };
+      }
+      let iconName;
+      if (typeof icon !== "string" || (iconName = stringToIcon(icon, false, true)) === null) {
+        this.abortLoading();
+        return null;
+      }
+      const data = getIconData(iconName);
+      if (data === null) {
+        if (!this._loadingIcon || this._loadingIcon.name !== icon) {
+          this.abortLoading();
+          this._name = "";
+          this._loadingIcon = {
+            name: icon,
+            abort: loadIcons([iconName], () => {
+              this.counter++;
+            })
+          };
+        }
+        return null;
+      }
+      this.abortLoading();
+      if (this._name !== icon) {
+        this._name = icon;
+        if (onload) {
+          onload(icon);
+        }
+      }
+      const classes = ["iconify"];
+      if (iconName.prefix !== "") {
+        classes.push("iconify--" + iconName.prefix);
+      }
+      if (iconName.provider !== "") {
+        classes.push("iconify--" + iconName.provider);
+      }
+      return { data, classes };
+    }
+  },
+  render() {
+    this.counter;
+    const props = this.$attrs;
+    const icon = this.iconMounted ? this.getIcon(props.icon, props.onLoad) : null;
+    if (!icon) {
+      return render(emptyIcon, props);
+    }
+    let newProps = props;
+    if (icon.classes) {
+      newProps = __spreadProps(__spreadValues({}, props), {
+        class: (typeof props["class"] === "string" ? props["class"] + " " : "") + icon.classes.join(" ")
+      });
+    }
+    return render(icon.data, newProps);
+  }
+});
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+const isClient = typeof window !== "undefined";
+const isString = (val) => typeof val === "string";
+const noop = () => {
+};
+function useTimeoutFn(cb, interval, options = {}) {
+  const {
+    immediate = true
+  } = options;
+  const isPending = ref(false);
+  let timer = null;
+  function clear() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+  function stop() {
+    isPending.value = false;
+    clear();
+  }
+  function start(...args) {
+    clear();
+    isPending.value = true;
+    timer = setTimeout(() => {
+      isPending.value = false;
+      timer = null;
+      cb(...args);
+    }, unref(interval));
+  }
+  if (immediate) {
+    isPending.value = true;
+    if (isClient)
+      start();
+  }
+  tryOnScopeDispose(stop);
+  return {
+    isPending,
+    start,
+    stop
+  };
+}
+function unrefElement(elRef) {
+  var _a2;
+  const plain = unref(elRef);
+  return (_a2 = plain == null ? void 0 : plain.$el) != null ? _a2 : plain;
+}
+const defaultWindow = isClient ? window : void 0;
+isClient ? window.document : void 0;
+const defaultNavigator = isClient ? window.navigator : void 0;
+isClient ? window.location : void 0;
+function useEventListener(...args) {
+  let target;
+  let event;
+  let listener;
+  let options;
+  if (isString(args[0])) {
+    [event, listener, options] = args;
+    target = defaultWindow;
+  } else {
+    [target, event, listener, options] = args;
+  }
+  if (!target)
+    return noop;
+  let cleanup = noop;
+  const stopWatch = watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (!el)
+      return;
+    el.addEventListener(event, listener, options);
+    cleanup = () => {
+      el.removeEventListener(event, listener, options);
+      cleanup = noop;
+    };
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
+function useClipboard(options = {}) {
+  const {
+    navigator: navigator2 = defaultNavigator,
+    read = false,
+    source,
+    copiedDuring = 1500
+  } = options;
+  const events = ["copy", "cut"];
+  const isSupported = Boolean(navigator2 && "clipboard" in navigator2);
+  const text = ref("");
+  const copied = ref(false);
+  const timeout = useTimeoutFn(() => copied.value = false, copiedDuring);
+  function updateText() {
+    navigator2.clipboard.readText().then((value) => {
+      text.value = value;
+    });
+  }
+  if (isSupported && read) {
+    for (const event of events)
+      useEventListener(event, updateText);
+  }
+  async function copy(value = unref(source)) {
+    if (isSupported && value != null) {
+      await navigator2.clipboard.writeText(value);
+      text.value = value;
+      copied.value = true;
+      timeout.start();
+    }
+  }
+  return {
+    isSupported,
+    text,
+    copied,
+    copy
+  };
+}
+const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+const globalKey = "__vueuse_ssr_handlers__";
+_global[globalKey] = _global[globalKey] || {};
+_global[globalKey];
+var _a, _b;
+isClient && (window == null ? void 0 : window.navigator) && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.platform) && /iP(ad|hone|od)/.test((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.platform);
+const __default__$1 = {
+  name: "HstCopyIcon"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+  props: {
+    content: null
+  },
+  setup(__props) {
+    const props = __props;
+    const { copy, copied } = useClipboard();
+    const action = () => copy(props.content);
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createBlock(unref(Icon), {
+        icon: "carbon:copy-file",
+        class: "htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer",
+        onClick: _cache[0] || (_cache[0] = ($event) => action())
+      }, null, 512)), [
+        [unref(VTooltip), {
+          content: "Copied!",
+          triggers: [],
+          shown: unref(copied),
+          distance: 12,
+          delay: 0
+        }]
+      ]);
+    };
+  }
+}));
+const _hoisted_1 = {
+  key: 0,
+  class: "htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(100px,1fr))] htw-m-4"
+};
+const _hoisted_2 = { class: "htw-flex htw-gap-1" };
+const _hoisted_3 = { class: "htw-my-0" };
+const _hoisted_4 = { class: "htw-flex htw-gap-1" };
+const _hoisted_5 = { class: "htw-my-0 htw-opacity-50" };
+const __default__ = {
+  name: "HstColorShades"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  props: {
+    shades: null,
+    getName: null,
+    search: null
+  },
+  setup(__props) {
+    const props = __props;
+    const shadesWithName = computed(() => {
+      const shades = props.shades;
+      const getName = props.getName;
+      return Object.entries(shades).map(([key, color]) => {
+        const name = getName ? getName(key, color) : key;
+        return {
+          key,
+          color,
+          name
+        };
+      });
+    });
+    const displayedShades = computed(() => {
+      let list = shadesWithName.value;
+      if (props.search) {
+        const reg = new RegExp(props.search, "i");
+        list = list.filter(({ name }) => reg.test(name));
+      }
+      return list;
+    });
+    return (_ctx, _cache) => {
+      return unref(displayedShades).length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayedShades), (shade) => {
+          return openBlock(), createElementBlock("div", {
+            key: shade.key,
+            class: "htw-flex htw-flex-col htw-gap-2 htw-group"
+          }, [
+            renderSlot(_ctx.$slots, "default", {
+              color: shade.color
+            }, () => [
+              createElementVNode("div", {
+                class: "htw-rounded-full htw-w-16 htw-h-16",
+                style: normalizeStyle({
+                  backgroundColor: shade.color
+                })
+              }, null, 4)
+            ]),
+            createElementVNode("div", null, [
+              createElementVNode("div", _hoisted_2, [
+                createElementVNode("pre", _hoisted_3, toDisplayString(shade.name), 1),
+                createVNode(_sfc_main$1, {
+                  content: shade.name,
+                  class: "htw-hidden group-hover:htw-block"
+                }, null, 8, ["content"])
+              ]),
+              createElementVNode("div", _hoisted_4, [
+                createElementVNode("pre", _hoisted_5, toDisplayString(shade.color), 1),
+                createVNode(_sfc_main$1, {
+                  content: shade.color,
+                  class: "htw-hidden group-hover:htw-block"
+                }, null, 8, ["content"])
+              ])
+            ])
+          ]);
+        }), 128))
+      ])) : createCommentVNode("", true);
+    };
+  }
+}));
+const HstCheckbox = _sfc_main$5;
+const HstText = _sfc_main$4;
+const HstNumber = _sfc_main$3;
+const HstTextarea = _sfc_main$2;
+const HstColorShades = _sfc_main;
+const HstCopyIcon = _sfc_main$1;
 function registerVueComponents(app) {
-  app.component("HstCheckbox", _sfc_main$3);
-  app.component("HstText", _sfc_main$2);
-  app.component("HstNumber", _sfc_main$1);
-  app.component("HstTextarea", _sfc_main);
+  app.component("HstCheckbox", _sfc_main$5);
+  app.component("HstText", _sfc_main$4);
+  app.component("HstNumber", _sfc_main$3);
+  app.component("HstTextarea", _sfc_main$2);
 }
-export { HstCheckbox, HstNumber, HstText, HstTextarea, registerVueComponents };
+export { HstCheckbox, HstColorShades, HstCopyIcon, HstNumber, HstText, HstTextarea, registerVueComponents };