npm - @strands.gg/accui - Versions diffs - 2.6.1 → 2.6.3 - Mend

@strands.gg/accui 2.6.1 → 2.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/strands-auth-ui.es.js CHANGED Viewed

@@ -1,18 +1,18 @@
 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, resolveComponent, resolveDynamicComponent, createSlots, h as h$1, ref, nextTick, withModifiers, renderList, watch, toRefs, withDirectives, vModelSelect, getCurrentInstance, watchEffect, onBeforeUnmount, shallowRef, markRaw, customRef, useCssVars, reactive, createStaticVNode, vModelText, Transition, mergeProps, inject, withKeys, isMemoSame } from "vue";
-import { u as useStrandsConfig, p as provideStrandsConfig } from "./useStrandsConfig-C3gBJK6y.es.js";
-import { s } from "./useStrandsConfig-C3gBJK6y.es.js";
-import { u as useStrandsAuth } from "./useStrandsAuth-DoUupKb8.es.js";
-const _hoisted_1$S = { class: "app-content" };
-const _hoisted_2$J = {
+import { u as useStrandsConfig, p as provideStrandsConfig } from "./useStrandsConfig-f200kXFG.es.js";
+import { s } from "./useStrandsConfig-f200kXFG.es.js";
+import { u as useStrandsAuth } from "./useStrandsAuth-B0jI8Gbq.es.js";
+const _hoisted_1$T = { class: "app-content" };
+const _hoisted_2$K = {
   key: 0,
   class: "ui-app-loading-overlay"
 };
-const _hoisted_3$G = { class: "ui-app-loading-content" };
-const _hoisted_4$D = {
+const _hoisted_3$H = { class: "ui-app-loading-content" };
+const _hoisted_4$E = {
   key: 0,
   class: "ui-app-loading-message"
 };
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "UiApp",
   props: {
     theme: { default: "auto" },
@@ -57,17 +57,17 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ui-app", appClasses.value])
       }, [
-        createElementVNode("div", _hoisted_1$S, [
+        createElementVNode("div", _hoisted_1$T, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           _cache[0] || (_cache[0] = createElementVNode("div", { class: "ui-app-notifications" }, null, -1))
         ])),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
-          isGlobalLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2$J, [
-            createElementVNode("div", _hoisted_3$G, [
+          isGlobalLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2$K, [
+            createElementVNode("div", _hoisted_3$H, [
               _cache[1] || (_cache[1] = createElementVNode("div", { class: "ui-app-loading-spinner" }, null, -1)),
-              _ctx.loadingMessage ? (openBlock(), createElementBlock("p", _hoisted_4$D, toDisplayString(_ctx.loadingMessage), 1)) : createCommentVNode("", true)
+              _ctx.loadingMessage ? (openBlock(), createElementBlock("p", _hoisted_4$E, toDisplayString(_ctx.loadingMessage), 1)) : createCommentVNode("", true)
             ])
           ])) : createCommentVNode("", true)
         ]))
@@ -82,23 +82,23 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const UiApp = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-f18c1706"]]);
-const _hoisted_1$R = { class: "accui-component-scope" };
-const _hoisted_2$I = { class: "alert-content" };
-const _hoisted_3$F = { class: "alert-icon-container" };
-const _hoisted_4$C = {
+const UiApp = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__scopeId", "data-v-f18c1706"]]);
+const _hoisted_1$S = { class: "accui-component-scope" };
+const _hoisted_2$J = { class: "alert-content" };
+const _hoisted_3$G = { class: "alert-icon-container" };
+const _hoisted_4$D = {
   class: "alert-main-icon",
   fill: "currentColor",
   viewBox: "0 0 20 20",
   "aria-hidden": "true"
 };
-const _hoisted_5$x = ["d"];
+const _hoisted_5$y = ["d"];
 const _hoisted_6$t = { class: "alert-text-container" };
 const _hoisted_7$s = {
   key: 0,
   class: "alert-dismiss-container"
 };
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "UiAlert",
   props: {
     variant: { default: "info" },
@@ -134,19 +134,19 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
       return icons[props.variant];
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$R, [
+      return openBlock(), createElementBlock("div", _hoisted_1$S, [
         createElementVNode("div", {
           class: normalizeClass(alertClasses.value),
           role: "alert"
         }, [
-          createElementVNode("div", _hoisted_2$I, [
-            createElementVNode("div", _hoisted_3$F, [
-              (openBlock(), createElementBlock("svg", _hoisted_4$C, [
+          createElementVNode("div", _hoisted_2$J, [
+            createElementVNode("div", _hoisted_3$G, [
+              (openBlock(), createElementBlock("svg", _hoisted_4$D, [
                 createElementVNode("path", {
                   "fill-rule": "evenodd",
                   d: iconPath.value,
                   "clip-rule": "evenodd"
-                }, null, 8, _hoisted_5$x)
+                }, null, 8, _hoisted_5$y)
               ]))
             ]),
             createElementVNode("div", _hoisted_6$t, [
@@ -188,27 +188,27 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiAlert = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-1beb49ad"]]);
+const StrandsUiAlert = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-1beb49ad"]]);
 const logo = '<svg width="302" height="438" viewBox="0 0 302 438" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M71.5001 96C71.5001 96 132 106 137 61.5C142 17 117.5 3.50005 94.5001 1.50003C71.5001 -0.499996 16.0001 8.5 2.00014 72.5C-6.5 130.5 71.5003 227.5 165 218C258.5 208.5 280.758 148.5 283.5 121C286.242 93.5 277.5 61.5 238.5 61.5C153 61.5 150.501 185 170.5 235C190.5 285 199 279 213 314C227.001 349 217.296 411.458 183 427C129.456 450.65 92 426 78.5 407.5C65 389 68.0003 357 94.5001 344.5C121 332 212.41 393.5 301.5 361" stroke="black"/>\n</svg>\n';
-const _hoisted_1$Q = {
+const _hoisted_1$R = {
   key: 0,
   class: "loader-icon"
 };
-const _hoisted_2$H = ["width", "height"];
-const _hoisted_3$E = ["d"];
-const _hoisted_4$B = ["stroke-width"];
-const _hoisted_5$w = ["stroke-width"];
+const _hoisted_2$I = ["width", "height"];
+const _hoisted_3$F = ["d"];
+const _hoisted_4$C = ["stroke-width"];
+const _hoisted_5$x = ["stroke-width"];
 const _hoisted_6$s = ["width", "height"];
 const _hoisted_7$r = {
   key: 3,
   class: "loader-text"
 };
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "UiLoader",
   props: {
-    size: { default: 80 },
+    size: { default: "md" },
     color: { default: "primary" },
-    variant: { default: "spinner" },
+    variant: { default: "circle" },
     text: {},
     centered: { type: Boolean, default: true },
     weight: { default: 30 },
@@ -217,6 +217,19 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const path = logo.replace(/<svg[^>]*>/, "").replace(/<\/svg>/, "").trim();
     const d = path.match(/d="([^"]*)"/)?.[1] || "";
+    const props = __props;
+    const sizeMap = {
+      "sm": 32,
+      "md": 48,
+      "lg": 64,
+      "xl": 80
+    };
+    const computedSize = computed(() => {
+      if (typeof props.size === "number") {
+        return props.size;
+      }
+      return sizeMap[props.size] || sizeMap.md;
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["loader-container", [
@@ -224,10 +237,10 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
           `loader-color-${_ctx.color}`
         ]])
       }, [
-        _ctx.variant === "spinner" ? (openBlock(), createElementBlock("div", _hoisted_1$Q, [
+        _ctx.variant === "spinner" ? (openBlock(), createElementBlock("div", _hoisted_1$R, [
           (openBlock(), createElementBlock("svg", {
-            width: _ctx.size,
-            height: _ctx.size,
+            width: computedSize.value,
+            height: computedSize.value,
             viewBox: "0 0 500 500"
           }, [
             createElementVNode("defs", null, [
@@ -235,7 +248,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
                 id: "logo-path",
                 d: unref(d),
                 transform: "translate(81, 13) scale(1.0)"
-              }, null, 8, _hoisted_3$E)
+              }, null, 8, _hoisted_3$F)
             ]),
             createElementVNode("use", {
               href: "#logo-path",
@@ -244,7 +257,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
               "stroke-width": _ctx.weight,
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
-            }, null, 8, _hoisted_4$B),
+            }, null, 8, _hoisted_4$C),
             createElementVNode("use", {
               href: "#logo-path",
               fill: "none",
@@ -253,16 +266,16 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               class: "loader-animated-path"
-            }, null, 8, _hoisted_5$w)
-          ], 8, _hoisted_2$H))
+            }, null, 8, _hoisted_5$x)
+          ], 8, _hoisted_2$I))
         ])) : _ctx.variant === "circle" ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: "loader-circle",
-          style: normalizeStyle({ width: `${_ctx.size}px`, height: `${_ctx.size}px` })
+          style: normalizeStyle({ width: `${computedSize.value}px`, height: `${computedSize.value}px` })
         }, [
           (openBlock(), createElementBlock("svg", {
-            width: _ctx.size,
-            height: _ctx.size,
+            width: computedSize.value,
+            height: computedSize.value,
             viewBox: "0 0 50 50"
           }, [..._cache[0] || (_cache[0] = [
             createElementVNode("circle", {
@@ -280,8 +293,8 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
           key: 2,
           class: "loader-bar",
           style: normalizeStyle({
-            width: _ctx.fullWidth ? "100%" : `${_ctx.size * 1.5}px`,
-            height: `${Math.max(_ctx.size * 0.1, 4)}px`
+            width: _ctx.fullWidth ? "100%" : `${computedSize.value * 1.5}px`,
+            height: `${Math.max(computedSize.value * 0.1, 4)}px`
           })
         }, [..._cache[1] || (_cache[1] = [
           createElementVNode("div", { class: "loader-bar-track" }, [
@@ -293,21 +306,21 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiLoader = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-d8fe101d"]]);
-const _hoisted_1$P = {
+const StrandsUiLoader = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-4b565c5d"]]);
+const _hoisted_1$Q = {
   key: 0,
   class: "button-loading-content"
 };
-const _hoisted_2$G = { key: 0 };
-const _hoisted_3$D = {
+const _hoisted_2$H = { key: 0 };
+const _hoisted_3$E = {
   key: 0,
   class: "leading-icon"
 };
-const _hoisted_4$A = {
+const _hoisted_4$B = {
   key: 1,
   class: "trailing-icon"
 };
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "UiButton.Content",
   props: {
     loading: { type: Boolean, default: false },
@@ -349,25 +362,25 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       return props.size ? `button-content-${props.size}` : "button-content-md";
     });
     return (_ctx, _cache) => {
-      return _ctx.loading ? (openBlock(), createElementBlock("span", _hoisted_1$P, [
+      return _ctx.loading ? (openBlock(), createElementBlock("span", _hoisted_1$Q, [
         createVNode(StrandsUiLoader, {
           variant: "circle",
           size: loaderSize.value,
           centered: false,
           color: "white"
         }, null, 8, ["size"]),
-        !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_2$G, toDisplayString(_ctx.loadingText || "Loading..."), 1)) : createCommentVNode("", true)
+        !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_2$H, toDisplayString(_ctx.loadingText || "Loading..."), 1)) : createCommentVNode("", true)
       ])) : (openBlock(), createElementBlock("span", {
         key: 1,
         class: normalizeClass(["button-content", sizeClass.value])
       }, [
         _ctx.icon ? renderSlot(_ctx.$slots, "icon", { key: 0 }, void 0, true) : (openBlock(), createElementBlock(Fragment$1, { key: 1 }, [
-          hasLeadingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_3$D, [
+          hasLeadingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_3$E, [
             renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
           ])) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "icon", {}, void 0, true),
           renderSlot(_ctx.$slots, "default", {}, void 0, true),
-          hasTrailingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_4$A, [
+          hasTrailingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_4$B, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ], 64))
@@ -375,9 +388,9 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiButtonContent = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-5aa4146e"]]);
-const _hoisted_1$O = ["href", "target", "rel"];
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const UiButtonContent = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-5aa4146e"]]);
+const _hoisted_1$P = ["href", "target", "rel"];
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "UiButton.Anchor",
   props: {
     to: {},
@@ -441,11 +454,11 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 8, ["loading", "loading-text", "icon"])
-      ], 14, _hoisted_1$O);
+      ], 14, _hoisted_1$P);
     };
   }
 });
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "UiButton.Nuxt",
   props: {
     to: {},
@@ -509,7 +522,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "UiButton.Vue",
   props: {
     to: {},
@@ -565,8 +578,8 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$N = ["type", "disabled"];
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _hoisted_1$O = ["type", "disabled"];
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "UiButton",
   props: {
     variant: { default: "primary" },
@@ -663,7 +676,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             key: "1"
           } : void 0
         ]), 1032, ["loading", "loading-text", "icon", "size"])
-      ], 14, _hoisted_1$N)) : isNuxtAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$V, {
+      ], 14, _hoisted_1$O)) : isNuxtAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$W, {
         key: 1,
         to: _ctx.to,
         disabled: _ctx.disabled,
@@ -696,7 +709,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
           ]),
           key: "1"
         } : void 0
-      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles"])) : isVueRouterAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$U, {
+      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles"])) : isVueRouterAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$V, {
         key: 2,
         to: _ctx.to,
         disabled: _ctx.disabled,
@@ -729,7 +742,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
           ]),
           key: "1"
         } : void 0
-      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles"])) : (openBlock(), createBlock(_sfc_main$W, {
+      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles"])) : (openBlock(), createBlock(_sfc_main$X, {
         key: 3,
         to: _ctx.to,
         href: _ctx.href,
@@ -768,22 +781,22 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-ad63cbda"]]);
+const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-a5942725"]]);
 const CompoundUiButton = StrandsUiButton;
 CompoundUiButton.Content = UiButtonContent;
-CompoundUiButton.Anchor = _sfc_main$W;
-CompoundUiButton.Nuxt = _sfc_main$V;
-CompoundUiButton.Vue = _sfc_main$U;
-const _hoisted_1$M = {
+CompoundUiButton.Anchor = _sfc_main$X;
+CompoundUiButton.Nuxt = _sfc_main$W;
+CompoundUiButton.Vue = _sfc_main$V;
+const _hoisted_1$N = {
   key: 0,
   class: "ui-card-header"
 };
-const _hoisted_2$F = { class: "ui-card-content" };
-const _hoisted_3$C = {
+const _hoisted_2$G = { class: "ui-card-content" };
+const _hoisted_3$D = {
   key: 1,
   class: "ui-card-footer"
 };
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "UiCard",
   props: {
     variant: { default: "default" },
@@ -801,20 +814,20 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           `ui-card-color-${_ctx.color}`
         ]])
       }, [
-        _ctx.$slots["header"] ? (openBlock(), createElementBlock("div", _hoisted_1$M, [
+        _ctx.$slots["header"] ? (openBlock(), createElementBlock("div", _hoisted_1$N, [
           renderSlot(_ctx.$slots, "header", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$F, [
+        createElementVNode("div", _hoisted_2$G, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
-        _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_3$C, [
+        _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_3$D, [
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-2c11aaa2"]]);
+const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-2c11aaa2"]]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -1368,24 +1381,24 @@ const X = createLucideIcon("x", [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ]);
-const _hoisted_1$L = {
+const _hoisted_1$M = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$E = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck"];
-const _hoisted_3$B = {
+const _hoisted_2$F = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck"];
+const _hoisted_3$C = {
   key: 1,
   class: "input-trailing-icon"
 };
-const _hoisted_4$z = {
+const _hoisted_4$A = {
   key: 2,
   class: "input-trailing-icon"
 };
-const _hoisted_5$v = {
+const _hoisted_5$w = {
   key: 3,
   class: "input-trailing-icon"
 };
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Text",
   props: {
     type: { default: "text" },
@@ -1468,7 +1481,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["input-field-wrapper", wrapperClasses.value])
       }, [
-        _ctx.$slots["leading-icon"] ? (openBlock(), createElementBlock("div", _hoisted_1$L, [
+        _ctx.$slots["leading-icon"] ? (openBlock(), createElementBlock("div", _hoisted_1$M, [
           renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -1489,8 +1502,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
           onBlur: handleBlur,
           onFocus: handleFocus,
           onKeydown: handleKeydown
-        }, null, 42, _hoisted_2$E),
-        _ctx.type === "password" ? (openBlock(), createElementBlock("div", _hoisted_3$B, [
+        }, null, 42, _hoisted_2$F),
+        _ctx.type === "password" ? (openBlock(), createElementBlock("div", _hoisted_3$C, [
           createVNode(StrandsUiButton, {
             color: showPassword.value ? "primary" : "secondary",
             variant: showPassword.value ? "primary" : "ghost",
@@ -1505,7 +1518,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["color", "variant", "aria-label"])
-        ])) : _ctx.type === "search" && _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", _hoisted_4$z, [
+        ])) : _ctx.type === "search" && _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", _hoisted_4$A, [
           createVNode(StrandsUiButton, {
             color: "danger",
             variant: "ghost",
@@ -1520,24 +1533,24 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           })
-        ])) : hasTrailingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_5$v, [
+        ])) : hasTrailingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_5$w, [
           renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const UiInputText = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-728dfbde"]]);
-const _hoisted_1$K = {
+const UiInputText = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-728dfbde"]]);
+const _hoisted_1$L = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$D = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "cols", "maxlength", "autocomplete", "spellcheck"];
-const _hoisted_3$A = {
+const _hoisted_2$E = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "cols", "maxlength", "autocomplete", "spellcheck"];
+const _hoisted_3$B = {
   key: 1,
   class: "input-trailing-icon"
 };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Textarea",
   props: {
     modelValue: {},
@@ -1599,7 +1612,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["input-field-wrapper input-textarea", wrapperClasses.value])
       }, [
-        _ctx.$slots["leading-icon"] ? (openBlock(), createElementBlock("div", _hoisted_1$K, [
+        _ctx.$slots["leading-icon"] ? (openBlock(), createElementBlock("div", _hoisted_1$L, [
           renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("div", {
@@ -1625,16 +1638,16 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur,
             onFocus: handleFocus,
             onKeydown: handleKeydown
-          }, null, 42, _hoisted_2$D)
+          }, null, 42, _hoisted_2$E)
         ], 2),
-        _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_3$A, [
+        _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_3$B, [
           renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const UiInputTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-acf98514"]]);
+const UiInputTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-acf98514"]]);
 function useFloatingPosition(options) {
   const {
     trigger,
@@ -1837,17 +1850,17 @@ function useFloatingPosition(options) {
     cleanup
   };
 }
-const _hoisted_1$J = {
+const _hoisted_1$K = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$C = ["aria-expanded", "aria-controls"];
-const _hoisted_3$z = { class: "input-select-value" };
-const _hoisted_4$y = {
+const _hoisted_2$D = ["aria-expanded", "aria-controls"];
+const _hoisted_3$A = { class: "input-select-value" };
+const _hoisted_4$z = {
   key: 0,
   class: "input-select-text"
 };
-const _hoisted_5$u = {
+const _hoisted_5$v = {
   key: 1,
   class: "input-select-placeholder"
 };
@@ -1875,7 +1888,7 @@ const _hoisted_14$l = {
   key: 0,
   class: "input-dropdown-option-check"
 };
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Select",
   props: {
     modelValue: {},
@@ -2140,7 +2153,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             paddingClasses.value
           ]])
         }, [
-          _ctx.$slots["leading-icon"] ? (openBlock(), createElementBlock("div", _hoisted_1$J, [
+          _ctx.$slots["leading-icon"] ? (openBlock(), createElementBlock("div", _hoisted_1$K, [
             renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
           ])) : createCommentVNode("", true),
           createElementVNode("div", {
@@ -2155,15 +2168,15 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             "aria-haspopup": true,
             "aria-controls": dropdownId.value
           }, [
-            createElementVNode("div", _hoisted_3$z, [
-              displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$y, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$u, toDisplayString(_ctx.placeholder || "Select an option..."), 1))
+            createElementVNode("div", _hoisted_3$A, [
+              displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$z, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$v, toDisplayString(_ctx.placeholder || "Select an option..."), 1))
             ]),
             createElementVNode("div", {
               class: normalizeClass(["input-select-arrow", { "input-select-arrow-open": dropdownState.value.isOpen }])
             }, [
               createVNode(unref(ChevronDown))
             ], 2)
-          ], 42, _hoisted_2$C),
+          ], 42, _hoisted_2$D),
           _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_6$r, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
@@ -2232,12 +2245,12 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-985cba8d"]]);
-const _hoisted_1$I = { class: "input-leading-icon" };
-const _hoisted_2$B = ["src"];
-const _hoisted_3$y = ["id", "accept", "multiple", "disabled", "required"];
-const _hoisted_4$x = { class: "input-file-content" };
-const _hoisted_5$t = {
+const UiInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-985cba8d"]]);
+const _hoisted_1$J = { class: "input-leading-icon" };
+const _hoisted_2$C = ["src"];
+const _hoisted_3$z = ["id", "accept", "multiple", "disabled", "required"];
+const _hoisted_4$y = { class: "input-file-content" };
+const _hoisted_5$u = {
   key: 0,
   class: "input-file-prompt"
 };
@@ -2262,7 +2275,7 @@ const _hoisted_14$k = {
   key: 1,
   class: "input-trailing-icon"
 };
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "UiInput.File",
   props: {
     modelValue: {},
@@ -2440,13 +2453,13 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
           paddingClasses.value
         ]])
       }, [
-        createElementVNode("div", _hoisted_1$I, [
+        createElementVNode("div", _hoisted_1$J, [
           hasImageSelected.value && imagePreviewUrl.value ? (openBlock(), createElementBlock("img", {
             key: 0,
             src: imagePreviewUrl.value,
             alt: "Preview",
             class: "input-file-preview"
-          }, null, 8, _hoisted_2$B)) : _ctx.$slots["leading-icon"] ? renderSlot(_ctx.$slots, "leading-icon", { key: 1 }, void 0, true) : (openBlock(), createBlock(unref(FileInput), { key: 2 }))
+          }, null, 8, _hoisted_2$C)) : _ctx.$slots["leading-icon"] ? renderSlot(_ctx.$slots, "leading-icon", { key: 1 }, void 0, true) : (openBlock(), createBlock(unref(FileInput), { key: 2 }))
         ]),
         createElementVNode("div", {
           class: normalizeClass(["input-file-area", {
@@ -2471,9 +2484,9 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             onChange: handleFileSelect,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }, null, 40, _hoisted_3$y),
-          createElementVNode("div", _hoisted_4$x, [
-            selectedFiles.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$t, [
+          }, null, 40, _hoisted_3$z),
+          createElementVNode("div", _hoisted_4$y, [
+            selectedFiles.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$u, [
               createElementVNode("div", _hoisted_6$q, toDisplayString(_ctx.dragDropText || "Click to select or drag and drop"), 1),
               _ctx.accept ? (openBlock(), createElementBlock("div", _hoisted_7$p, toDisplayString(_ctx.accept), 1)) : createCommentVNode("", true)
             ])) : (openBlock(), createElementBlock("div", _hoisted_8$n, [
@@ -2508,19 +2521,19 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputFile = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-1328dc4f"]]);
-const _hoisted_1$H = { class: "tabs-wrapper" };
-const _hoisted_2$A = {
+const UiInputFile = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-1328dc4f"]]);
+const _hoisted_1$I = { class: "tabs-wrapper" };
+const _hoisted_2$B = {
   key: 0,
   class: "tabs-before"
 };
-const _hoisted_3$x = ["aria-selected", "id", "onClick"];
-const _hoisted_4$w = {
+const _hoisted_3$y = ["aria-selected", "id", "onClick"];
+const _hoisted_4$x = {
   key: 1,
   class: "tabs-after"
 };
-const _hoisted_5$s = ["aria-labelledby"];
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _hoisted_5$t = ["aria-labelledby"];
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "UiTabs",
   props: {
     modelValue: {},
@@ -2847,7 +2860,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           { "tabs-container--with-content": hasContentSlot.value }
         ]])
       }, [
-        createElementVNode("div", _hoisted_1$H, [
+        createElementVNode("div", _hoisted_1$I, [
           createElementVNode("div", {
             class: normalizeClass(["tabs-list", [
               `tabs-list--${_ctx.orientation}`,
@@ -2856,7 +2869,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
             ]]),
             style: normalizeStyle(_ctx.sticky ? { position: "sticky", [_ctx.sticky.side]: `${_ctx.sticky.offset}px`, zIndex: 10 } : {})
           }, [
-            _ctx.$slots["before"] ? (openBlock(), createElementBlock("div", _hoisted_2$A, [
+            _ctx.$slots["before"] ? (openBlock(), createElementBlock("div", _hoisted_2$B, [
               renderSlot(_ctx.$slots, "before", {}, void 0, true)
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
@@ -2880,7 +2893,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                   id: `tab-${tab.value}`,
                   role: "tab",
                   onClick: ($event) => handleTabClick(tab.value, index)
-                }, toDisplayString(tab.label), 11, _hoisted_3$x);
+                }, toDisplayString(tab.label), 11, _hoisted_3$y);
               }), 128)),
               createElementVNode("div", {
                 class: normalizeClass(["tab-background", { "no-transition": !enableTransitions.value }]),
@@ -2891,7 +2904,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle(underlineStyle.value)
               }, null, 6)
             ], 2),
-            _ctx.$slots["after"] ? (openBlock(), createElementBlock("div", _hoisted_4$w, [
+            _ctx.$slots["after"] ? (openBlock(), createElementBlock("div", _hoisted_4$x, [
               renderSlot(_ctx.$slots, "after", {}, void 0, true)
             ])) : createCommentVNode("", true)
           ], 6)
@@ -2904,17 +2917,17 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           id: "tabpanel"
         }, [
           renderSlot(_ctx.$slots, "content", { activeTab: activeTab.value }, void 0, true)
-        ], 10, _hoisted_5$s)) : createCommentVNode("", true)
+        ], 10, _hoisted_5$t)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-edff91a5"]]);
-const _hoisted_1$G = {
+const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-edff91a5"]]);
+const _hoisted_1$H = {
   key: 0,
   class: "ui-divider-text"
 };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "UiDivider",
   props: {
     orientation: { default: "horizontal" },
@@ -2968,7 +2981,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
         ]),
         style: normalizeStyle(dividerStyle.value)
       }, [
-        hasText.value ? (openBlock(), createElementBlock("span", _hoisted_1$G, [
+        hasText.value ? (openBlock(), createElementBlock("span", _hoisted_1$H, [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(_ctx.text), 1)
           ], true)
@@ -2977,15 +2990,15 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiDivider = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-1c798024"]]);
-const _hoisted_1$F = { class: "datetime-picker-wrapper" };
-const _hoisted_2$z = { class: "datetime-picker-leading-icon" };
-const _hoisted_3$w = { class: "datetime-picker-display" };
-const _hoisted_4$v = {
+const UiDivider = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-1c798024"]]);
+const _hoisted_1$G = { class: "datetime-picker-wrapper" };
+const _hoisted_2$A = { class: "datetime-picker-leading-icon" };
+const _hoisted_3$x = { class: "datetime-picker-display" };
+const _hoisted_4$w = {
   key: 0,
   class: "datetime-picker-value"
 };
-const _hoisted_5$r = {
+const _hoisted_5$s = {
   key: 1,
   class: "datetime-picker-placeholder"
 };
@@ -3018,7 +3031,7 @@ const _hoisted_20$b = {
 };
 const _hoisted_21$b = { class: "time-scroll" };
 const _hoisted_22$9 = { class: "datetime-picker-footer" };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "UiDateTimePicker",
   props: {
     modelValue: {},
@@ -3350,7 +3363,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       cleanupFloating();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$F, [
+      return openBlock(), createElementBlock("div", _hoisted_1$G, [
         createElementVNode("div", {
           ref_key: "triggerElement",
           ref: triggerElement,
@@ -3360,11 +3373,11 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           ]]),
           onClick: togglePicker
         }, [
-          createElementVNode("div", _hoisted_2$z, [
+          createElementVNode("div", _hoisted_2$A, [
             _ctx.type === "date" ? (openBlock(), createBlock(unref(Calendar), { key: 0 })) : _ctx.type === "time" ? (openBlock(), createBlock(unref(Clock), { key: 1 })) : (openBlock(), createBlock(unref(CalendarClock), { key: 2 }))
           ]),
-          createElementVNode("div", _hoisted_3$w, [
-            displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$v, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$r, toDisplayString(_ctx.placeholder || getDefaultPlaceholder()), 1))
+          createElementVNode("div", _hoisted_3$x, [
+            displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$w, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$s, toDisplayString(_ctx.placeholder || getDefaultPlaceholder()), 1))
           ]),
           _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -3619,8 +3632,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-10c66504"]]);
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const UiDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-10c66504"]]);
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Date",
   props: {
     modelValue: {},
@@ -3663,7 +3676,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Time",
   props: {
     modelValue: {},
@@ -3704,7 +3717,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "UiInput.DateTime",
   props: {
     modelValue: {},
@@ -24703,14 +24716,14 @@ var TextAlign = Extension.create({
 });
 var index_default$1 = TextAlign;
 var index_default = Placeholder;
-const _hoisted_1$E = { class: "input-richtext-toolbar" };
-const _hoisted_2$y = { class: "input-richtext-group" };
-const _hoisted_3$v = { class: "input-richtext-group" };
-const _hoisted_4$u = { class: "input-richtext-group" };
-const _hoisted_5$q = { class: "input-richtext-group" };
+const _hoisted_1$F = { class: "input-richtext-toolbar" };
+const _hoisted_2$z = { class: "input-richtext-group" };
+const _hoisted_3$w = { class: "input-richtext-group" };
+const _hoisted_4$v = { class: "input-richtext-group" };
+const _hoisted_5$r = { class: "input-richtext-group" };
 const _hoisted_6$o = { class: "input-richtext-group" };
 const _hoisted_7$n = { class: "input-richtext-editor-wrapper" };
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "UiInput.RichText",
   props: {
     modelValue: {},
@@ -24790,8 +24803,8 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           "input-disabled": _ctx.disabled
         }])
       }, [
-        createElementVNode("div", _hoisted_1$E, [
-          createElementVNode("div", _hoisted_2$y, [
+        createElementVNode("div", _hoisted_1$F, [
+          createElementVNode("div", _hoisted_2$z, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive("bold") ? "primary" : "secondary",
               size: "sm",
@@ -24854,7 +24867,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             spacing: "28px",
             margin: "4px"
           }),
-          createElementVNode("div", _hoisted_3$v, [
+          createElementVNode("div", _hoisted_3$w, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive("heading", { level: 1 }) ? "primary" : "secondary",
               size: "sm",
@@ -24903,7 +24916,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             spacing: "28px",
             margin: "4px"
           }),
-          createElementVNode("div", _hoisted_4$u, [
+          createElementVNode("div", _hoisted_4$v, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive({ textAlign: "left" }) ? "primary" : "secondary",
               size: "sm",
@@ -24952,7 +24965,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             spacing: "28px",
             margin: "4px"
           }),
-          createElementVNode("div", _hoisted_5$q, [
+          createElementVNode("div", _hoisted_5$r, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive("bulletList") ? "primary" : "secondary",
               size: "sm",
@@ -25071,22 +25084,22 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputRichText = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-1031412d"]]);
-const _hoisted_1$D = { class: "input-container" };
-const _hoisted_2$x = ["for"];
-const _hoisted_3$u = {
+const UiInputRichText = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-1031412d"]]);
+const _hoisted_1$E = { class: "input-container" };
+const _hoisted_2$y = ["for"];
+const _hoisted_3$v = {
   key: 0,
   class: "input-required"
 };
-const _hoisted_4$t = {
+const _hoisted_4$u = {
   key: 9,
   class: "input-error-text"
 };
-const _hoisted_5$p = {
+const _hoisted_5$q = {
   key: 10,
   class: "input-help-text"
 };
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "UiInput",
   props: {
     type: {},
@@ -25151,15 +25164,15 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       emit("file-error", error);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$D, [
+      return openBlock(), createElementBlock("div", _hoisted_1$E, [
         props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           for: inputId.value,
           class: "input-label"
         }, [
           createTextVNode(toDisplayString(props.label) + " ", 1),
-          props.required ? (openBlock(), createElementBlock("span", _hoisted_3$u, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_2$x)) : createCommentVNode("", true),
+          props.required ? (openBlock(), createElementBlock("span", _hoisted_3$v, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_2$y)) : createCommentVNode("", true),
         isTextInput.value ? (openBlock(), createBlock(UiInputText, {
           key: 1,
           "model-value": _ctx.modelValue,
@@ -25294,7 +25307,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             ]),
             key: "1"
           } : void 0
-        ]), 1032, ["model-value", "accept", "multiple", "max-file-size", "drag-drop-text", "selected-text", "disabled", "required", "input-id", "error", "size"])) : _ctx.type === "date" ? (openBlock(), createBlock(_sfc_main$K, {
+        ]), 1032, ["model-value", "accept", "multiple", "max-file-size", "drag-drop-text", "selected-text", "disabled", "required", "input-id", "error", "size"])) : _ctx.type === "date" ? (openBlock(), createBlock(_sfc_main$L, {
           key: 5,
           "model-value": _ctx.modelValue,
           placeholder: _ctx.placeholder,
@@ -25309,7 +25322,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           "onUpdate:modelValue": handleInput,
           onBlur: handleBlur,
           onFocus: handleFocus
-        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "min", "max", "input-id", "error", "size"])) : _ctx.type === "time" ? (openBlock(), createBlock(_sfc_main$J, {
+        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "min", "max", "input-id", "error", "size"])) : _ctx.type === "time" ? (openBlock(), createBlock(_sfc_main$K, {
           key: 6,
           "model-value": _ctx.modelValue,
           placeholder: _ctx.placeholder,
@@ -25322,7 +25335,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           "onUpdate:modelValue": handleInput,
           onBlur: handleBlur,
           onFocus: handleFocus
-        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "input-id", "error", "size"])) : _ctx.type === "datetime" ? (openBlock(), createBlock(_sfc_main$I, {
+        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "input-id", "error", "size"])) : _ctx.type === "datetime" ? (openBlock(), createBlock(_sfc_main$J, {
           key: 7,
           "model-value": _ctx.modelValue,
           placeholder: _ctx.placeholder,
@@ -25351,15 +25364,15 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           onBlur: handleBlur,
           onFocus: handleFocus
         }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "input-id", "error", "min-height", "max-height"])) : createCommentVNode("", true),
-        props.error && props.error !== true ? (openBlock(), createElementBlock("p", _hoisted_4$t, toDisplayString(typeof props.error === "string" ? props.error : props.error?.message || String(props.error)), 1)) : props.helpText ? (openBlock(), createElementBlock("p", _hoisted_5$p, toDisplayString(props.helpText), 1)) : createCommentVNode("", true)
+        props.error && props.error !== true ? (openBlock(), createElementBlock("p", _hoisted_4$u, toDisplayString(typeof props.error === "string" ? props.error : props.error?.message || String(props.error)), 1)) : props.helpText ? (openBlock(), createElementBlock("p", _hoisted_5$q, toDisplayString(props.helpText), 1)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-10a4eb0c"]]);
-const _hoisted_1$C = ["disabled", "aria-disabled"];
-const _hoisted_2$w = ["href", "target", "rel", "aria-disabled"];
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-10a4eb0c"]]);
+const _hoisted_1$D = ["disabled", "aria-disabled"];
+const _hoisted_2$x = ["href", "target", "rel", "aria-disabled"];
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "UiLink",
   props: {
     href: {},
@@ -25449,7 +25462,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
         onClick: handleClick2
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 14, _hoisted_1$C)) : (openBlock(), createElementBlock("a", {
+      ], 14, _hoisted_1$D)) : (openBlock(), createElementBlock("a", {
         key: 1,
         class: normalizeClass(["ui-link", [
           `ui-link-${_ctx.variant}`,
@@ -25465,13 +25478,13 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
         onClick: handleClick2
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 14, _hoisted_2$w));
+      ], 14, _hoisted_2$x));
     };
   }
 });
-const StrandsUiLink = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-3bf99110"]]);
-const _hoisted_1$B = ["aria-pressed", "aria-labelledby"];
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const StrandsUiLink = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-3bf99110"]]);
+const _hoisted_1$C = ["aria-pressed", "aria-labelledby"];
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "UiToggle",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -25511,19 +25524,19 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         createElementVNode("span", {
           class: normalizeClass(["ui-toggle-thumb", thumbClasses.value])
         }, null, 2)
-      ], 10, _hoisted_1$B);
+      ], 10, _hoisted_1$C);
     };
   }
 });
-const UiToggle = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-6c2fb8dd"]]);
-const _hoisted_1$A = { class: "accui-component-scope" };
-const _hoisted_2$v = { class: "avatar-editor-simple" };
-const _hoisted_3$t = {
+const UiToggle = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-6c2fb8dd"]]);
+const _hoisted_1$B = { class: "accui-component-scope" };
+const _hoisted_2$w = { class: "avatar-editor-simple" };
+const _hoisted_3$u = {
   key: 1,
   class: "editor-container"
 };
-const _hoisted_4$s = { class: "editor-main" };
-const _hoisted_5$o = { class: "canvas-container" };
+const _hoisted_4$t = { class: "editor-main" };
+const _hoisted_5$p = { class: "canvas-container" };
 const _hoisted_6$n = ["width", "height"];
 const _hoisted_7$m = { class: "crop-overlay" };
 const _hoisted_8$l = { class: "crop-backdrop" };
@@ -25541,7 +25554,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$8 = ["width", "height"];
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "UiAvatarEditor",
   props: {
     size: { default: 300 },
@@ -25832,8 +25845,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       }
     }, { immediate: true });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$A, [
-        createElementVNode("div", _hoisted_2$v, [
+      return openBlock(), createElementBlock("div", _hoisted_1$B, [
+        createElementVNode("div", _hoisted_2$w, [
           createElementVNode("input", {
             ref_key: "fileInput",
             ref: fileInput,
@@ -25853,9 +25866,9 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             }, ["prevent"]))
           }, [..._cache[6] || (_cache[6] = [
             createStaticVNode('<div class="upload-content"><svg class="upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><h3 class="upload-title">Upload your photo</h3><p class="upload-subtitle">Drag and drop or click to browse</p><div class="upload-formats"><span class="format-tag">JPG</span><span class="format-tag">PNG</span><span class="format-tag">GIF</span></div></div>', 1)
-          ])], 32)) : (openBlock(), createElementBlock("div", _hoisted_3$t, [
-            createElementVNode("div", _hoisted_4$s, [
-              createElementVNode("div", _hoisted_5$o, [
+          ])], 32)) : (openBlock(), createElementBlock("div", _hoisted_3$u, [
+            createElementVNode("div", _hoisted_4$t, [
+              createElementVNode("div", _hoisted_5$p, [
                 createElementVNode("canvas", {
                   ref_key: "canvas",
                   ref: canvas,
@@ -26320,11 +26333,11 @@ class SoundEffects {
   }
 }
 const playLevelUp = (level, userSettings) => SoundEffects.playLevelUp(level, userSettings);
-const _hoisted_1$z = { class: "level-progress-container" };
-const _hoisted_2$u = ["width", "height", "viewBox"];
-const _hoisted_3$s = { key: 0 };
-const _hoisted_4$r = ["r"];
-const _hoisted_5$n = ["y"];
+const _hoisted_1$A = { class: "level-progress-container" };
+const _hoisted_2$v = ["width", "height", "viewBox"];
+const _hoisted_3$t = { key: 0 };
+const _hoisted_4$s = ["r"];
+const _hoisted_5$o = ["y"];
 const _hoisted_6$m = ["d", "stroke-width"];
 const _hoisted_7$l = ["d", "stroke", "stroke-width"];
 const _hoisted_8$k = ["d"];
@@ -26350,7 +26363,7 @@ const INNER_GAP = 18;
 const ANIMATION_DURATION = 600;
 const LABEL_EXTRA_DEGREES = 12;
 const LABEL_CHAR_DEGREES = 8;
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "UiLevelProgress",
   props: {
     value: {},
@@ -26505,21 +26518,21 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       prevLevel = newLevel;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$z, [
+      return openBlock(), createElementBlock("div", _hoisted_1$A, [
         (openBlock(), createElementBlock("svg", {
           width: unref(size),
           height: unref(size),
           viewBox: `0 0 ${unref(viewBox)} ${unref(viewBox)}`,
           style: { "position": "relative" }
         }, [
-          levelUpActive.value ? (openBlock(), createElementBlock("g", _hoisted_3$s, [
+          levelUpActive.value ? (openBlock(), createElementBlock("g", _hoisted_3$t, [
             createElementVNode("circle", {
               cx: center,
               cy: center,
               r: innerCircleRadius.value,
               fill: "#a800ff",
               opacity: "0.92"
-            }, null, 8, _hoisted_4$r),
+            }, null, 8, _hoisted_4$s),
             createElementVNode("text", {
               x: center,
               y: center + 15,
@@ -26528,7 +26541,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               "font-weight": "bold",
               fill: "#fff",
               style: { "font-family": "'Montserrat', sans-serif" }
-            }, "Level Up", 8, _hoisted_5$n)
+            }, "Level Up", 8, _hoisted_5$o)
           ])) : createCommentVNode("", true),
           animatedValue.value >= 0 && animatedValue.value < props.max ? (openBlock(), createElementBlock("path", {
             key: 1,
@@ -26598,12 +26611,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               }, null, -1)
             ])], 8, _hoisted_12$j)
           ])
-        ], 8, _hoisted_2$u))
+        ], 8, _hoisted_2$v))
       ]);
     };
   }
 });
-const UiLevelProgress = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-410a88ab"]]);
+const UiLevelProgress = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-410a88ab"]]);
 class ModalStack {
   stack = [];
   escapeHandlerRegistered = false;
@@ -26741,11 +26754,14 @@ function useModalStack(options = {}) {
     if (!modalInstance.value) return null;
     return document.querySelector(`.ui-app-modal-backdrop[style*="z-index: ${modalInstance.value.zIndex - 1}"]`);
   };
-  onUnmounted(() => {
-    if (isOpen.value) {
-      closeModal();
-    }
-  });
+  try {
+    onUnmounted(() => {
+      if (isOpen.value) {
+        closeModal();
+      }
+    });
+  } catch (e) {
+  }
   return {
     // State
     isOpen,
@@ -26782,7 +26798,10 @@ function useGlobalModalStack() {
   const unsubscribe = modalStack.subscribe((state) => {
     stackState.value = state;
   });
-  onUnmounted(unsubscribe);
+  try {
+    onUnmounted(unsubscribe);
+  } catch (e) {
+  }
   return {
     state: stackState,
     closeAll: () => {
@@ -26800,16 +26819,16 @@ function useGlobalModalStack() {
     }
   };
 }
-const _hoisted_1$y = {
+const _hoisted_1$z = {
   key: 0,
   class: "ui-modal-backdrop",
   role: "dialog",
   "aria-modal": "true"
 };
-const _hoisted_2$t = { class: "ui-modal-header-content" };
-const _hoisted_3$r = { class: "ui-modal-title" };
-const _hoisted_4$q = { key: 0 };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _hoisted_2$u = { class: "ui-modal-header-content" };
+const _hoisted_3$s = { class: "ui-modal-title" };
+const _hoisted_4$r = { key: 0 };
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "UiModal",
   props: {
     modelValue: { type: Boolean, default: void 0 },
@@ -26961,7 +26980,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         }, [
           createVNode(Transition, { name: "modal" }, {
             default: withCtx(() => [
-              isModalOpen.value ? (openBlock(), createElementBlock("div", _hoisted_1$y, [
+              isModalOpen.value ? (openBlock(), createElementBlock("div", _hoisted_1$z, [
                 createElementVNode("div", {
                   class: "ui-modal-container",
                   ref_key: "modalContainer",
@@ -26976,14 +26995,14 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                     tabindex: "-1"
                   }, createSlots({
                     header: withCtx(() => [
-                      createElementVNode("div", _hoisted_2$t, [
-                        createElementVNode("div", _hoisted_3$r, [
+                      createElementVNode("div", _hoisted_2$u, [
+                        createElementVNode("div", _hoisted_3$s, [
                           renderSlot(_ctx.$slots, "header", {
                             handleClose: closeModal,
                             isOpen: isModalOpen.value,
                             openModal
                           }, () => [
-                            _ctx.$props.title ? (openBlock(), createElementBlock("h2", _hoisted_4$q, toDisplayString(_ctx.$props.title), 1)) : createCommentVNode("", true)
+                            _ctx.$props.title ? (openBlock(), createElementBlock("h2", _hoisted_4$r, toDisplayString(_ctx.$props.title), 1)) : createCommentVNode("", true)
                           ], true)
                         ]),
                         _ctx.showCloseButton ? (openBlock(), createElementBlock("button", {
@@ -27033,7 +27052,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiModal = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-dece6264"]]);
+const UiModal = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-dece6264"]]);
 const tailwindColors = {
   "#000000": {
     label: "Black"
@@ -27636,11 +27655,11 @@ const tailwindColors = {
     ]
   }
 };
-const _hoisted_1$x = { class: "ui-color-picker" };
-const _hoisted_2$s = { class: "ui-color-picker-main" };
-const _hoisted_3$q = ["viewBox"];
-const _hoisted_4$p = ["d"];
-const _hoisted_5$m = ["d"];
+const _hoisted_1$y = { class: "ui-color-picker" };
+const _hoisted_2$t = { class: "ui-color-picker-main" };
+const _hoisted_3$r = ["viewBox"];
+const _hoisted_4$q = ["d"];
+const _hoisted_5$n = ["d"];
 const _hoisted_6$l = ["d"];
 const _hoisted_7$k = ["d"];
 const _hoisted_8$j = ["d"];
@@ -27719,7 +27738,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$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "UiColorPicker.Picker",
   props: {
     contrastLabel: {},
@@ -29264,8 +29283,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       document.removeEventListener("touchend", handleAreaMouseUp);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$x, [
-        createElementVNode("div", _hoisted_2$s, [
+      return openBlock(), createElementBlock("div", _hoisted_1$y, [
+        createElementVNode("div", _hoisted_2$t, [
           createElementVNode("div", {
             ref_key: "colorAreaRef",
             ref: colorAreaRef,
@@ -29333,14 +29352,14 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                   fill: "url(#orangeDotsPattern)",
                   "clip-path": "url(#canvasClip)",
                   opacity: "0.4"
-                }, null, 8, _hoisted_4$p)) : createCommentVNode("", true),
+                }, null, 8, _hoisted_4$q)) : createCommentVNode("", true),
                 contrastDotsLargeTextPath.value ? (openBlock(), createElementBlock("path", {
                   key: 1,
                   d: contrastDotsLargeTextPath.value,
                   fill: "url(#redDotsPattern)",
                   "clip-path": "url(#canvasClip)",
                   opacity: "0.4"
-                }, null, 8, _hoisted_5$m)) : createCommentVNode("", true),
+                }, null, 8, _hoisted_5$n)) : createCommentVNode("", true),
                 contrastBoundaryTopCurve.value ? (openBlock(), createElementBlock("path", {
                   key: 2,
                   d: contrastBoundaryTopCurve.value,
@@ -29387,7 +29406,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                   "stroke-opacity": "0.5",
                   "clip-path": "url(#canvasClip)"
                 }, null, 8, _hoisted_9$i)) : createCommentVNode("", true)
-              ], 8, _hoisted_3$q)) : createCommentVNode("", true)
+              ], 8, _hoisted_3$r)) : createCommentVNode("", true)
             ], 2)) : createCommentVNode("", true),
             createElementVNode("div", {
               class: "ui-color-picker-cursor",
@@ -29906,10 +29925,10 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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$r = { class: "ui-color-picker-button-preview" };
-const _sfc_main$z = /* @__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 _hoisted_2$s = { class: "ui-color-picker-button-preview" };
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "UiColorPicker.Button",
   props: {
     modelValue: {},
@@ -29993,7 +30012,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       cleanupFloating();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$w, [
+      return openBlock(), createElementBlock("div", _hoisted_1$x, [
         createVNode(StrandsUiButton, {
           ref_key: "buttonRef",
           ref: buttonRef,
@@ -30002,7 +30021,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           onClick: togglePopover
         }, {
           "leading-icon": withCtx(() => [
-            createElementVNode("div", _hoisted_2$r, [
+            createElementVNode("div", _hoisted_2$s, [
               createElementVNode("div", {
                 class: "ui-color-picker-button-color",
                 style: normalizeStyle({ backgroundColor: currentColorString.value })
@@ -30037,8 +30056,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiColorPickerButton = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-a03d15a6"]]);
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const UiColorPickerButton = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-a03d15a6"]]);
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "UiColorPicker",
   props: {
     modelValue: { default: "#EA00A8" },
@@ -30092,8 +30111,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$v = { class: "ui-tooltip-content" };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_1$w = { class: "ui-tooltip-content" };
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "UiTooltip",
   props: {
     content: { default: "" },
@@ -30216,7 +30235,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(tooltipStyle.value),
             role: "tooltip"
           }, [
-            createElementVNode("div", _hoisted_1$v, [
+            createElementVNode("div", _hoisted_1$w, [
               renderSlot(_ctx.$slots, "tooltip", {}, () => [
                 createTextVNode(toDisplayString(_ctx.content), 1)
               ], true)
@@ -30230,15 +30249,15 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-614c492f"]]);
-const _hoisted_1$u = { class: "ui-table-container" };
-const _hoisted_2$q = {
+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,
   class: "ui-table-header"
 };
-const _hoisted_3$p = ["onDragenter", "onDrop"];
-const _hoisted_4$o = { class: "ui-table-header-content" };
-const _hoisted_5$l = ["onClick"];
+const _hoisted_3$q = ["onDragenter", "onDrop"];
+const _hoisted_4$p = { class: "ui-table-header-content" };
+const _hoisted_5$m = ["onClick"];
 const _hoisted_6$k = ["onDragstart"];
 const _hoisted_7$j = {
   key: 1,
@@ -30271,7 +30290,7 @@ const _hoisted_25$5 = {
   key: 1,
   class: "ui-table-footer"
 };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "UiTable",
   props: {
     columns: {},
@@ -30525,7 +30544,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       return groupCount;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$u, [
+      return openBlock(), createElementBlock("div", _hoisted_1$v, [
         createElementVNode("div", {
           ref_key: "tableRef",
           ref: tableRef,
@@ -30540,7 +30559,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           ]),
           style: normalizeStyle(tableStyle.value)
         }, [
-          _ctx.columns.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$q, [
+          _ctx.columns.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$r, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.columns, (column, index) => {
               return openBlock(), createElementBlock("div", {
                 key: `header-${index}`,
@@ -30564,7 +30583,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                 onDrop: ($event) => handleDrop($event, index),
                 style: normalizeStyle(getHeaderColumnTransform(index))
               }, [
-                createElementVNode("div", _hoisted_4$o, [
+                createElementVNode("div", _hoisted_4$p, [
                   createElementVNode("div", {
                     class: "ui-table-header-main",
                     onClick: ($event) => column.sortable ? handleSort(column.key) : null
@@ -30591,7 +30610,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                         size: 16
                       }))
                     ])) : createCommentVNode("", true)
-                  ], 8, _hoisted_5$l),
+                  ], 8, _hoisted_5$m),
                   createElementVNode("div", _hoisted_8$i, [
                     _ctx.filterable || column.filterable ? (openBlock(), createElementBlock("button", {
                       key: 0,
@@ -30637,7 +30656,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                     [vModelSelect, filters.value[column.key]]
                   ]) : createCommentVNode("", true)
                 ])) : createCommentVNode("", true)
-              ], 46, _hoisted_3$p);
+              ], 46, _hoisted_3$q);
             }), 128))
           ])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_16$d, [
@@ -30755,21 +30774,21 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiTable = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-263368b2"]]);
-const _hoisted_1$t = { class: "ui-hero-content" };
-const _hoisted_2$p = {
+const UiTable = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-263368b2"]]);
+const _hoisted_1$u = { class: "ui-hero-content" };
+const _hoisted_2$q = {
   key: 0,
   class: "ui-hero-header"
 };
-const _hoisted_3$o = {
+const _hoisted_3$p = {
   key: 0,
   class: "ui-hero-title"
 };
-const _hoisted_4$n = {
+const _hoisted_4$o = {
   key: 1,
   class: "ui-hero-description"
 };
-const _hoisted_5$k = {
+const _hoisted_5$l = {
   key: 1,
   class: "ui-hero-navigation"
 };
@@ -30785,7 +30804,7 @@ const _hoisted_8$h = {
   key: 1,
   class: "ui-hero-background"
 };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "UiHero",
   props: {
     variant: { default: "minimal" },
@@ -30860,14 +30879,14 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           ]]),
           style: normalizeStyle(heroStyles.value)
         }, [
-          createElementVNode("div", _hoisted_1$t, [
-            hasHeaderSlot.value || _ctx.title || _ctx.description ? (openBlock(), createElementBlock("div", _hoisted_2$p, [
+          createElementVNode("div", _hoisted_1$u, [
+            hasHeaderSlot.value || _ctx.title || _ctx.description ? (openBlock(), createElementBlock("div", _hoisted_2$q, [
               renderSlot(_ctx.$slots, "header", {}, () => [
-                _ctx.title ? (openBlock(), createElementBlock("h1", _hoisted_3$o, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
-                _ctx.description ? (openBlock(), createElementBlock("p", _hoisted_4$n, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true)
+                _ctx.title ? (openBlock(), createElementBlock("h1", _hoisted_3$p, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
+                _ctx.description ? (openBlock(), createElementBlock("p", _hoisted_4$o, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true)
               ], true)
             ])) : createCommentVNode("", true),
-            hasNavigationSlot.value ? (openBlock(), createElementBlock("div", _hoisted_5$k, [
+            hasNavigationSlot.value ? (openBlock(), createElementBlock("div", _hoisted_5$l, [
               renderSlot(_ctx.$slots, "navigation", {}, void 0, true)
             ])) : createCommentVNode("", true),
             hasDefaultSlot.value ? (openBlock(), createElementBlock("div", _hoisted_6$j, [
@@ -30884,7 +30903,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiHero = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-00e0d581"]]);
+const UiHero = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-00e0d581"]]);
 const currentTheme = ref("system");
 const systemPrefersDark = ref(false);
 const STORAGE_KEY = "strands-ui-theme";
@@ -31070,14 +31089,14 @@ function useTheme(fallbackTheme = "auto") {
     themeClass
   };
 }
-const _hoisted_1$s = { class: "accui-component-scope" };
-const _hoisted_2$o = { class: "ui-theme-toggle" };
-const _hoisted_3$n = {
+const _hoisted_1$t = { class: "accui-component-scope" };
+const _hoisted_2$p = { class: "ui-theme-toggle" };
+const _hoisted_3$o = {
   key: 1,
   class: "ui-theme-toggle-dropdown"
 };
-const _hoisted_4$m = ["disabled", "onClick"];
-const _hoisted_5$j = {
+const _hoisted_4$n = ["disabled", "onClick"];
+const _hoisted_5$k = {
   key: 0,
   class: "ui-theme-toggle-option-indicator"
 };
@@ -31087,7 +31106,7 @@ const _hoisted_6$i = {
   role: "group",
   "aria-label": "Theme selection"
 };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "UiThemeToggle",
   props: {
     variant: { default: "button" },
@@ -31137,8 +31156,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       document.removeEventListener("click", handleClickOutside);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$s, [
-        createElementVNode("div", _hoisted_2$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+        createElementVNode("div", _hoisted_2$p, [
           _ctx.variant === "button" ? (openBlock(), createBlock(StrandsUiButton, {
             key: 0,
             icon: true,
@@ -31154,7 +31173,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
               (openBlock(), createBlock(resolveDynamicComponent(getIconComponent(currentIcon.value))))
             ]),
             _: 1
-          }, 8, ["size", "disabled", "title", "class"])) : _ctx.variant === "dropdown" ? (openBlock(), createElementBlock("div", _hoisted_3$n, [
+          }, 8, ["size", "disabled", "title", "class"])) : _ctx.variant === "dropdown" ? (openBlock(), createElementBlock("div", _hoisted_3$o, [
             createVNode(StrandsUiButton, {
               squircle: true,
               variant: "ghost",
@@ -31195,8 +31214,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                 }, [
                   (openBlock(), createBlock(resolveDynamicComponent(getIconComponent(option.icon)), { class: "ui-theme-toggle-option-icon" })),
                   createElementVNode("span", null, toDisplayString(option.label), 1),
-                  unref(currentTheme2) === option.value ? (openBlock(), createElementBlock("div", _hoisted_5$j)) : createCommentVNode("", true)
-                ], 10, _hoisted_4$m);
+                  unref(currentTheme2) === option.value ? (openBlock(), createElementBlock("div", _hoisted_5$k)) : createCommentVNode("", true)
+                ], 10, _hoisted_4$n);
               }), 128))
             ])) : createCommentVNode("", true)
           ])) : _ctx.variant === "segmented" ? (openBlock(), createElementBlock("div", _hoisted_6$i, [
@@ -31228,21 +31247,21 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiThemeToggle = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-42a061c8"]]);
-const _hoisted_1$r = {
+const UiThemeToggle = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-42a061c8"]]);
+const _hoisted_1$s = {
   key: 0,
   class: "slider-header"
 };
-const _hoisted_2$n = ["for"];
-const _hoisted_3$m = {
+const _hoisted_2$o = ["for"];
+const _hoisted_3$n = {
   key: 0,
   class: "slider-required"
 };
-const _hoisted_4$l = {
+const _hoisted_4$m = {
   key: 1,
   class: "slider-value"
 };
-const _hoisted_5$i = {
+const _hoisted_5$j = {
   key: 0,
   class: "slider-min-label"
 };
@@ -31273,7 +31292,7 @@ const _hoisted_14$f = {
   key: 1,
   class: "slider-help-text"
 };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "UiSlider",
   props: {
     modelValue: { default: 0 },
@@ -31377,21 +31396,21 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           }
         ]])
       }, [
-        _ctx.label || _ctx.showValue ? (openBlock(), createElementBlock("div", _hoisted_1$r, [
+        _ctx.label || _ctx.showValue ? (openBlock(), createElementBlock("div", _hoisted_1$s, [
           _ctx.label ? (openBlock(), createElementBlock("label", {
             key: 0,
             for: _ctx.inputId,
             class: "slider-label"
           }, [
             createTextVNode(toDisplayString(_ctx.label) + " ", 1),
-            _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_3$m, "*")) : createCommentVNode("", true)
-          ], 8, _hoisted_2$n)) : createCommentVNode("", true),
-          _ctx.showValue ? (openBlock(), createElementBlock("div", _hoisted_4$l, toDisplayString(displayValue.value) + toDisplayString(_ctx.unit), 1)) : createCommentVNode("", true)
+            _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_3$n, "*")) : createCommentVNode("", true)
+          ], 8, _hoisted_2$o)) : createCommentVNode("", true),
+          _ctx.showValue ? (openBlock(), createElementBlock("div", _hoisted_4$m, toDisplayString(displayValue.value) + toDisplayString(_ctx.unit), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["slider-container", { "slider-error": _ctx.error }])
         }, [
-          _ctx.showMinMax ? (openBlock(), createElementBlock("div", _hoisted_5$i, toDisplayString(_ctx.min) + toDisplayString(_ctx.unit), 1)) : createCommentVNode("", true),
+          _ctx.showMinMax ? (openBlock(), createElementBlock("div", _hoisted_5$j, toDisplayString(_ctx.min) + toDisplayString(_ctx.unit), 1)) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_6$h, [
             createElementVNode("input", {
               id: _ctx.inputId,
@@ -31446,21 +31465,21 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiSlider = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-39aa55d9"]]);
-const _hoisted_1$q = {
+const UiSlider = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-39aa55d9"]]);
+const _hoisted_1$r = {
   key: 0,
   class: "radio-group-label"
 };
-const _hoisted_2$m = {
+const _hoisted_2$n = {
   key: 0,
   class: "radio-group-required"
 };
-const _hoisted_3$l = {
+const _hoisted_3$m = {
   key: 1,
   class: "radio-group-description"
 };
-const _hoisted_4$k = ["onClick"];
-const _hoisted_5$h = ["id", "name", "value", "checked", "disabled", "required"];
+const _hoisted_4$l = ["onClick"];
+const _hoisted_5$i = ["id", "name", "value", "checked", "disabled", "required"];
 const _hoisted_6$g = { class: "radio-content" };
 const _hoisted_7$g = ["for"];
 const _hoisted_8$f = {
@@ -31483,7 +31502,7 @@ const _hoisted_12$f = {
   key: 1,
   class: "radio-help-text"
 };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "UiRadioGroup",
   props: {
     modelValue: {},
@@ -31533,11 +31552,11 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           { "radio-group-disabled": _ctx.disabled }
         ]])
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_1$q, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_1$r, [
           createTextVNode(toDisplayString(_ctx.label) + " ", 1),
-          _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_2$m, "*")) : createCommentVNode("", true)
+          _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_2$n, "*")) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        _ctx.description ? (openBlock(), createElementBlock("p", _hoisted_3$l, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true),
+        _ctx.description ? (openBlock(), createElementBlock("p", _hoisted_3$m, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["radio-options", [
             orientationClasses.value,
@@ -31568,7 +31587,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                 onChange: handleInputChange,
                 onFocus: handleFocus,
                 onBlur: handleBlur
-              }, null, 40, _hoisted_5$h),
+              }, null, 40, _hoisted_5$i),
               _cache[0] || (_cache[0] = createElementVNode("div", { class: "radio-button" }, [
                 createElementVNode("div", { class: "radio-button-inner" })
               ], -1)),
@@ -31582,7 +31601,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                   (openBlock(), createBlock(resolveDynamicComponent(option.icon)))
                 ])) : createCommentVNode("", true)
               ])
-            ], 10, _hoisted_4$k);
+            ], 10, _hoisted_4$l);
           }), 128))
         ], 2),
         _ctx.helpText || _ctx.error ? (openBlock(), createElementBlock("div", _hoisted_10$f, [
@@ -31592,21 +31611,21 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-4095f911"]]);
-const _hoisted_1$p = {
+const UiRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-4095f911"]]);
+const _hoisted_1$q = {
   key: 0,
   class: "checkbox-group-label"
 };
-const _hoisted_2$l = {
+const _hoisted_2$m = {
   key: 0,
   class: "checkbox-group-required"
 };
-const _hoisted_3$k = {
+const _hoisted_3$l = {
   key: 1,
   class: "checkbox-group-description"
 };
-const _hoisted_4$j = ["onClick"];
-const _hoisted_5$g = ["id", "name", "value", "checked", "disabled", "required", "indeterminate", "onChange"];
+const _hoisted_4$k = ["onClick"];
+const _hoisted_5$h = ["id", "name", "value", "checked", "disabled", "required", "indeterminate", "onChange"];
 const _hoisted_6$f = { class: "checkbox-button" };
 const _hoisted_7$f = {
   key: 0,
@@ -31661,7 +31680,7 @@ const _hoisted_21$7 = {
   key: 1,
   class: "checkbox-help-text"
 };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "UiCheckboxGroup",
   props: {
     modelValue: { default: () => [] },
@@ -31751,11 +31770,11 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           { "checkbox-group-disabled": _ctx.disabled }
         ]])
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_1$p, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_1$q, [
           createTextVNode(toDisplayString(_ctx.label) + " ", 1),
-          _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_2$l, "*")) : createCommentVNode("", true)
+          _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_2$m, "*")) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        _ctx.description ? (openBlock(), createElementBlock("p", _hoisted_3$k, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true),
+        _ctx.description ? (openBlock(), createElementBlock("p", _hoisted_3$l, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["checkbox-options", [
             orientationClasses.value,
@@ -31788,7 +31807,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                 onChange: (event) => handleInputChange(option),
                 onFocus: handleFocus,
                 onBlur: handleBlur
-              }, null, 40, _hoisted_5$g),
+              }, null, 40, _hoisted_5$h),
               createElementVNode("div", _hoisted_6$f, [
                 isSelected(option.value) ? (openBlock(), createElementBlock("svg", _hoisted_7$f, [..._cache[0] || (_cache[0] = [
                   createElementVNode("path", {
@@ -31814,7 +31833,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                   (openBlock(), createBlock(resolveDynamicComponent(option.icon)))
                 ])) : createCommentVNode("", true)
               ])
-            ], 10, _hoisted_4$j);
+            ], 10, _hoisted_4$k);
           }), 128))
         ], 2),
         _ctx.showSelectAll && _ctx.options.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_13$e, [
@@ -31861,7 +31880,95 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-db488410"]]);
+const UiCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-db488410"]]);
+const _hoisted_1$p = { class: "accui-component-scope" };
+const _hoisted_2$l = {
+  key: 0,
+  class: "ui-pill-leading-icon"
+};
+const _hoisted_3$k = {
+  key: 1,
+  class: "ui-pill-icon"
+};
+const _hoisted_4$j = {
+  key: 2,
+  class: "ui-pill-content"
+};
+const _hoisted_5$g = {
+  key: 3,
+  class: "ui-pill-trailing-icon"
+};
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  __name: "UiPill",
+  props: {
+    variant: { default: "filled" },
+    size: { default: "md" },
+    color: { default: "primary" },
+    icon: { type: Boolean, default: false },
+    iconOnly: { type: Boolean, default: false },
+    removable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    tooltip: {}
+  },
+  emits: ["remove"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const pillClasses = computed(() => {
+      const classes = [
+        "ui-pill",
+        `ui-pill-${props.variant}`,
+        `ui-pill-${props.size}`,
+        `ui-pill-color-${props.color}`,
+        props.icon ? "ui-pill-has-icon" : "",
+        props.iconOnly ? "ui-pill-icon-only" : "",
+        props.removable ? "ui-pill-removable" : "",
+        props.disabled ? "ui-pill-disabled" : ""
+      ].filter(Boolean);
+      return classes.join(" ");
+    });
+    const pillStyles = computed(() => {
+      return {};
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$p, [
+        _ctx.variant === "dot-only" ? (openBlock(), createBlock(UiTooltip, {
+          key: 0,
+          content: _ctx.tooltip || _ctx.$slots.default?.()?.[0]?.children || "",
+          delay: 0
+        }, {
+          default: withCtx(() => [
+            createElementVNode("span", {
+              class: normalizeClass(pillClasses.value),
+              style: normalizeStyle(pillStyles.value)
+            }, null, 6)
+          ]),
+          _: 1
+        }, 8, ["content"])) : (openBlock(), createElementBlock("span", {
+          key: 1,
+          class: normalizeClass([pillClasses.value, {
+            "ui-pill-has-leading-icon": _ctx.$slots["leading-icon"],
+            "ui-pill-has-trailing-icon": _ctx.$slots["trailing-icon"]
+          }]),
+          style: normalizeStyle(pillStyles.value)
+        }, [
+          _ctx.$slots["leading-icon"] && !_ctx.iconOnly ? (openBlock(), createElementBlock("span", _hoisted_2$l, [
+            renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+          ])) : createCommentVNode("", true),
+          _ctx.icon && _ctx.iconOnly ? (openBlock(), createElementBlock("span", _hoisted_3$k, [
+            renderSlot(_ctx.$slots, "icon", {}, void 0, true)
+          ])) : createCommentVNode("", true),
+          !_ctx.iconOnly ? (openBlock(), createElementBlock("span", _hoisted_4$j, [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ])) : createCommentVNode("", true),
+          _ctx.$slots["trailing-icon"] && !_ctx.iconOnly ? (openBlock(), createElementBlock("span", _hoisted_5$g, [
+            renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+          ])) : createCommentVNode("", true)
+        ], 6))
+      ]);
+    };
+  }
+});
+const UiPill = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-defab79f"]]);
 const slotHasContent = (slotName, slots) => {
   const slot = slots[slotName];
   if (!slot) return false;
@@ -37500,7 +37607,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsSessionsModal = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-d48515ac"]]);
+const StrandsSessionsModal = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-1958a7a9"]]);
 const _hoisted_1$7 = { class: "accui-component-scope" };
 const _hoisted_2$5 = { class: "profile-content-layout" };
 const _hoisted_3$4 = { class: "profile-image-section" };
@@ -38717,7 +38824,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         ], -1)
                       ])])
                     ]),
-                    createVNode(unref(_sfc_main$D), {
+                    createVNode(unref(_sfc_main$E), {
                       uploading: uploading.value,
                       "preselected-file": selectedImageFile.value,
                       onUpload: handleAvatarUpload,
@@ -40377,11 +40484,11 @@ export {
   StrandsUIPlugin,
   StrandsUiAlert,
   UiApp as StrandsUiApp,
-  _sfc_main$D as StrandsUiAvatarEditor,
+  _sfc_main$E as StrandsUiAvatarEditor,
   CompoundUiButton as StrandsUiButton,
   StrandsUiCard,
   UiCheckboxGroup as StrandsUiCheckboxGroup,
-  _sfc_main$y as StrandsUiColorPicker,
+  _sfc_main$z as StrandsUiColorPicker,
   UiDivider as StrandsUiDivider,
   UiHero as StrandsUiHero,
   StrandsUiInput,
@@ -40389,6 +40496,7 @@ export {
   StrandsUiLink,
   StrandsUiLoader,
   UiModal as StrandsUiModal,
+  UiPill as StrandsUiPill,
   UiRadioGroup as StrandsUiRadioGroup,
   UiSlider as StrandsUiSlider,
   UiTable as StrandsUiTable,
@@ -40401,12 +40509,12 @@ export {
   _sfc_main$5 as SvgIcon,
   StrandsUiAlert as UiAlert,
   UiApp,
-  _sfc_main$D as UiAvatarEditor,
-  _sfc_main$D as UiAvatarEditorSimple,
+  _sfc_main$E as UiAvatarEditor,
+  _sfc_main$E as UiAvatarEditorSimple,
   CompoundUiButton as UiButton,
   StrandsUiCard as UiCard,
   UiCheckboxGroup,
-  _sfc_main$y as UiColorPicker,
+  _sfc_main$z as UiColorPicker,
   UiDivider,
   UiHero,
   StrandsUiInput as UiInput,
@@ -40414,6 +40522,7 @@ export {
   StrandsUiLink as UiLink,
   StrandsUiLoader as UiLoader,
   UiModal,
+  UiPill,
   UiRadioGroup,
   UiSlider,
   UiTable,