@strands.gg/accui 2.11.23 → 2.11.25

package/dist/index.es.js

@@ -1,9 +1,9 @@
-import { defineComponent, computed, provide, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, renderSlot, Teleport, createCommentVNode, toDisplayString, createTextVNode, unref, normalizeStyle, useSlots, createVNode, Fragment as Fragment$1, withCtx, getCurrentInstance, resolveDynamicComponent, resolveComponent, createSlots, useAttrs, h as h$1, ref, nextTick, withModifiers, renderList, watch, toRefs, withDirectives, vModelSelect, watchEffect, onBeforeUnmount, shallowRef, markRaw, customRef, useCssVars, mergeProps, reactive, createStaticVNode, vModelText, Transition, inject, withKeys, isMemoSame } from "vue";
+import { defineComponent, computed, provide, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, renderSlot, Teleport, createCommentVNode, toDisplayString, createTextVNode, unref, normalizeStyle, useSlots, createVNode, Fragment as Fragment$1, withCtx, getCurrentInstance, resolveDynamicComponent, resolveComponent, ref, nextTick, normalizeProps, mergeProps, createSlots, useAttrs, h as h$1, withModifiers, renderList, watch, toRefs, withDirectives, vModelSelect, watchEffect, onBeforeUnmount, shallowRef, markRaw, customRef, useCssVars, reactive, createStaticVNode, vModelText, Transition, inject, withKeys, isMemoSame } from "vue";
 import { u as useStrandsConfig, p as provideStrandsConfig } from "./useStrandsConfig-XmPqJn_B.es.js";
 import { s } from "./useStrandsConfig-XmPqJn_B.es.js";
 import { u as useStrandsAuth } from "./useStrandsAuth-Dca-zFQT.es.js";
 const _hoisted_1$U = { class: "app-content" };
-const _hoisted_2$M = {
+const _hoisted_2$N = {
   key: 0,
   class: "ui-app-loading-overlay"
 };
@@ -64,7 +64,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
           _cache[0] || (_cache[0] = createElementVNode("div", { class: "ui-app-notifications" }, null, -1))
         ])),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
-          isGlobalLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2$M, [
+          isGlobalLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2$N, [
             createElementVNode("div", _hoisted_3$J, [
               _cache[1] || (_cache[1] = createElementVNode("div", { class: "ui-app-loading-spinner" }, null, -1)),
               _ctx.loadingMessage ? (openBlock(), createElementBlock("p", _hoisted_4$H, toDisplayString(_ctx.loadingMessage), 1)) : createCommentVNode("", true)
@@ -84,7 +84,7 @@ const _export_sfc = (sfc, props) => {
 };
 const UiApp = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["__scopeId", "data-v-f18c1706"]]);
 const _hoisted_1$T = { class: "accui-component-scope" };
-const _hoisted_2$L = { class: "alert-content" };
+const _hoisted_2$M = { class: "alert-content" };
 const _hoisted_3$I = { class: "alert-icon-container" };
 const _hoisted_4$G = {
   class: "alert-main-icon",
@@ -139,7 +139,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
           class: normalizeClass(alertClasses.value),
           role: "alert"
         }, [
-          createElementVNode("div", _hoisted_2$L, [
+          createElementVNode("div", _hoisted_2$M, [
             createElementVNode("div", _hoisted_3$I, [
               (openBlock(), createElementBlock("svg", _hoisted_4$G, [
                 createElementVNode("path", {
@@ -194,7 +194,7 @@ const _hoisted_1$S = {
   key: 0,
   class: "loader-icon"
 };
-const _hoisted_2$K = ["width", "height"];
+const _hoisted_2$L = ["width", "height"];
 const _hoisted_3$H = ["d"];
 const _hoisted_4$F = ["stroke-width"];
 const _hoisted_5$z = ["stroke-width"];
@@ -267,7 +267,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
               "stroke-linejoin": "round",
               class: "loader-animated-path"
             }, null, 8, _hoisted_5$z)
-          ], 8, _hoisted_2$K))
+          ], 8, _hoisted_2$L))
         ])) : _ctx.variant === "circle" ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: "loader-circle",
@@ -311,7 +311,7 @@ const _hoisted_1$R = {
   key: 0,
   class: "button-loading-content"
 };
-const _hoisted_2$J = { key: 0 };
+const _hoisted_2$K = { key: 0 };
 const _hoisted_3$G = {
   key: 0,
   class: "leading-icon"
@@ -369,7 +369,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           centered: false,
           color: "white"
         }, null, 8, ["size"]),
-        !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_2$J, toDisplayString(_ctx.loadingText || "Loading..."), 1)) : createCommentVNode("", true)
+        !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_2$K, toDisplayString(_ctx.loadingText || "Loading..."), 1)) : createCommentVNode("", true)
       ])) : (openBlock(), createElementBlock("span", {
         key: 1,
         class: normalizeClass(["button-content", sizeClass.value])
@@ -582,8 +582,148 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$P = ["type", "disabled", "tabindex"];
+const _hoisted_1$P = { class: "ui-tooltip-content" };
 const _sfc_main$V = /* @__PURE__ */ defineComponent({
+  __name: "UiTooltip",
+  props: {
+    content: { default: "" },
+    position: { default: "top" },
+    delay: { default: 500 },
+    disabled: { type: Boolean, default: false },
+    offset: { default: 8 },
+    maxWidth: { default: 250 }
+  },
+  setup(__props) {
+    const props = __props;
+    const tooltipContainer = ref();
+    const tooltipRef = ref();
+    const isVisible = ref(false);
+    const shouldRender = ref(false);
+    let showTimeout = null;
+    let hideTimeout = null;
+    const tooltipStyle = ref({});
+    const updateTooltipPosition = async () => {
+      if (!tooltipContainer.value || !tooltipRef.value || !shouldRender.value) return;
+      await nextTick();
+      const containerRect = tooltipContainer.value.getBoundingClientRect();
+      tooltipRef.value.style.visibility = "hidden";
+      tooltipRef.value.style.opacity = "1";
+      const tooltipRect = tooltipRef.value.getBoundingClientRect();
+      const tooltipWidth = tooltipRect.width;
+      const tooltipHeight = tooltipRect.height;
+      tooltipRef.value.style.visibility = "";
+      tooltipRef.value.style.opacity = "";
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      let top = 0;
+      let left = 0;
+      switch (props.position) {
+        case "top":
+          top = containerRect.top - tooltipHeight - props.offset;
+          left = containerRect.left + containerRect.width / 2 - tooltipWidth / 2;
+          break;
+        case "bottom":
+          top = containerRect.bottom + props.offset;
+          left = containerRect.left + containerRect.width / 2 - tooltipWidth / 2;
+          break;
+        case "left":
+          top = containerRect.top + containerRect.height / 2 - tooltipHeight / 2;
+          left = containerRect.left - tooltipWidth - props.offset;
+          break;
+        case "right":
+          top = containerRect.top + containerRect.height / 2 - tooltipHeight / 2;
+          left = containerRect.right + props.offset;
+          break;
+      }
+      const padding = 8;
+      if (left < padding) {
+        left = padding;
+      } else if (left + tooltipWidth > viewportWidth - padding) {
+        left = viewportWidth - tooltipWidth - padding;
+      }
+      if (top < padding) {
+        top = padding;
+      } else if (top + tooltipHeight > viewportHeight - padding) {
+        top = viewportHeight - tooltipHeight - padding;
+      }
+      tooltipStyle.value = {
+        position: "fixed",
+        top: `${top}px`,
+        left: `${left}px`,
+        zIndex: "9999"
+      };
+    };
+    const showTooltip = () => {
+      if (props.disabled) return;
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = null;
+      }
+      shouldRender.value = true;
+      nextTick(() => {
+        updateTooltipPosition();
+      });
+      showTimeout = setTimeout(() => {
+        isVisible.value = true;
+      }, props.delay);
+    };
+    const hideTooltip = () => {
+      if (showTimeout) {
+        clearTimeout(showTimeout);
+        showTimeout = null;
+      }
+      hideTimeout = setTimeout(() => {
+        isVisible.value = false;
+        setTimeout(() => {
+          shouldRender.value = false;
+        }, 200);
+      }, 100);
+    };
+    onUnmounted(() => {
+      if (showTimeout) clearTimeout(showTimeout);
+      if (hideTimeout) clearTimeout(hideTimeout);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "tooltipContainer",
+        ref: tooltipContainer,
+        class: "ui-tooltip-container",
+        onMouseenter: showTooltip,
+        onMouseleave: hideTooltip
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          shouldRender.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            ref_key: "tooltipRef",
+            ref: tooltipRef,
+            class: normalizeClass(["ui-tooltip", [
+              `ui-tooltip--${_ctx.position}`,
+              {
+                "ui-tooltip--visible": isVisible.value
+              }
+            ]]),
+            style: normalizeStyle(tooltipStyle.value),
+            role: "tooltip"
+          }, [
+            createElementVNode("div", _hoisted_1$P, [
+              renderSlot(_ctx.$slots, "tooltip", {}, () => [
+                createTextVNode(toDisplayString(_ctx.content), 1)
+              ], true)
+            ]),
+            createElementVNode("div", {
+              class: normalizeClass(["ui-tooltip-arrow", `ui-tooltip-arrow--${_ctx.position}`])
+            }, null, 2)
+          ], 6)) : createCommentVNode("", true)
+        ]))
+      ], 544);
+    };
+  }
+});
+const UiTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-b5702341"]]);
+const _hoisted_1$O = ["type", "disabled", "tabindex"];
+const _hoisted_2$J = ["type", "disabled", "tabindex"];
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "UiButton",
   props: {
     variant: { default: "primary" },
@@ -600,11 +740,26 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     to: {},
     href: {},
     external: { type: Boolean, default: false },
-    tabindex: {}
+    tabindex: {},
+    title: {}
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const tooltipProps = computed(() => {
+      if (!props.title) return null;
+      if (typeof props.title === "string") {
+        return {
+          content: props.title,
+          position: "top",
+          disabled: props.disabled || props.loading
+        };
+      }
+      return {
+        ...props.title,
+        disabled: props.title.disabled ?? (props.disabled || props.loading)
+      };
+    });
     const isNuxtAvailable = computed(() => {
       if (typeof process !== "undefined" && process.client !== void 0) {
         return true;
@@ -650,20 +805,203 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
       return props.tabindex ?? void 0;
     });
     return (_ctx, _cache) => {
-      return !_ctx.to ? (openBlock(), createElementBlock("button", {
-        key: 0,
-        type: _ctx.type,
-        disabled: _ctx.disabled || _ctx.loading,
-        class: normalizeClass(buttonClassString.value),
-        style: normalizeStyle(buttonStyles.value),
-        tabindex: effectiveTabindex.value,
-        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
-      }, [
-        createVNode(UiButtonContent, {
+      return _ctx.title ? (openBlock(), createBlock(UiTooltip, normalizeProps(mergeProps({ key: 0 }, tooltipProps.value)), {
+        default: withCtx(() => [
+          !_ctx.to ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            type: _ctx.type,
+            disabled: _ctx.disabled || _ctx.loading,
+            class: normalizeClass(buttonClassString.value),
+            style: normalizeStyle(buttonStyles.value),
+            tabindex: effectiveTabindex.value,
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+          }, [
+            createVNode(UiButtonContent, {
+              loading: _ctx.loading,
+              "loading-text": _ctx.loadingText,
+              icon: _ctx.icon,
+              size: _ctx.size
+            }, createSlots({
+              icon: withCtx(() => [
+                renderSlot(_ctx.$slots, "icon", {}, void 0, true)
+              ]),
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "default", {}, void 0, true)
+              ]),
+              _: 2
+            }, [
+              _ctx.$slots["leading-icon"] ? {
+                name: "leading-icon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots["trailing-icon"] ? {
+                name: "trailing-icon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+                ]),
+                key: "1"
+              } : void 0
+            ]), 1032, ["loading", "loading-text", "icon", "size"])
+          ], 14, _hoisted_1$O)) : isNuxtAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$X, {
+            key: 1,
+            to: _ctx.to,
+            disabled: _ctx.disabled,
+            loading: _ctx.loading,
+            "loading-text": _ctx.loadingText,
+            icon: _ctx.icon,
+            "button-classes": buttonClasses.value,
+            "button-styles": buttonStyles.value,
+            tabindex: effectiveTabindex.value,
+            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", $event))
+          }, createSlots({
+            icon: withCtx(() => [
+              renderSlot(_ctx.$slots, "icon", {}, void 0, true)
+            ]),
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 2
+          }, [
+            _ctx.$slots["leading-icon"] ? {
+              name: "leading-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["trailing-icon"] ? {
+              name: "trailing-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles", "tabindex"])) : isVueRouterAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$W, {
+            key: 2,
+            to: _ctx.to,
+            disabled: _ctx.disabled,
+            loading: _ctx.loading,
+            "loading-text": _ctx.loadingText,
+            icon: _ctx.icon,
+            "button-classes": buttonClasses.value,
+            "button-styles": buttonStyles.value,
+            tabindex: effectiveTabindex.value,
+            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("click", $event))
+          }, createSlots({
+            icon: withCtx(() => [
+              renderSlot(_ctx.$slots, "icon", {}, void 0, true)
+            ]),
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 2
+          }, [
+            _ctx.$slots["leading-icon"] ? {
+              name: "leading-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["trailing-icon"] ? {
+              name: "trailing-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles", "tabindex"])) : (openBlock(), createBlock(_sfc_main$Y, {
+            key: 3,
+            to: _ctx.to,
+            href: _ctx.href,
+            external: _ctx.external,
+            disabled: _ctx.disabled,
+            loading: _ctx.loading,
+            "loading-text": _ctx.loadingText,
+            icon: _ctx.icon,
+            "button-classes": buttonClasses.value,
+            "button-styles": buttonStyles.value,
+            tabindex: effectiveTabindex.value,
+            onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("click", $event))
+          }, createSlots({
+            icon: withCtx(() => [
+              renderSlot(_ctx.$slots, "icon", {}, void 0, true)
+            ]),
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 2
+          }, [
+            _ctx.$slots["leading-icon"] ? {
+              name: "leading-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["trailing-icon"] ? {
+              name: "trailing-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["to", "href", "external", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles", "tabindex"]))
+        ]),
+        _: 3
+      }, 16)) : (openBlock(), createElementBlock(Fragment$1, { key: 1 }, [
+        !_ctx.to ? (openBlock(), createElementBlock("button", {
+          key: 0,
+          type: _ctx.type,
+          disabled: _ctx.disabled || _ctx.loading,
+          class: normalizeClass(buttonClassString.value),
+          style: normalizeStyle(buttonStyles.value),
+          tabindex: effectiveTabindex.value,
+          onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("click", $event))
+        }, [
+          createVNode(UiButtonContent, {
+            loading: _ctx.loading,
+            "loading-text": _ctx.loadingText,
+            icon: _ctx.icon,
+            size: _ctx.size
+          }, createSlots({
+            icon: withCtx(() => [
+              renderSlot(_ctx.$slots, "icon", {}, void 0, true)
+            ]),
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 2
+          }, [
+            _ctx.$slots["leading-icon"] ? {
+              name: "leading-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["trailing-icon"] ? {
+              name: "trailing-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["loading", "loading-text", "icon", "size"])
+        ], 14, _hoisted_2$J)) : isNuxtAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$X, {
+          key: 1,
+          to: _ctx.to,
+          disabled: _ctx.disabled,
           loading: _ctx.loading,
           "loading-text": _ctx.loadingText,
           icon: _ctx.icon,
-          size: _ctx.size
+          "button-classes": buttonClasses.value,
+          "button-styles": buttonStyles.value,
+          tabindex: effectiveTabindex.value,
+          onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("click", $event))
         }, createSlots({
           icon: withCtx(() => [
             renderSlot(_ctx.$slots, "icon", {}, void 0, true)
@@ -687,122 +1025,88 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
             ]),
             key: "1"
           } : void 0
-        ]), 1032, ["loading", "loading-text", "icon", "size"])
-      ], 14, _hoisted_1$P)) : isNuxtAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$X, {
-        key: 1,
-        to: _ctx.to,
-        disabled: _ctx.disabled,
-        loading: _ctx.loading,
-        "loading-text": _ctx.loadingText,
-        icon: _ctx.icon,
-        "button-classes": buttonClasses.value,
-        "button-styles": buttonStyles.value,
-        tabindex: effectiveTabindex.value,
-        onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", $event))
-      }, createSlots({
-        icon: withCtx(() => [
-          renderSlot(_ctx.$slots, "icon", {}, void 0, true)
-        ]),
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default", {}, void 0, true)
-        ]),
-        _: 2
-      }, [
-        _ctx.$slots["leading-icon"] ? {
-          name: "leading-icon",
-          fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-          ]),
-          key: "0"
-        } : void 0,
-        _ctx.$slots["trailing-icon"] ? {
-          name: "trailing-icon",
-          fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-          ]),
-          key: "1"
-        } : void 0
-      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles", "tabindex"])) : isVueRouterAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$W, {
-        key: 2,
-        to: _ctx.to,
-        disabled: _ctx.disabled,
-        loading: _ctx.loading,
-        "loading-text": _ctx.loadingText,
-        icon: _ctx.icon,
-        "button-classes": buttonClasses.value,
-        "button-styles": buttonStyles.value,
-        tabindex: effectiveTabindex.value,
-        onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("click", $event))
-      }, createSlots({
-        icon: withCtx(() => [
-          renderSlot(_ctx.$slots, "icon", {}, void 0, true)
-        ]),
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default", {}, void 0, true)
-        ]),
-        _: 2
-      }, [
-        _ctx.$slots["leading-icon"] ? {
-          name: "leading-icon",
-          fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+        ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles", "tabindex"])) : isVueRouterAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$W, {
+          key: 2,
+          to: _ctx.to,
+          disabled: _ctx.disabled,
+          loading: _ctx.loading,
+          "loading-text": _ctx.loadingText,
+          icon: _ctx.icon,
+          "button-classes": buttonClasses.value,
+          "button-styles": buttonStyles.value,
+          tabindex: effectiveTabindex.value,
+          onClick: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("click", $event))
+        }, createSlots({
+          icon: withCtx(() => [
+            renderSlot(_ctx.$slots, "icon", {}, void 0, true)
           ]),
-          key: "0"
-        } : void 0,
-        _ctx.$slots["trailing-icon"] ? {
-          name: "trailing-icon",
-          fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
           ]),
-          key: "1"
-        } : void 0
-      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles", "tabindex"])) : (openBlock(), createBlock(_sfc_main$Y, {
-        key: 3,
-        to: _ctx.to,
-        href: _ctx.href,
-        external: _ctx.external,
-        disabled: _ctx.disabled,
-        loading: _ctx.loading,
-        "loading-text": _ctx.loadingText,
-        icon: _ctx.icon,
-        "button-classes": buttonClasses.value,
-        "button-styles": buttonStyles.value,
-        tabindex: effectiveTabindex.value,
-        onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("click", $event))
-      }, createSlots({
-        icon: withCtx(() => [
-          renderSlot(_ctx.$slots, "icon", {}, void 0, true)
-        ]),
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default", {}, void 0, true)
-        ]),
-        _: 2
-      }, [
-        _ctx.$slots["leading-icon"] ? {
-          name: "leading-icon",
-          fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+          _: 2
+        }, [
+          _ctx.$slots["leading-icon"] ? {
+            name: "leading-icon",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots["trailing-icon"] ? {
+            name: "trailing-icon",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles", "tabindex"])) : (openBlock(), createBlock(_sfc_main$Y, {
+          key: 3,
+          to: _ctx.to,
+          href: _ctx.href,
+          external: _ctx.external,
+          disabled: _ctx.disabled,
+          loading: _ctx.loading,
+          "loading-text": _ctx.loadingText,
+          icon: _ctx.icon,
+          "button-classes": buttonClasses.value,
+          "button-styles": buttonStyles.value,
+          tabindex: effectiveTabindex.value,
+          onClick: _cache[7] || (_cache[7] = ($event) => _ctx.$emit("click", $event))
+        }, createSlots({
+          icon: withCtx(() => [
+            renderSlot(_ctx.$slots, "icon", {}, void 0, true)
           ]),
-          key: "0"
-        } : void 0,
-        _ctx.$slots["trailing-icon"] ? {
-          name: "trailing-icon",
-          fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
           ]),
-          key: "1"
-        } : void 0
-      ]), 1032, ["to", "href", "external", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles", "tabindex"]));
+          _: 2
+        }, [
+          _ctx.$slots["leading-icon"] ? {
+            name: "leading-icon",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots["trailing-icon"] ? {
+            name: "trailing-icon",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["to", "href", "external", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles", "tabindex"]))
+      ], 64));
     };
   }
 });
-const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-8817cc57"]]);
+const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-52fc28e3"]]);
 const CompoundUiButton = StrandsUiButton;
 CompoundUiButton.Content = UiButtonContent;
 CompoundUiButton.Anchor = _sfc_main$Y;
 CompoundUiButton.Nuxt = _sfc_main$X;
 CompoundUiButton.Vue = _sfc_main$W;
-const _hoisted_1$O = {
+const _hoisted_1$N = {
   key: 0,
   class: "ui-card-header"
 };
@@ -826,7 +1130,7 @@ const _hoisted_6$s = {
   key: 2,
   class: "ui-card-footer"
 };
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -851,7 +1155,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
           unref(attrs)["class"]
         ]])
       }, [
-        _ctx.$slots["header"] || _ctx.title || _ctx.subtitle || _ctx.$slots["leading-icon"] || _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_1$O, [
+        _ctx.$slots["header"] || _ctx.title || _ctx.subtitle || _ctx.$slots["leading-icon"] || _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_1$N, [
           renderSlot(_ctx.$slots, "header", {}, () => [
             renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true),
             _ctx.title || _ctx.$slots["title"] || _ctx.subtitle || _ctx.$slots["subtitle"] ? (openBlock(), createElementBlock("div", _hoisted_2$I, [
@@ -876,7 +1180,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-40cbf608"]]);
+const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-40cbf608"]]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -1430,19 +1734,7 @@ const X = createLucideIcon("x", [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ]);
-function hasSlotContent(slots, slotName) {
-  const slot = slots[slotName];
-  if (!slot) return false;
-  const content = slot();
-  if (!content || content.length === 0) return false;
-  return content.some((vnode) => {
-    if (vnode.children && vnode.children !== "") return true;
-    if (vnode.type && typeof vnode.type === "object") return true;
-    if (vnode.props && Object.keys(vnode.props).length > 0) return true;
-    return false;
-  });
-}
-const _hoisted_1$N = {
+const _hoisted_1$M = {
   key: 0,
   class: "input-leading-icon"
 };
@@ -1459,7 +1751,7 @@ const _hoisted_5$x = {
   key: 3,
   class: "input-trailing-icon"
 };
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Text",
   props: {
     type: { default: "text" },
@@ -1468,6 +1760,8 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     step: {},
     autocomplete: {},
     spellcheck: { type: Boolean, default: true },
+    hasLeadingIcon: { type: Boolean, default: false },
+    hasTrailingIcon: { type: Boolean, default: false },
     label: {},
     helpText: {},
     modelValue: {},
@@ -1485,7 +1779,6 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const slots = useSlots();
     const showPassword = ref(false);
     const computedType = computed(() => {
       if (props.type === "password") {
@@ -1493,11 +1786,8 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
       }
       return props.type;
     });
-    const hasLeadingIcon = computed(() => {
-      return hasSlotContent(slots, "leading-icon");
-    });
-    const hasTrailingIcon = computed(() => {
-      return hasSlotContent(slots, "trailing-icon") || props.type === "password" || props.type === "search" && props.modelValue;
+    const hasTrailingIconComputed = computed(() => {
+      return props.hasTrailingIcon || props.type === "password" || props.type === "search" && props.modelValue;
     });
     const buttonTabindex = computed(() => {
       if (props.tabindex === void 0) return;
@@ -1513,12 +1803,12 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     });
     const paddingClasses = computed(() => {
       const classes = [];
-      if (slots["leading-icon"]) {
+      if (props.hasLeadingIcon) {
         classes.push("input-padding-left-icon");
       } else {
         classes.push("input-padding-left");
       }
-      if (hasTrailingIcon.value) {
+      if (hasTrailingIconComputed.value) {
         classes.push("input-padding-right-icon");
       } else {
         classes.push("input-padding-right");
@@ -1552,7 +1842,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["input-field-wrapper", wrapperClasses.value])
       }, [
-        hasLeadingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$N, [
+        props.hasLeadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$M, [
           renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -1607,15 +1897,15 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["tabindex"])
-        ])) : hasTrailingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_5$x, [
+        ])) : props.hasTrailingIcon ? (openBlock(), createElementBlock("div", _hoisted_5$x, [
           renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const UiInputText = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-99563a41"]]);
-const _hoisted_1$M = {
+const UiInputText = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-b3152b5d"]]);
+const _hoisted_1$L = {
   key: 0,
   class: "input-leading-icon"
 };
@@ -1624,7 +1914,7 @@ const _hoisted_3$D = {
   key: 1,
   class: "input-trailing-icon"
 };
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Textarea",
   props: {
     rows: { default: 3 },
@@ -1633,6 +1923,8 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     spellcheck: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
+    hasLeadingIcon: { type: Boolean, default: false },
+    hasTrailingIcon: { type: Boolean, default: false },
     label: {},
     helpText: {},
     modelValue: {},
@@ -1650,9 +1942,6 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const slots = useSlots();
-    const hasLeadingIcon = computed(() => hasSlotContent(slots, "leading-icon"));
-    const hasTrailingIcon = computed(() => hasSlotContent(slots, "trailing-icon"));
     const wrapperClasses = computed(() => {
       const classes = [];
       if (props.error) classes.push("input-error");
@@ -1663,12 +1952,12 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     });
     const paddingClasses = computed(() => {
       const classes = [];
-      if (hasLeadingIcon.value) {
+      if (props.hasLeadingIcon) {
         classes.push("input-padding-left-icon");
       } else {
         classes.push("input-padding-left");
       }
-      if (hasTrailingIcon.value) {
+      if (props.hasTrailingIcon) {
         classes.push("input-padding-right-icon");
       } else {
         classes.push("input-padding-right");
@@ -1692,7 +1981,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["input-field-wrapper input-textarea", wrapperClasses.value])
       }, [
-        hasLeadingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$M, [
+        props.hasLeadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$L, [
           renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("div", {
@@ -1720,14 +2009,14 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
             onKeydown: handleKeydown
           }, null, 42, _hoisted_2$G)
         ], 2),
-        hasTrailingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_3$D, [
+        props.hasTrailingIcon ? (openBlock(), createElementBlock("div", _hoisted_3$D, [
           renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const UiInputTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-ffd4ab5c"]]);
+const UiInputTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-4f57fd4b"]]);
 function useFloatingPosition(options) {
   const {
     trigger,
@@ -1930,7 +2219,7 @@ function useFloatingPosition(options) {
     cleanup
   };
 }
-const _hoisted_1$L = {
+const _hoisted_1$K = {
   key: 0,
   class: "input-leading-icon"
 };
@@ -1968,7 +2257,7 @@ const _hoisted_14$l = {
   key: 0,
   class: "input-dropdown-option-check"
 };
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Select",
   props: {
     options: { default: () => [] },
@@ -1978,6 +2267,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     maxDropdownHeight: { default: 400 },
     noOptionsText: { default: "No options available" },
     searchPlaceholder: { default: "" },
+    hasLeadingIcon: { type: Boolean, default: false },
+    hasTrailingIcon: { type: Boolean, default: false },
     label: {},
     helpText: {},
     modelValue: {},
@@ -1995,7 +2286,6 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const slots = useSlots();
     const selectTriggerRef = ref();
     const dropdownRef = ref();
     const searchInputRef = ref();
@@ -2101,12 +2391,12 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     });
     const paddingClasses = computed(() => {
       const classes = [];
-      if (slots["leading-icon"]) {
+      if (props.hasLeadingIcon) {
         classes.push("input-padding-left-icon");
       } else {
         classes.push("input-padding-left");
       }
-      if (slots["trailing-icon"]) {
+      if (props.hasTrailingIcon) {
         classes.push("input-padding-right-icon");
       } else {
         classes.push("input-padding-right");
@@ -2280,7 +2570,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             paddingClasses.value
           ]])
         }, [
-          _ctx.$slots["leading-icon"] ? (openBlock(), createElementBlock("div", _hoisted_1$L, [
+          props.hasLeadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$K, [
             renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
           ])) : createCommentVNode("", true),
           createElementVNode("div", {
@@ -2305,7 +2595,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
               createVNode(unref(ChevronDown))
             ], 2)
           ], 42, _hoisted_2$F),
-          _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_6$r, [
+          props.hasTrailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6$r, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ], 2),
@@ -2379,8 +2669,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-662c22e1"]]);
-const _hoisted_1$K = { class: "input-leading-icon" };
+const UiInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-302debb0"]]);
+const _hoisted_1$J = { class: "input-leading-icon" };
 const _hoisted_2$E = ["src"];
 const _hoisted_3$B = ["id", "accept", "multiple", "disabled", "required"];
 const _hoisted_4$A = { class: "input-file-content" };
@@ -2416,7 +2706,7 @@ const _hoisted_18$f = {
   key: 1,
   class: "input-trailing-icon"
 };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "UiInput.File",
   props: {
     accept: {},
@@ -2425,6 +2715,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     dragDropText: {},
     selectedText: {},
     preview: {},
+    hasLeadingIcon: { type: Boolean, default: false },
+    hasTrailingIcon: { type: Boolean, default: false },
     label: {},
     helpText: {},
     modelValue: {},
@@ -2616,13 +2908,13 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           paddingClasses.value
         ]])
       }, [
-        createElementVNode("div", _hoisted_1$K, [
+        createElementVNode("div", _hoisted_1$J, [
           previewImageUrl.value ? (openBlock(), createElementBlock("img", {
             key: 0,
             src: previewImageUrl.value,
             alt: "Preview",
             class: "input-file-preview"
-          }, null, 8, _hoisted_2$E)) : _ctx.$slots["leading-icon"] ? renderSlot(_ctx.$slots, "leading-icon", { key: 1 }, void 0, true) : (openBlock(), createBlock(unref(FileInput), { key: 2 }))
+          }, null, 8, _hoisted_2$E)) : props.hasLeadingIcon ? renderSlot(_ctx.$slots, "leading-icon", { key: 1 }, void 0, true) : (openBlock(), createBlock(unref(FileInput), { key: 2 }))
         ]),
         createElementVNode("div", {
           class: normalizeClass(["input-file-area", {
@@ -2684,15 +2976,15 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           }, [
             createVNode(unref(X))
           ])
-        ])) : _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_18$f, [
+        ])) : props.hasTrailingIcon ? (openBlock(), createElementBlock("div", _hoisted_18$f, [
           renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const UiInputFile = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-86bf65ec"]]);
-const _hoisted_1$J = { class: "tabs-wrapper" };
+const UiInputFile = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-e1fd712d"]]);
+const _hoisted_1$I = { class: "tabs-wrapper" };
 const _hoisted_2$D = {
   key: 0,
   class: "tabs-before"
@@ -2703,7 +2995,7 @@ const _hoisted_4$z = {
   class: "tabs-after"
 };
 const _hoisted_5$u = ["aria-labelledby"];
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "UiTabs",
   props: {
     modelValue: {},
@@ -3030,7 +3322,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           { "tabs-container--with-content": hasContentSlot.value }
         ]])
       }, [
-        createElementVNode("div", _hoisted_1$J, [
+        createElementVNode("div", _hoisted_1$I, [
           createElementVNode("div", {
             class: normalizeClass(["tabs-list", [
               `tabs-list--${_ctx.orientation}`,
@@ -3092,12 +3384,12 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-901716e3"]]);
-const _hoisted_1$I = {
+const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-901716e3"]]);
+const _hoisted_1$H = {
   key: 0,
   class: "ui-divider-text"
 };
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "UiDivider",
   props: {
     orientation: { default: "horizontal" },
@@ -3151,7 +3443,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
         ]),
         style: normalizeStyle(dividerStyle.value)
       }, [
-        hasText.value ? (openBlock(), createElementBlock("span", _hoisted_1$I, [
+        hasText.value ? (openBlock(), createElementBlock("span", _hoisted_1$H, [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(_ctx.text), 1)
           ], true)
@@ -3160,8 +3452,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiDivider = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-1c798024"]]);
-const _hoisted_1$H = { class: "datetime-picker-wrapper" };
+const UiDivider = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-1c798024"]]);
+const _hoisted_1$G = { class: "datetime-picker-wrapper" };
 const _hoisted_2$C = { class: "datetime-picker-leading-icon" };
 const _hoisted_3$z = { class: "datetime-picker-display" };
 const _hoisted_4$y = {
@@ -3201,7 +3493,7 @@ const _hoisted_20$b = {
 };
 const _hoisted_21$b = { class: "time-scroll" };
 const _hoisted_22$8 = { class: "datetime-picker-footer" };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "UiDateTimePicker",
   props: {
     modelValue: {},
@@ -3533,7 +3825,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
       cleanupFloating();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$H, [
+      return openBlock(), createElementBlock("div", _hoisted_1$G, [
         createElementVNode("div", {
           ref_key: "triggerElement",
           ref: triggerElement,
@@ -3790,8 +4082,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-f688c330"]]);
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const UiDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-f688c330"]]);
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Date",
   props: {
     min: {},
@@ -3838,7 +4130,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Time",
   props: {
     is24Hour: { type: Boolean, default: true },
@@ -3883,7 +4175,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "UiInput.DateTime",
   props: {
     min: {},
@@ -24886,14 +25178,14 @@ var TextAlign = Extension.create({
 });
 var index_default$1 = TextAlign;
 var index_default = Placeholder;
-const _hoisted_1$G = { class: "input-richtext-toolbar" };
+const _hoisted_1$F = { class: "input-richtext-toolbar" };
 const _hoisted_2$B = { class: "input-richtext-group" };
 const _hoisted_3$y = { class: "input-richtext-group" };
 const _hoisted_4$x = { class: "input-richtext-group" };
 const _hoisted_5$s = { class: "input-richtext-group" };
 const _hoisted_6$o = { class: "input-richtext-group" };
 const _hoisted_7$n = { class: "input-richtext-editor-wrapper" };
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "UiInput.RichText",
   props: {
     minHeight: { default: "200px" },
@@ -24979,7 +25271,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           "input-disabled": _ctx.disabled
         }])
       }, [
-        createElementVNode("div", _hoisted_1$G, [
+        createElementVNode("div", _hoisted_1$F, [
           createElementVNode("div", _hoisted_2$B, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive("bold") ? "primary" : "secondary",
@@ -25260,8 +25552,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputRichText = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-18a35d5d"]]);
-const _hoisted_1$F = { class: "pincode-inputs" };
+const UiInputRichText = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-18a35d5d"]]);
+const _hoisted_1$E = { class: "pincode-inputs" };
 const _hoisted_2$A = {
   key: 0,
   class: "pincode-icon pincode-icon-leading"
@@ -25275,12 +25567,14 @@ const _hoisted_5$r = {
   key: 1,
   class: "pincode-icon pincode-icon-trailing"
 };
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Pincode",
   props: {
     maxLength: { default: 6 },
     variant: { default: "numeric" },
     divider: {},
+    hasLeadingIcon: { type: Boolean, default: false },
+    hasTrailingIcon: { type: Boolean, default: false },
     label: {},
     helpText: {},
     modelValue: {},
@@ -25459,8 +25753,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["pincode-wrapper", [`pincode-size-${_ctx.size}`, { "pincode-error": _ctx.error }]])
       }, [
-        createElementVNode("div", _hoisted_1$F, [
-          _ctx.$slots["leading-icon"] ? (openBlock(), createElementBlock("div", _hoisted_2$A, [
+        createElementVNode("div", _hoisted_1$E, [
+          props.hasLeadingIcon ? (openBlock(), createElementBlock("div", _hoisted_2$A, [
             renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
           ])) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.maxLength, (index) => {
@@ -25492,7 +25786,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
               }, dividerProps.value, { class: "pincode-custom-divider" }), null, 16)) : shouldShowDivider(index) ? (openBlock(), createElementBlock("span", _hoisted_4$w, toDisplayString(dividerCharacter.value), 1)) : createCommentVNode("", true)
             ], 64);
           }), 128)),
-          _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_5$r, [
+          props.hasTrailingIcon ? (openBlock(), createElementBlock("div", _hoisted_5$r, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ])
@@ -25500,8 +25794,20 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputPincode = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-dc5d46fa"]]);
-const _hoisted_1$E = ["for"];
+const UiInputPincode = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-78a9c50b"]]);
+function hasSlotContent(slots, slotName) {
+  const slot = slots[slotName];
+  if (!slot) return false;
+  const content = slot();
+  if (!content || content.length === 0) return false;
+  return content.some((vnode) => {
+    if (vnode.children && vnode.children !== "") return true;
+    if (vnode.type && typeof vnode.type === "object") return true;
+    if (vnode.props && Object.keys(vnode.props).length > 0) return true;
+    return false;
+  });
+}
+const _hoisted_1$D = ["for"];
 const _hoisted_2$z = {
   key: 0,
   class: "input-required"
@@ -25518,7 +25824,7 @@ const _hoisted_5$q = {
   key: 3,
   class: "input-help-text"
 };
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "UiInput",
   props: {
     type: {},
@@ -25527,6 +25833,8 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     step: {},
     autocomplete: {},
     spellcheck: { type: Boolean },
+    hasLeadingIcon: { type: Boolean },
+    hasTrailingIcon: { type: Boolean },
     label: {},
     helpText: {},
     modelValue: {},
@@ -25612,7 +25920,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
         }, [
           createTextVNode(toDisplayString(props.label) + " ", 1),
           props.required ? (openBlock(), createElementBlock("span", _hoisted_2$z, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_1$E)) : createCommentVNode("", true),
+        ], 8, _hoisted_1$D)) : createCommentVNode("", true),
         createElementVNode("div", null, [
           isTextInput.value ? (openBlock(), createBlock(UiInputText, {
             key: 0,
@@ -25631,26 +25939,21 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             error: Boolean(props.error && props.error !== true && props.error !== ""),
             size: props.size,
             tabindex: _ctx.tabindex,
+            "has-leading-icon": hasSlotContent$1("leading-icon"),
+            "has-trailing-icon": hasSlotContent$1("trailing-icon"),
             "onUpdate:modelValue": handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus,
             onKeydown: handleKeydown
-          }, createSlots({ _: 2 }, [
-            hasSlotContent$1("leading-icon") ? {
-              name: "leading-icon",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-              ]),
-              key: "0"
-            } : void 0,
-            hasSlotContent$1("trailing-icon") ? {
-              name: "trailing-icon",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-              ]),
-              key: "1"
-            } : void 0
-          ]), 1032, ["model-value", "type", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck", "input-id", "error", "size", "tabindex"])) : _ctx.type === "textarea" ? (openBlock(), createBlock(UiInputTextarea, {
+          }, {
+            "leading-icon": withCtx(() => [
+              renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+            ]),
+            "trailing-icon": withCtx(() => [
+              renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["model-value", "type", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck", "input-id", "error", "size", "tabindex", "has-leading-icon", "has-trailing-icon"])) : _ctx.type === "textarea" ? (openBlock(), createBlock(UiInputTextarea, {
             key: 1,
             "model-value": _ctx.modelValue,
             placeholder: _ctx.placeholder,
@@ -25667,26 +25970,21 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             error: props.error,
             size: props.size,
             tabindex: _ctx.tabindex,
+            "has-leading-icon": hasSlotContent$1("leading-icon"),
+            "has-trailing-icon": hasSlotContent$1("trailing-icon"),
             "onUpdate:modelValue": handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus,
             onKeydown: handleKeydown
-          }, createSlots({ _: 2 }, [
-            hasSlotContent$1("leading-icon") ? {
-              name: "leading-icon",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-              ]),
-              key: "0"
-            } : void 0,
-            hasSlotContent$1("trailing-icon") ? {
-              name: "trailing-icon",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-              ]),
-              key: "1"
-            } : void 0
-          ]), 1032, ["model-value", "placeholder", "disabled", "readonly", "required", "rows", "cols", "maxlength", "autocomplete", "spellcheck", "resizable", "input-id", "error", "size", "tabindex"])) : _ctx.type === "select" ? (openBlock(), createBlock(UiInputSelect, {
+          }, {
+            "leading-icon": withCtx(() => [
+              renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+            ]),
+            "trailing-icon": withCtx(() => [
+              renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "rows", "cols", "maxlength", "autocomplete", "spellcheck", "resizable", "input-id", "error", "size", "tabindex", "has-leading-icon", "has-trailing-icon"])) : _ctx.type === "select" ? (openBlock(), createBlock(UiInputSelect, {
             key: 2,
             "model-value": _ctx.modelValue,
             options: props.options,
@@ -25702,25 +26000,20 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             error: props.error,
             size: props.size,
             tabindex: _ctx.tabindex,
+            "has-leading-icon": hasSlotContent$1("leading-icon"),
+            "has-trailing-icon": hasSlotContent$1("trailing-icon"),
             "onUpdate:modelValue": handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }, createSlots({ _: 2 }, [
-            hasSlotContent$1("leading-icon") ? {
-              name: "leading-icon",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-              ]),
-              key: "0"
-            } : void 0,
-            hasSlotContent$1("trailing-icon") ? {
-              name: "trailing-icon",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-              ]),
-              key: "1"
-            } : void 0
-          ]), 1032, ["model-value", "options", "placeholder", "disabled", "multiple", "searchable", "allow-insert", "max-dropdown-height", "no-options-text", "search-placeholder", "input-id", "error", "size", "tabindex"])) : _ctx.type === "file" ? (openBlock(), createBlock(UiInputFile, {
+          }, {
+            "leading-icon": withCtx(() => [
+              renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+            ]),
+            "trailing-icon": withCtx(() => [
+              renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["model-value", "options", "placeholder", "disabled", "multiple", "searchable", "allow-insert", "max-dropdown-height", "no-options-text", "search-placeholder", "input-id", "error", "size", "tabindex", "has-leading-icon", "has-trailing-icon"])) : _ctx.type === "file" ? (openBlock(), createBlock(UiInputFile, {
             key: 3,
             "model-value": _ctx.modelValue,
             accept: props.accept,
@@ -25735,27 +26028,22 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             error: props.error,
             size: props.size,
             tabindex: _ctx.tabindex,
+            "has-leading-icon": hasSlotContent$1("leading-icon"),
+            "has-trailing-icon": hasSlotContent$1("trailing-icon"),
             "onUpdate:modelValue": handleInput,
             onFileError: handleFileError,
             onClearPreview: handleClearPreview,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }, createSlots({ _: 2 }, [
-            hasSlotContent$1("leading-icon") ? {
-              name: "leading-icon",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-              ]),
-              key: "0"
-            } : void 0,
-            hasSlotContent$1("trailing-icon") ? {
-              name: "trailing-icon",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-              ]),
-              key: "1"
-            } : void 0
-          ]), 1032, ["model-value", "accept", "multiple", "max-file-size", "drag-drop-text", "selected-text", "preview", "disabled", "required", "input-id", "error", "size", "tabindex"])) : _ctx.type === "date" ? (openBlock(), createBlock(_sfc_main$M, {
+          }, {
+            "leading-icon": withCtx(() => [
+              renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+            ]),
+            "trailing-icon": withCtx(() => [
+              renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["model-value", "accept", "multiple", "max-file-size", "drag-drop-text", "selected-text", "preview", "disabled", "required", "input-id", "error", "size", "tabindex", "has-leading-icon", "has-trailing-icon"])) : _ctx.type === "date" ? (openBlock(), createBlock(_sfc_main$L, {
             key: 4,
             "model-value": _ctx.modelValue,
             placeholder: _ctx.placeholder,
@@ -25771,7 +26059,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             "onUpdate:modelValue": handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "min", "max", "input-id", "error", "size", "tabindex"])) : _ctx.type === "time" ? (openBlock(), createBlock(_sfc_main$L, {
+          }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "min", "max", "input-id", "error", "size", "tabindex"])) : _ctx.type === "time" ? (openBlock(), createBlock(_sfc_main$K, {
             key: 5,
             "model-value": _ctx.modelValue,
             placeholder: _ctx.placeholder,
@@ -25785,7 +26073,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             "onUpdate:modelValue": handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "input-id", "error", "size", "tabindex"])) : _ctx.type === "datetime" ? (openBlock(), createBlock(_sfc_main$K, {
+          }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "input-id", "error", "size", "tabindex"])) : _ctx.type === "datetime" ? (openBlock(), createBlock(_sfc_main$J, {
             key: 6,
             "model-value": _ctx.modelValue,
             placeholder: _ctx.placeholder,
@@ -25856,10 +26144,10 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-55d725f7"]]);
-const _hoisted_1$D = ["disabled", "aria-disabled"];
+const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-96984fc3"]]);
+const _hoisted_1$C = ["disabled", "aria-disabled"];
 const _hoisted_2$y = ["href", "target", "rel", "aria-disabled"];
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "UiLink",
   props: {
     href: {},
@@ -25949,7 +26237,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         onClick: handleClick2
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 14, _hoisted_1$D)) : (openBlock(), createElementBlock("a", {
+      ], 14, _hoisted_1$C)) : (openBlock(), createElementBlock("a", {
         key: 1,
         class: normalizeClass(["ui-link", [
           `ui-link-${_ctx.variant}`,
@@ -25969,15 +26257,15 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiLink = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-3bf99110"]]);
-const _hoisted_1$C = { class: "ui-toggle-container" };
+const StrandsUiLink = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-3bf99110"]]);
+const _hoisted_1$B = { class: "ui-toggle-container" };
 const _hoisted_2$x = ["for"];
 const _hoisted_3$v = {
   key: 0,
   class: "ui-toggle-required"
 };
 const _hoisted_4$u = ["id", "aria-pressed", "aria-labelledby"];
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "UiToggle",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -26010,7 +26298,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       emit("update:modelValue", !props.modelValue);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$C, [
+      return openBlock(), createElementBlock("div", _hoisted_1$B, [
         _ctx.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           for: toggleId.value,
@@ -26035,8 +26323,8 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiToggle = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-ba05b9e3"]]);
-const _hoisted_1$B = { class: "accui-component-scope" };
+const UiToggle = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-ba05b9e3"]]);
+const _hoisted_1$A = { class: "accui-component-scope" };
 const _hoisted_2$w = { class: "avatar-editor-simple" };
 const _hoisted_3$u = {
   key: 1,
@@ -26061,7 +26349,7 @@ const _hoisted_19$c = { class: "action-buttons" };
 const _hoisted_20$a = { class: "preview-section" };
 const _hoisted_21$a = { class: "preview-container" };
 const _hoisted_22$7 = ["width", "height"];
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "UiAvatarEditor",
   props: {
     size: { default: 300 },
@@ -26352,7 +26640,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       }
     }, { immediate: true });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$B, [
+      return openBlock(), createElementBlock("div", _hoisted_1$A, [
         createElementVNode("div", _hoisted_2$w, [
           createElementVNode("input", {
             ref_key: "fileInput",
@@ -26840,7 +27128,7 @@ class SoundEffects {
   }
 }
 const playLevelUp = (level, userSettings) => SoundEffects.playLevelUp(level, userSettings);
-const _hoisted_1$A = { class: "level-progress-container" };
+const _hoisted_1$z = { class: "level-progress-container" };
 const _hoisted_2$v = ["width", "height", "viewBox"];
 const _hoisted_3$t = { key: 0 };
 const _hoisted_4$s = ["r"];
@@ -26870,7 +27158,7 @@ const INNER_GAP = 18;
 const ANIMATION_DURATION = 600;
 const LABEL_EXTRA_DEGREES = 12;
 const LABEL_CHAR_DEGREES = 8;
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "UiLevelProgress",
   props: {
     value: {},
@@ -27025,7 +27313,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       prevLevel = newLevel;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$A, [
+      return openBlock(), createElementBlock("div", _hoisted_1$z, [
         (openBlock(), createElementBlock("svg", {
           width: unref(size),
           height: unref(size),
@@ -27123,7 +27411,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiLevelProgress = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-410a88ab"]]);
+const UiLevelProgress = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-410a88ab"]]);
 class ModalStack {
   stack = [];
   escapeHandlerRegistered = false;
@@ -27326,7 +27614,7 @@ function useGlobalModalStack() {
     }
   };
 }
-const _hoisted_1$z = {
+const _hoisted_1$y = {
   key: 0,
   class: "ui-modal-backdrop",
   role: "dialog",
@@ -27340,7 +27628,7 @@ const _hoisted_5$n = {
   class: "ui-modal-subtitle"
 };
 const _hoisted_6$l = { class: "ui-modal-body-content" };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "UiModal",
   props: {
     modelValue: { type: Boolean, default: void 0 },
@@ -27495,7 +27783,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         }, [
           createVNode(Transition, { name: "modal" }, {
             default: withCtx(() => [
-              isModalOpen.value ? (openBlock(), createElementBlock("div", _hoisted_1$z, [
+              isModalOpen.value ? (openBlock(), createElementBlock("div", _hoisted_1$y, [
                 createElementVNode("div", {
                   class: "ui-modal-container",
                   ref_key: "modalContainer",
@@ -27570,7 +27858,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiModal = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-ecf47be6"]]);
+const UiModal = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-ecf47be6"]]);
 const tailwindColors = {
   "#000000": {
     label: "Black"
@@ -28173,7 +28461,7 @@ const tailwindColors = {
     ]
   }
 };
-const _hoisted_1$y = { class: "ui-color-picker" };
+const _hoisted_1$x = { class: "ui-color-picker" };
 const _hoisted_2$t = { class: "ui-color-picker-main" };
 const _hoisted_3$r = ["viewBox"];
 const _hoisted_4$q = ["d"];
@@ -28256,7 +28544,7 @@ const _hoisted_50$1 = { class: "ui-color-picker-swatch-row ui-color-picker-swatc
 const _hoisted_51$1 = ["onClick"];
 const GLOBAL_PICKER_WIDTH = 200;
 const GLOBAL_PICKER_HEIGHT = 150;
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "UiColorPicker.Picker",
   props: {
     contrastLabel: {},
@@ -29801,7 +30089,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       document.removeEventListener("touchend", handleAreaMouseUp);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$y, [
+      return openBlock(), createElementBlock("div", _hoisted_1$x, [
         createElementVNode("div", _hoisted_2$t, [
           createElementVNode("div", {
             ref_key: "colorAreaRef",
@@ -30443,10 +30731,10 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiColorPickerPicker = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-24473a61"]]);
-const _hoisted_1$x = { class: "ui-color-picker-button-container" };
+const UiColorPickerPicker = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-24473a61"]]);
+const _hoisted_1$w = { class: "ui-color-picker-button-container" };
 const _hoisted_2$s = { class: "ui-color-picker-button-preview" };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "UiColorPicker.Button",
   props: {
     modelValue: {},
@@ -30530,7 +30818,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       cleanupFloating();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$x, [
+      return openBlock(), createElementBlock("div", _hoisted_1$w, [
         createVNode(StrandsUiButton, {
           ref_key: "buttonRef",
           ref: buttonRef,
@@ -30574,8 +30862,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiColorPickerButton = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-a03d15a6"]]);
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const UiColorPickerButton = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-a03d15a6"]]);
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "UiColorPicker",
   props: {
     modelValue: { default: "#EA00A8" },
@@ -30629,145 +30917,6 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$w = { class: "ui-tooltip-content" };
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
-  __name: "UiTooltip",
-  props: {
-    content: { default: "" },
-    position: { default: "top" },
-    delay: { default: 500 },
-    disabled: { type: Boolean, default: false },
-    offset: { default: 8 },
-    maxWidth: { default: 250 }
-  },
-  setup(__props) {
-    const props = __props;
-    const tooltipContainer = ref();
-    const tooltipRef = ref();
-    const isVisible = ref(false);
-    const shouldRender = ref(false);
-    let showTimeout = null;
-    let hideTimeout = null;
-    const tooltipStyle = ref({});
-    const updateTooltipPosition = async () => {
-      if (!tooltipContainer.value || !tooltipRef.value || !shouldRender.value) return;
-      await nextTick();
-      const containerRect = tooltipContainer.value.getBoundingClientRect();
-      tooltipRef.value.style.visibility = "hidden";
-      tooltipRef.value.style.opacity = "1";
-      const tooltipRect = tooltipRef.value.getBoundingClientRect();
-      const tooltipWidth = tooltipRect.width;
-      const tooltipHeight = tooltipRect.height;
-      tooltipRef.value.style.visibility = "";
-      tooltipRef.value.style.opacity = "";
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-      let top = 0;
-      let left = 0;
-      switch (props.position) {
-        case "top":
-          top = containerRect.top - tooltipHeight - props.offset;
-          left = containerRect.left + containerRect.width / 2 - tooltipWidth / 2;
-          break;
-        case "bottom":
-          top = containerRect.bottom + props.offset;
-          left = containerRect.left + containerRect.width / 2 - tooltipWidth / 2;
-          break;
-        case "left":
-          top = containerRect.top + containerRect.height / 2 - tooltipHeight / 2;
-          left = containerRect.left - tooltipWidth - props.offset;
-          break;
-        case "right":
-          top = containerRect.top + containerRect.height / 2 - tooltipHeight / 2;
-          left = containerRect.right + props.offset;
-          break;
-      }
-      const padding = 8;
-      if (left < padding) {
-        left = padding;
-      } else if (left + tooltipWidth > viewportWidth - padding) {
-        left = viewportWidth - tooltipWidth - padding;
-      }
-      if (top < padding) {
-        top = padding;
-      } else if (top + tooltipHeight > viewportHeight - padding) {
-        top = viewportHeight - tooltipHeight - padding;
-      }
-      tooltipStyle.value = {
-        position: "fixed",
-        top: `${top}px`,
-        left: `${left}px`,
-        zIndex: "9999"
-      };
-    };
-    const showTooltip = () => {
-      if (props.disabled) return;
-      if (hideTimeout) {
-        clearTimeout(hideTimeout);
-        hideTimeout = null;
-      }
-      shouldRender.value = true;
-      nextTick(() => {
-        updateTooltipPosition();
-      });
-      showTimeout = setTimeout(() => {
-        isVisible.value = true;
-      }, props.delay);
-    };
-    const hideTooltip = () => {
-      if (showTimeout) {
-        clearTimeout(showTimeout);
-        showTimeout = null;
-      }
-      hideTimeout = setTimeout(() => {
-        isVisible.value = false;
-        setTimeout(() => {
-          shouldRender.value = false;
-        }, 200);
-      }, 100);
-    };
-    onUnmounted(() => {
-      if (showTimeout) clearTimeout(showTimeout);
-      if (hideTimeout) clearTimeout(hideTimeout);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "tooltipContainer",
-        ref: tooltipContainer,
-        class: "ui-tooltip-container",
-        onMouseenter: showTooltip,
-        onMouseleave: hideTooltip
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, void 0, true),
-        (openBlock(), createBlock(Teleport, { to: "body" }, [
-          shouldRender.value ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            ref_key: "tooltipRef",
-            ref: tooltipRef,
-            class: normalizeClass(["ui-tooltip", [
-              `ui-tooltip--${_ctx.position}`,
-              {
-                "ui-tooltip--visible": isVisible.value
-              }
-            ]]),
-            style: normalizeStyle(tooltipStyle.value),
-            role: "tooltip"
-          }, [
-            createElementVNode("div", _hoisted_1$w, [
-              renderSlot(_ctx.$slots, "tooltip", {}, () => [
-                createTextVNode(toDisplayString(_ctx.content), 1)
-              ], true)
-            ]),
-            createElementVNode("div", {
-              class: normalizeClass(["ui-tooltip-arrow", `ui-tooltip-arrow--${_ctx.position}`])
-            }, null, 2)
-          ], 6)) : createCommentVNode("", true)
-        ]))
-      ], 544);
-    };
-  }
-});
-const UiTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-614c492f"]]);
 const _hoisted_1$v = { class: "ui-table-container" };
 const _hoisted_2$r = {
   key: 0,
@@ -39458,7 +39607,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         ], -1)
                       ])])
                     ]),
-                    createVNode(unref(_sfc_main$E), {
+                    createVNode(unref(_sfc_main$D), {
                       uploading: uploading.value,
                       "preselected-file": selectedImageFile.value,
                       onUpload: handleAvatarUpload,
@@ -40288,7 +40437,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     to: {},
     href: {},
     external: { type: Boolean },
-    tabindex: {}
+    tabindex: {},
+    title: {}
   },
   setup(__props) {
     const props = __props;
@@ -41113,11 +41263,11 @@ export {
   StrandsUIPlugin,
   StrandsUiAlert,
   UiApp as StrandsUiApp,
-  _sfc_main$E as StrandsUiAvatarEditor,
+  _sfc_main$D as StrandsUiAvatarEditor,
   CompoundUiButton as StrandsUiButton,
   StrandsUiCard,
   UiCheckboxGroup as StrandsUiCheckboxGroup,
-  _sfc_main$z as StrandsUiColorPicker,
+  _sfc_main$y as StrandsUiColorPicker,
   UiDivider as StrandsUiDivider,
   UiHero as StrandsUiHero,
   StrandsUiInput,
@@ -41138,12 +41288,12 @@ export {
   _sfc_main$5 as SvgIcon,
   StrandsUiAlert as UiAlert,
   UiApp,
-  _sfc_main$E as UiAvatarEditor,
-  _sfc_main$E as UiAvatarEditorSimple,
+  _sfc_main$D as UiAvatarEditor,
+  _sfc_main$D as UiAvatarEditorSimple,
   CompoundUiButton as UiButton,
   StrandsUiCard as UiCard,
   UiCheckboxGroup,
-  _sfc_main$z as UiColorPicker,
+  _sfc_main$y as UiColorPicker,
   UiDivider,
   UiHero,
   StrandsUiInput as UiInput,