@strands.gg/accui 2.6.5 → 2.6.7

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

@@ -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 { 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, useAttrs, h as h$1, ref, nextTick, withModifiers, renderList, watch, toRefs, withDirectives, vModelSelect, getCurrentInstance, watchEffect, onBeforeUnmount, shallowRef, markRaw, customRef, useCssVars, mergeProps, reactive, createStaticVNode, vModelText, Transition, inject, withKeys, isMemoSame } from "vue";
 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 = {
+import { u as useStrandsAuth } from "./useStrandsAuth-GX6lPddh.es.js";
+const _hoisted_1$U = { class: "app-content" };
+const _hoisted_2$L = {
   key: 0,
   class: "ui-app-loading-overlay"
 };
-const _hoisted_3$H = { class: "ui-app-loading-content" };
-const _hoisted_4$E = {
+const _hoisted_3$I = { class: "ui-app-loading-content" };
+const _hoisted_4$F = {
   key: 0,
   class: "ui-app-loading-message"
 };
-const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+const _sfc_main$10 = /* @__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$T, [
+        createElementVNode("div", _hoisted_1$U, [
           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$K, [
-            createElementVNode("div", _hoisted_3$H, [
+          isGlobalLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2$L, [
+            createElementVNode("div", _hoisted_3$I, [
               _cache[1] || (_cache[1] = createElementVNode("div", { class: "ui-app-loading-spinner" }, null, -1)),
-              _ctx.loadingMessage ? (openBlock(), createElementBlock("p", _hoisted_4$E, toDisplayString(_ctx.loadingMessage), 1)) : createCommentVNode("", true)
+              _ctx.loadingMessage ? (openBlock(), createElementBlock("p", _hoisted_4$F, 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$S = { class: "accui-component-scope" };
-const _hoisted_2$J = { class: "alert-content" };
-const _hoisted_3$G = { class: "alert-icon-container" };
-const _hoisted_4$D = {
+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 = {
   class: "alert-main-icon",
   fill: "currentColor",
   viewBox: "0 0 20 20",
   "aria-hidden": "true"
 };
-const _hoisted_5$y = ["d"];
+const _hoisted_5$z = ["d"];
 const _hoisted_6$t = { class: "alert-text-container" };
 const _hoisted_7$s = {
   key: 0,
   class: "alert-dismiss-container"
 };
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "UiAlert",
   props: {
     variant: { default: "info" },
@@ -134,19 +134,19 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
       return icons[props.variant];
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$S, [
+      return openBlock(), createElementBlock("div", _hoisted_1$T, [
         createElementVNode("div", {
           class: normalizeClass(alertClasses.value),
           role: "alert"
         }, [
-          createElementVNode("div", _hoisted_2$J, [
-            createElementVNode("div", _hoisted_3$G, [
-              (openBlock(), createElementBlock("svg", _hoisted_4$D, [
+          createElementVNode("div", _hoisted_2$K, [
+            createElementVNode("div", _hoisted_3$H, [
+              (openBlock(), createElementBlock("svg", _hoisted_4$E, [
                 createElementVNode("path", {
                   "fill-rule": "evenodd",
                   d: iconPath.value,
                   "clip-rule": "evenodd"
-                }, null, 8, _hoisted_5$y)
+                }, null, 8, _hoisted_5$z)
               ]))
             ]),
             createElementVNode("div", _hoisted_6$t, [
@@ -188,22 +188,22 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiAlert = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__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$R = {
+const _hoisted_1$S = {
   key: 0,
   class: "loader-icon"
 };
-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_2$J = ["width", "height"];
+const _hoisted_3$G = ["d"];
+const _hoisted_4$D = ["stroke-width"];
+const _hoisted_5$y = ["stroke-width"];
 const _hoisted_6$s = ["width", "height"];
 const _hoisted_7$r = {
   key: 3,
   class: "loader-text"
 };
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "UiLoader",
   props: {
     size: { default: "md" },
@@ -237,7 +237,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           `loader-color-${_ctx.color}`
         ]])
       }, [
-        _ctx.variant === "spinner" ? (openBlock(), createElementBlock("div", _hoisted_1$R, [
+        _ctx.variant === "spinner" ? (openBlock(), createElementBlock("div", _hoisted_1$S, [
           (openBlock(), createElementBlock("svg", {
             width: computedSize.value,
             height: computedSize.value,
@@ -248,7 +248,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
                 id: "logo-path",
                 d: unref(d),
                 transform: "translate(81, 13) scale(1.0)"
-              }, null, 8, _hoisted_3$F)
+              }, null, 8, _hoisted_3$G)
             ]),
             createElementVNode("use", {
               href: "#logo-path",
@@ -257,7 +257,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
               "stroke-width": _ctx.weight,
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
-            }, null, 8, _hoisted_4$C),
+            }, null, 8, _hoisted_4$D),
             createElementVNode("use", {
               href: "#logo-path",
               fill: "none",
@@ -266,8 +266,8 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               class: "loader-animated-path"
-            }, null, 8, _hoisted_5$x)
-          ], 8, _hoisted_2$I))
+            }, null, 8, _hoisted_5$y)
+          ], 8, _hoisted_2$J))
         ])) : _ctx.variant === "circle" ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: "loader-circle",
@@ -306,21 +306,21 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiLoader = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-4b565c5d"]]);
-const _hoisted_1$Q = {
+const StrandsUiLoader = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-4b565c5d"]]);
+const _hoisted_1$R = {
   key: 0,
   class: "button-loading-content"
 };
-const _hoisted_2$H = { key: 0 };
-const _hoisted_3$E = {
+const _hoisted_2$I = { key: 0 };
+const _hoisted_3$F = {
   key: 0,
   class: "leading-icon"
 };
-const _hoisted_4$B = {
+const _hoisted_4$C = {
   key: 1,
   class: "trailing-icon"
 };
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "UiButton.Content",
   props: {
     loading: { type: Boolean, default: false },
@@ -362,25 +362,25 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
       return props.size ? `button-content-${props.size}` : "button-content-md";
     });
     return (_ctx, _cache) => {
-      return _ctx.loading ? (openBlock(), createElementBlock("span", _hoisted_1$Q, [
+      return _ctx.loading ? (openBlock(), createElementBlock("span", _hoisted_1$R, [
         createVNode(StrandsUiLoader, {
           variant: "circle",
           size: loaderSize.value,
           centered: false,
           color: "white"
         }, null, 8, ["size"]),
-        !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_2$H, toDisplayString(_ctx.loadingText || "Loading..."), 1)) : createCommentVNode("", true)
+        !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_2$I, 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$E, [
+          hasLeadingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_3$F, [
             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$B, [
+          hasTrailingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_4$C, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ], 64))
@@ -388,9 +388,9 @@ const _sfc_main$Y = /* @__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({
+const UiButtonContent = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-5aa4146e"]]);
+const _hoisted_1$Q = ["href", "target", "rel"];
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "UiButton.Anchor",
   props: {
     to: {},
@@ -454,11 +454,11 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 8, ["loading", "loading-text", "icon"])
-      ], 14, _hoisted_1$P);
+      ], 14, _hoisted_1$Q);
     };
   }
 });
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "UiButton.Nuxt",
   props: {
     to: {},
@@ -522,7 +522,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "UiButton.Vue",
   props: {
     to: {},
@@ -578,8 +578,8 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$O = ["type", "disabled"];
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _hoisted_1$P = ["type", "disabled"];
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "UiButton",
   props: {
     variant: { default: "primary" },
@@ -676,7 +676,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             key: "1"
           } : void 0
         ]), 1032, ["loading", "loading-text", "icon", "size"])
-      ], 14, _hoisted_1$O)) : isNuxtAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$W, {
+      ], 14, _hoisted_1$P)) : isNuxtAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$X, {
         key: 1,
         to: _ctx.to,
         disabled: _ctx.disabled,
@@ -709,7 +709,7 @@ const _sfc_main$U = /* @__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$V, {
+      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles"])) : isVueRouterAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$W, {
         key: 2,
         to: _ctx.to,
         disabled: _ctx.disabled,
@@ -742,7 +742,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
           ]),
           key: "1"
         } : void 0
-      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles"])) : (openBlock(), createBlock(_sfc_main$X, {
+      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles"])) : (openBlock(), createBlock(_sfc_main$Y, {
         key: 3,
         to: _ctx.to,
         href: _ctx.href,
@@ -781,22 +781,25 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-a5942725"]]);
+const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-a5942725"]]);
 const CompoundUiButton = StrandsUiButton;
 CompoundUiButton.Content = UiButtonContent;
-CompoundUiButton.Anchor = _sfc_main$X;
-CompoundUiButton.Nuxt = _sfc_main$W;
-CompoundUiButton.Vue = _sfc_main$V;
-const _hoisted_1$N = {
+CompoundUiButton.Anchor = _sfc_main$Y;
+CompoundUiButton.Nuxt = _sfc_main$X;
+CompoundUiButton.Vue = _sfc_main$W;
+const _hoisted_1$O = {
   key: 0,
   class: "ui-card-header"
 };
-const _hoisted_2$G = { class: "ui-card-content" };
-const _hoisted_3$D = {
+const _hoisted_2$H = { class: "ui-card-content" };
+const _hoisted_3$E = {
   key: 1,
   class: "ui-card-footer"
 };
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "UiCard",
   props: {
     variant: { default: "default" },
@@ -805,29 +808,31 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     color: { default: "default" }
   },
   setup(__props) {
+    const attrs = useAttrs();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ui-card", [
           `ui-card-${_ctx.variant}`,
           `ui-card-padding-${_ctx.padding}`,
           `ui-card-shadow-${_ctx.shadow}`,
-          `ui-card-color-${_ctx.color}`
+          `ui-card-color-${_ctx.color}`,
+          unref(attrs)["class"]
         ]])
       }, [
-        _ctx.$slots["header"] ? (openBlock(), createElementBlock("div", _hoisted_1$N, [
+        _ctx.$slots["header"] ? (openBlock(), createElementBlock("div", _hoisted_1$O, [
           renderSlot(_ctx.$slots, "header", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$G, [
+        createElementVNode("div", _hoisted_2$H, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
-        _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_3$D, [
+        _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_3$E, [
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-2c11aaa2"]]);
+const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-261f3012"]]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -1381,24 +1386,24 @@ const X = createLucideIcon("x", [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ]);
-const _hoisted_1$M = {
+const _hoisted_1$N = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$F = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck"];
-const _hoisted_3$C = {
+const _hoisted_2$G = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck"];
+const _hoisted_3$D = {
   key: 1,
   class: "input-trailing-icon"
 };
-const _hoisted_4$A = {
+const _hoisted_4$B = {
   key: 2,
   class: "input-trailing-icon"
 };
-const _hoisted_5$w = {
+const _hoisted_5$x = {
   key: 3,
   class: "input-trailing-icon"
 };
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Text",
   props: {
     type: { default: "text" },
@@ -1481,7 +1486,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["input-field-wrapper", wrapperClasses.value])
       }, [
-        _ctx.$slots["leading-icon"] ? (openBlock(), createElementBlock("div", _hoisted_1$M, [
+        _ctx.$slots["leading-icon"] ? (openBlock(), createElementBlock("div", _hoisted_1$N, [
           renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -1502,8 +1507,8 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           onBlur: handleBlur,
           onFocus: handleFocus,
           onKeydown: handleKeydown
-        }, null, 42, _hoisted_2$F),
-        _ctx.type === "password" ? (openBlock(), createElementBlock("div", _hoisted_3$C, [
+        }, null, 42, _hoisted_2$G),
+        _ctx.type === "password" ? (openBlock(), createElementBlock("div", _hoisted_3$D, [
           createVNode(StrandsUiButton, {
             color: showPassword.value ? "primary" : "secondary",
             variant: showPassword.value ? "primary" : "ghost",
@@ -1518,7 +1523,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["color", "variant", "aria-label"])
-        ])) : _ctx.type === "search" && _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", _hoisted_4$A, [
+        ])) : _ctx.type === "search" && _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", _hoisted_4$B, [
           createVNode(StrandsUiButton, {
             color: "danger",
             variant: "ghost",
@@ -1533,24 +1538,24 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           })
-        ])) : hasTrailingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_5$w, [
+        ])) : hasTrailingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_5$x, [
           renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const UiInputText = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-728dfbde"]]);
-const _hoisted_1$L = {
+const UiInputText = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-728dfbde"]]);
+const _hoisted_1$M = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$E = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "cols", "maxlength", "autocomplete", "spellcheck"];
-const _hoisted_3$B = {
+const _hoisted_2$F = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "cols", "maxlength", "autocomplete", "spellcheck"];
+const _hoisted_3$C = {
   key: 1,
   class: "input-trailing-icon"
 };
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Textarea",
   props: {
     modelValue: {},
@@ -1612,7 +1617,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["input-field-wrapper input-textarea", 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("div", {
@@ -1638,16 +1643,16 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur,
             onFocus: handleFocus,
             onKeydown: handleKeydown
-          }, null, 42, _hoisted_2$E)
+          }, null, 42, _hoisted_2$F)
         ], 2),
-        _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_3$B, [
+        _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_3$C, [
           renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const UiInputTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-acf98514"]]);
+const UiInputTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-acf98514"]]);
 function useFloatingPosition(options) {
   const {
     trigger,
@@ -1850,17 +1855,17 @@ function useFloatingPosition(options) {
     cleanup
   };
 }
-const _hoisted_1$K = {
+const _hoisted_1$L = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$D = ["aria-expanded", "aria-controls"];
-const _hoisted_3$A = { class: "input-select-value" };
-const _hoisted_4$z = {
+const _hoisted_2$E = ["aria-expanded", "aria-controls"];
+const _hoisted_3$B = { class: "input-select-value" };
+const _hoisted_4$A = {
   key: 0,
   class: "input-select-text"
 };
-const _hoisted_5$v = {
+const _hoisted_5$w = {
   key: 1,
   class: "input-select-placeholder"
 };
@@ -1888,7 +1893,7 @@ const _hoisted_14$l = {
   key: 0,
   class: "input-dropdown-option-check"
 };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Select",
   props: {
     modelValue: {},
@@ -2153,7 +2158,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             paddingClasses.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", {
@@ -2168,15 +2173,15 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             "aria-haspopup": true,
             "aria-controls": dropdownId.value
           }, [
-            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", _hoisted_3$B, [
+              displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$A, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$w, 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$D),
+          ], 42, _hoisted_2$E),
           _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_6$r, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
@@ -2245,12 +2250,12 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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 = {
+const UiInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-985cba8d"]]);
+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_5$v = {
   key: 0,
   class: "input-file-prompt"
 };
@@ -2275,7 +2280,7 @@ const _hoisted_14$k = {
   key: 1,
   class: "input-trailing-icon"
 };
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "UiInput.File",
   props: {
     modelValue: {},
@@ -2453,13 +2458,13 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           paddingClasses.value
         ]])
       }, [
-        createElementVNode("div", _hoisted_1$J, [
+        createElementVNode("div", _hoisted_1$K, [
           hasImageSelected.value && imagePreviewUrl.value ? (openBlock(), createElementBlock("img", {
             key: 0,
             src: imagePreviewUrl.value,
             alt: "Preview",
             class: "input-file-preview"
-          }, 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 }))
+          }, 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 }))
         ]),
         createElementVNode("div", {
           class: normalizeClass(["input-file-area", {
@@ -2484,9 +2489,9 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             onChange: handleFileSelect,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }, null, 40, _hoisted_3$z),
-          createElementVNode("div", _hoisted_4$y, [
-            selectedFiles.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$u, [
+          }, null, 40, _hoisted_3$A),
+          createElementVNode("div", _hoisted_4$z, [
+            selectedFiles.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$v, [
               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, [
@@ -2521,19 +2526,19 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputFile = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-1328dc4f"]]);
-const _hoisted_1$I = { class: "tabs-wrapper" };
-const _hoisted_2$B = {
+const UiInputFile = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-1328dc4f"]]);
+const _hoisted_1$J = { class: "tabs-wrapper" };
+const _hoisted_2$C = {
   key: 0,
   class: "tabs-before"
 };
-const _hoisted_3$y = ["aria-selected", "id", "onClick"];
-const _hoisted_4$x = {
+const _hoisted_3$z = ["aria-selected", "id", "onClick"];
+const _hoisted_4$y = {
   key: 1,
   class: "tabs-after"
 };
-const _hoisted_5$t = ["aria-labelledby"];
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _hoisted_5$u = ["aria-labelledby"];
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "UiTabs",
   props: {
     modelValue: {},
@@ -2860,7 +2865,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
           { "tabs-container--with-content": hasContentSlot.value }
         ]])
       }, [
-        createElementVNode("div", _hoisted_1$I, [
+        createElementVNode("div", _hoisted_1$J, [
           createElementVNode("div", {
             class: normalizeClass(["tabs-list", [
               `tabs-list--${_ctx.orientation}`,
@@ -2869,7 +2874,7 @@ const _sfc_main$O = /* @__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$B, [
+            _ctx.$slots["before"] ? (openBlock(), createElementBlock("div", _hoisted_2$C, [
               renderSlot(_ctx.$slots, "before", {}, void 0, true)
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
@@ -2893,7 +2898,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
                   id: `tab-${tab.value}`,
                   role: "tab",
                   onClick: ($event) => handleTabClick(tab.value, index)
-                }, toDisplayString(tab.label), 11, _hoisted_3$y);
+                }, toDisplayString(tab.label), 11, _hoisted_3$z);
               }), 128)),
               createElementVNode("div", {
                 class: normalizeClass(["tab-background", { "no-transition": !enableTransitions.value }]),
@@ -2904,7 +2909,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle(underlineStyle.value)
               }, null, 6)
             ], 2),
-            _ctx.$slots["after"] ? (openBlock(), createElementBlock("div", _hoisted_4$x, [
+            _ctx.$slots["after"] ? (openBlock(), createElementBlock("div", _hoisted_4$y, [
               renderSlot(_ctx.$slots, "after", {}, void 0, true)
             ])) : createCommentVNode("", true)
           ], 6)
@@ -2917,17 +2922,17 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
           id: "tabpanel"
         }, [
           renderSlot(_ctx.$slots, "content", { activeTab: activeTab.value }, void 0, true)
-        ], 10, _hoisted_5$t)) : createCommentVNode("", true)
+        ], 10, _hoisted_5$u)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-edff91a5"]]);
-const _hoisted_1$H = {
+const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-edff91a5"]]);
+const _hoisted_1$I = {
   key: 0,
   class: "ui-divider-text"
 };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "UiDivider",
   props: {
     orientation: { default: "horizontal" },
@@ -2981,7 +2986,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         ]),
         style: normalizeStyle(dividerStyle.value)
       }, [
-        hasText.value ? (openBlock(), createElementBlock("span", _hoisted_1$H, [
+        hasText.value ? (openBlock(), createElementBlock("span", _hoisted_1$I, [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(_ctx.text), 1)
           ], true)
@@ -2990,15 +2995,15 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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 = {
+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 = {
   key: 0,
   class: "datetime-picker-value"
 };
-const _hoisted_5$s = {
+const _hoisted_5$t = {
   key: 1,
   class: "datetime-picker-placeholder"
 };
@@ -3031,7 +3036,7 @@ const _hoisted_20$b = {
 };
 const _hoisted_21$b = { class: "time-scroll" };
 const _hoisted_22$9 = { class: "datetime-picker-footer" };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "UiDateTimePicker",
   props: {
     modelValue: {},
@@ -3363,7 +3368,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       cleanupFloating();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$G, [
+      return openBlock(), createElementBlock("div", _hoisted_1$H, [
         createElementVNode("div", {
           ref_key: "triggerElement",
           ref: triggerElement,
@@ -3373,11 +3378,11 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           ]]),
           onClick: togglePicker
         }, [
-          createElementVNode("div", _hoisted_2$A, [
+          createElementVNode("div", _hoisted_2$B, [
             _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$x, [
-            displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$w, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$s, toDisplayString(_ctx.placeholder || getDefaultPlaceholder()), 1))
+          createElementVNode("div", _hoisted_3$y, [
+            displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$x, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$t, toDisplayString(_ctx.placeholder || getDefaultPlaceholder()), 1))
           ]),
           _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -3632,8 +3637,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-10c66504"]]);
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const UiDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-10c66504"]]);
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Date",
   props: {
     modelValue: {},
@@ -3676,7 +3681,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Time",
   props: {
     modelValue: {},
@@ -3717,7 +3722,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "UiInput.DateTime",
   props: {
     modelValue: {},
@@ -24716,14 +24721,14 @@ var TextAlign = Extension.create({
 });
 var index_default$1 = TextAlign;
 var index_default = Placeholder;
-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_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_5$s = { class: "input-richtext-group" };
 const _hoisted_6$o = { class: "input-richtext-group" };
 const _hoisted_7$n = { class: "input-richtext-editor-wrapper" };
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "UiInput.RichText",
   props: {
     modelValue: {},
@@ -24803,8 +24808,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           "input-disabled": _ctx.disabled
         }])
       }, [
-        createElementVNode("div", _hoisted_1$F, [
-          createElementVNode("div", _hoisted_2$z, [
+        createElementVNode("div", _hoisted_1$G, [
+          createElementVNode("div", _hoisted_2$A, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive("bold") ? "primary" : "secondary",
               size: "sm",
@@ -24867,7 +24872,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             spacing: "28px",
             margin: "4px"
           }),
-          createElementVNode("div", _hoisted_3$w, [
+          createElementVNode("div", _hoisted_3$x, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive("heading", { level: 1 }) ? "primary" : "secondary",
               size: "sm",
@@ -24916,7 +24921,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             spacing: "28px",
             margin: "4px"
           }),
-          createElementVNode("div", _hoisted_4$v, [
+          createElementVNode("div", _hoisted_4$w, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive({ textAlign: "left" }) ? "primary" : "secondary",
               size: "sm",
@@ -24965,7 +24970,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             spacing: "28px",
             margin: "4px"
           }),
-          createElementVNode("div", _hoisted_5$r, [
+          createElementVNode("div", _hoisted_5$s, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive("bulletList") ? "primary" : "secondary",
               size: "sm",
@@ -25084,7 +25089,241 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputRichText = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-1031412d"]]);
+const UiInputRichText = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-1031412d"]]);
+const _hoisted_1$F = { class: "pincode-inputs" };
+const _hoisted_2$z = {
+  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 = {
+  key: 1,
+  class: "pincode-divider"
+};
+const _hoisted_5$r = {
+  key: 1,
+  class: "pincode-icon pincode-icon-trailing"
+};
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
+  __name: "UiInput.Pincode",
+  props: {
+    modelValue: {},
+    maxLength: { default: 6 },
+    variant: { default: "numeric" },
+    divider: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    error: { type: [Boolean, String] },
+    size: { default: "md" },
+    inputId: {}
+  },
+  emits: ["update:modelValue", "blur", "focus", "complete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const pincodeRefs = ref([]);
+    const focusedIndex = ref(-1);
+    const values = computed(() => {
+      const val = props.modelValue || "";
+      const arr = val.split("");
+      while (arr.length < props.maxLength) {
+        arr.push("");
+      }
+      return arr.slice(0, props.maxLength);
+    });
+    const dividerCount = computed(() => {
+      if (!props.divider) return 0;
+      if (typeof props.divider === "number") return props.divider;
+      return props.divider.count;
+    });
+    const dividerCharacter = computed(() => {
+      if (!props.divider) return "";
+      if (typeof props.divider === "number") return "-";
+      if (typeof props.divider === "object" && "character" in props.divider) {
+        return props.divider.character || "-";
+      }
+      return "-";
+    });
+    const useCustomDivider = computed(() => {
+      return typeof props.divider === "object" && "component" in props.divider && props.divider.component === "divider";
+    });
+    const dividerProps = computed(() => {
+      if (!useCustomDivider.value) return {};
+      const divider = props.divider;
+      return {
+        orientation: "vertical",
+        variant: "solid",
+        thickness: "1px",
+        margin: "0",
+        spacing: "1.5rem",
+        ...divider.props
+      };
+    });
+    const shouldShowDivider = (index) => {
+      if (!dividerCount.value || index === props.maxLength) return false;
+      return index % dividerCount.value === 0;
+    };
+    const getValidationPattern = () => {
+      switch (props.variant) {
+        case "numeric":
+          return /^[0-9]$/;
+        case "alpha":
+          return /^[a-zA-Z]$/;
+        case "alphanumeric":
+          return /^[a-zA-Z0-9]$/;
+        default:
+          return /^[0-9]$/;
+      }
+    };
+    const handleInput = (event, index) => {
+      const target = event.target;
+      const value = target.value;
+      const char = value.slice(-1);
+      const pattern = getValidationPattern();
+      if (!pattern.test(char) && char !== "") {
+        target.value = values.value[index];
+        return;
+      }
+      const newValues = [...values.value];
+      newValues[index] = char;
+      const newModelValue = newValues.join("");
+      emit("update:modelValue", newModelValue);
+      if (char && index < props.maxLength - 1) {
+        nextTick(() => {
+          const nextInput = pincodeRefs.value[index + 1];
+          if (nextInput) {
+            nextInput.focus();
+            nextInput.select();
+          }
+        });
+      }
+      if (newModelValue.length === props.maxLength) {
+        emit("complete", newModelValue);
+      }
+    };
+    const handleKeydown = (event, index) => {
+      const key = event.key;
+      if (key === "Backspace") {
+        event.preventDefault();
+        const newValues = [...values.value];
+        if (values.value[index]) {
+          newValues[index] = "";
+          emit("update:modelValue", newValues.join(""));
+        } else if (index > 0) {
+          newValues[index - 1] = "";
+          emit("update:modelValue", newValues.join(""));
+          nextTick(() => {
+            const prevInput = pincodeRefs.value[index - 1];
+            if (prevInput) {
+              prevInput.focus();
+            }
+          });
+        }
+      } else if (key === "ArrowLeft" && index > 0) {
+        event.preventDefault();
+        const prevInput = pincodeRefs.value[index - 1];
+        if (prevInput) {
+          prevInput.focus();
+        }
+      } else if (key === "ArrowRight" && index < props.maxLength - 1) {
+        event.preventDefault();
+        const nextInput = pincodeRefs.value[index + 1];
+        if (nextInput) {
+          nextInput.focus();
+        }
+      } else if (key === "Delete") {
+        event.preventDefault();
+        const newValues = [...values.value];
+        newValues[index] = "";
+        emit("update:modelValue", newValues.join(""));
+      }
+    };
+    const handlePaste = (event) => {
+      event.preventDefault();
+      const pastedText = event.clipboardData?.getData("text") || "";
+      const pattern = getValidationPattern();
+      const filteredText = pastedText.split("").filter((char) => pattern.test(char)).slice(0, props.maxLength).join("");
+      if (filteredText) {
+        emit("update:modelValue", filteredText);
+        const nextEmptyIndex = filteredText.length < props.maxLength ? filteredText.length : props.maxLength - 1;
+        nextTick(() => {
+          const targetInput = pincodeRefs.value[nextEmptyIndex];
+          if (targetInput) {
+            targetInput.focus();
+          }
+        });
+        if (filteredText.length === props.maxLength) {
+          emit("complete", filteredText);
+        }
+      }
+    };
+    const handleFocus = (index) => {
+      focusedIndex.value = index;
+      const input = pincodeRefs.value[index];
+      if (input) {
+        input.select();
+      }
+    };
+    const handleBlur = (event) => {
+      focusedIndex.value = -1;
+      emit("blur", event);
+    };
+    watch(() => props.modelValue, (newValue) => {
+      if (!newValue) {
+        nextTick(() => {
+          const firstInput = pincodeRefs.value[0];
+          if (firstInput && !props.disabled && !props.readonly) {
+            firstInput.focus();
+          }
+        });
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["pincode-wrapper", [`pincode-size-${_ctx.size}`, { "pincode-error": _ctx.error }]])
+      }, [
+        createElementVNode("div", _hoisted_1$F, [
+          _ctx.$slots["leading-icon"] ? (openBlock(), createElementBlock("div", _hoisted_2$z, [
+            renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+          ])) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.maxLength, (index) => {
+            return openBlock(), createElementBlock(Fragment$1, { key: index }, [
+              createElementVNode("input", {
+                ref_for: true,
+                ref_key: "pincodeRefs",
+                ref: pincodeRefs,
+                type: "text",
+                class: normalizeClass(["pincode-input", {
+                  "pincode-input-filled": values.value[index - 1],
+                  "pincode-input-focused": focusedIndex.value === index - 1
+                }]),
+                value: values.value[index - 1],
+                disabled: _ctx.disabled,
+                readonly: _ctx.readonly,
+                tabindex: _ctx.disabled ? -1 : 0,
+                "data-index": index - 1,
+                maxlength: "1",
+                onInput: ($event) => handleInput($event, index - 1),
+                onKeydown: ($event) => handleKeydown($event, index - 1),
+                onFocus: ($event) => handleFocus(index - 1),
+                onBlur: handleBlur,
+                onPaste: handlePaste
+              }, null, 42, _hoisted_3$w),
+              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)
+            ], 64);
+          }), 128)),
+          _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_5$r, [
+            renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+          ])) : createCommentVNode("", true)
+        ])
+      ], 2);
+    };
+  }
+});
+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 = {
@@ -25092,11 +25331,11 @@ const _hoisted_3$v = {
   class: "input-required"
 };
 const _hoisted_4$u = {
-  key: 9,
+  key: 10,
   class: "input-error-text"
 };
 const _hoisted_5$q = {
-  key: 10,
+  key: 11,
   class: "input-help-text"
 };
 const _sfc_main$H = /* @__PURE__ */ defineComponent({
@@ -25135,10 +25374,13 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     minuteStep: {},
     minHeight: {},
     maxHeight: {},
+    maxLength: {},
+    variant: {},
+    divider: {},
     label: {},
     helpText: {}
   },
-  emits: ["update:modelValue", "blur", "focus", "keydown", "file-error"],
+  emits: ["update:modelValue", "blur", "focus", "keydown", "file-error", "complete"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -25163,6 +25405,9 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     const handleFileError = (error) => {
       emit("file-error", error);
     };
+    const handlePincodeComplete = (value) => {
+      emit("complete", value);
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$E, [
         props.label ? (openBlock(), createElementBlock("label", {
@@ -25307,7 +25552,7 @@ const _sfc_main$H = /* @__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$L, {
+        ]), 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$M, {
           key: 5,
           "model-value": _ctx.modelValue,
           placeholder: _ctx.placeholder,
@@ -25322,7 +25567,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           "onUpdate:modelValue": handleInput,
           onBlur: handleBlur,
           onFocus: handleFocus
-        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "min", "max", "input-id", "error", "size"])) : _ctx.type === "time" ? (openBlock(), createBlock(_sfc_main$K, {
+        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "min", "max", "input-id", "error", "size"])) : _ctx.type === "time" ? (openBlock(), createBlock(_sfc_main$L, {
           key: 6,
           "model-value": _ctx.modelValue,
           placeholder: _ctx.placeholder,
@@ -25335,7 +25580,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           "onUpdate:modelValue": handleInput,
           onBlur: handleBlur,
           onFocus: handleFocus
-        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "input-id", "error", "size"])) : _ctx.type === "datetime" ? (openBlock(), createBlock(_sfc_main$J, {
+        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "input-id", "error", "size"])) : _ctx.type === "datetime" ? (openBlock(), createBlock(_sfc_main$K, {
           key: 7,
           "model-value": _ctx.modelValue,
           placeholder: _ctx.placeholder,
@@ -25363,13 +25608,43 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           "onUpdate:modelValue": handleInput,
           onBlur: handleBlur,
           onFocus: handleFocus
-        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "input-id", "error", "min-height", "max-height"])) : createCommentVNode("", true),
+        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "input-id", "error", "min-height", "max-height"])) : _ctx.type === "pincode" ? (openBlock(), createBlock(UiInputPincode, {
+          key: 9,
+          "model-value": _ctx.modelValue,
+          "max-length": props.maxLength || 6,
+          variant: props.variant || "numeric",
+          divider: props.divider,
+          disabled: _ctx.disabled,
+          readonly: _ctx.readonly,
+          "input-id": inputId.value,
+          error: props.error,
+          size: props.size,
+          "onUpdate:modelValue": handleInput,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
+          onComplete: handlePincodeComplete
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots["leading-icon"] ? {
+            name: "leading-icon",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots["trailing-icon"] ? {
+            name: "trailing-icon",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["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$q, toDisplayString(props.helpText), 1)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-10a4eb0c"]]);
+const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-adf737f4"]]);
 const _hoisted_1$D = ["disabled", "aria-disabled"];
 const _hoisted_2$x = ["href", "target", "rel", "aria-disabled"];
 const _sfc_main$G = /* @__PURE__ */ defineComponent({
@@ -32050,7 +32325,7 @@ function useStrandsMfa() {
       let errorMessage = `Request failed: ${response.status} ${response.statusText}`;
       try {
         const errorData = JSON.parse(errorText);
-        errorMessage = errorData.message || errorMessage;
+        errorMessage = errorData.error?.message || errorData.message || errorMessage;
       } catch {
         if (errorText) {
           errorMessage = errorText;
@@ -32497,16 +32772,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       emailCodeSent.value = false;
       showBackupCodeInput.value = false;
     };
-    const onCodeInput = (value) => {
-      verificationCode.value = value.replace(/\D/g, "").slice(0, 6);
-      verificationError.value = "";
-    };
-    const onCodePaste = (event) => {
-      event.preventDefault();
-      const pastedData = event.clipboardData?.getData("text/plain") || "";
-      const cleanedData = pastedData.replace(/\D/g, "").slice(0, 6);
-      verificationCode.value = cleanedData;
+    const onCodeComplete = (value) => {
       verificationError.value = "";
+      if (value.length === 6) {
+        verify();
+      }
     };
     const onBackupCodeInput = (value) => {
       let cleaned = value.replace(/[^a-zA-Z0-9-]/g, "").toLowerCase();
@@ -32867,33 +33137,20 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                   createVNode(unref(StrandsUiInput), {
                     modelValue: verificationCode.value,
                     "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => verificationCode.value = $event),
+                    type: "pincode",
                     label: "Verification Code",
-                    placeholder: selectedMethod.value.device_type === "totp" ? "123456" : "123456",
-                    maxlength: "6",
+                    "max-length": 6,
+                    variant: "numeric",
                     error: verificationError.value,
                     disabled: loading2.value,
-                    onInput: onCodeInput,
-                    onKeydown: withKeys(verify, ["enter"]),
-                    onPaste: onCodePaste,
+                    onComplete: onCodeComplete,
                     autofocus: "",
-                    name: "totp",
-                    id: "totp-input",
-                    autocomplete: "one-time-code",
-                    inputmode: "numeric",
-                    "data-lpignore": "false",
-                    "data-form-type": "other",
-                    "data-bwignore": "false",
-                    "data-1p-ignore": "false",
-                    "data-testid": "totp-input",
-                    spellcheck: "false",
-                    "aria-label": "Enter your verification code",
-                    "aria-describedby": "totp-description",
                     role: "textbox",
                     tabindex: "0",
                     pattern: "[0-9]{6}",
                     minlength: "6",
                     title: "Enter 6-digit verification code"
-                  }, null, 8, ["modelValue", "placeholder", "error", "disabled"]),
+                  }, null, 8, ["modelValue", "error", "disabled"]),
                   selectedMethod.value.device_type === "totp" ? (openBlock(), createElementBlock("div", _hoisted_30$4, [
                     _cache[13] || (_cache[13] = createTextVNode(" Open your authenticator app and enter the 6-digit code for ", -1)),
                     createElementVNode("span", _hoisted_31$4, '"' + toDisplayString(selectedMethod.value.device_name) + '"', 1)
@@ -32969,7 +33226,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsMfaVerification = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-0d8b9530"]]);
+const StrandsMfaVerification = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-f0750b5a"]]);
 const providersCache = /* @__PURE__ */ new Map();
 const CACHE_DURATION = 5 * 60 * 1e3;
 function useOAuthProviders(options = {}) {
@@ -34994,9 +35251,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         deviceNameError.value = error instanceof Error ? error.message : "Failed to setup TOTP";
       }
     };
-    const onVerificationCodeInput = (value) => {
-      verificationCode.value = value.replace(/\D/g, "").slice(0, 6);
+    const onVerificationComplete = (value) => {
       verificationError.value = "";
+      if (value.length === 6) {
+        verifySetup();
+      }
     };
     const verifySetup = async () => {
       if (!totpSetupData.value || !verificationCode.value) {
@@ -35140,12 +35399,13 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             createVNode(unref(StrandsUiInput), {
               modelValue: verificationCode.value,
               "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => verificationCode.value = $event),
+              type: "pincode",
               label: "Verification Code",
-              placeholder: "123456",
-              maxlength: "6",
+              "max-length": 6,
+              variant: "numeric",
               error: verificationError.value,
               disabled: unref(loading2),
-              onInput: onVerificationCodeInput
+              onComplete: onVerificationComplete
             }, null, 8, ["modelValue", "error", "disabled"]),
             createElementVNode("div", _hoisted_13$8, [
               createVNode(unref(CompoundUiButton), {
@@ -35250,7 +35510,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsTotpSetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-85fffc4c"]]);
+const StrandsTotpSetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-a23ed8a3"]]);
 const _hoisted_1$e = {
   key: 0,
   class: "email-mfa-setup-step"
@@ -35310,6 +35570,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         }
       }
     });
+    watch(verificationCode, () => {
+      if (verificationError.value) {
+        verificationError.value = "";
+      }
+    });
     onBeforeUnmount(() => {
       if (cooldownInterval) {
         clearInterval(cooldownInterval);
@@ -35335,9 +35600,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         deviceNameError.value = error instanceof Error ? error.message : "Failed to setup email MFA";
       }
     };
-    const onVerificationCodeInput = (value) => {
-      verificationCode.value = value.replace(/\D/g, "").slice(0, 6);
+    const onVerificationComplete = (value) => {
       verificationError.value = "";
+      if (value.length === 6) {
+        verifySetup();
+      }
     };
     const verifySetup = async () => {
       if (!emailMfaDeviceId.value || !verificationCode.value) {
@@ -35416,7 +35683,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             }),
             createElementVNode("div", _hoisted_2$c, [
               createVNode(unref(CompoundUiButton), {
-                variant: "secondary",
+                color: "secondary",
                 onClick: closeModal,
                 disabled: unref(loading2)
               }, {
@@ -35426,7 +35693,6 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 _: 1
               }, 8, ["disabled"]),
               createVNode(unref(CompoundUiButton), {
-                variant: "primary",
                 onClick: startSetup,
                 disabled: !deviceName.value.trim() || unref(loading2),
                 loading: unref(loading2)
@@ -35465,16 +35731,17 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             createVNode(unref(StrandsUiInput), {
               modelValue: verificationCode.value,
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => verificationCode.value = $event),
+              type: "pincode",
               label: "Verification Code",
-              placeholder: "123456",
-              maxlength: "6",
+              "max-length": 6,
+              variant: "numeric",
               error: verificationError.value,
               disabled: unref(loading2),
-              onInput: onVerificationCodeInput
+              onComplete: onVerificationComplete
             }, null, 8, ["modelValue", "error", "disabled"]),
             createElementVNode("div", _hoisted_4$b, [
               createVNode(unref(CompoundUiButton), {
-                variant: "secondary",
+                color: "secondary",
                 size: "sm",
                 onClick: resendCode,
                 disabled: unref(loading2) || cooldownActive.value
@@ -35487,7 +35754,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             ]),
             createElementVNode("div", _hoisted_5$9, [
               createVNode(unref(CompoundUiButton), {
-                variant: "secondary",
+                color: "secondary",
                 onClick: _cache[2] || (_cache[2] = ($event) => step.value = 1),
                 disabled: unref(loading2)
               }, {
@@ -35497,7 +35764,6 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 _: 1
               }, 8, ["disabled"]),
               createVNode(unref(CompoundUiButton), {
-                variant: "primary",
                 onClick: verifySetup,
                 disabled: verificationCode.value.length !== 6 || unref(loading2),
                 loading: unref(loading2)
@@ -35566,7 +35832,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsEmailMfaSetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-238346d9"]]);
+const StrandsEmailMfaSetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-34ee7825"]]);
 const _hoisted_1$d = {
   key: 0,
   class: "hardware-key-setup-step"