@strands.gg/accui 2.9.4 → 2.9.5

package/dist/index.es.js

@@ -3,12 +3,12 @@ import { u as useStrandsConfig, p as provideStrandsConfig } from "./useStrandsCo
 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$L = {
+const _hoisted_2$M = {
   key: 0,
   class: "ui-app-loading-overlay"
 };
-const _hoisted_3$I = { class: "ui-app-loading-content" };
-const _hoisted_4$F = {
+const _hoisted_3$J = { class: "ui-app-loading-content" };
+const _hoisted_4$G = {
   key: 0,
   class: "ui-app-loading-message"
 };
@@ -64,10 +64,10 @@ 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$L, [
-            createElementVNode("div", _hoisted_3$I, [
+          isGlobalLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2$M, [
+            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$F, toDisplayString(_ctx.loadingMessage), 1)) : createCommentVNode("", true)
+              _ctx.loadingMessage ? (openBlock(), createElementBlock("p", _hoisted_4$G, toDisplayString(_ctx.loadingMessage), 1)) : createCommentVNode("", true)
             ])
           ])) : createCommentVNode("", true)
         ]))
@@ -84,9 +84,9 @@ 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$K = { class: "alert-content" };
-const _hoisted_3$H = { class: "alert-icon-container" };
-const _hoisted_4$E = {
+const _hoisted_2$L = { class: "alert-content" };
+const _hoisted_3$I = { class: "alert-icon-container" };
+const _hoisted_4$F = {
   class: "alert-main-icon",
   fill: "currentColor",
   viewBox: "0 0 20 20",
@@ -139,9 +139,9 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
           class: normalizeClass(alertClasses.value),
           role: "alert"
         }, [
-          createElementVNode("div", _hoisted_2$K, [
-            createElementVNode("div", _hoisted_3$H, [
-              (openBlock(), createElementBlock("svg", _hoisted_4$E, [
+          createElementVNode("div", _hoisted_2$L, [
+            createElementVNode("div", _hoisted_3$I, [
+              (openBlock(), createElementBlock("svg", _hoisted_4$F, [
                 createElementVNode("path", {
                   "fill-rule": "evenodd",
                   d: iconPath.value,
@@ -194,9 +194,9 @@ const _hoisted_1$S = {
   key: 0,
   class: "loader-icon"
 };
-const _hoisted_2$J = ["width", "height"];
-const _hoisted_3$G = ["d"];
-const _hoisted_4$D = ["stroke-width"];
+const _hoisted_2$K = ["width", "height"];
+const _hoisted_3$H = ["d"];
+const _hoisted_4$E = ["stroke-width"];
 const _hoisted_5$z = ["stroke-width"];
 const _hoisted_6$s = ["width", "height"];
 const _hoisted_7$r = {
@@ -248,7 +248,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
                 id: "logo-path",
                 d: unref(d),
                 transform: "translate(81, 13) scale(1.0)"
-              }, null, 8, _hoisted_3$G)
+              }, null, 8, _hoisted_3$H)
             ]),
             createElementVNode("use", {
               href: "#logo-path",
@@ -257,7 +257,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
               "stroke-width": _ctx.weight,
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
-            }, null, 8, _hoisted_4$D),
+            }, null, 8, _hoisted_4$E),
             createElementVNode("use", {
               href: "#logo-path",
               fill: "none",
@@ -267,7 +267,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
               "stroke-linejoin": "round",
               class: "loader-animated-path"
             }, null, 8, _hoisted_5$z)
-          ], 8, _hoisted_2$J))
+          ], 8, _hoisted_2$K))
         ])) : _ctx.variant === "circle" ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: "loader-circle",
@@ -311,12 +311,12 @@ const _hoisted_1$R = {
   key: 0,
   class: "button-loading-content"
 };
-const _hoisted_2$I = { key: 0 };
-const _hoisted_3$F = {
+const _hoisted_2$J = { key: 0 };
+const _hoisted_3$G = {
   key: 0,
   class: "leading-icon"
 };
-const _hoisted_4$C = {
+const _hoisted_4$D = {
   key: 1,
   class: "trailing-icon"
 };
@@ -369,18 +369,18 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           centered: false,
           color: "white"
         }, null, 8, ["size"]),
-        !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_2$I, toDisplayString(_ctx.loadingText || "Loading..."), 1)) : createCommentVNode("", true)
+        !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_2$J, 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$F, [
+          hasLeadingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_3$G, [
             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$C, [
+          hasTrailingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_4$D, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ], 64))
@@ -795,8 +795,8 @@ const _hoisted_1$O = {
   key: 0,
   class: "ui-card-header"
 };
-const _hoisted_2$H = { class: "ui-card-content" };
-const _hoisted_3$E = {
+const _hoisted_2$I = { class: "ui-card-content" };
+const _hoisted_3$F = {
   key: 1,
   class: "ui-card-footer"
 };
@@ -826,10 +826,10 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
         _ctx.$slots["header"] ? (openBlock(), createElementBlock("div", _hoisted_1$O, [
           renderSlot(_ctx.$slots, "header", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$H, [
+        createElementVNode("div", _hoisted_2$I, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
-        _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_3$E, [
+        _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_3$F, [
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
@@ -1394,12 +1394,12 @@ const _hoisted_1$N = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$G = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck"];
-const _hoisted_3$D = {
+const _hoisted_2$H = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck"];
+const _hoisted_3$E = {
   key: 1,
   class: "input-trailing-icon"
 };
-const _hoisted_4$B = {
+const _hoisted_4$C = {
   key: 2,
   class: "input-trailing-icon"
 };
@@ -1510,8 +1510,8 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
           onBlur: handleBlur,
           onFocus: handleFocus,
           onKeydown: handleKeydown
-        }, null, 42, _hoisted_2$G),
-        _ctx.type === "password" ? (openBlock(), createElementBlock("div", _hoisted_3$D, [
+        }, null, 42, _hoisted_2$H),
+        _ctx.type === "password" ? (openBlock(), createElementBlock("div", _hoisted_3$E, [
           createVNode(StrandsUiButton, {
             color: showPassword.value ? "primary" : "secondary",
             variant: showPassword.value ? "primary" : "ghost",
@@ -1526,7 +1526,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["color", "variant", "aria-label"])
-        ])) : _ctx.type === "search" && _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", _hoisted_4$B, [
+        ])) : _ctx.type === "search" && _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", _hoisted_4$C, [
           createVNode(StrandsUiButton, {
             color: "danger",
             variant: "ghost",
@@ -1553,8 +1553,8 @@ const _hoisted_1$M = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$F = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "cols", "maxlength", "autocomplete", "spellcheck"];
-const _hoisted_3$C = {
+const _hoisted_2$G = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "cols", "maxlength", "autocomplete", "spellcheck"];
+const _hoisted_3$D = {
   key: 1,
   class: "input-trailing-icon"
 };
@@ -1646,9 +1646,9 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur,
             onFocus: handleFocus,
             onKeydown: handleKeydown
-          }, null, 42, _hoisted_2$F)
+          }, null, 42, _hoisted_2$G)
         ], 2),
-        _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_3$C, [
+        _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_3$D, [
           renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
@@ -1862,9 +1862,9 @@ const _hoisted_1$L = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$E = ["aria-expanded", "aria-controls"];
-const _hoisted_3$B = { class: "input-select-value" };
-const _hoisted_4$A = {
+const _hoisted_2$F = ["aria-expanded", "aria-controls"];
+const _hoisted_3$C = { class: "input-select-value" };
+const _hoisted_4$B = {
   key: 0,
   class: "input-select-text"
 };
@@ -1905,9 +1905,10 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean, default: false },
     multiple: { type: Boolean, default: false },
     searchable: { type: Boolean, default: false },
+    allowInsert: { type: Boolean, default: false },
     maxDropdownHeight: { default: 400 },
     noOptionsText: { default: "No options available" },
-    searchPlaceholder: { default: "Search..." },
+    searchPlaceholder: { default: "" },
     inputId: {},
     error: { type: Boolean, default: false },
     size: { default: "md" }
@@ -1962,13 +1963,39 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       }
     });
     const filteredOptions = computed(() => {
-      if (!props.searchable || !dropdownState.value.searchQuery) {
-        return props.options;
+      let options = props.options;
+      if (props.searchable && dropdownState.value.searchQuery) {
+        const query = dropdownState.value.searchQuery.toLowerCase();
+        options = props.options.filter(
+          (option) => option.label.toLowerCase().includes(query) || option.description?.toLowerCase().includes(query)
+        );
+        if (props.allowInsert && props.multiple && dropdownState.value.searchQuery.trim()) {
+          const exactMatch = props.options.some(
+            (option) => option.label.toLowerCase() === dropdownState.value.searchQuery.toLowerCase()
+          );
+          if (!exactMatch) {
+            options = [
+              {
+                value: `__insert__${dropdownState.value.searchQuery}`,
+                label: `Add "${dropdownState.value.searchQuery}"`,
+                description: "Add as new item",
+                disabled: false
+              },
+              ...options
+            ];
+          }
+        }
       }
-      const query = dropdownState.value.searchQuery.toLowerCase();
-      return props.options.filter(
-        (option) => option.label.toLowerCase().includes(query) || option.description?.toLowerCase().includes(query)
-      );
+      return options;
+    });
+    const computedSearchPlaceholder = computed(() => {
+      if (props.searchPlaceholder && props.searchPlaceholder.trim() !== "") {
+        return props.searchPlaceholder;
+      }
+      if (props.allowInsert && props.multiple) {
+        return "Search or create...";
+      }
+      return "Search...";
     });
     const wrapperClasses = computed(() => {
       const classes = [];
@@ -2016,13 +2043,6 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       dropdownState.value.highlightedIndex = -1;
       dropdownState.value.searchQuery = "";
       document.removeEventListener("keydown", handleGlobalKeydown);
-      nextTick(() => {
-        const activeElement = document.activeElement;
-        const isClickingOtherSelect = activeElement?.closest?.(".input-select-trigger");
-        if (!isClickingOtherSelect && selectTriggerRef.value) {
-          selectTriggerRef.value.focus();
-        }
-      });
       emit("blur", new FocusEvent("blur"));
     };
     const toggleDropdown = () => {
@@ -2033,17 +2053,28 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       }
     };
     const isOptionSelected = (option) => {
+      if (option.value.startsWith("__insert__")) {
+        return false;
+      }
       return selectedValues.value.includes(option.value);
     };
     const selectOption = (option) => {
       if (option.disabled) return;
       if (props.multiple) {
         const newValue = [...selectedValues.value];
-        const index = newValue.indexOf(option.value);
-        if (index > -1) {
-          newValue.splice(index, 1);
+        if (option.value.startsWith("__insert__")) {
+          const newItemValue = option.value.replace("__insert__", "");
+          if (!newValue.includes(newItemValue)) {
+            newValue.push(newItemValue);
+          }
+          dropdownState.value.searchQuery = "";
         } else {
-          newValue.push(option.value);
+          const index = newValue.indexOf(option.value);
+          if (index > -1) {
+            newValue.splice(index, 1);
+          } else {
+            newValue.push(option.value);
+          }
         }
         emit("update:modelValue", newValue);
       } else {
@@ -2176,15 +2207,15 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             "aria-haspopup": true,
             "aria-controls": dropdownId.value
           }, [
-            createElementVNode("div", _hoisted_3$B, [
-              displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$A, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$x, toDisplayString(_ctx.placeholder || "Select an option..."), 1))
+            createElementVNode("div", _hoisted_3$C, [
+              displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$B, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$x, 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$E),
+          ], 42, _hoisted_2$F),
           _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_6$r, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
@@ -2209,7 +2240,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
                 modelValue: dropdownState.value.searchQuery,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => dropdownState.value.searchQuery = $event),
                 type: "search",
-                placeholder: _ctx.searchPlaceholder,
+                placeholder: computedSearchPlaceholder.value,
                 size: "sm",
                 onKeydown: handleSearchKeydown
               }, {
@@ -2230,7 +2261,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
                   class: normalizeClass(["input-dropdown-option", {
                     "input-dropdown-option--selected": isOptionSelected(option),
                     "input-dropdown-option--highlighted": index === dropdownState.value.highlightedIndex,
-                    "input-dropdown-option--disabled": option.disabled
+                    "input-dropdown-option--disabled": option.disabled,
+                    "input-dropdown-option--insert": option.value.startsWith("__insert__")
                   }]),
                   onClick: ($event) => selectOption(option),
                   onMouseenter: ($event) => dropdownState.value.highlightedIndex = index,
@@ -2253,11 +2285,11 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-985cba8d"]]);
+const UiInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-8fc867ab"]]);
 const _hoisted_1$K = { class: "input-leading-icon" };
-const _hoisted_2$D = ["src"];
-const _hoisted_3$A = ["id", "accept", "multiple", "disabled", "required"];
-const _hoisted_4$z = { class: "input-file-content" };
+const _hoisted_2$E = ["src"];
+const _hoisted_3$B = ["id", "accept", "multiple", "disabled", "required"];
+const _hoisted_4$A = { class: "input-file-content" };
 const _hoisted_5$w = {
   key: 0,
   class: "input-file-prompt"
@@ -2467,7 +2499,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             src: imagePreviewUrl.value,
             alt: "Preview",
             class: "input-file-preview"
-          }, null, 8, _hoisted_2$D)) : _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)) : _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", {
@@ -2492,8 +2524,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             onChange: handleFileSelect,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }, null, 40, _hoisted_3$A),
-          createElementVNode("div", _hoisted_4$z, [
+          }, null, 40, _hoisted_3$B),
+          createElementVNode("div", _hoisted_4$A, [
             selectedFiles.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$w, [
               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)
@@ -2531,12 +2563,12 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
 });
 const UiInputFile = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-1328dc4f"]]);
 const _hoisted_1$J = { class: "tabs-wrapper" };
-const _hoisted_2$C = {
+const _hoisted_2$D = {
   key: 0,
   class: "tabs-before"
 };
-const _hoisted_3$z = ["aria-selected", "id", "onClick"];
-const _hoisted_4$y = {
+const _hoisted_3$A = ["aria-selected", "id", "onClick"];
+const _hoisted_4$z = {
   key: 1,
   class: "tabs-after"
 };
@@ -2877,7 +2909,7 @@ const _sfc_main$P = /* @__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$C, [
+            _ctx.$slots["before"] ? (openBlock(), createElementBlock("div", _hoisted_2$D, [
               renderSlot(_ctx.$slots, "before", {}, void 0, true)
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
@@ -2901,7 +2933,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
                   id: `tab-${tab.value}`,
                   role: "tab",
                   onClick: ($event) => handleTabClick(tab.value, index)
-                }, toDisplayString(tab.label), 11, _hoisted_3$z);
+                }, toDisplayString(tab.label), 11, _hoisted_3$A);
               }), 128)),
               createElementVNode("div", {
                 class: normalizeClass(["tab-background", { "no-transition": !enableTransitions.value }]),
@@ -2912,7 +2944,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle(underlineStyle.value)
               }, null, 6)
             ], 2),
-            _ctx.$slots["after"] ? (openBlock(), createElementBlock("div", _hoisted_4$y, [
+            _ctx.$slots["after"] ? (openBlock(), createElementBlock("div", _hoisted_4$z, [
               renderSlot(_ctx.$slots, "after", {}, void 0, true)
             ])) : createCommentVNode("", true)
           ], 6)
@@ -3000,9 +3032,9 @@ 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 _hoisted_2$B = { class: "datetime-picker-leading-icon" };
-const _hoisted_3$y = { class: "datetime-picker-display" };
-const _hoisted_4$x = {
+const _hoisted_2$C = { class: "datetime-picker-leading-icon" };
+const _hoisted_3$z = { class: "datetime-picker-display" };
+const _hoisted_4$y = {
   key: 0,
   class: "datetime-picker-value"
 };
@@ -3381,11 +3413,11 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           ]]),
           onClick: togglePicker
         }, [
-          createElementVNode("div", _hoisted_2$B, [
+          createElementVNode("div", _hoisted_2$C, [
             _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$y, [
-            displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$x, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$u, toDisplayString(_ctx.placeholder || getDefaultPlaceholder()), 1))
+          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 || getDefaultPlaceholder()), 1))
           ]),
           _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -24725,9 +24757,9 @@ var TextAlign = Extension.create({
 var index_default$1 = TextAlign;
 var index_default = Placeholder;
 const _hoisted_1$G = { class: "input-richtext-toolbar" };
-const _hoisted_2$A = { class: "input-richtext-group" };
-const _hoisted_3$x = { class: "input-richtext-group" };
-const _hoisted_4$w = { class: "input-richtext-group" };
+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$t = { class: "input-richtext-group" };
 const _hoisted_6$o = { class: "input-richtext-group" };
 const _hoisted_7$n = { class: "input-richtext-editor-wrapper" };
@@ -24812,7 +24844,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         }])
       }, [
         createElementVNode("div", _hoisted_1$G, [
-          createElementVNode("div", _hoisted_2$A, [
+          createElementVNode("div", _hoisted_2$B, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive("bold") ? "primary" : "secondary",
               size: "sm",
@@ -24875,7 +24907,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             spacing: "28px",
             margin: "4px"
           }),
-          createElementVNode("div", _hoisted_3$x, [
+          createElementVNode("div", _hoisted_3$y, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive("heading", { level: 1 }) ? "primary" : "secondary",
               size: "sm",
@@ -24924,7 +24956,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             spacing: "28px",
             margin: "4px"
           }),
-          createElementVNode("div", _hoisted_4$w, [
+          createElementVNode("div", _hoisted_4$x, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive({ textAlign: "left" }) ? "primary" : "secondary",
               size: "sm",
@@ -25094,12 +25126,12 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
 });
 const UiInputRichText = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-1031412d"]]);
 const _hoisted_1$F = { class: "pincode-inputs" };
-const _hoisted_2$z = {
+const _hoisted_2$A = {
   key: 0,
   class: "pincode-icon pincode-icon-leading"
 };
-const _hoisted_3$w = ["value", "disabled", "readonly", "tabindex", "data-index", "onInput", "onKeydown", "onFocus"];
-const _hoisted_4$v = {
+const _hoisted_3$x = ["value", "disabled", "readonly", "tabindex", "data-index", "onInput", "onKeydown", "onFocus"];
+const _hoisted_4$w = {
   key: 1,
   class: "pincode-divider"
 };
@@ -25286,7 +25318,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         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$z, [
+          _ctx.$slots["leading-icon"] ? (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) => {
@@ -25311,11 +25343,11 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
                 onFocus: ($event) => handleFocus(index - 1),
                 onBlur: handleBlur,
                 onPaste: handlePaste
-              }, null, 42, _hoisted_3$w),
+              }, null, 42, _hoisted_3$x),
               shouldShowDivider(index) && useCustomDivider.value ? (openBlock(), createBlock(UiDivider, mergeProps({
                 key: 0,
                 ref_for: true
-              }, dividerProps.value, { class: "pincode-custom-divider" }), null, 16)) : shouldShowDivider(index) ? (openBlock(), createElementBlock("span", _hoisted_4$v, toDisplayString(dividerCharacter.value), 1)) : createCommentVNode("", true)
+              }, 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$s, [
@@ -25328,12 +25360,12 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
 });
 const UiInputPincode = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-25372cfe"]]);
 const _hoisted_1$E = { class: "input-container" };
-const _hoisted_2$y = ["for"];
-const _hoisted_3$v = {
+const _hoisted_2$z = ["for"];
+const _hoisted_3$w = {
   key: 0,
   class: "input-required"
 };
-const _hoisted_4$u = {
+const _hoisted_4$v = {
   key: 10,
   class: "input-error-text"
 };
@@ -25361,6 +25393,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     options: {},
     multiple: { type: Boolean },
     searchable: { type: Boolean },
+    allowInsert: { type: Boolean },
     maxDropdownHeight: {},
     noOptionsText: {},
     searchPlaceholder: {},
@@ -25419,8 +25452,8 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           class: "input-label"
         }, [
           createTextVNode(toDisplayString(props.label) + " ", 1),
-          props.required ? (openBlock(), createElementBlock("span", _hoisted_3$v, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_2$y)) : createCommentVNode("", true),
+          props.required ? (openBlock(), createElementBlock("span", _hoisted_3$w, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_2$z)) : createCommentVNode("", true),
         isTextInput.value ? (openBlock(), createBlock(UiInputText, {
           key: 1,
           "model-value": _ctx.modelValue,
@@ -25499,6 +25532,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           disabled: _ctx.disabled,
           multiple: props.multiple,
           searchable: props.searchable,
+          "allow-insert": props.allowInsert,
           "max-dropdown-height": props.maxDropdownHeight,
           "no-options-text": props.noOptionsText,
           "search-placeholder": props.searchPlaceholder,
@@ -25523,7 +25557,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             ]),
             key: "1"
           } : void 0
-        ]), 1032, ["model-value", "options", "placeholder", "disabled", "multiple", "searchable", "max-dropdown-height", "no-options-text", "search-placeholder", "input-id", "error", "size"])) : _ctx.type === "file" ? (openBlock(), createBlock(UiInputFile, {
+        ]), 1032, ["model-value", "options", "placeholder", "disabled", "multiple", "searchable", "allow-insert", "max-dropdown-height", "no-options-text", "search-placeholder", "input-id", "error", "size"])) : _ctx.type === "file" ? (openBlock(), createBlock(UiInputFile, {
           key: 4,
           "model-value": _ctx.modelValue,
           accept: props.accept,
@@ -25642,14 +25676,14 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             key: "1"
           } : void 0
         ]), 1032, ["model-value", "max-length", "variant", "divider", "disabled", "readonly", "input-id", "error", "size"])) : 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$r, toDisplayString(props.helpText), 1)) : createCommentVNode("", true)
+        props.error && props.error !== true ? (openBlock(), createElementBlock("p", _hoisted_4$v, toDisplayString(typeof props.error === "string" ? props.error : props.error?.message || String(props.error)), 1)) : props.helpText ? (openBlock(), createElementBlock("p", _hoisted_5$r, toDisplayString(props.helpText), 1)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-adf737f4"]]);
+const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-83ae8958"]]);
 const _hoisted_1$D = ["disabled", "aria-disabled"];
-const _hoisted_2$x = ["href", "target", "rel", "aria-disabled"];
+const _hoisted_2$y = ["href", "target", "rel", "aria-disabled"];
 const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "UiLink",
   props: {
@@ -25756,23 +25790,32 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         onClick: handleClick2
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 14, _hoisted_2$x));
+      ], 14, _hoisted_2$y));
     };
   }
 });
 const StrandsUiLink = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-3bf99110"]]);
-const _hoisted_1$C = ["aria-pressed", "aria-labelledby"];
+const _hoisted_1$C = { 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({
   __name: "UiToggle",
   props: {
     modelValue: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    id: {}
+    id: {},
+    label: {},
+    required: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const toggleId = computed(() => props.id || `ui-toggle-${Math.random().toString(36).substr(2, 9)}`);
     const toggleClasses = computed(() => [
       "ui-toggle",
       {
@@ -25792,21 +25835,32 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       emit("update:modelValue", !props.modelValue);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("button", {
-        type: "button",
-        class: normalizeClass(toggleClasses.value),
-        "aria-pressed": _ctx.modelValue,
-        "aria-labelledby": _ctx.id ? `${_ctx.id}-label` : void 0,
-        onClick: handleToggle
-      }, [
-        createElementVNode("span", {
-          class: normalizeClass(["ui-toggle-thumb", thumbClasses.value])
-        }, null, 2)
-      ], 10, _hoisted_1$C);
+      return openBlock(), createElementBlock("div", _hoisted_1$C, [
+        _ctx.label ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          for: toggleId.value,
+          class: "ui-toggle-label"
+        }, [
+          createTextVNode(toDisplayString(_ctx.label) + " ", 1),
+          _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_3$v, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_2$x)) : createCommentVNode("", true),
+        createElementVNode("button", {
+          id: toggleId.value,
+          type: "button",
+          class: normalizeClass(toggleClasses.value),
+          "aria-pressed": _ctx.modelValue,
+          "aria-labelledby": _ctx.label ? `${toggleId.value}-label` : void 0,
+          onClick: handleToggle
+        }, [
+          createElementVNode("span", {
+            class: normalizeClass(["ui-toggle-thumb", thumbClasses.value])
+          }, null, 2)
+        ], 10, _hoisted_4$u)
+      ]);
     };
   }
 });
-const UiToggle = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-6c2fb8dd"]]);
+const UiToggle = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-ba05b9e3"]]);
 const _hoisted_1$B = { class: "accui-component-scope" };
 const _hoisted_2$w = { class: "avatar-editor-simple" };
 const _hoisted_3$u = {
@@ -39014,8 +39068,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                       createVNode(unref(CompoundUiButton), {
                         color: "danger",
                         onClick: handleSignOut,
-                        disabled: signingOut.value,
-                        class: "profile-sign-out-button"
+                        disabled: signingOut.value
                       }, {
                         default: withCtx(() => [
                           createTextVNode(toDisplayString(signingOut.value ? "Signing out..." : "Sign Out"), 1)
@@ -39026,9 +39079,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         trigger: withCtx(() => [
                           createVNode(unref(CompoundUiButton), {
                             color: "secondary",
-                            class: "profile-sign-out-button"
+                            icon: ""
                           }, {
-                            default: withCtx(() => [..._cache[27] || (_cache[27] = [
+                            icon: withCtx(() => [..._cache[27] || (_cache[27] = [
                               createElementVNode("svg", {
                                 class: "profile-action-icon",
                                 fill: "none",
@@ -39124,7 +39177,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUserProfile = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-76c0144a"]]);
+const StrandsUserProfile = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-9430e3ba"]]);
 const _hoisted_1$6 = { class: "accui-component-scope" };
 const _hoisted_2$4 = { class: "accui-w-full accui-min-w-100 accui-max-w-md accui-mx-auto accui-animate-slide-up" };
 const _hoisted_3$3 = { class: "accui-mt-8 accui-text-center" };