cognova 0.2.19 → 0.2.21

package/.output/server/chunks/build/login-BmER_VoU.mjs

@@ -298,7 +298,6 @@ const _sfc_main$3 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   }),
   emits: /* @__PURE__ */ mergeModels(["change"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
-    var _a;
     const props = __props;
     const slots = useSlots();
     const emits = __emit;
@@ -306,18 +305,15 @@ const _sfc_main$3 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     const appConfig = useAppConfig();
     const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
     const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
-    const id = (_a = _id.value) != null ? _a : useId();
-    const ui = computed(() => {
-      var _a2;
-      return tv({ extend: tv(theme$2), ...((_a2 = appConfig.ui) == null ? void 0 : _a2.checkbox) || {} })({
-        size: size.value,
-        color: color.value,
-        variant: props.variant,
-        indicator: props.indicator,
-        required: props.required,
-        disabled: disabled.value
-      });
-    });
+    const id = _id.value ?? useId();
+    const ui = computed(() => tv({ extend: tv(theme$2), ...appConfig.ui?.checkbox || {} })({
+      size: size.value,
+      color: color.value,
+      variant: props.variant,
+      indicator: props.indicator,
+      required: props.required,
+      disabled: disabled.value
+    }));
     function onUpdate(value) {
       const event = new Event("change", { target: { value } });
       emits("change", event);
@@ -325,45 +321,41 @@ const _sfc_main$3 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       emitFormInput();
     }
     return (_ctx, _push, _parent, _attrs) => {
-      var _a2;
       _push(ssrRenderComponent(unref(Primitive), mergeProps({
         as: !__props.variant || __props.variant === "list" ? __props.as : unref(Label),
         "data-slot": "root",
-        class: ui.value.root({ class: [(_a2 = props.ui) == null ? void 0 : _a2.root, props.class] })
+        class: ui.value.root({ class: [props.ui?.root, props.class] })
       }, _attrs), {
         default: withCtx((_, _push2, _parent2, _scopeId) => {
-          var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j;
           if (_push2) {
-            _push2(`<div data-slot="container" class="${ssrRenderClass(ui.value.container({ class: (_a3 = props.ui) == null ? void 0 : _a3.container }))}"${_scopeId}>`);
+            _push2(`<div data-slot="container" class="${ssrRenderClass(ui.value.container({ class: props.ui?.container }))}"${_scopeId}>`);
             _push2(ssrRenderComponent(unref(CheckboxRoot), mergeProps({ id: unref(id) }, { ...unref(rootProps), ..._ctx.$attrs, ...unref(ariaAttrs) }, {
               modelValue: modelValue.value,
               "onUpdate:modelValue": [($event) => modelValue.value = $event, onUpdate],
               name: unref(name),
               disabled: unref(disabled),
               "data-slot": "base",
-              class: ui.value.base({ class: (_b = props.ui) == null ? void 0 : _b.base })
+              class: ui.value.base({ class: props.ui?.base })
             }), {
               default: withCtx(({ modelValue: modelValue2 }, _push3, _parent3, _scopeId2) => {
-                var _a4, _b2;
                 if (_push3) {
                   _push3(ssrRenderComponent(unref(CheckboxIndicator), {
                     "data-slot": "indicator",
-                    class: ui.value.indicator({ class: (_a4 = props.ui) == null ? void 0 : _a4.indicator })
+                    class: ui.value.indicator({ class: props.ui?.indicator })
                   }, {
                     default: withCtx((_2, _push4, _parent4, _scopeId3) => {
-                      var _a5, _b3, _c2, _d2;
                       if (_push4) {
                         if (modelValue2 === "indeterminate") {
                           _push4(ssrRenderComponent(_sfc_main$d, {
                             name: __props.indeterminateIcon || unref(appConfig).ui.icons.minus,
                             "data-slot": "icon",
-                            class: ui.value.icon({ class: (_a5 = props.ui) == null ? void 0 : _a5.icon })
+                            class: ui.value.icon({ class: props.ui?.icon })
                           }, null, _parent4, _scopeId3));
                         } else {
                           _push4(ssrRenderComponent(_sfc_main$d, {
                             name: __props.icon || unref(appConfig).ui.icons.check,
                             "data-slot": "icon",
-                            class: ui.value.icon({ class: (_b3 = props.ui) == null ? void 0 : _b3.icon })
+                            class: ui.value.icon({ class: props.ui?.icon })
                           }, null, _parent4, _scopeId3));
                         }
                       } else {
@@ -372,12 +364,12 @@ const _sfc_main$3 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                             key: 0,
                             name: __props.indeterminateIcon || unref(appConfig).ui.icons.minus,
                             "data-slot": "icon",
-                            class: ui.value.icon({ class: (_c2 = props.ui) == null ? void 0 : _c2.icon })
+                            class: ui.value.icon({ class: props.ui?.icon })
                           }, null, 8, ["name", "class"])) : (openBlock(), createBlock(_sfc_main$d, {
                             key: 1,
                             name: __props.icon || unref(appConfig).ui.icons.check,
                             "data-slot": "icon",
-                            class: ui.value.icon({ class: (_d2 = props.ui) == null ? void 0 : _d2.icon })
+                            class: ui.value.icon({ class: props.ui?.icon })
                           }, null, 8, ["name", "class"]))
                         ];
                       }
@@ -388,24 +380,21 @@ const _sfc_main$3 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                   return [
                     createVNode(unref(CheckboxIndicator), {
                       "data-slot": "indicator",
-                      class: ui.value.indicator({ class: (_b2 = props.ui) == null ? void 0 : _b2.indicator })
+                      class: ui.value.indicator({ class: props.ui?.indicator })
                     }, {
-                      default: withCtx(() => {
-                        var _a5, _b3;
-                        return [
-                          modelValue2 === "indeterminate" ? (openBlock(), createBlock(_sfc_main$d, {
-                            key: 0,
-                            name: __props.indeterminateIcon || unref(appConfig).ui.icons.minus,
-                            "data-slot": "icon",
-                            class: ui.value.icon({ class: (_a5 = props.ui) == null ? void 0 : _a5.icon })
-                          }, null, 8, ["name", "class"])) : (openBlock(), createBlock(_sfc_main$d, {
-                            key: 1,
-                            name: __props.icon || unref(appConfig).ui.icons.check,
-                            "data-slot": "icon",
-                            class: ui.value.icon({ class: (_b3 = props.ui) == null ? void 0 : _b3.icon })
-                          }, null, 8, ["name", "class"]))
-                        ];
-                      }),
+                      default: withCtx(() => [
+                        modelValue2 === "indeterminate" ? (openBlock(), createBlock(_sfc_main$d, {
+                          key: 0,
+                          name: __props.indeterminateIcon || unref(appConfig).ui.icons.minus,
+                          "data-slot": "icon",
+                          class: ui.value.icon({ class: props.ui?.icon })
+                        }, null, 8, ["name", "class"])) : (openBlock(), createBlock(_sfc_main$d, {
+                          key: 1,
+                          name: __props.icon || unref(appConfig).ui.icons.check,
+                          "data-slot": "icon",
+                          class: ui.value.icon({ class: props.ui?.icon })
+                        }, null, 8, ["name", "class"]))
+                      ]),
                       _: 2
                     }, 1032, ["class"])
                   ];
@@ -415,12 +404,12 @@ const _sfc_main$3 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             }, _parent2, _scopeId));
             _push2(`</div>`);
             if (__props.label || !!slots.label || (__props.description || !!slots.description)) {
-              _push2(`<div data-slot="wrapper" class="${ssrRenderClass(ui.value.wrapper({ class: (_c = props.ui) == null ? void 0 : _c.wrapper }))}"${_scopeId}>`);
+              _push2(`<div data-slot="wrapper" class="${ssrRenderClass(ui.value.wrapper({ class: props.ui?.wrapper }))}"${_scopeId}>`);
               if (__props.label || !!slots.label) {
                 ssrRenderVNode(_push2, createVNode(resolveDynamicComponent(!__props.variant || __props.variant === "list" ? unref(Label) : "p"), {
                   for: unref(id),
                   "data-slot": "label",
-                  class: ui.value.label({ class: (_d = props.ui) == null ? void 0 : _d.label })
+                  class: ui.value.label({ class: props.ui?.label })
                 }, {
                   default: withCtx((_2, _push3, _parent3, _scopeId2) => {
                     if (_push3) {
@@ -441,7 +430,7 @@ const _sfc_main$3 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                 _push2(`<!---->`);
               }
               if (__props.description || !!slots.description) {
-                _push2(`<p data-slot="description" class="${ssrRenderClass(ui.value.description({ class: (_e = props.ui) == null ? void 0 : _e.description }))}"${_scopeId}>`);
+                _push2(`<p data-slot="description" class="${ssrRenderClass(ui.value.description({ class: props.ui?.description }))}"${_scopeId}>`);
                 ssrRenderSlot(_ctx.$slots, "description", { description: __props.description }, () => {
                   _push2(`${ssrInterpolate(__props.description)}`);
                 }, _push2, _parent2, _scopeId);
@@ -457,7 +446,7 @@ const _sfc_main$3 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             return [
               createVNode("div", {
                 "data-slot": "container",
-                class: ui.value.container({ class: (_f = props.ui) == null ? void 0 : _f.container })
+                class: ui.value.container({ class: props.ui?.container })
               }, [
                 createVNode(unref(CheckboxRoot), mergeProps({ id: unref(id) }, { ...unref(rootProps), ..._ctx.$attrs, ...unref(ariaAttrs) }, {
                   modelValue: modelValue.value,
@@ -465,48 +454,42 @@ const _sfc_main$3 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                   name: unref(name),
                   disabled: unref(disabled),
                   "data-slot": "base",
-                  class: ui.value.base({ class: (_g = props.ui) == null ? void 0 : _g.base })
+                  class: ui.value.base({ class: props.ui?.base })
                 }), {
-                  default: withCtx(({ modelValue: modelValue2 }) => {
-                    var _a4;
-                    return [
-                      createVNode(unref(CheckboxIndicator), {
-                        "data-slot": "indicator",
-                        class: ui.value.indicator({ class: (_a4 = props.ui) == null ? void 0 : _a4.indicator })
-                      }, {
-                        default: withCtx(() => {
-                          var _a5, _b2;
-                          return [
-                            modelValue2 === "indeterminate" ? (openBlock(), createBlock(_sfc_main$d, {
-                              key: 0,
-                              name: __props.indeterminateIcon || unref(appConfig).ui.icons.minus,
-                              "data-slot": "icon",
-                              class: ui.value.icon({ class: (_a5 = props.ui) == null ? void 0 : _a5.icon })
-                            }, null, 8, ["name", "class"])) : (openBlock(), createBlock(_sfc_main$d, {
-                              key: 1,
-                              name: __props.icon || unref(appConfig).ui.icons.check,
-                              "data-slot": "icon",
-                              class: ui.value.icon({ class: (_b2 = props.ui) == null ? void 0 : _b2.icon })
-                            }, null, 8, ["name", "class"]))
-                          ];
-                        }),
-                        _: 2
-                      }, 1032, ["class"])
-                    ];
-                  }),
+                  default: withCtx(({ modelValue: modelValue2 }) => [
+                    createVNode(unref(CheckboxIndicator), {
+                      "data-slot": "indicator",
+                      class: ui.value.indicator({ class: props.ui?.indicator })
+                    }, {
+                      default: withCtx(() => [
+                        modelValue2 === "indeterminate" ? (openBlock(), createBlock(_sfc_main$d, {
+                          key: 0,
+                          name: __props.indeterminateIcon || unref(appConfig).ui.icons.minus,
+                          "data-slot": "icon",
+                          class: ui.value.icon({ class: props.ui?.icon })
+                        }, null, 8, ["name", "class"])) : (openBlock(), createBlock(_sfc_main$d, {
+                          key: 1,
+                          name: __props.icon || unref(appConfig).ui.icons.check,
+                          "data-slot": "icon",
+                          class: ui.value.icon({ class: props.ui?.icon })
+                        }, null, 8, ["name", "class"]))
+                      ]),
+                      _: 2
+                    }, 1032, ["class"])
+                  ]),
                   _: 1
                 }, 16, ["id", "modelValue", "onUpdate:modelValue", "name", "disabled", "class"])
               ], 2),
               __props.label || !!slots.label || (__props.description || !!slots.description) ? (openBlock(), createBlock("div", {
                 key: 0,
                 "data-slot": "wrapper",
-                class: ui.value.wrapper({ class: (_h = props.ui) == null ? void 0 : _h.wrapper })
+                class: ui.value.wrapper({ class: props.ui?.wrapper })
               }, [
                 __props.label || !!slots.label ? (openBlock(), createBlock(resolveDynamicComponent(!__props.variant || __props.variant === "list" ? unref(Label) : "p"), {
                   key: 0,
                   for: unref(id),
                   "data-slot": "label",
-                  class: ui.value.label({ class: (_i = props.ui) == null ? void 0 : _i.label })
+                  class: ui.value.label({ class: props.ui?.label })
                 }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "label", { label: __props.label }, () => [
@@ -518,7 +501,7 @@ const _sfc_main$3 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                 __props.description || !!slots.description ? (openBlock(), createBlock("p", {
                   key: 1,
                   "data-slot": "description",
-                  class: ui.value.description({ class: (_j = props.ui) == null ? void 0 : _j.description })
+                  class: ui.value.description({ class: props.ui?.description })
                 }, [
                   renderSlot(_ctx.$slots, "description", { description: __props.description }, () => [
                     createTextVNode(toDisplayString(__props.description), 1)
@@ -716,15 +699,12 @@ const _sfc_main$2 = {
     const appConfig = useAppConfig();
     const rootProps = useForwardPropsEmits(reactivePick(props, "disabled", "id", "mask", "name", "otp", "required", "type"), emits);
     const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
-    const ui = computed(() => {
-      var _a;
-      return tv({ extend: tv(theme$1), ...((_a = appConfig.ui) == null ? void 0 : _a.pinInput) || {} })({
-        color: color.value,
-        variant: props.variant,
-        size: size.value,
-        highlight: highlight.value
-      });
-    });
+    const ui = computed(() => tv({ extend: tv(theme$1), ...appConfig.ui?.pinInput || {} })({
+      color: color.value,
+      variant: props.variant,
+      size: size.value,
+      highlight: highlight.value
+    }));
     const inputsRef = ref([]);
     const completed = ref(false);
     function onComplete(value) {
@@ -742,7 +722,6 @@ const _sfc_main$2 = {
       inputsRef
     });
     return (_ctx, _push, _parent, _attrs) => {
-      var _a;
       _push(ssrRenderComponent(unref(PinInputRoot), mergeProps({ ...unref(rootProps), ...unref(ariaAttrs) }, {
         id: unref(id),
         name: unref(name),
@@ -750,7 +729,7 @@ const _sfc_main$2 = {
         "model-value": __props.modelValue,
         "default-value": __props.defaultValue,
         "data-slot": "root",
-        class: ui.value.root({ class: [(_a = props.ui) == null ? void 0 : _a.root, props.class] }),
+        class: ui.value.root({ class: [props.ui?.root, props.class] }),
         "onUpdate:modelValue": ($event) => unref(emitFormInput)(),
         onComplete
       }, _attrs), {
@@ -758,14 +737,13 @@ const _sfc_main$2 = {
           if (_push2) {
             _push2(`<!--[-->`);
             ssrRenderList(unref(looseToNumber)(props.length), (ids, index) => {
-              var _a2;
               _push2(ssrRenderComponent(unref(PinInputInput), {
                 key: ids,
                 ref_for: true,
                 ref: (el) => inputsRef.value[index] = el,
                 index,
                 "data-slot": "base",
-                class: ui.value.base({ class: (_a2 = props.ui) == null ? void 0 : _a2.base }),
+                class: ui.value.base({ class: props.ui?.base }),
                 disabled: unref(disabled),
                 onBlur,
                 onFocus: unref(emitFormFocus)
@@ -775,14 +753,13 @@ const _sfc_main$2 = {
           } else {
             return [
               (openBlock(true), createBlock(Fragment, null, renderList(unref(looseToNumber)(props.length), (ids, index) => {
-                var _a2;
                 return openBlock(), createBlock(unref(PinInputInput), {
                   key: ids,
                   ref_for: true,
                   ref: (el) => inputsRef.value[index] = el,
                   index,
                   "data-slot": "base",
-                  class: ui.value.base({ class: (_a2 = props.ui) == null ? void 0 : _a2.base }),
+                  class: ui.value.base({ class: props.ui?.base }),
                   disabled: unref(disabled),
                   onBlur,
                   onFocus: unref(emitFormFocus)
@@ -857,10 +834,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     const slots = useSlots();
     const { t } = useLocale();
     const appConfig = useAppConfig();
-    const ui = computed(() => {
-      var _a;
-      return tv({ extend: tv(theme), ...((_a = appConfig.ui) == null ? void 0 : _a.authForm) || {} })();
-    });
+    const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.authForm || {} })());
     const formRef = useTemplateRef("formRef");
     const passwordVisibility = ref(false);
     const passwordRef = useTemplateRef("passwordRef");
@@ -886,28 +860,24 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       state
     });
     return (_ctx, _push, _parent, _attrs) => {
-      var _a;
       _push(ssrRenderComponent(unref(Primitive), mergeProps({
         as: __props.as,
         "data-slot": "root",
-        class: ui.value.root({ class: [(_a = props.ui) == null ? void 0 : _a.root, props.class] })
+        class: ui.value.root({ class: [props.ui?.root, props.class] })
       }, _attrs), {
         default: withCtx((_, _push2, _parent2, _scopeId) => {
-          var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
           if (_push2) {
             if (__props.icon || !!slots.leading || (__props.title || !!slots.title) || (__props.description || !!slots.description) || !!slots.header) {
-              _push2(`<div data-slot="header" class="${ssrRenderClass(ui.value.header({ class: (_a2 = props.ui) == null ? void 0 : _a2.header }))}"${_scopeId}>`);
+              _push2(`<div data-slot="header" class="${ssrRenderClass(ui.value.header({ class: props.ui?.header }))}"${_scopeId}>`);
               ssrRenderSlot(_ctx.$slots, "header", {}, () => {
-                var _a3, _b2, _c2;
                 if (__props.icon || !!slots.leading) {
-                  _push2(`<div data-slot="leading" class="${ssrRenderClass(ui.value.leading({ class: (_a3 = props.ui) == null ? void 0 : _a3.leading }))}"${_scopeId}>`);
+                  _push2(`<div data-slot="leading" class="${ssrRenderClass(ui.value.leading({ class: props.ui?.leading }))}"${_scopeId}>`);
                   ssrRenderSlot(_ctx.$slots, "leading", { ui: ui.value }, () => {
-                    var _a4;
                     if (__props.icon) {
                       _push2(ssrRenderComponent(_sfc_main$d, {
                         name: __props.icon,
                         "data-slot": "leadingIcon",
-                        class: ui.value.leadingIcon({ class: (_a4 = props.ui) == null ? void 0 : _a4.leadingIcon })
+                        class: ui.value.leadingIcon({ class: props.ui?.leadingIcon })
                       }, null, _parent2, _scopeId));
                     } else {
                       _push2(`<!---->`);
@@ -918,7 +888,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                   _push2(`<!---->`);
                 }
                 if (__props.title || !!slots.title) {
-                  _push2(`<div data-slot="title" class="${ssrRenderClass(ui.value.title({ class: (_b2 = props.ui) == null ? void 0 : _b2.title }))}"${_scopeId}>`);
+                  _push2(`<div data-slot="title" class="${ssrRenderClass(ui.value.title({ class: props.ui?.title }))}"${_scopeId}>`);
                   ssrRenderSlot(_ctx.$slots, "title", {}, () => {
                     _push2(`${ssrInterpolate(__props.title)}`);
                   }, _push2, _parent2, _scopeId);
@@ -927,7 +897,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                   _push2(`<!---->`);
                 }
                 if (__props.description || !!slots.description) {
-                  _push2(`<div data-slot="description" class="${ssrRenderClass(ui.value.description({ class: (_c2 = props.ui) == null ? void 0 : _c2.description }))}"${_scopeId}>`);
+                  _push2(`<div data-slot="description" class="${ssrRenderClass(ui.value.description({ class: props.ui?.description }))}"${_scopeId}>`);
                   ssrRenderSlot(_ctx.$slots, "description", {}, () => {
                     _push2(`${ssrInterpolate(__props.description)}`);
                   }, _push2, _parent2, _scopeId);
@@ -940,9 +910,9 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             } else {
               _push2(`<!---->`);
             }
-            _push2(`<div data-slot="body" class="${ssrRenderClass(ui.value.body({ class: (_b = props.ui) == null ? void 0 : _b.body }))}"${_scopeId}>`);
-            if (((_c = __props.providers) == null ? void 0 : _c.length) || !!slots.providers) {
-              _push2(`<div data-slot="providers" class="${ssrRenderClass(ui.value.providers({ class: (_d = props.ui) == null ? void 0 : _d.providers }))}"${_scopeId}>`);
+            _push2(`<div data-slot="body" class="${ssrRenderClass(ui.value.body({ class: props.ui?.body }))}"${_scopeId}>`);
+            if (__props.providers?.length || !!slots.providers) {
+              _push2(`<div data-slot="providers" class="${ssrRenderClass(ui.value.providers({ class: props.ui?.providers }))}"${_scopeId}>`);
               ssrRenderSlot(_ctx.$slots, "providers", {}, () => {
                 _push2(`<!--[-->`);
                 ssrRenderList(__props.providers, (provider, index) => {
@@ -959,15 +929,15 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             } else {
               _push2(`<!---->`);
             }
-            if (((_e = __props.providers) == null ? void 0 : _e.length) && ((_f = __props.fields) == null ? void 0 : _f.length)) {
+            if (__props.providers?.length && __props.fields?.length) {
               _push2(ssrRenderComponent(_sfc_main$4, mergeProps(typeof __props.separator === "object" ? __props.separator : { label: __props.separator }, {
                 "data-slot": "separator",
-                class: ui.value.separator({ class: (_g = props.ui) == null ? void 0 : _g.separator })
+                class: ui.value.separator({ class: props.ui?.separator })
               }), null, _parent2, _scopeId));
             } else {
               _push2(`<!---->`);
             }
-            if ((_h = __props.fields) == null ? void 0 : _h.length) {
+            if (__props.fields?.length) {
               _push2(ssrRenderComponent(_sfc_main$5, mergeProps({
                 ref_key: "formRef",
                 ref: formRef,
@@ -978,7 +948,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                 disabled: __props.disabled,
                 "loading-auto": __props.loadingAuto,
                 "data-slot": "form",
-                class: ui.value.form({ class: (_i = props.ui) == null ? void 0 : _i.form })
+                class: ui.value.form({ class: props.ui?.form })
               }, _ctx.$attrs, { onSubmit: __props.onSubmit }), {
                 default: withCtx((_2, _push3, _parent3, _scopeId2) => {
                   if (_push3) {
@@ -990,20 +960,19 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                         default: withCtx((_3, _push4, _parent4, _scopeId3) => {
                           if (_push4) {
                             ssrRenderSlot(_ctx.$slots, `${field.name}-field`, mergeProps({ ref_for: true }, { state, field }), () => {
-                              var _a3, _b2, _c2, _d2, _e2;
                               if (field.type === "checkbox") {
                                 _push4(ssrRenderComponent(_sfc_main$3, mergeProps({
                                   modelValue: state[field.name],
                                   "onUpdate:modelValue": ($event) => state[field.name] = $event,
                                   "data-slot": "checkbox",
-                                  class: ui.value.checkbox({ class: (_a3 = props.ui) == null ? void 0 : _a3.checkbox })
+                                  class: ui.value.checkbox({ class: props.ui?.checkbox })
                                 }, { ref_for: true }, omitFieldProps(field)), null, _parent4, _scopeId3));
                               } else if (field.type === "select") {
                                 _push4(ssrRenderComponent(_sfc_main$7, mergeProps({
                                   modelValue: state[field.name],
                                   "onUpdate:modelValue": ($event) => state[field.name] = $event,
                                   "data-slot": "select",
-                                  class: ui.value.select({ class: (_b2 = props.ui) == null ? void 0 : _b2.select })
+                                  class: ui.value.select({ class: props.ui?.select })
                                 }, { ref_for: true }, omitFieldProps(field)), null, _parent4, _scopeId3));
                               } else if (field.type === "otp") {
                                 _push4(ssrRenderComponent(_sfc_main$2, mergeProps({
@@ -1011,7 +980,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                   modelValue: state[field.name],
                                   "onUpdate:modelValue": ($event) => state[field.name] = $event,
                                   "data-slot": "otp",
-                                  class: ui.value.otp({ class: (_c2 = props.ui) == null ? void 0 : _c2.otp })
+                                  class: ui.value.otp({ class: props.ui?.otp })
                                 }, { ref_for: true }, Object.assign({}, omitFieldProps(field), typeof field.otp === "object" ? field.otp : {}), { otp: "" }), null, _parent4, _scopeId3));
                               } else if (field.type === "password") {
                                 _push4(ssrRenderComponent(_sfc_main$9, mergeProps({
@@ -1021,12 +990,11 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                   modelValue: state[field.name],
                                   "onUpdate:modelValue": ($event) => state[field.name] = $event,
                                   "data-slot": "password",
-                                  class: ui.value.password({ class: (_d2 = props.ui) == null ? void 0 : _d2.password })
+                                  class: ui.value.password({ class: props.ui?.password })
                                 }, { ref_for: true }, omitFieldProps(field), {
                                   type: passwordVisibility.value ? "text" : "password"
                                 }), {
                                   trailing: withCtx((_4, _push5, _parent5, _scopeId4) => {
-                                    var _a4, _b3, _c3, _d3, _e3, _f2;
                                     if (_push5) {
                                       _push5(ssrRenderComponent(_sfc_main$8, {
                                         color: "neutral",
@@ -1035,7 +1003,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                         icon: passwordVisibility.value ? unref(appConfig).ui.icons.eyeOff : unref(appConfig).ui.icons.eye,
                                         "aria-label": passwordVisibility.value ? unref(t)("authForm.hidePassword") : unref(t)("authForm.showPassword"),
                                         "aria-pressed": passwordVisibility.value,
-                                        "aria-controls": (_c3 = (_b3 = (_a4 = passwordRef.value) == null ? void 0 : _a4[0]) == null ? void 0 : _b3.inputRef) == null ? void 0 : _c3.id,
+                                        "aria-controls": passwordRef.value?.[0]?.inputRef?.id,
                                         onClick: ($event) => passwordVisibility.value = !passwordVisibility.value
                                       }, null, _parent5, _scopeId4));
                                     } else {
@@ -1047,7 +1015,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                           icon: passwordVisibility.value ? unref(appConfig).ui.icons.eyeOff : unref(appConfig).ui.icons.eye,
                                           "aria-label": passwordVisibility.value ? unref(t)("authForm.hidePassword") : unref(t)("authForm.showPassword"),
                                           "aria-pressed": passwordVisibility.value,
-                                          "aria-controls": (_f2 = (_e3 = (_d3 = passwordRef.value) == null ? void 0 : _d3[0]) == null ? void 0 : _e3.inputRef) == null ? void 0 : _f2.id,
+                                          "aria-controls": passwordRef.value?.[0]?.inputRef?.id,
                                           onClick: ($event) => passwordVisibility.value = !passwordVisibility.value
                                         }, null, 8, ["icon", "aria-label", "aria-pressed", "aria-controls", "onClick"])
                                       ];
@@ -1060,71 +1028,65 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                   modelValue: state[field.name],
                                   "onUpdate:modelValue": ($event) => state[field.name] = $event,
                                   "data-slot": "input",
-                                  class: ui.value.input({ class: (_e2 = props.ui) == null ? void 0 : _e2.input })
+                                  class: ui.value.input({ class: props.ui?.input })
                                 }, { ref_for: true }, omitFieldProps(field)), null, _parent4, _scopeId3));
                               }
                             }, _push4, _parent4, _scopeId3);
                           } else {
                             return [
-                              renderSlot(_ctx.$slots, `${field.name}-field`, mergeProps({ ref_for: true }, { state, field }), () => {
-                                var _a3, _b2, _c2, _d2, _e2;
-                                return [
-                                  field.type === "checkbox" ? (openBlock(), createBlock(_sfc_main$3, mergeProps({
-                                    key: 0,
-                                    modelValue: state[field.name],
-                                    "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                    "data-slot": "checkbox",
-                                    class: ui.value.checkbox({ class: (_a3 = props.ui) == null ? void 0 : _a3.checkbox })
-                                  }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"])) : field.type === "select" ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
-                                    key: 1,
-                                    modelValue: state[field.name],
-                                    "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                    "data-slot": "select",
-                                    class: ui.value.select({ class: (_b2 = props.ui) == null ? void 0 : _b2.select })
-                                  }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"])) : field.type === "otp" ? (openBlock(), createBlock(_sfc_main$2, mergeProps({
-                                    key: 2,
-                                    id: field.name,
-                                    modelValue: state[field.name],
-                                    "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                    "data-slot": "otp",
-                                    class: ui.value.otp({ class: (_c2 = props.ui) == null ? void 0 : _c2.otp })
-                                  }, { ref_for: true }, Object.assign({}, omitFieldProps(field), typeof field.otp === "object" ? field.otp : {}), { otp: "" }), null, 16, ["id", "modelValue", "onUpdate:modelValue", "class"])) : field.type === "password" ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
-                                    key: 3,
-                                    ref_for: true,
-                                    ref_key: "passwordRef",
-                                    ref: passwordRef,
-                                    modelValue: state[field.name],
-                                    "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                    "data-slot": "password",
-                                    class: ui.value.password({ class: (_d2 = props.ui) == null ? void 0 : _d2.password })
-                                  }, { ref_for: true }, omitFieldProps(field), {
-                                    type: passwordVisibility.value ? "text" : "password"
-                                  }), {
-                                    trailing: withCtx(() => {
-                                      var _a4, _b3, _c3;
-                                      return [
-                                        createVNode(_sfc_main$8, {
-                                          color: "neutral",
-                                          variant: "link",
-                                          size: "sm",
-                                          icon: passwordVisibility.value ? unref(appConfig).ui.icons.eyeOff : unref(appConfig).ui.icons.eye,
-                                          "aria-label": passwordVisibility.value ? unref(t)("authForm.hidePassword") : unref(t)("authForm.showPassword"),
-                                          "aria-pressed": passwordVisibility.value,
-                                          "aria-controls": (_c3 = (_b3 = (_a4 = passwordRef.value) == null ? void 0 : _a4[0]) == null ? void 0 : _b3.inputRef) == null ? void 0 : _c3.id,
-                                          onClick: ($event) => passwordVisibility.value = !passwordVisibility.value
-                                        }, null, 8, ["icon", "aria-label", "aria-pressed", "aria-controls", "onClick"])
-                                      ];
-                                    }),
-                                    _: 1
-                                  }, 16, ["modelValue", "onUpdate:modelValue", "class", "type"])) : (openBlock(), createBlock(_sfc_main$9, mergeProps({
-                                    key: 4,
-                                    modelValue: state[field.name],
-                                    "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                    "data-slot": "input",
-                                    class: ui.value.input({ class: (_e2 = props.ui) == null ? void 0 : _e2.input })
-                                  }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"]))
-                                ];
-                              })
+                              renderSlot(_ctx.$slots, `${field.name}-field`, mergeProps({ ref_for: true }, { state, field }), () => [
+                                field.type === "checkbox" ? (openBlock(), createBlock(_sfc_main$3, mergeProps({
+                                  key: 0,
+                                  modelValue: state[field.name],
+                                  "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                                  "data-slot": "checkbox",
+                                  class: ui.value.checkbox({ class: props.ui?.checkbox })
+                                }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"])) : field.type === "select" ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
+                                  key: 1,
+                                  modelValue: state[field.name],
+                                  "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                                  "data-slot": "select",
+                                  class: ui.value.select({ class: props.ui?.select })
+                                }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"])) : field.type === "otp" ? (openBlock(), createBlock(_sfc_main$2, mergeProps({
+                                  key: 2,
+                                  id: field.name,
+                                  modelValue: state[field.name],
+                                  "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                                  "data-slot": "otp",
+                                  class: ui.value.otp({ class: props.ui?.otp })
+                                }, { ref_for: true }, Object.assign({}, omitFieldProps(field), typeof field.otp === "object" ? field.otp : {}), { otp: "" }), null, 16, ["id", "modelValue", "onUpdate:modelValue", "class"])) : field.type === "password" ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
+                                  key: 3,
+                                  ref_for: true,
+                                  ref_key: "passwordRef",
+                                  ref: passwordRef,
+                                  modelValue: state[field.name],
+                                  "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                                  "data-slot": "password",
+                                  class: ui.value.password({ class: props.ui?.password })
+                                }, { ref_for: true }, omitFieldProps(field), {
+                                  type: passwordVisibility.value ? "text" : "password"
+                                }), {
+                                  trailing: withCtx(() => [
+                                    createVNode(_sfc_main$8, {
+                                      color: "neutral",
+                                      variant: "link",
+                                      size: "sm",
+                                      icon: passwordVisibility.value ? unref(appConfig).ui.icons.eyeOff : unref(appConfig).ui.icons.eye,
+                                      "aria-label": passwordVisibility.value ? unref(t)("authForm.hidePassword") : unref(t)("authForm.showPassword"),
+                                      "aria-pressed": passwordVisibility.value,
+                                      "aria-controls": passwordRef.value?.[0]?.inputRef?.id,
+                                      onClick: ($event) => passwordVisibility.value = !passwordVisibility.value
+                                    }, null, 8, ["icon", "aria-label", "aria-pressed", "aria-controls", "onClick"])
+                                  ]),
+                                  _: 1
+                                }, 16, ["modelValue", "onUpdate:modelValue", "class", "type"])) : (openBlock(), createBlock(_sfc_main$9, mergeProps({
+                                  key: 4,
+                                  modelValue: state[field.name],
+                                  "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                                  "data-slot": "input",
+                                  class: ui.value.input({ class: props.ui?.input })
+                                }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"]))
+                              ])
                             ];
                           }
                         }),
@@ -1219,65 +1181,59 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                           key: field.name
                         }, { ref_for: true }, pickFieldProps(field)), createSlots({
                           default: withCtx(() => [
-                            renderSlot(_ctx.$slots, `${field.name}-field`, mergeProps({ ref_for: true }, { state, field }), () => {
-                              var _a3, _b2, _c2, _d2, _e2;
-                              return [
-                                field.type === "checkbox" ? (openBlock(), createBlock(_sfc_main$3, mergeProps({
-                                  key: 0,
-                                  modelValue: state[field.name],
-                                  "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                  "data-slot": "checkbox",
-                                  class: ui.value.checkbox({ class: (_a3 = props.ui) == null ? void 0 : _a3.checkbox })
-                                }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"])) : field.type === "select" ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
-                                  key: 1,
-                                  modelValue: state[field.name],
-                                  "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                  "data-slot": "select",
-                                  class: ui.value.select({ class: (_b2 = props.ui) == null ? void 0 : _b2.select })
-                                }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"])) : field.type === "otp" ? (openBlock(), createBlock(_sfc_main$2, mergeProps({
-                                  key: 2,
-                                  id: field.name,
-                                  modelValue: state[field.name],
-                                  "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                  "data-slot": "otp",
-                                  class: ui.value.otp({ class: (_c2 = props.ui) == null ? void 0 : _c2.otp })
-                                }, { ref_for: true }, Object.assign({}, omitFieldProps(field), typeof field.otp === "object" ? field.otp : {}), { otp: "" }), null, 16, ["id", "modelValue", "onUpdate:modelValue", "class"])) : field.type === "password" ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
-                                  key: 3,
-                                  ref_for: true,
-                                  ref_key: "passwordRef",
-                                  ref: passwordRef,
-                                  modelValue: state[field.name],
-                                  "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                  "data-slot": "password",
-                                  class: ui.value.password({ class: (_d2 = props.ui) == null ? void 0 : _d2.password })
-                                }, { ref_for: true }, omitFieldProps(field), {
-                                  type: passwordVisibility.value ? "text" : "password"
-                                }), {
-                                  trailing: withCtx(() => {
-                                    var _a4, _b3, _c3;
-                                    return [
-                                      createVNode(_sfc_main$8, {
-                                        color: "neutral",
-                                        variant: "link",
-                                        size: "sm",
-                                        icon: passwordVisibility.value ? unref(appConfig).ui.icons.eyeOff : unref(appConfig).ui.icons.eye,
-                                        "aria-label": passwordVisibility.value ? unref(t)("authForm.hidePassword") : unref(t)("authForm.showPassword"),
-                                        "aria-pressed": passwordVisibility.value,
-                                        "aria-controls": (_c3 = (_b3 = (_a4 = passwordRef.value) == null ? void 0 : _a4[0]) == null ? void 0 : _b3.inputRef) == null ? void 0 : _c3.id,
-                                        onClick: ($event) => passwordVisibility.value = !passwordVisibility.value
-                                      }, null, 8, ["icon", "aria-label", "aria-pressed", "aria-controls", "onClick"])
-                                    ];
-                                  }),
-                                  _: 1
-                                }, 16, ["modelValue", "onUpdate:modelValue", "class", "type"])) : (openBlock(), createBlock(_sfc_main$9, mergeProps({
-                                  key: 4,
-                                  modelValue: state[field.name],
-                                  "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                  "data-slot": "input",
-                                  class: ui.value.input({ class: (_e2 = props.ui) == null ? void 0 : _e2.input })
-                                }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"]))
-                              ];
-                            })
+                            renderSlot(_ctx.$slots, `${field.name}-field`, mergeProps({ ref_for: true }, { state, field }), () => [
+                              field.type === "checkbox" ? (openBlock(), createBlock(_sfc_main$3, mergeProps({
+                                key: 0,
+                                modelValue: state[field.name],
+                                "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                                "data-slot": "checkbox",
+                                class: ui.value.checkbox({ class: props.ui?.checkbox })
+                              }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"])) : field.type === "select" ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
+                                key: 1,
+                                modelValue: state[field.name],
+                                "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                                "data-slot": "select",
+                                class: ui.value.select({ class: props.ui?.select })
+                              }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"])) : field.type === "otp" ? (openBlock(), createBlock(_sfc_main$2, mergeProps({
+                                key: 2,
+                                id: field.name,
+                                modelValue: state[field.name],
+                                "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                                "data-slot": "otp",
+                                class: ui.value.otp({ class: props.ui?.otp })
+                              }, { ref_for: true }, Object.assign({}, omitFieldProps(field), typeof field.otp === "object" ? field.otp : {}), { otp: "" }), null, 16, ["id", "modelValue", "onUpdate:modelValue", "class"])) : field.type === "password" ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
+                                key: 3,
+                                ref_for: true,
+                                ref_key: "passwordRef",
+                                ref: passwordRef,
+                                modelValue: state[field.name],
+                                "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                                "data-slot": "password",
+                                class: ui.value.password({ class: props.ui?.password })
+                              }, { ref_for: true }, omitFieldProps(field), {
+                                type: passwordVisibility.value ? "text" : "password"
+                              }), {
+                                trailing: withCtx(() => [
+                                  createVNode(_sfc_main$8, {
+                                    color: "neutral",
+                                    variant: "link",
+                                    size: "sm",
+                                    icon: passwordVisibility.value ? unref(appConfig).ui.icons.eyeOff : unref(appConfig).ui.icons.eye,
+                                    "aria-label": passwordVisibility.value ? unref(t)("authForm.hidePassword") : unref(t)("authForm.showPassword"),
+                                    "aria-pressed": passwordVisibility.value,
+                                    "aria-controls": passwordRef.value?.[0]?.inputRef?.id,
+                                    onClick: ($event) => passwordVisibility.value = !passwordVisibility.value
+                                  }, null, 8, ["icon", "aria-label", "aria-pressed", "aria-controls", "onClick"])
+                                ]),
+                                _: 1
+                              }, 16, ["modelValue", "onUpdate:modelValue", "class", "type"])) : (openBlock(), createBlock(_sfc_main$9, mergeProps({
+                                key: 4,
+                                modelValue: state[field.name],
+                                "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                                "data-slot": "input",
+                                class: ui.value.input({ class: props.ui?.input })
+                              }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"]))
+                            ])
                           ]),
                           _: 2
                         }, [
@@ -1338,7 +1294,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             }
             _push2(`</div>`);
             if (!!slots.footer) {
-              _push2(`<div data-slot="footer" class="${ssrRenderClass(ui.value.footer({ class: (_j = props.ui) == null ? void 0 : _j.footer }))}"${_scopeId}>`);
+              _push2(`<div data-slot="footer" class="${ssrRenderClass(ui.value.footer({ class: props.ui?.footer }))}"${_scopeId}>`);
               ssrRenderSlot(_ctx.$slots, "footer", {}, null, _push2, _parent2, _scopeId);
               _push2(`</div>`);
             } else {
@@ -1349,57 +1305,51 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
               __props.icon || !!slots.leading || (__props.title || !!slots.title) || (__props.description || !!slots.description) || !!slots.header ? (openBlock(), createBlock("div", {
                 key: 0,
                 "data-slot": "header",
-                class: ui.value.header({ class: (_k = props.ui) == null ? void 0 : _k.header })
+                class: ui.value.header({ class: props.ui?.header })
               }, [
-                renderSlot(_ctx.$slots, "header", {}, () => {
-                  var _a3, _b2, _c2;
-                  return [
-                    __props.icon || !!slots.leading ? (openBlock(), createBlock("div", {
-                      key: 0,
-                      "data-slot": "leading",
-                      class: ui.value.leading({ class: (_a3 = props.ui) == null ? void 0 : _a3.leading })
-                    }, [
-                      renderSlot(_ctx.$slots, "leading", { ui: ui.value }, () => {
-                        var _a4;
-                        return [
-                          __props.icon ? (openBlock(), createBlock(_sfc_main$d, {
-                            key: 0,
-                            name: __props.icon,
-                            "data-slot": "leadingIcon",
-                            class: ui.value.leadingIcon({ class: (_a4 = props.ui) == null ? void 0 : _a4.leadingIcon })
-                          }, null, 8, ["name", "class"])) : createCommentVNode("", true)
-                        ];
-                      })
-                    ], 2)) : createCommentVNode("", true),
-                    __props.title || !!slots.title ? (openBlock(), createBlock("div", {
-                      key: 1,
-                      "data-slot": "title",
-                      class: ui.value.title({ class: (_b2 = props.ui) == null ? void 0 : _b2.title })
-                    }, [
-                      renderSlot(_ctx.$slots, "title", {}, () => [
-                        createTextVNode(toDisplayString(__props.title), 1)
-                      ])
-                    ], 2)) : createCommentVNode("", true),
-                    __props.description || !!slots.description ? (openBlock(), createBlock("div", {
-                      key: 2,
-                      "data-slot": "description",
-                      class: ui.value.description({ class: (_c2 = props.ui) == null ? void 0 : _c2.description })
-                    }, [
-                      renderSlot(_ctx.$slots, "description", {}, () => [
-                        createTextVNode(toDisplayString(__props.description), 1)
-                      ])
-                    ], 2)) : createCommentVNode("", true)
-                  ];
-                })
+                renderSlot(_ctx.$slots, "header", {}, () => [
+                  __props.icon || !!slots.leading ? (openBlock(), createBlock("div", {
+                    key: 0,
+                    "data-slot": "leading",
+                    class: ui.value.leading({ class: props.ui?.leading })
+                  }, [
+                    renderSlot(_ctx.$slots, "leading", { ui: ui.value }, () => [
+                      __props.icon ? (openBlock(), createBlock(_sfc_main$d, {
+                        key: 0,
+                        name: __props.icon,
+                        "data-slot": "leadingIcon",
+                        class: ui.value.leadingIcon({ class: props.ui?.leadingIcon })
+                      }, null, 8, ["name", "class"])) : createCommentVNode("", true)
+                    ])
+                  ], 2)) : createCommentVNode("", true),
+                  __props.title || !!slots.title ? (openBlock(), createBlock("div", {
+                    key: 1,
+                    "data-slot": "title",
+                    class: ui.value.title({ class: props.ui?.title })
+                  }, [
+                    renderSlot(_ctx.$slots, "title", {}, () => [
+                      createTextVNode(toDisplayString(__props.title), 1)
+                    ])
+                  ], 2)) : createCommentVNode("", true),
+                  __props.description || !!slots.description ? (openBlock(), createBlock("div", {
+                    key: 2,
+                    "data-slot": "description",
+                    class: ui.value.description({ class: props.ui?.description })
+                  }, [
+                    renderSlot(_ctx.$slots, "description", {}, () => [
+                      createTextVNode(toDisplayString(__props.description), 1)
+                    ])
+                  ], 2)) : createCommentVNode("", true)
+                ])
               ], 2)) : createCommentVNode("", true),
               createVNode("div", {
                 "data-slot": "body",
-                class: ui.value.body({ class: (_l = props.ui) == null ? void 0 : _l.body })
+                class: ui.value.body({ class: props.ui?.body })
               }, [
-                ((_m = __props.providers) == null ? void 0 : _m.length) || !!slots.providers ? (openBlock(), createBlock("div", {
+                __props.providers?.length || !!slots.providers ? (openBlock(), createBlock("div", {
                   key: 0,
                   "data-slot": "providers",
-                  class: ui.value.providers({ class: (_n = props.ui) == null ? void 0 : _n.providers })
+                  class: ui.value.providers({ class: props.ui?.providers })
                 }, [
                   renderSlot(_ctx.$slots, "providers", {}, () => [
                     (openBlock(true), createBlock(Fragment, null, renderList(__props.providers, (provider, index) => {
@@ -1412,11 +1362,11 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                     }), 128))
                   ])
                 ], 2)) : createCommentVNode("", true),
-                ((_o = __props.providers) == null ? void 0 : _o.length) && ((_p = __props.fields) == null ? void 0 : _p.length) ? (openBlock(), createBlock(_sfc_main$4, mergeProps({ key: 1 }, typeof __props.separator === "object" ? __props.separator : { label: __props.separator }, {
+                __props.providers?.length && __props.fields?.length ? (openBlock(), createBlock(_sfc_main$4, mergeProps({ key: 1 }, typeof __props.separator === "object" ? __props.separator : { label: __props.separator }, {
                   "data-slot": "separator",
-                  class: ui.value.separator({ class: (_q = props.ui) == null ? void 0 : _q.separator })
+                  class: ui.value.separator({ class: props.ui?.separator })
                 }), null, 16, ["class"])) : createCommentVNode("", true),
-                ((_r = __props.fields) == null ? void 0 : _r.length) ? (openBlock(), createBlock(_sfc_main$5, mergeProps({
+                __props.fields?.length ? (openBlock(), createBlock(_sfc_main$5, mergeProps({
                   key: 2,
                   ref_key: "formRef",
                   ref: formRef,
@@ -1427,7 +1377,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                   disabled: __props.disabled,
                   "loading-auto": __props.loadingAuto,
                   "data-slot": "form",
-                  class: ui.value.form({ class: (_s = props.ui) == null ? void 0 : _s.form })
+                  class: ui.value.form({ class: props.ui?.form })
                 }, _ctx.$attrs, { onSubmit: __props.onSubmit }), {
                   default: withCtx(() => [
                     (openBlock(true), createBlock(Fragment, null, renderList(__props.fields, (field) => {
@@ -1435,65 +1385,59 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                         key: field.name
                       }, { ref_for: true }, pickFieldProps(field)), createSlots({
                         default: withCtx(() => [
-                          renderSlot(_ctx.$slots, `${field.name}-field`, mergeProps({ ref_for: true }, { state, field }), () => {
-                            var _a3, _b2, _c2, _d2, _e2;
-                            return [
-                              field.type === "checkbox" ? (openBlock(), createBlock(_sfc_main$3, mergeProps({
-                                key: 0,
-                                modelValue: state[field.name],
-                                "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                "data-slot": "checkbox",
-                                class: ui.value.checkbox({ class: (_a3 = props.ui) == null ? void 0 : _a3.checkbox })
-                              }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"])) : field.type === "select" ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
-                                key: 1,
-                                modelValue: state[field.name],
-                                "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                "data-slot": "select",
-                                class: ui.value.select({ class: (_b2 = props.ui) == null ? void 0 : _b2.select })
-                              }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"])) : field.type === "otp" ? (openBlock(), createBlock(_sfc_main$2, mergeProps({
-                                key: 2,
-                                id: field.name,
-                                modelValue: state[field.name],
-                                "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                "data-slot": "otp",
-                                class: ui.value.otp({ class: (_c2 = props.ui) == null ? void 0 : _c2.otp })
-                              }, { ref_for: true }, Object.assign({}, omitFieldProps(field), typeof field.otp === "object" ? field.otp : {}), { otp: "" }), null, 16, ["id", "modelValue", "onUpdate:modelValue", "class"])) : field.type === "password" ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
-                                key: 3,
-                                ref_for: true,
-                                ref_key: "passwordRef",
-                                ref: passwordRef,
-                                modelValue: state[field.name],
-                                "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                "data-slot": "password",
-                                class: ui.value.password({ class: (_d2 = props.ui) == null ? void 0 : _d2.password })
-                              }, { ref_for: true }, omitFieldProps(field), {
-                                type: passwordVisibility.value ? "text" : "password"
-                              }), {
-                                trailing: withCtx(() => {
-                                  var _a4, _b3, _c3;
-                                  return [
-                                    createVNode(_sfc_main$8, {
-                                      color: "neutral",
-                                      variant: "link",
-                                      size: "sm",
-                                      icon: passwordVisibility.value ? unref(appConfig).ui.icons.eyeOff : unref(appConfig).ui.icons.eye,
-                                      "aria-label": passwordVisibility.value ? unref(t)("authForm.hidePassword") : unref(t)("authForm.showPassword"),
-                                      "aria-pressed": passwordVisibility.value,
-                                      "aria-controls": (_c3 = (_b3 = (_a4 = passwordRef.value) == null ? void 0 : _a4[0]) == null ? void 0 : _b3.inputRef) == null ? void 0 : _c3.id,
-                                      onClick: ($event) => passwordVisibility.value = !passwordVisibility.value
-                                    }, null, 8, ["icon", "aria-label", "aria-pressed", "aria-controls", "onClick"])
-                                  ];
-                                }),
-                                _: 1
-                              }, 16, ["modelValue", "onUpdate:modelValue", "class", "type"])) : (openBlock(), createBlock(_sfc_main$9, mergeProps({
-                                key: 4,
-                                modelValue: state[field.name],
-                                "onUpdate:modelValue": ($event) => state[field.name] = $event,
-                                "data-slot": "input",
-                                class: ui.value.input({ class: (_e2 = props.ui) == null ? void 0 : _e2.input })
-                              }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"]))
-                            ];
-                          })
+                          renderSlot(_ctx.$slots, `${field.name}-field`, mergeProps({ ref_for: true }, { state, field }), () => [
+                            field.type === "checkbox" ? (openBlock(), createBlock(_sfc_main$3, mergeProps({
+                              key: 0,
+                              modelValue: state[field.name],
+                              "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                              "data-slot": "checkbox",
+                              class: ui.value.checkbox({ class: props.ui?.checkbox })
+                            }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"])) : field.type === "select" ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
+                              key: 1,
+                              modelValue: state[field.name],
+                              "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                              "data-slot": "select",
+                              class: ui.value.select({ class: props.ui?.select })
+                            }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"])) : field.type === "otp" ? (openBlock(), createBlock(_sfc_main$2, mergeProps({
+                              key: 2,
+                              id: field.name,
+                              modelValue: state[field.name],
+                              "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                              "data-slot": "otp",
+                              class: ui.value.otp({ class: props.ui?.otp })
+                            }, { ref_for: true }, Object.assign({}, omitFieldProps(field), typeof field.otp === "object" ? field.otp : {}), { otp: "" }), null, 16, ["id", "modelValue", "onUpdate:modelValue", "class"])) : field.type === "password" ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
+                              key: 3,
+                              ref_for: true,
+                              ref_key: "passwordRef",
+                              ref: passwordRef,
+                              modelValue: state[field.name],
+                              "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                              "data-slot": "password",
+                              class: ui.value.password({ class: props.ui?.password })
+                            }, { ref_for: true }, omitFieldProps(field), {
+                              type: passwordVisibility.value ? "text" : "password"
+                            }), {
+                              trailing: withCtx(() => [
+                                createVNode(_sfc_main$8, {
+                                  color: "neutral",
+                                  variant: "link",
+                                  size: "sm",
+                                  icon: passwordVisibility.value ? unref(appConfig).ui.icons.eyeOff : unref(appConfig).ui.icons.eye,
+                                  "aria-label": passwordVisibility.value ? unref(t)("authForm.hidePassword") : unref(t)("authForm.showPassword"),
+                                  "aria-pressed": passwordVisibility.value,
+                                  "aria-controls": passwordRef.value?.[0]?.inputRef?.id,
+                                  onClick: ($event) => passwordVisibility.value = !passwordVisibility.value
+                                }, null, 8, ["icon", "aria-label", "aria-pressed", "aria-controls", "onClick"])
+                              ]),
+                              _: 1
+                            }, 16, ["modelValue", "onUpdate:modelValue", "class", "type"])) : (openBlock(), createBlock(_sfc_main$9, mergeProps({
+                              key: 4,
+                              modelValue: state[field.name],
+                              "onUpdate:modelValue": ($event) => state[field.name] = $event,
+                              "data-slot": "input",
+                              class: ui.value.input({ class: props.ui?.input })
+                            }, { ref_for: true }, omitFieldProps(field)), null, 16, ["modelValue", "onUpdate:modelValue", "class"]))
+                          ])
                         ]),
                         _: 2
                       }, [
@@ -1551,7 +1495,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
               !!slots.footer ? (openBlock(), createBlock("div", {
                 key: 1,
                 "data-slot": "footer",
-                class: ui.value.footer({ class: (_t = props.ui) == null ? void 0 : _t.footer })
+                class: ui.value.footer({ class: props.ui?.footer })
               }, [
                 renderSlot(_ctx.$slots, "footer")
               ], 2)) : createCommentVNode("", true)