@zealsolutions/zeal-ui 1.0.0-alpha.358 → 1.0.0-alpha.359

package/dist/FormField-CrpT1GTF.js

@@ -0,0 +1,68 @@
+import { openBlock as a, createElementBlock as l, createElementVNode as t, normalizeClass as n, createTextVNode as r, toDisplayString as s, createCommentVNode as o, createVNode as d, withCtx as c, renderSlot as f } from "vue";
+import { _ as m } from "./TruncateText-BOyOYUV6.js";
+const u = { class: "flex justify-between text-style-label select-none" }, h = { class: "flex items-baseline gap-x-2 min-w-0 pr-5" }, x = ["for"], y = {
+  key: 0,
+  class: "text-app-950"
+}, p = { class: "flex mt-2.5" }, _ = {
+  __name: "FormField",
+  props: {
+    label: {
+      type: String,
+      default: ""
+    },
+    errorMessage: {
+      type: String,
+      default: ""
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    // SOP-Admin #435: optional grey helper text shown beside the label.
+    hint: {
+      type: String,
+      default: ""
+    },
+    // #435: when true the hint renders in the error colour (limit hit).
+    hintError: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return (i, b) => (a(), l("div", null, [
+      t("div", u, [
+        t("div", h, [
+          t("label", {
+            for: e.label,
+            class: n(["whitespace-nowrap font-medium", e.disabled ? "text-steel-800" : ""])
+          }, [
+            r(s(e.label), 1),
+            e.required ? (a(), l("span", y, " *")) : o("", !0)
+          ], 10, x),
+          e.hint ? (a(), l("span", {
+            key: 0,
+            "data-testid": "field-hint",
+            class: n(["whitespace-nowrap font-medium", e.hintError ? "text-error-950" : "text-steel-800 dark:text-content-muted"])
+          }, s(e.hint), 3)) : o("", !0)
+        ]),
+        d(m, { class: "text-error-950 select-none" }, {
+          default: c(() => [
+            r(s(e.errorMessage), 1)
+          ]),
+          _: 1
+        })
+      ]),
+      t("div", p, [
+        f(i.$slots, "default")
+      ])
+    ]));
+  }
+};
+export {
+  _
+};

package/dist/InputField-D6bS7qJm.js

@@ -0,0 +1,71 @@
+import { mergeModels as a, useModel as m, computed as g, openBlock as i, createElementBlock as h, normalizeClass as s, renderSlot as x, withDirectives as b, createElementVNode as y, vModelDynamic as k, createBlock as v, createCommentVNode as w } from "vue";
+import B from "./CircleExclamationIcon-vvAjN3c9.js";
+const E = ["name", "type", "placeholder", "disabled", "maxlength"], I = {
+  __name: "InputField",
+  props: /* @__PURE__ */ a({
+    hasError: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    fieldType: {
+      type: String,
+      default: "text"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    // SOP-Admin #435: native character cap. `maxlength` blocks typing past the limit; combined with
+    // the `overflow` event below it lets a wrapper warn the user when they try to exceed it.
+    maxlength: {
+      type: Number,
+      default: null
+    }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ a(["blur", "overflow"], ["update:modelValue"]),
+  setup(e, { emit: d }) {
+    const t = e, o = d, l = m(e, "modelValue"), u = () => {
+      o("blur");
+    }, c = (r) => {
+      if (t.maxlength == null)
+        return;
+      String(r.inputType || "").startsWith("insert") && String(l.value ?? "").length >= t.maxlength && o("overflow");
+    }, p = g(() => t.hasError && !t.disabled ? "ring-error-950 focus-within:bg-error-100 focus-within:ring-error-950 text-error-950" : t.disabled ? "ring-steel-500 dark:ring-line-strong bg-steel-100 dark:bg-surface cursor-not-allowed" : "ring-steel-500 dark:ring-line-strong focus-within:bg-app-100 focus-within:ring-app-950 dark:focus-within:text-black-950 text-black-950 dark:text-content");
+    return (r, n) => (i(), h("div", {
+      class: s(["relative flex flex-1 gap-x-2 px-4 text-style-input items-center h-10 rounded-[20px] ring-1 ring-inset focus-within:ring-2 focus-within:outline-none", p.value])
+    }, [
+      x(r.$slots, "icon"),
+      b(y("input", {
+        "onUpdate:modelValue": n[0] || (n[0] = (f) => l.value = f),
+        name: e.label,
+        onBlur: u,
+        onBeforeinput: c,
+        type: e.fieldType,
+        class: s(["flex-1 border-0 bg-[transparent] pl-0 ring-0 focus:ring-0 outline-none focus:outline-none disabled:placeholder:text-steel-800 dark:disabled:placeholder:text-content-muted disabled:pointer-events-none", e.hasError ? " focus:placeholder:text-error-950 pr-6" : "placeholder:text-steel-950 dark:placeholder:text-content-muted pr-0"]),
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        maxlength: e.maxlength
+      }, null, 42, E), [
+        [k, l.value]
+      ]),
+      e.hasError ? (i(), v(B, {
+        key: 0,
+        class: "absolute top-1/2 -translate-y-1/2 right-3 scale-[0.8182] pointer-events-none text-error-950"
+      })) : w("", !0)
+    ], 2));
+  }
+};
+export {
+  I as _
+};

package/dist/components/forms/index.js

@@ -1,19 +1,19 @@
-import { openBlock as n, createElementBlock as b, createElementVNode as p, renderSlot as o, mergeModels as d, useModel as y, computed as s, createBlock as h, withCtx as g, createVNode as x } from "vue";
-import { _ as B } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import { _ as V } from "../../FormField-XR9nvyQr.js";
-import { _ as v } from "../../InputField-BrSFZ5Eu.js";
-const _ = {}, F = { class: "flex flex-col space-y-12" }, $ = { class: "flex flex-col space-y-6" };
-function q(e, l) {
-  return n(), b("div", F, [
-    p("form", $, [
-      o(e.$slots, "default")
+import { openBlock as f, createElementBlock as g, createElementVNode as p, renderSlot as u, mergeModels as i, useModel as x, computed as m, ref as y, watch as v, createBlock as B, withCtx as V, createVNode as S } from "vue";
+import { _ as $ } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { _ as F } from "../../FormField-CrpT1GTF.js";
+import { _ as q } from "../../InputField-D6bS7qJm.js";
+const M = {}, k = { class: "flex flex-col space-y-12" }, w = { class: "flex flex-col space-y-6" };
+function E(e, o) {
+  return f(), g("div", k, [
+    p("form", w, [
+      u(e.$slots, "default")
     ]),
-    o(e.$slots, "footer")
+    u(e.$slots, "footer")
   ]);
 }
-const I = /* @__PURE__ */ B(_, [["render", q]]), N = {
+const T = /* @__PURE__ */ $(M, [["render", E]]), A = {
   __name: "FormInput",
-  props: /* @__PURE__ */ d({
+  props: /* @__PURE__ */ i({
     required: {
       type: Boolean,
       default: !1
@@ -37,40 +37,58 @@ const I = /* @__PURE__ */ B(_, [["render", q]]), N = {
     disabled: {
       type: Boolean,
       default: !1
+    },
+    // SOP-Admin #435: native character cap passed to the input.
+    maxlength: {
+      type: Number,
+      default: null
+    },
+    // #435: grey helper text beside the label that turns red when the user tries to exceed maxlength.
+    hint: {
+      type: String,
+      default: ""
     }
   }, {
     modelValue: {},
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ d(["blur"], ["update:modelValue"]),
-  setup(e, { emit: l }) {
-    const u = e, i = l, r = y(e, "modelValue"), c = s(() => a.value.length > 0), m = () => {
-      i("blur");
-    }, a = s(() => Array.from(u.errors).join(", "));
-    return (M, t) => (n(), h(V, {
+  emits: /* @__PURE__ */ i(["blur"], ["update:modelValue"]),
+  setup(e, { emit: o }) {
+    const t = e, c = o, r = x(e, "modelValue"), h = m(() => d.value.length > 0), a = y(!1);
+    v(r, (n) => {
+      (t.maxlength == null || String(n ?? "").length < t.maxlength) && (a.value = !1);
+    });
+    const b = () => {
+      c("blur");
+    }, d = m(() => Array.from(t.errors).join(", "));
+    return (n, l) => (f(), B(F, {
       label: e.label,
-      "error-message": a.value,
+      "error-message": d.value,
       required: e.required,
-      disabled: e.disabled
+      disabled: e.disabled,
+      hint: e.hint,
+      "hint-error": a.value
     }, {
-      default: g(() => [
-        x(v, {
+      default: V(() => [
+        S(q, {
           modelValue: r.value,
-          "onUpdate:modelValue": t[0] || (t[0] = (f) => r.value = f),
-          "has-error": c.value,
+          "onUpdate:modelValue": l[0] || (l[0] = (s) => r.value = s),
+          "has-error": h.value,
           placeholder: e.placeholder,
           "field-type": e.fieldType,
           label: e.label,
           disabled: e.disabled,
-          onBlur: m
-        }, null, 8, ["modelValue", "has-error", "placeholder", "field-type", "label", "disabled"])
+          maxlength: e.maxlength,
+          onBlur: b,
+          onOverflow: l[1] || (l[1] = (s) => a.value = !0)
+        }, null, 8, ["modelValue", "has-error", "placeholder", "field-type", "label", "disabled", "maxlength"])
       ]),
       _: 1
-    }, 8, ["label", "error-message", "required", "disabled"]));
+    }, 8, ["label", "error-message", "required", "disabled", "hint", "hint-error"]));
   }
 };
 export {
-  I as BaseForm,
-  V as FormField,
-  N as FormInput
+  T as BaseForm,
+  F as FormField,
+  A as FormInput
 };

package/dist/components/header/index.js

@@ -1,4 +1,4 @@
-import { openBlock as a, createElementBlock as u, createVNode as T, createElementVNode as r, createTextVNode as j, mergeModels as te, useModel as ke, getCurrentInstance as ie, ref as k, computed as $, watch as K, nextTick as ne, onMounted as ge, onBeforeUnmount as we, createBlock as E, Teleport as Ce, withModifiers as N, withDirectives as G, vModelText as $e, createCommentVNode as v, normalizeClass as M, toDisplayString as b, Fragment as H, renderList as P, normalizeStyle as q, pushScopeId as Se, popScopeId as _e, Transition as ce, withCtx as ue, resolveDynamicComponent as de, unref as F, vShow as pe, renderSlot as V } from "vue";
+import { openBlock as a, createElementBlock as i, createVNode as T, createElementVNode as r, createTextVNode as j, mergeModels as te, useModel as ke, getCurrentInstance as ie, ref as k, computed as $, watch as K, nextTick as ne, onMounted as ge, onBeforeUnmount as we, createBlock as E, Teleport as Ce, withModifiers as N, withDirectives as G, vModelText as $e, createCommentVNode as m, normalizeClass as M, toDisplayString as b, Fragment as H, renderList as P, normalizeStyle as q, pushScopeId as Se, popScopeId as _e, Transition as ce, withCtx as ue, resolveDynamicComponent as de, unref as F, vShow as pe, renderSlot as V } from "vue";
 import Me from "../../HouseIcon-BxmNyxvv.js";
 import Te from "../../ArrowLeftIcon-Cgsy08pY.js";
 import fe from "../../MagnifyingGlassIcon-ChYNIA-H.js";
@@ -14,12 +14,12 @@ const Ne = /* @__PURE__ */ r("span", { class: "hidden whitespace-nowrap sm:inlin
   __name: "GlobalSearchPill",
   emits: ["click"],
   setup(e) {
-    return (i, o) => (a(), u("button", {
+    return (c, o) => (a(), i("button", {
       type: "button",
       class: "zui-search-pill inline-flex h-[34px] cursor-pointer items-center justify-center gap-[7px] rounded-lg border-[1px] border-solid border-proclusteal-300 dark:border-line bg-surface-raised pl-[11px] pr-[9px] font-sans text-[13px] font-semibold text-proclusteal-600 dark:text-content-muted transition-[border-color,color,box-shadow] duration-150 hover:border-proclusteal-950 dark:hover:border-focus hover:text-proclusteal-800 dark:hover:text-content hover:shadow-[0_1px_3px_rgba(20,40,45,0.08)] focus:border-proclusteal-950 dark:focus:border-focus focus:text-proclusteal-800 dark:focus:text-content focus:outline-none",
       title: "Search (Ctrl K)",
       "aria-label": "Search (Ctrl K)",
-      onClick: o[0] || (o[0] = (y) => i.$emit("click"))
+      onClick: o[0] || (o[0] = (y) => c.$emit("click"))
     }, [
       T(fe, { class: "!h-[15px] !w-[15px] flex-none text-proclusteal-950 dark:text-focus" }),
       Ne,
@@ -43,47 +43,47 @@ const Ne = /* @__PURE__ */ r("span", { class: "hidden whitespace-nowrap sm:inlin
   colour: "#9aa4ad",
   icon: '<circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>'
 };
-function ze(e, i = {}) {
-  const o = { ...D, ...i };
+function ze(e, c = {}) {
+  const o = { ...D, ...c };
   return Object.prototype.hasOwnProperty.call(o, e) ? o[e] : { ...Le, label: e };
 }
 function De(e) {
-  return (e == null ? "" : String(e)).replace(/[&<>"']/g, (i) => ({
+  return (e == null ? "" : String(e)).replace(/[&<>"']/g, (c) => ({
     "&": "&amp;",
     "<": "&lt;",
     ">": "&gt;",
     '"': "&quot;",
     "'": "&#39;"
-  })[i]);
+  })[c]);
 }
 function he(e) {
   if (!e)
     return "";
-  const i = String(e).trim();
-  return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(i) || /^(rgb|rgba|hsl|hsla)\([0-9.,%\s/]+\)$/i.test(i) || /^[a-z]{3,20}$/i.test(i) ? i : "";
+  const c = String(e).trim();
+  return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(c) || /^(rgb|rgba|hsl|hsla)\([0-9.,%\s/]+\)$/i.test(c) || /^[a-z]{3,20}$/i.test(c) ? c : "";
 }
 function O(e) {
   if (!e)
     return "";
-  const i = String(e).trim();
-  if (i.includes("\\"))
+  const c = String(e).trim();
+  if (c.includes("\\"))
     return "";
   let o;
   try {
-    o = new URL(i, "https://url-check.invalid/");
+    o = new URL(c, "https://url-check.invalid/");
   } catch {
     return "";
   }
-  return o.protocol === "http:" || o.protocol === "https:" ? i : "";
+  return o.protocol === "http:" || o.protocol === "https:" ? c : "";
 }
 function je(e) {
-  return String(e || "").toLowerCase().split(/\s+/).filter((i) => i.length >= 2);
+  return String(e || "").toLowerCase().split(/\s+/).filter((c) => c.length >= 2);
 }
-function ae(e, i) {
+function ae(e, c) {
   const o = De(e);
-  if (!i || !i.length)
+  if (!c || !c.length)
     return o;
-  const y = new RegExp(`(${i.map((p) => p.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`, "ig");
+  const y = new RegExp(`(${c.map((p) => p.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`, "ig");
   return o.replace(y, "<mark>$1</mark>");
 }
 const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-search-field flex items-center gap-2.5 border-b-[1px] border-proclusteal-200 dark:border-line px-4 py-3.5" }, Be = ["placeholder"], Re = {
@@ -130,12 +130,12 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
     openModifiers: {}
   }),
   emits: /* @__PURE__ */ te(["navigate"], ["update:open"]),
-  setup(e, { emit: i }) {
-    const o = e, y = i, p = ke(e, "open"), x = ie(), w = k(null), _ = k(null), A = k(null), g = k(""), S = k(""), m = k([]), f = k("all"), n = k("zero"), c = k(-1);
+  setup(e, { emit: c }) {
+    const o = e, y = c, p = ke(e, "open"), x = ie(), w = k(null), _ = k(null), A = k(null), g = k(""), S = k(""), v = k([]), f = k("all"), n = k("zero"), u = k(-1);
     let d = null, C = 0, L = null, I = null;
     const Q = $(() => je(S.value)), Y = (t) => ze(t, o.types), X = $(() => {
       let t = 0;
-      return m.value.filter((s) => f.value === "all" || s.type === f.value).map((s) => {
+      return v.value.filter((s) => f.value === "all" || s.type === f.value).map((s) => {
         const l = Y(s.type);
         return {
           type: s.type,
@@ -150,16 +150,16 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
           }))
         };
       });
-    }), J = $(() => X.value.flatMap((t) => t.items)), ye = $(() => m.value.reduce((t, s) => t + s.items.length, 0));
+    }), J = $(() => X.value.flatMap((t) => t.items)), ye = $(() => v.value.reduce((t, s) => t + s.items.length, 0));
     function U(t) {
       const s = J.value;
       if (!s.length) {
-        c.value = -1;
+        u.value = -1;
         return;
       }
-      c.value = Math.min(Math.max(t, 0), s.length - 1), ne(() => {
+      u.value = Math.min(Math.max(t, 0), s.length - 1), ne(() => {
         var h;
-        const l = (h = A.value) == null ? void 0 : h.querySelector(`[data-row-idx="${c.value}"]`);
+        const l = (h = A.value) == null ? void 0 : h.querySelector(`[data-row-idx="${u.value}"]`);
         l == null || l.scrollIntoView({ block: "nearest" });
       });
     }
@@ -181,23 +181,23 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
         const l = await o.searchProvider(t);
         if (s !== C || !p.value)
           return;
-        m.value = l && l.groups || [], f.value = "all", n.value = m.value.length ? "results" : "empty", U(0);
+        v.value = l && l.groups || [], f.value = "all", n.value = v.value.length ? "results" : "empty", U(0);
       } catch {
         if (s !== C || !p.value)
           return;
-        m.value = [], n.value = "error", c.value = -1;
+        v.value = [], n.value = "error", u.value = -1;
       }
     }
     K(g, (t) => {
       clearTimeout(d);
       const s = t.trim();
       if (s.length < o.minChars) {
-        C++, m.value = [], n.value = s.length ? "hint" : "zero", c.value = -1;
+        C++, v.value = [], n.value = s.length ? "hint" : "zero", u.value = -1;
         return;
       }
       d = setTimeout(() => me(s), o.debounce);
     }), K(p, (t) => {
-      t ? (L = document.activeElement, g.value = "", S.value = "", m.value = [], f.value = "all", n.value = "zero", c.value = -1, I = document.body.style.overflow, document.body.style.overflow = "hidden", ne(() => {
+      t ? (L = document.activeElement, g.value = "", S.value = "", v.value = [], f.value = "all", n.value = "zero", u.value = -1, I = document.body.style.overflow, document.body.style.overflow = "hidden", ne(() => {
         var s;
         return (s = w.value) == null ? void 0 : s.focus();
       })) : (clearTimeout(d), C++, I !== null && (document.body.style.overflow = I, I = null), L != null && L.focus && L.focus());
@@ -209,11 +209,11 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
         return;
       }
       if (t.key === "ArrowDown") {
-        t.preventDefault(), U(c.value + 1);
+        t.preventDefault(), U(u.value + 1);
         return;
       }
       if (t.key === "ArrowUp") {
-        t.preventDefault(), U(c.value - 1);
+        t.preventDefault(), U(u.value - 1);
         return;
       }
       if (t.key === "Enter") {
@@ -222,7 +222,7 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
         const l = J.value;
         if (!l.length)
           return;
-        t.preventDefault(), Z(l[c.value >= 0 ? c.value : 0].url);
+        t.preventDefault(), Z(l[u.value >= 0 ? u.value : 0].url);
         return;
       }
       if (t.key === "Tab") {
@@ -255,7 +255,7 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
     }), we(() => {
       document.removeEventListener("keydown", ee), clearTimeout(d), C++, I !== null && (document.body.style.overflow = I, I = null);
     }), (t, s) => (a(), E(Ce, { to: "body" }, [
-      p.value ? (a(), u("div", {
+      p.value ? (a(), i("div", {
         key: 0,
         class: "zui-search-overlay fixed inset-0 z-[20000] flex items-start justify-center bg-[#11181c]/45",
         onMousedown: N(z, ["self"]),
@@ -290,8 +290,8 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
               onClick: z
             }, "×")
           ]),
-          n.value === "results" ? (a(), u("div", Re, " Search results ")) : v("", !0),
-          n.value === "results" ? (a(), u("div", Ve, [
+          n.value === "results" ? (a(), i("div", Re, " Search results ")) : m("", !0),
+          n.value === "results" ? (a(), i("div", Ve, [
             r("button", {
               type: "button",
               class: M([re, f.value === "all" ? le : ""]),
@@ -302,7 +302,7 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
                 class: M(["font-bold", f.value === "all" ? "opacity-85" : "opacity-60"])
               }, "(" + b(ye.value) + ")", 3)
             ], 2),
-            (a(!0), u(H, null, P(m.value, (l) => (a(), u("button", {
+            (a(!0), i(H, null, P(v.value, (l) => (a(), i("button", {
               key: l.type,
               type: "button",
               class: M([re, f.value === l.type ? le : ""]),
@@ -313,44 +313,44 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
                 class: M(["font-bold", f.value === l.type ? "opacity-85" : "opacity-60"])
               }, "(" + b(l.items.length) + ")", 3)
             ], 10, Ke))), 128))
-          ])) : v("", !0),
+          ])) : m("", !0),
           r("div", {
             ref_key: "resultsEl",
             ref: A,
             class: "zui-search-results overflow-y-auto pb-2.5"
           }, [
-            n.value === "zero" ? (a(), u("div", {
+            n.value === "zero" ? (a(), i("div", {
               key: 0,
               class: M(R)
-            }, " Search across SOPs, incidents, assets, people and more — you only ever see what you have access to. ")) : n.value === "hint" ? (a(), u("div", {
+            }, " Search across SOPs, incidents, assets, people and more — you only ever see what you have access to. ")) : n.value === "hint" ? (a(), i("div", {
               key: 1,
               class: M(R)
-            }, " Keep typing… enter at least " + b(e.minChars) + " characters to search. ", 1)) : n.value === "empty" ? (a(), u("div", {
+            }, " Keep typing… enter at least " + b(e.minChars) + " characters to search. ", 1)) : n.value === "empty" ? (a(), i("div", {
               key: 2,
               class: M(R)
-            }, " No results for “" + b(S.value) + "” — try a broader term or a code. ", 1)) : n.value === "error" ? (a(), u("div", {
+            }, " No results for “" + b(S.value) + "” — try a broader term or a code. ", 1)) : n.value === "error" ? (a(), i("div", {
               key: 3,
               class: M(R)
-            }, " Search is temporarily unavailable. ")) : (a(!0), u(H, { key: 4 }, P(X.value, (l) => (a(), u("div", {
+            }, " Search is temporarily unavailable. ")) : (a(!0), i(H, { key: 4 }, P(X.value, (l) => (a(), i("div", {
               key: l.type
             }, [
               r("div", qe, [
                 j(b(l.label) + " ", 1),
                 r("span", Ge, "(" + b(l.items.length) + ")", 1)
               ]),
-              (a(!0), u(H, null, P(l.items, (h) => (a(), u("a", {
+              (a(!0), i(H, null, P(l.items, (h) => (a(), i("a", {
                 key: h.flatIdx,
                 href: h.url || null,
-                class: M(["zui-search-row flex items-center gap-[13px] px-[18px] py-[11px] text-[#1e262c] dark:text-content no-underline", { "bg-proclusteal-50 dark:bg-surface-hover": h.flatIdx === c.value }]),
+                class: M(["zui-search-row flex items-center gap-[13px] px-[18px] py-[11px] text-[#1e262c] dark:text-content no-underline", { "bg-proclusteal-50 dark:bg-surface-hover": h.flatIdx === u.value }]),
                 "data-row-idx": h.flatIdx,
                 onClick: N((B) => Z(h.url), ["exact", "prevent"]),
-                onMouseenter: (B) => c.value = h.flatIdx
+                onMouseenter: (B) => u.value = h.flatIdx
               }, [
                 r("span", {
                   class: "inline-flex h-[42px] w-[42px] flex-none items-center justify-center rounded-[10px] text-white",
                   style: q({ background: h.tileColour })
                 }, [
-                  (a(), u("svg", {
+                  (a(), i("svg", {
                     class: "h-5 w-5",
                     viewBox: "0 0 24 24",
                     fill: "none",
@@ -376,7 +376,7 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
             ]))), 128))
           ], 512)
         ], 512)
-      ], 32)) : v("", !0)
+      ], 32)) : m("", !0)
     ]));
   }
 }, et = /* @__PURE__ */ Ae(Ze, [["__scopeId", "data-v-80fd510b"]]), se = {
@@ -400,14 +400,14 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
 function tt(e) {
   if (!e)
     return "";
-  const i = String(e).trim();
-  if (!i)
+  const c = String(e).trim();
+  if (!c)
     return "";
   let o = null;
-  if (Object.prototype.hasOwnProperty.call(D, i))
-    o = i;
+  if (Object.prototype.hasOwnProperty.call(D, c))
+    o = c;
   else {
-    const y = i.toLowerCase(), p = Object.keys(D).find((x) => x.toLowerCase() === y);
+    const y = c.toLowerCase(), p = Object.keys(D).find((x) => x.toLowerCase() === y);
     p ? o = p : Object.prototype.hasOwnProperty.call(se, y) && (o = se[y]);
   }
   return !o || !Object.prototype.hasOwnProperty.call(D, o) ? "" : D[o].icon || "";
@@ -417,8 +417,8 @@ function nt(e) {
     return "";
   if (e.dateText)
     return String(e.dateText);
-  const i = e.notifyday != null ? String(e.notifyday).replace(/^0/, "") : "", o = e.notifymonthname ? String(e.notifymonthname) : "", y = e.notifyyear != null ? String(e.notifyyear) : "";
-  return [i, o, y].filter(Boolean).join(" ");
+  const c = e.notifyday != null ? String(e.notifyday).replace(/^0/, "") : "", o = e.notifymonthname ? String(e.notifymonthname) : "", y = e.notifyyear != null ? String(e.notifyyear) : "";
+  return [c, o, y].filter(Boolean).join(" ");
 }
 const ot = {
   key: 0,
@@ -460,8 +460,8 @@ const ot = {
     }
   },
   emits: ["markAsRead", "deleteNotification", "navigate", "open"],
-  setup(e, { emit: i }) {
-    const o = e, y = i, p = k(null), x = k(!1), w = $(() => {
+  setup(e, { emit: c }) {
+    const o = e, y = c, p = k(null), x = k(!1), w = $(() => {
       var n;
       return ((n = o.notifications) == null ? void 0 : n.data) || [];
     }), _ = $(() => o.unreadCount !== null && o.unreadCount !== void 0 ? o.unreadCount > 0 : w.value.some((n) => n.ClassRead === "unread"));
@@ -475,13 +475,13 @@ const ot = {
       return n && Object.prototype.hasOwnProperty.call(o.iconMap, n) && o.iconMap[n] || null;
     }
     function S(n) {
-      const c = g(n.VueAppTypeIcon) || g(n.AppTypeName);
-      if (c)
-        return { component: c, path: "" };
+      const u = g(n.VueAppTypeIcon) || g(n.AppTypeName);
+      if (u)
+        return { component: u, path: "" };
       const d = tt(n.AppTypeName);
       return d ? { component: null, path: d } : { component: oe, path: "" };
     }
-    const m = $(() => w.value.map((n) => ({
+    const v = $(() => w.value.map((n) => ({
       item: n,
       icon: S(n),
       date: nt(n),
@@ -489,10 +489,10 @@ const ot = {
     })));
     function f(n) {
       x.value = !1;
-      const c = O(n);
-      c && y("navigate", c);
+      const u = O(n);
+      u && y("navigate", u);
     }
-    return (n, c) => (a(), u("div", {
+    return (n, u) => (a(), i("div", {
       ref_key: "rootEl",
       ref: p,
       class: "relative font-sans"
@@ -505,7 +505,7 @@ const ot = {
         onClick: A
       }, [
         T(oe, { class: "!h-[21px] !w-[21px]" }),
-        _.value ? (a(), u("span", ot)) : v("", !0)
+        _.value ? (a(), i("span", ot)) : m("", !0)
       ]),
       T(ce, {
         "enter-active-class": "transition-all ease-out duration-75",
@@ -518,8 +518,8 @@ const ot = {
         default: ue(() => [
           G(r("div", at, [
             r("div", rt, [
-              e.notifications ? w.value.length ? v("", !0) : (a(), u("div", st, " No notifications. ")) : (a(), u("div", lt, " Loading notifications… ")),
-              (a(!0), u(H, null, P(m.value, (d) => (a(), u("div", {
+              e.notifications ? w.value.length ? m("", !0) : (a(), i("div", st, " No notifications. ")) : (a(), i("div", lt, " Loading notifications… ")),
+              (a(!0), i(H, null, P(v.value, (d) => (a(), i("div", {
                 key: d.item.NotifyID,
                 class: M(["flex cursor-pointer items-start gap-3 border-b-[1px] border-proclusteal-200 dark:border-line px-4 py-3", d.unread ? "bg-proclusteal-50 dark:bg-surface-hover" : "bg-surface-raised"]),
                 onClick: (C) => f(d.item.url)
@@ -528,7 +528,7 @@ const ot = {
                   d.icon.component ? (a(), E(de(d.icon.component), {
                     key: 0,
                     class: "!h-5 !w-5"
-                  })) : (a(), u("svg", {
+                  })) : (a(), i("svg", {
                     key: 1,
                     class: "h-5 w-5",
                     viewBox: "0 0 24 24",
@@ -543,10 +543,10 @@ const ot = {
                 r("span", dt, [
                   r("span", pt, b(d.item.notifyname), 1),
                   r("span", ft, b(d.item.summary), 1),
-                  d.date ? (a(), u("span", xt, b(d.date), 1)) : v("", !0)
+                  d.date ? (a(), i("span", xt, b(d.date), 1)) : m("", !0)
                 ]),
                 r("span", ht, [
-                  d.unread ? (a(), u("button", {
+                  d.unread ? (a(), i("button", {
                     key: 0,
                     type: "button",
                     class: "hover:text-proclusteal-900 dark:hover:text-focus",
@@ -555,7 +555,7 @@ const ot = {
                     onClick: N((C) => n.$emit("markAsRead", d.item.NotifyID), ["stop"])
                   }, [
                     T(Ie, { class: "!h-4 !w-4" })
-                  ], 8, yt)) : v("", !0),
+                  ], 8, yt)) : m("", !0),
                   r("button", {
                     type: "button",
                     class: "hover:text-[#dd3730]",
@@ -571,7 +571,7 @@ const ot = {
             r("a", {
               href: F(O)(e.notificationsUrl) || null,
               class: "block border-t-[1px] border-proclusteal-200 dark:border-line px-4 py-2.5 text-center text-[13px] font-bold text-proclusteal-700 dark:text-content no-underline hover:bg-proclusteal-50 dark:hover:bg-surface-hover hover:text-proclusteal-900 dark:hover:text-focus",
-              onClick: c[0] || (c[0] = N((d) => f(e.notificationsUrl), ["exact", "prevent"]))
+              onClick: u[0] || (u[0] = N((d) => f(e.notificationsUrl), ["exact", "prevent"]))
             }, " See all notifications ", 8, vt)
           ], 512), [
             [pe, x.value]
@@ -600,8 +600,8 @@ const ot = {
     }
   },
   emits: ["select"],
-  setup(e, { emit: i }) {
-    const o = e, y = i, p = k(null), x = k(!1), w = k(!1);
+  setup(e, { emit: c }) {
+    const o = e, y = c, p = k(null), x = k(!1), w = k(!1);
     K(() => o.user.avatarUrl, () => {
       w.value = !1;
     });
@@ -612,7 +612,7 @@ const ot = {
     function g(S) {
       x.value = !1, y("select", S);
     }
-    return (S, m) => (a(), u("div", {
+    return (S, v) => (a(), i("div", {
       ref_key: "rootEl",
       ref: p,
       class: "relative font-sans"
@@ -622,15 +622,15 @@ const ot = {
         class: "flex cursor-pointer items-center justify-center",
         title: "View Menu Options",
         "aria-label": "View Menu Options",
-        onClick: m[1] || (m[1] = (f) => x.value = !x.value)
+        onClick: v[1] || (v[1] = (f) => x.value = !x.value)
       }, [
-        e.user.avatarUrl && !w.value ? (a(), u("img", {
+        e.user.avatarUrl && !w.value ? (a(), i("img", {
           key: 0,
           src: e.user.avatarUrl,
           alt: "",
           class: "h-[34px] w-[34px] rounded-full object-cover",
-          onError: m[0] || (m[0] = (f) => w.value = !0)
-        }, null, 40, kt)) : (a(), u("span", gt, b(A.value), 1))
+          onError: v[0] || (v[0] = (f) => w.value = !0)
+        }, null, 40, kt)) : (a(), i("span", gt, b(A.value), 1))
       ]),
       T(ce, {
         "enter-active-class": "transition-all ease-out duration-75",
@@ -648,17 +648,17 @@ const ot = {
               r("span", _t, b(e.user.orgName), 1)
             ]),
             Mt,
-            (a(!0), u(H, null, P(e.menuItems, (f, n) => (a(), u(H, { key: n }, [
-              f.divider ? (a(), u("div", Tt)) : (a(), u("a", {
+            (a(!0), i(H, null, P(e.menuItems, (f, n) => (a(), i(H, { key: n }, [
+              f.divider ? (a(), i("div", Tt)) : (a(), i("a", {
                 key: 1,
                 href: f.href && F(O)(f.href) || null,
                 class: "flex items-center gap-2.5 px-[18px] py-2 text-[13px] font-semibold text-proclusteal-700 dark:text-content no-underline hover:bg-proclusteal-50 dark:hover:bg-surface-hover hover:text-proclusteal-900 dark:hover:text-focus",
-                onClick: N((c) => g(f), ["exact", "prevent"])
+                onClick: N((u) => g(f), ["exact", "prevent"])
               }, [
                 f.icon ? (a(), E(de(f.icon), {
                   key: 0,
                   class: "!h-4 !w-4 flex-none"
-                })) : v("", !0),
+                })) : m("", !0),
                 r("span", null, b(f.label), 1)
               ], 8, At))
             ], 64))), 128))
@@ -743,6 +743,13 @@ const ot = {
     searchTypes: {
       type: Object,
       default: () => ({})
+    },
+    // #479: gate for the three top-right icons (search pill, bell, profile). Default true so
+    // existing consumers are unaffected; an app that loads its header data asynchronously passes
+    // false until user + notifications + search have all settled, then true to reveal all at once.
+    ready: {
+      type: Boolean,
+      default: !0
     }
   },
   emits: [
@@ -753,42 +760,42 @@ const ot = {
     "deleteNotification",
     "notifications-open"
   ],
-  setup(e, { emit: i }) {
-    const o = e, y = i, p = ie(), x = k(!1), w = $(() => !!o.notifications || o.unreadCount !== null && o.unreadCount !== void 0), _ = $(() => he(o.accentColour)), A = $(() => _.value || "#1c6f63");
+  setup(e, { emit: c }) {
+    const o = e, y = c, p = ie(), x = k(!1), w = $(() => !!o.notifications || o.unreadCount !== null && o.unreadCount !== void 0), _ = $(() => he(o.accentColour)), A = $(() => _.value || "#1c6f63");
     function g(n) {
       var d, C;
       if (!n)
         return;
-      const c = O(n);
-      c && (y("navigate", c), (C = (d = p == null ? void 0 : p.vnode) == null ? void 0 : d.props) != null && C.onNavigate || (window.location.href = c));
+      const u = O(n);
+      u && (y("navigate", u), (C = (d = p == null ? void 0 : p.vnode) == null ? void 0 : d.props) != null && C.onNavigate || (window.location.href = u));
     }
     function S() {
       y("home"), g(o.homeUrl);
     }
-    function m() {
+    function v() {
       window.history.back();
     }
     function f(n) {
       y("menu-select", n), n.href && g(n.href);
     }
-    return (n, c) => (a(), u("header", Et, [
+    return (n, u) => (a(), i("header", Et, [
       r("div", Nt, [
         V(n.$slots, "logo"),
-        e.title ? (a(), u("span", Ht, [
+        e.title ? (a(), i("span", Ht, [
           j(b(e.title), 1),
-          e.subtitle ? (a(), u("span", Ot, " " + b(e.subtitle), 1)) : v("", !0)
-        ])) : v("", !0),
-        _.value ? (a(), u("span", {
+          e.subtitle ? (a(), i("span", Ot, " " + b(e.subtitle), 1)) : m("", !0)
+        ])) : m("", !0),
+        _.value ? (a(), i("span", {
           key: 1,
           class: "h-[45px] w-[2px] shrink-0",
           style: q({ background: _.value }),
           "aria-hidden": "true"
-        }, null, 4)) : v("", !0),
+        }, null, 4)) : m("", !0),
         r("nav", {
           class: "flex items-center gap-7 text-proclusteal-600 dark:text-content-muted",
           style: q({ "--hdr-accent": A.value })
         }, [
-          e.homeUrl ? (a(), u("a", {
+          e.homeUrl ? (a(), i("a", {
             key: 0,
             href: F(O)(e.homeUrl) || null,
             class: "hover:text-[var(--hdr-accent)]",
@@ -797,53 +804,55 @@ const ot = {
             onClick: N(S, ["exact", "prevent"])
           }, [
             T(Me, { class: "!h-[22px] !w-[22px]" })
-          ], 8, Lt)) : v("", !0),
-          e.showBack ? (a(), u("button", {
+          ], 8, Lt)) : m("", !0),
+          e.showBack ? (a(), i("button", {
             key: 1,
             type: "button",
             class: "cursor-pointer hover:text-[var(--hdr-accent)]",
             title: "Go Back",
             "aria-label": "Go Back",
-            onClick: m
+            onClick: v
           }, [
             T(Te, { class: "!h-[22px] !w-[22px]" })
-          ])) : v("", !0)
+          ])) : m("", !0)
         ], 4),
         V(n.$slots, "left")
       ]),
       r("div", zt, [
         V(n.$slots, "right"),
-        e.searchProvider ? (a(), E(Oe, {
-          key: 0,
-          onClick: c[0] || (c[0] = (d) => x.value = !0)
-        })) : v("", !0),
-        w.value ? (a(), E(bt, {
-          key: 1,
-          notifications: e.notifications,
-          "unread-count": e.unreadCount,
-          "notifications-url": e.notificationsUrl,
-          "icon-map": e.notificationIconMap,
-          onMarkAsRead: c[1] || (c[1] = (d) => n.$emit("markAsRead", d)),
-          onDeleteNotification: c[2] || (c[2] = (d) => n.$emit("deleteNotification", d)),
-          onOpen: c[3] || (c[3] = (d) => n.$emit("notifications-open")),
-          onNavigate: g
-        }, null, 8, ["notifications", "unread-count", "notifications-url", "icon-map"])) : v("", !0),
-        e.user ? (a(), E(It, {
-          key: 2,
-          user: e.user,
-          "menu-items": e.menuItems,
-          onSelect: f
-        }, null, 8, ["user", "menu-items"])) : v("", !0)
+        e.ready ? (a(), i(H, { key: 0 }, [
+          e.searchProvider ? (a(), E(Oe, {
+            key: 0,
+            onClick: u[0] || (u[0] = (d) => x.value = !0)
+          })) : m("", !0),
+          w.value ? (a(), E(bt, {
+            key: 1,
+            notifications: e.notifications,
+            "unread-count": e.unreadCount,
+            "notifications-url": e.notificationsUrl,
+            "icon-map": e.notificationIconMap,
+            onMarkAsRead: u[1] || (u[1] = (d) => n.$emit("markAsRead", d)),
+            onDeleteNotification: u[2] || (u[2] = (d) => n.$emit("deleteNotification", d)),
+            onOpen: u[3] || (u[3] = (d) => n.$emit("notifications-open")),
+            onNavigate: g
+          }, null, 8, ["notifications", "unread-count", "notifications-url", "icon-map"])) : m("", !0),
+          e.user ? (a(), E(It, {
+            key: 2,
+            user: e.user,
+            "menu-items": e.menuItems,
+            onSelect: f
+          }, null, 8, ["user", "menu-items"])) : m("", !0)
+        ], 64)) : m("", !0)
       ]),
       e.searchProvider ? (a(), E(et, {
         key: 0,
         open: x.value,
-        "onUpdate:open": c[4] || (c[4] = (d) => x.value = d),
+        "onUpdate:open": u[4] || (u[4] = (d) => x.value = d),
         "search-provider": e.searchProvider,
         placeholder: e.searchPlaceholder,
         types: e.searchTypes,
         onNavigate: g
-      }, null, 8, ["open", "search-provider", "placeholder", "types"])) : v("", !0)
+      }, null, 8, ["open", "search-provider", "placeholder", "types"])) : m("", !0)
     ]));
   }
 };

package/dist/components/inputs/index.js

@@ -4,7 +4,7 @@ import $ from "../../CalendarIcon-DjSv5Y23.js";
 import k from "../../CircleExclamationIcon-vvAjN3c9.js";
 import E from "../../UploadIcon-DJeF8sKk.js";
 import M from "../../FilesIcon-NLAyR0HT.js";
-import { _ as se } from "../../InputField-BrSFZ5Eu.js";
+import { _ as se } from "../../InputField-D6bS7qJm.js";
 const I = ["onClick"], le = {
   __name: "DateInput",
   props: {

package/dist/components/tiptap/index.js

@@ -6,8 +6,8 @@ import { InputField as Md, ToggleSwitch as Mp } from "@zealsolutions/zeal-ui/inp
 import { GearComplexIcon as Ep, DownloadIcon as Op, ChevronDownIcon as Np } from "@zealsolutions/zeal-ui/icons";
 import { a as Vr, _ as jr } from "../../SecondaryButton-At_I-S4K.js";
 import { _ as Ed } from "../../BaseModal-BriJhnSM.js";
-import { _ as xi } from "../../FormField-XR9nvyQr.js";
-import { _ as us } from "../../InputField-BrSFZ5Eu.js";
+import { _ as xi } from "../../FormField-CrpT1GTF.js";
+import { _ as us } from "../../InputField-D6bS7qJm.js";
 import Dp from "../../MagnifyingGlassIcon-ChYNIA-H.js";
 import ba from "../../ImageIcon-jkYGKPiB.js";
 import va from "../../ListTreeIcon-DMhYL_id.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zealsolutions/zeal-ui",
-  "version": "1.0.0-alpha.358",
+  "version": "1.0.0-alpha.359",
   "description": "UI library for Zeal Solutions",
   "author": "Zeal Solutions",
   "license": "ISC",

package/dist/FormField-XR9nvyQr.js

@@ -1,51 +0,0 @@
-import { openBlock as l, createElementBlock as a, createElementVNode as t, normalizeClass as n, createTextVNode as s, toDisplayString as o, createCommentVNode as d, createVNode as i, withCtx as c, renderSlot as f } from "vue";
-import { _ as m } from "./TruncateText-BOyOYUV6.js";
-const u = { class: "flex justify-between text-style-label select-none" }, p = ["for"], _ = {
-  key: 0,
-  class: "text-app-950"
-}, x = { class: "flex mt-2.5" }, g = {
-  __name: "FormField",
-  props: {
-    label: {
-      type: String,
-      default: ""
-    },
-    errorMessage: {
-      type: String,
-      default: ""
-    },
-    required: {
-      type: Boolean,
-      default: !1
-    },
-    disabled: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(e) {
-    return (r, b) => (l(), a("div", null, [
-      t("div", u, [
-        t("label", {
-          for: e.label,
-          class: n(["whitespace-nowrap font-medium pr-5", e.disabled ? "text-steel-800" : ""])
-        }, [
-          s(o(e.label), 1),
-          e.required ? (l(), a("span", _, " *")) : d("", !0)
-        ], 10, p),
-        i(m, { class: "text-error-950 select-none" }, {
-          default: c(() => [
-            s(o(e.errorMessage), 1)
-          ]),
-          _: 1
-        })
-      ]),
-      t("div", x, [
-        f(r.$slots, "default")
-      ])
-    ]));
-  }
-};
-export {
-  g as _
-};

package/dist/InputField-BrSFZ5Eu.js

@@ -1,59 +0,0 @@
-import { mergeModels as n, useModel as f, computed as m, openBlock as o, createElementBlock as g, normalizeClass as a, renderSlot as h, withDirectives as b, createElementVNode as x, vModelDynamic as k, createBlock as y, createCommentVNode as v } from "vue";
-import w from "./CircleExclamationIcon-vvAjN3c9.js";
-const B = ["name", "type", "placeholder", "disabled"], C = {
-  __name: "InputField",
-  props: /* @__PURE__ */ n({
-    hasError: {
-      type: Boolean,
-      default: !1
-    },
-    label: {
-      type: String,
-      default: ""
-    },
-    placeholder: {
-      type: String,
-      default: ""
-    },
-    fieldType: {
-      type: String,
-      default: "text"
-    },
-    disabled: {
-      type: Boolean,
-      default: !1
-    }
-  }, {
-    modelValue: {},
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ n(["blur"], ["update:modelValue"]),
-  setup(e, { emit: i }) {
-    const t = e, d = i, r = f(e, "modelValue"), s = () => {
-      d("blur");
-    }, c = m(() => t.hasError && !t.disabled ? "ring-error-950 focus-within:bg-error-100 focus-within:ring-error-950 text-error-950" : t.disabled ? "ring-steel-500 dark:ring-line-strong bg-steel-100 dark:bg-surface cursor-not-allowed" : "ring-steel-500 dark:ring-line-strong focus-within:bg-app-100 focus-within:ring-app-950 dark:focus-within:text-black-950 text-black-950 dark:text-content");
-    return (u, l) => (o(), g("div", {
-      class: a(["relative flex flex-1 gap-x-2 px-4 text-style-input items-center h-10 rounded-[20px] ring-1 ring-inset focus-within:ring-2 focus-within:outline-none", c.value])
-    }, [
-      h(u.$slots, "icon"),
-      b(x("input", {
-        "onUpdate:modelValue": l[0] || (l[0] = (p) => r.value = p),
-        name: e.label,
-        onBlur: s,
-        type: e.fieldType,
-        class: a(["flex-1 border-0 bg-[transparent] pl-0 ring-0 focus:ring-0 outline-none focus:outline-none disabled:placeholder:text-steel-800 dark:disabled:placeholder:text-content-muted disabled:pointer-events-none", e.hasError ? " focus:placeholder:text-error-950 pr-6" : "placeholder:text-steel-950 dark:placeholder:text-content-muted pr-0"]),
-        placeholder: e.placeholder,
-        disabled: e.disabled
-      }, null, 42, B), [
-        [k, r.value]
-      ]),
-      e.hasError ? (o(), y(w, {
-        key: 0,
-        class: "absolute top-1/2 -translate-y-1/2 right-3 scale-[0.8182] pointer-events-none text-error-950"
-      })) : v("", !0)
-    ], 2));
-  }
-};
-export {
-  C as _
-};