@zealsolutions/zeal-ui 1.0.0-alpha.341 → 1.0.0-alpha.343

package/dist/components/header/index.js

@@ -1,22 +1,22 @@
-import { openBlock as l, createElementBlock as u, createVNode as T, createElementVNode as a, createTextVNode as P, mergeModels as te, useModel as ge, getCurrentInstance as ie, ref as g, computed as $, watch as K, nextTick as ne, onMounted as ke, 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 U, normalizeStyle as q, pushScopeId as Se, popScopeId as _e, Transition as ce, withCtx as ue, resolveDynamicComponent as pe, unref as F, vShow as de, renderSlot as V } from "vue";
+import { openBlock as l, createElementBlock as u, createVNode as T, createElementVNode as a, createTextVNode as j, mergeModels as te, useModel as ge, getCurrentInstance as ie, ref as g, computed as $, watch as K, nextTick as ne, onMounted as ke, 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 pe, unref as F, vShow as de, renderSlot as V } from "vue";
 import Me from "../../HouseIcon-BxmNyxvv.js";
 import Te from "../../ArrowLeftIcon-Cgsy08pY.js";
 import fe from "../../MagnifyingGlassIcon-ChYNIA-H.js";
 import { _ as Ae } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import { o as xe } from "../../index-CedrSBIl.js";
+import { o as he } from "../../index-CedrSBIl.js";
 import oe from "../../BellIcon-lK5EZXNf.js";
 import Ie from "../../CircleCheckIcon-CA15yXgI.js";
 import Ee from "../../XMarkIcon-DKJ_--uA.js";
-const Ne = /* @__PURE__ */ a("span", { class: "hidden whitespace-nowrap sm:inline" }, "Search", -1), He = /* @__PURE__ */ a("kbd", { class: "hidden items-center gap-px rounded border border-proclusteal-300 bg-proclusteal-100 px-[5px] py-0.5 font-sans text-[11px] font-bold leading-none text-proclusteal-500 sm:inline-flex" }, [
+const Ne = /* @__PURE__ */ a("span", { class: "hidden whitespace-nowrap sm:inline" }, "Search", -1), He = /* @__PURE__ */ a("kbd", { class: "zui-search-kbd hidden items-center gap-px rounded border border-proclusteal-300 bg-proclusteal-100 px-[5px] py-0.5 font-sans text-[11px] font-bold leading-none text-proclusteal-500 sm:inline-flex" }, [
   /* @__PURE__ */ a("span", null, "⌘"),
-  /* @__PURE__ */ P("K ")
+  /* @__PURE__ */ j("K ")
 ], -1), Oe = {
   __name: "GlobalSearchPill",
   emits: ["click"],
   setup(e) {
     return (i, o) => (l(), u("button", {
       type: "button",
-      class: "inline-flex h-[34px] cursor-pointer items-center justify-center gap-[7px] rounded-lg border border-proclusteal-300 bg-white pl-[11px] pr-[9px] font-sans text-[13px] font-semibold text-proclusteal-600 transition-[border-color,color,box-shadow] duration-150 hover:border-proclusteal-950 hover:text-proclusteal-800 hover:shadow-[0_1px_3px_rgba(20,40,45,0.08)] focus:border-proclusteal-950 focus:text-proclusteal-800 focus:outline-none",
+      class: "zui-search-pill inline-flex h-[34px] cursor-pointer items-center justify-center gap-[7px] rounded-lg border border-proclusteal-300 bg-white pl-[11px] pr-[9px] font-sans text-[13px] font-semibold text-proclusteal-600 transition-[border-color,color,box-shadow] duration-150 hover:border-proclusteal-950 hover:text-proclusteal-800 hover:shadow-[0_1px_3px_rgba(20,40,45,0.08)] focus:border-proclusteal-950 focus:text-proclusteal-800 focus:outline-none",
       title: "Search (Ctrl K)",
       "aria-label": "Search (Ctrl K)",
       onClick: o[0] || (o[0] = (y) => i.$emit("click"))
@@ -26,7 +26,7 @@ const Ne = /* @__PURE__ */ a("span", { class: "hidden whitespace-nowrap sm:inlin
       He
     ]));
   }
-}, j = {
+}, D = {
   Contact: { label: "Contacts", colour: "#1a8a7d", icon: '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>' },
   Incident: { label: "Incidents", colour: "#cd5c5c", icon: '<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>' },
   Asset: { label: "Assets", colour: "#8b4789", icon: '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>' },
@@ -43,11 +43,11 @@ const Ne = /* @__PURE__ */ a("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 De(e, i = {}) {
-  const o = { ...j, ...i };
+function ze(e, i = {}) {
+  const o = { ...D, ...i };
   return Object.prototype.hasOwnProperty.call(o, e) ? o[e] : { ...Le, label: e };
 }
-function je(e) {
+function De(e) {
   return (e == null ? "" : String(e)).replace(/[&<>"']/g, (i) => ({
     "&": "&amp;",
     "<": "&lt;",
@@ -56,7 +56,7 @@ function je(e) {
     "'": "&#39;"
   })[i]);
 }
-function he(e) {
+function xe(e) {
   if (!e)
     return "";
   const i = String(e).trim();
@@ -76,23 +76,23 @@ function O(e) {
   }
   return o.protocol === "http:" || o.protocol === "https:" ? i : "";
 }
-function Pe(e) {
+function je(e) {
   return String(e || "").toLowerCase().split(/\s+/).filter((i) => i.length >= 2);
 }
 function le(e, i) {
-  const o = je(e);
+  const o = De(e);
   if (!i || !i.length)
     return o;
   const y = new RegExp(`(${i.map((d) => d.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`, "ig");
   return o.replace(y, "<mark>$1</mark>");
 }
-const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex items-center gap-2.5 border-b border-proclusteal-200 px-4 py-3.5" }, Be = ["placeholder"], Re = {
+const Pe = (e) => (Se("data-v-facb4f52"), e = e(), _e(), e), Ue = { class: "zui-search-field flex items-center gap-2.5 border-b border-proclusteal-200 px-4 py-3.5" }, Be = ["placeholder"], Re = {
   key: 0,
   class: "px-[18px] pb-0.5 pt-3.5 text-[15px] font-extrabold text-[#1e262c]"
 }, Ve = {
   key: 1,
   class: "border-b border-proclusteal-200 px-[18px] pb-3 pt-2.5"
-}, Ke = ["onClick"], qe = { class: "sticky top-0 z-[1] border-t border-proclusteal-200 bg-proclusteal-150 px-[18px] py-2 text-[12px] font-extrabold tracking-[0.3px] text-proclusteal-700" }, Ge = { class: "ml-0.5 text-[#667079]" }, Fe = ["href", "data-row-idx", "onClick", "onMouseenter"], Qe = ["innerHTML"], Ye = { class: "min-w-0 flex-1" }, Xe = ["innerHTML"], Je = ["innerHTML"], We = /* @__PURE__ */ Ue(() => /* @__PURE__ */ a("svg", {
+}, Ke = ["onClick"], qe = { class: "zui-search-group sticky top-0 z-[1] border-t border-proclusteal-200 bg-proclusteal-150 px-[18px] py-2 text-[12px] font-extrabold tracking-[0.3px] text-proclusteal-700" }, Ge = { class: "ml-0.5 text-[#667079]" }, Fe = ["href", "data-row-idx", "onClick", "onMouseenter"], Qe = ["innerHTML"], Ye = { class: "min-w-0 flex-1" }, Xe = ["innerHTML"], Je = ["innerHTML"], We = /* @__PURE__ */ Pe(() => /* @__PURE__ */ a("svg", {
   class: "h-4 w-4 flex-none text-[#c2cad1]",
   viewBox: "0 0 24 24",
   fill: "none",
@@ -102,7 +102,7 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
   "stroke-linejoin": "round"
 }, [
   /* @__PURE__ */ a("polyline", { points: "9 18 15 12 9 6" })
-], -1)), ae = "mb-2 mr-2 inline-flex cursor-pointer items-center gap-[7px] rounded-[20px] border border-[#dde3e8] bg-[#f4f6f8] px-3.5 py-1.5 text-[13px] font-bold text-proclusteal-700 hover:border-proclusteal-950", re = "!border-proclusteal-950 !bg-proclusteal-950 !text-white", R = "px-5 py-[26px] text-center text-[13px] font-medium text-[#667079]", Ze = {
+], -1)), ae = "zui-search-chip mb-2 mr-2 inline-flex cursor-pointer items-center gap-[7px] rounded-[20px] border border-[#dde3e8] bg-[#f4f6f8] px-3.5 py-1.5 text-[13px] font-bold text-proclusteal-700 hover:border-proclusteal-950", re = "!border-proclusteal-950 !bg-proclusteal-950 !text-white", R = "zui-search-state px-5 py-[26px] text-center text-[13px] font-medium text-[#667079]", Ze = {
   __name: "GlobalSearchModal",
   props: /* @__PURE__ */ te({
     searchProvider: {
@@ -131,47 +131,47 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
   }),
   emits: /* @__PURE__ */ te(["navigate"], ["update:open"]),
   setup(e, { emit: i }) {
-    const o = e, y = i, d = ge(e, "open"), x = ie(), w = g(null), _ = g(null), A = g(null), k = g(""), S = g(""), v = g([]), f = g("all"), n = g("zero"), c = g(-1);
+    const o = e, y = i, d = ge(e, "open"), h = ie(), w = g(null), _ = g(null), A = g(null), k = g(""), S = g(""), v = g([]), f = g("all"), n = g("zero"), c = g(-1);
     let p = null, C = 0, L = null, I = null;
-    const Q = $(() => Pe(S.value)), Y = (t) => De(t, o.types), X = $(() => {
+    const Q = $(() => je(S.value)), Y = (t) => ze(t, o.types), X = $(() => {
       let t = 0;
       return v.value.filter((s) => f.value === "all" || s.type === f.value).map((s) => {
         const r = Y(s.type);
         return {
           type: s.type,
           label: r.label,
-          items: s.items.map((h) => ({
-            url: O(h.Url),
-            titleHtml: le(h.Title, Q.value),
-            subtitleHtml: le(h.Subtitle, Q.value),
-            tileColour: he(h.Colour) || r.colour,
+          items: s.items.map((x) => ({
+            url: O(x.Url),
+            titleHtml: le(x.Title, Q.value),
+            subtitleHtml: le(x.Subtitle, Q.value),
+            tileColour: xe(x.Colour) || r.colour,
             tileIcon: r.icon,
             flatIdx: t++
           }))
         };
       });
     }), J = $(() => X.value.flatMap((t) => t.items)), ye = $(() => v.value.reduce((t, s) => t + s.items.length, 0));
-    function z(t) {
+    function U(t) {
       const s = J.value;
       if (!s.length) {
         c.value = -1;
         return;
       }
       c.value = Math.min(Math.max(t, 0), s.length - 1), ne(() => {
-        var h;
-        const r = (h = A.value) == null ? void 0 : h.querySelector(`[data-row-idx="${c.value}"]`);
+        var x;
+        const r = (x = A.value) == null ? void 0 : x.querySelector(`[data-row-idx="${c.value}"]`);
         r == null || r.scrollIntoView({ block: "nearest" });
       });
     }
     function W(t) {
       var s;
-      f.value = t, z(0), (s = w.value) == null || s.focus();
+      f.value = t, U(0), (s = w.value) == null || s.focus();
     }
     function Z(t) {
       var s, r;
-      t && (y("navigate", t), (r = (s = x == null ? void 0 : x.vnode) == null ? void 0 : s.props) != null && r.onNavigate || (window.location.href = t), D());
+      t && (y("navigate", t), (r = (s = h == null ? void 0 : h.vnode) == null ? void 0 : s.props) != null && r.onNavigate || (window.location.href = t), z());
     }
-    function D() {
+    function z() {
       d.value = !1;
     }
     async function ve(t) {
@@ -181,7 +181,7 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
         const r = await o.searchProvider(t);
         if (s !== C || !d.value)
           return;
-        v.value = r && r.groups || [], f.value = "all", n.value = v.value.length ? "results" : "empty", z(0);
+        v.value = r && r.groups || [], f.value = "all", n.value = v.value.length ? "results" : "empty", U(0);
       } catch {
         if (s !== C || !d.value)
           return;
@@ -205,15 +205,15 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
     function me(t) {
       var s;
       if (t.key === "Escape") {
-        t.preventDefault(), D();
+        t.preventDefault(), z();
         return;
       }
       if (t.key === "ArrowDown") {
-        t.preventDefault(), z(c.value + 1);
+        t.preventDefault(), U(c.value + 1);
         return;
       }
       if (t.key === "ArrowUp") {
-        t.preventDefault(), z(c.value - 1);
+        t.preventDefault(), U(c.value - 1);
         return;
       }
       if (t.key === "Enter") {
@@ -229,8 +229,8 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
         const r = (s = _.value) == null ? void 0 : s.querySelectorAll('input, button, a[href], [tabindex]:not([tabindex="-1"])');
         if (!(r != null && r.length))
           return;
-        const h = r[0], B = r[r.length - 1];
-        t.shiftKey && document.activeElement === h ? (t.preventDefault(), B.focus()) : !t.shiftKey && document.activeElement === B && (t.preventDefault(), h.focus());
+        const x = r[0], B = r[r.length - 1];
+        t.shiftKey && document.activeElement === x ? (t.preventDefault(), B.focus()) : !t.shiftKey && document.activeElement === B && (t.preventDefault(), x.focus());
       }
     }
     function be(t) {
@@ -241,7 +241,7 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
     }
     function ee(t) {
       if (t.key === "Escape" && d.value) {
-        t.preventDefault(), D();
+        t.preventDefault(), z();
         return;
       }
       if ((t.ctrlKey || t.metaKey) && (t.key === "k" || t.key === "K")) {
@@ -257,19 +257,19 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
     }), (t, s) => (l(), E(Ce, { to: "body" }, [
       d.value ? (l(), u("div", {
         key: 0,
-        class: "fixed inset-0 z-[20000] flex items-start justify-center bg-[#11181c]/45",
-        onMousedown: N(D, ["self"]),
+        class: "zui-search-overlay fixed inset-0 z-[20000] flex items-start justify-center bg-[#11181c]/45",
+        onMousedown: N(z, ["self"]),
         onKeydown: me
       }, [
         a("div", {
           ref_key: "panelEl",
           ref: _,
-          class: "mt-[4vh] flex max-h-[88vh] w-[94%] max-w-[720px] flex-col overflow-hidden rounded-[14px] bg-white font-sans shadow-[0_30px_80px_rgba(0,0,0,0.3)] sm:mt-[8vh] sm:max-h-[82vh]",
+          class: "zui-search-panel mt-[4vh] flex max-h-[88vh] w-[94%] max-w-[720px] flex-col overflow-hidden rounded-[14px] bg-white font-sans shadow-[0_30px_80px_rgba(0,0,0,0.3)] sm:mt-[8vh] sm:max-h-[82vh]",
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "Search"
         }, [
-          a("div", ze, [
+          a("div", Ue, [
             T(fe, { class: "!h-[18px] !w-[18px] flex-none text-proclusteal-400" }),
             G(a("input", {
               ref_key: "inputEl",
@@ -278,7 +278,7 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
               type: "text",
               autocomplete: "off",
               placeholder: e.placeholder,
-              class: "flex-1 border-0 bg-transparent p-0 text-[16px] text-[#1e262c] outline-none placeholder:text-proclusteal-400 focus:ring-0"
+              class: "zui-search-input flex-1 border-0 bg-transparent p-0 text-[16px] text-[#1e262c] outline-none placeholder:text-proclusteal-400 focus:ring-0"
             }, null, 8, Be), [
               [$e, k.value]
             ]),
@@ -287,7 +287,7 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
               class: "cursor-pointer border-0 bg-transparent px-1 text-[22px] leading-none text-proclusteal-400 hover:text-proclusteal-700",
               "aria-label": "Close search",
               title: "Close (Esc)",
-              onClick: D
+              onClick: z
             }, "×")
           ]),
           n.value === "results" ? (l(), u("div", Re, " Search results ")) : m("", !0),
@@ -297,18 +297,18 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
               class: M([ae, f.value === "all" ? re : ""]),
               onClick: s[1] || (s[1] = (r) => W("all"))
             }, [
-              P(" All "),
+              j(" All "),
               a("span", {
                 class: M(["font-bold", f.value === "all" ? "opacity-85" : "opacity-60"])
               }, "(" + b(ye.value) + ")", 3)
             ], 2),
-            (l(!0), u(H, null, U(v.value, (r) => (l(), u("button", {
+            (l(!0), u(H, null, P(v.value, (r) => (l(), u("button", {
               key: r.type,
               type: "button",
               class: M([ae, f.value === r.type ? re : ""]),
-              onClick: (h) => W(r.type)
+              onClick: (x) => W(r.type)
             }, [
-              P(b(Y(r.type).label) + " ", 1),
+              j(b(Y(r.type).label) + " ", 1),
               a("span", {
                 class: M(["font-bold", f.value === r.type ? "opacity-85" : "opacity-60"])
               }, "(" + b(r.items.length) + ")", 3)
@@ -317,7 +317,7 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
           a("div", {
             ref_key: "resultsEl",
             ref: A,
-            class: "overflow-y-auto pb-2.5"
+            class: "zui-search-results overflow-y-auto pb-2.5"
           }, [
             n.value === "zero" ? (l(), u("div", {
               key: 0,
@@ -331,24 +331,24 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
             }, " No results for “" + b(S.value) + "” — try a broader term or a code. ", 1)) : n.value === "error" ? (l(), u("div", {
               key: 3,
               class: M(R)
-            }, " Search is temporarily unavailable. ")) : (l(!0), u(H, { key: 4 }, U(X.value, (r) => (l(), u("div", {
+            }, " Search is temporarily unavailable. ")) : (l(!0), u(H, { key: 4 }, P(X.value, (r) => (l(), u("div", {
               key: r.type
             }, [
               a("div", qe, [
-                P(b(r.label) + " ", 1),
+                j(b(r.label) + " ", 1),
                 a("span", Ge, "(" + b(r.items.length) + ")", 1)
               ]),
-              (l(!0), u(H, null, U(r.items, (h) => (l(), u("a", {
-                key: h.flatIdx,
-                href: h.url || null,
-                class: M(["flex items-center gap-[13px] px-[18px] py-[11px] text-[#1e262c] no-underline", { "bg-proclusteal-50": h.flatIdx === c.value }]),
-                "data-row-idx": h.flatIdx,
-                onClick: N((B) => Z(h.url), ["exact", "prevent"]),
-                onMouseenter: (B) => c.value = h.flatIdx
+              (l(!0), u(H, null, P(r.items, (x) => (l(), u("a", {
+                key: x.flatIdx,
+                href: x.url || null,
+                class: M(["zui-search-row flex items-center gap-[13px] px-[18px] py-[11px] text-[#1e262c] no-underline", { "bg-proclusteal-50": x.flatIdx === c.value }]),
+                "data-row-idx": x.flatIdx,
+                onClick: N((B) => Z(x.url), ["exact", "prevent"]),
+                onMouseenter: (B) => c.value = x.flatIdx
               }, [
                 a("span", {
                   class: "inline-flex h-[42px] w-[42px] flex-none items-center justify-center rounded-[10px] text-white",
-                  style: q({ background: h.tileColour })
+                  style: q({ background: x.tileColour })
                 }, [
                   (l(), u("svg", {
                     class: "h-5 w-5",
@@ -358,17 +358,17 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
                     "stroke-width": "2",
                     "stroke-linecap": "round",
                     "stroke-linejoin": "round",
-                    innerHTML: h.tileIcon
+                    innerHTML: x.tileIcon
                   }, null, 8, Qe))
                 ], 4),
                 a("span", Ye, [
                   a("span", {
                     class: "gs-marked block truncate text-[14px] font-bold",
-                    innerHTML: h.titleHtml
+                    innerHTML: x.titleHtml
                   }, null, 8, Xe),
                   a("span", {
                     class: "gs-marked mt-0.5 block truncate text-[12.5px] text-[#5b6570]",
-                    innerHTML: h.subtitleHtml
+                    innerHTML: x.subtitleHtml
                   }, null, 8, Je)
                 ]),
                 We
@@ -379,7 +379,7 @@ const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex
       ], 32)) : m("", !0)
     ]));
   }
-}, et = /* @__PURE__ */ Ae(Ze, [["__scopeId", "data-v-b4eb0ff3"]]), se = {
+}, et = /* @__PURE__ */ Ae(Ze, [["__scopeId", "data-v-facb4f52"]]), se = {
   "reference library": "RefLib",
   reflib: "RefLib",
   repository: "RefLib",
@@ -404,13 +404,13 @@ function tt(e) {
   if (!i)
     return "";
   let o = null;
-  if (Object.prototype.hasOwnProperty.call(j, i))
+  if (Object.prototype.hasOwnProperty.call(D, i))
     o = i;
   else {
-    const y = i.toLowerCase(), d = Object.keys(j).find((x) => x.toLowerCase() === y);
+    const y = i.toLowerCase(), d = Object.keys(D).find((h) => h.toLowerCase() === y);
     d ? o = d : Object.prototype.hasOwnProperty.call(se, y) && (o = se[y]);
   }
-  return !o || !Object.prototype.hasOwnProperty.call(j, o) ? "" : j[o].icon || "";
+  return !o || !Object.prototype.hasOwnProperty.call(D, o) ? "" : D[o].icon || "";
 }
 function nt(e) {
   if (!e)
@@ -429,10 +429,10 @@ const ot = {
 }, st = {
   key: 1,
   class: "px-5 py-[26px] text-center text-[13px] font-medium text-[#667079]"
-}, it = ["onClick"], ct = { class: "inline-flex h-[42px] w-[42px] flex-none items-center justify-center rounded-[10px] bg-proclusteal-950 text-white" }, ut = ["innerHTML"], pt = { class: "min-w-0 flex-1" }, dt = { class: "block truncate text-[14px] font-bold text-[#1e262c]" }, ft = { class: "block truncate text-[12.5px] text-[#5b6570]" }, xt = {
+}, it = ["onClick"], ct = { class: "inline-flex h-[42px] w-[42px] flex-none items-center justify-center rounded-[10px] bg-proclusteal-950 text-white" }, ut = ["innerHTML"], pt = { class: "min-w-0 flex-1" }, dt = { class: "block truncate text-[14px] font-bold text-[#1e262c]" }, ft = { class: "block truncate text-[12.5px] text-[#5b6570]" }, ht = {
   key: 0,
   class: "mt-0.5 block text-[12px] text-proclusteal-500"
-}, ht = { class: "flex flex-none flex-col items-center gap-2 pt-0.5 text-proclusteal-600" }, yt = ["onClick"], vt = ["onClick"], mt = ["href"], bt = {
+}, xt = { class: "flex flex-none flex-col items-center gap-2 pt-0.5 text-proclusteal-600" }, yt = ["onClick"], vt = ["onClick"], mt = ["href"], bt = {
   __name: "HeaderNotificationDropdown",
   props: {
     // The feed as /personal/GetNotifications.ashx returns it: { data: [...] }. Null means
@@ -461,15 +461,15 @@ const ot = {
   },
   emits: ["markAsRead", "deleteNotification", "navigate", "open"],
   setup(e, { emit: i }) {
-    const o = e, y = i, d = g(null), x = g(!1), w = $(() => {
+    const o = e, y = i, d = g(null), h = g(!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"));
-    xe(d, () => {
-      x.value = !1;
+    he(d, () => {
+      h.value = !1;
     });
     function A() {
-      x.value = !x.value, x.value && y("open");
+      h.value = !h.value, h.value && y("open");
     }
     function k(n) {
       return n && Object.prototype.hasOwnProperty.call(o.iconMap, n) && o.iconMap[n] || null;
@@ -488,7 +488,7 @@ const ot = {
       unread: n.ClassRead === "unread"
     })));
     function f(n) {
-      x.value = !1;
+      h.value = !1;
       const c = O(n);
       c && y("navigate", c);
     }
@@ -519,7 +519,7 @@ const ot = {
           G(a("div", lt, [
             a("div", at, [
               e.notifications ? w.value.length ? m("", !0) : (l(), u("div", st, " No notifications. ")) : (l(), u("div", rt, " Loading notifications… ")),
-              (l(!0), u(H, null, U(v.value, (p) => (l(), u("div", {
+              (l(!0), u(H, null, P(v.value, (p) => (l(), u("div", {
                 key: p.item.NotifyID,
                 class: M(["flex cursor-pointer items-start gap-3 border-b border-proclusteal-200 px-4 py-3", p.unread ? "bg-proclusteal-50" : "bg-white"]),
                 onClick: (C) => f(p.item.url)
@@ -543,9 +543,9 @@ const ot = {
                 a("span", pt, [
                   a("span", dt, b(p.item.notifyname), 1),
                   a("span", ft, b(p.item.summary), 1),
-                  p.date ? (l(), u("span", xt, b(p.date), 1)) : m("", !0)
+                  p.date ? (l(), u("span", ht, b(p.date), 1)) : m("", !0)
                 ]),
-                a("span", ht, [
+                a("span", xt, [
                   p.unread ? (l(), u("button", {
                     key: 0,
                     type: "button",
@@ -574,7 +574,7 @@ const ot = {
               onClick: c[0] || (c[0] = N((p) => f(e.notificationsUrl), ["exact", "prevent"]))
             }, " See all notifications ", 8, mt)
           ], 512), [
-            [de, x.value]
+            [de, h.value]
           ])
         ]),
         _: 1
@@ -601,16 +601,16 @@ const ot = {
   },
   emits: ["select"],
   setup(e, { emit: i }) {
-    const o = e, y = i, d = g(null), x = g(!1), w = g(!1);
+    const o = e, y = i, d = g(null), h = g(!1), w = g(!1);
     K(() => o.user.avatarUrl, () => {
       w.value = !1;
     });
     const _ = $(() => `${o.user.firstName || ""} ${o.user.surname || ""}`.trim()), A = $(() => `${(o.user.firstName || "").charAt(0)}${(o.user.surname || "").charAt(0)}`.toUpperCase());
-    xe(d, () => {
-      x.value = !1;
+    he(d, () => {
+      h.value = !1;
     });
     function k(S) {
-      x.value = !1, y("select", S);
+      h.value = !1, y("select", S);
     }
     return (S, v) => (l(), u("div", {
       ref_key: "rootEl",
@@ -622,7 +622,7 @@ const ot = {
         class: "flex cursor-pointer items-center justify-center",
         title: "View Menu Options",
         "aria-label": "View Menu Options",
-        onClick: v[1] || (v[1] = (f) => x.value = !x.value)
+        onClick: v[1] || (v[1] = (f) => h.value = !h.value)
       }, [
         e.user.avatarUrl && !w.value ? (l(), u("img", {
           key: 0,
@@ -648,7 +648,7 @@ const ot = {
               a("span", _t, b(e.user.orgName), 1)
             ]),
             Mt,
-            (l(!0), u(H, null, U(e.menuItems, (f, n) => (l(), u(H, { key: n }, [
+            (l(!0), u(H, null, P(e.menuItems, (f, n) => (l(), u(H, { key: n }, [
               f.divider ? (l(), u("div", Tt)) : (l(), u("a", {
                 key: 1,
                 href: f.href && F(O)(f.href) || null,
@@ -663,7 +663,7 @@ const ot = {
               ], 8, At))
             ], 64))), 128))
           ], 512), [
-            [de, x.value]
+            [de, h.value]
           ])
         ]),
         _: 1
@@ -676,7 +676,7 @@ const ot = {
 }, Ot = {
   key: 0,
   class: "font-normal text-black-800"
-}, Lt = ["href", "title", "aria-label"], Dt = { class: "flex items-center gap-[18px] sm:gap-[25px]" }, Gt = {
+}, Lt = ["href", "title", "aria-label"], zt = { class: "flex items-center gap-[18px] sm:gap-[25px]" }, Gt = {
   __name: "AppHeader",
   props: {
     title: {
@@ -754,7 +754,7 @@ const ot = {
     "notifications-open"
   ],
   setup(e, { emit: i }) {
-    const o = e, y = i, d = ie(), x = g(!1), w = $(() => !!o.notifications || o.unreadCount !== null && o.unreadCount !== void 0), _ = $(() => he(o.accentColour)), A = $(() => _.value || "#1c6f63");
+    const o = e, y = i, d = ie(), h = g(!1), w = $(() => !!o.notifications || o.unreadCount !== null && o.unreadCount !== void 0), _ = $(() => xe(o.accentColour)), A = $(() => _.value || "#1c6f63");
     function k(n) {
       var p, C;
       if (!n)
@@ -775,7 +775,7 @@ const ot = {
       a("div", Nt, [
         V(n.$slots, "logo"),
         e.title ? (l(), u("span", Ht, [
-          P(b(e.title), 1),
+          j(b(e.title), 1),
           e.subtitle ? (l(), u("span", Ot, " " + b(e.subtitle), 1)) : m("", !0)
         ])) : m("", !0),
         _.value ? (l(), u("span", {
@@ -811,11 +811,11 @@ const ot = {
         ], 4),
         V(n.$slots, "left")
       ]),
-      a("div", Dt, [
+      a("div", zt, [
         V(n.$slots, "right"),
         e.searchProvider ? (l(), E(Oe, {
           key: 0,
-          onClick: c[0] || (c[0] = (p) => x.value = !0)
+          onClick: c[0] || (c[0] = (p) => h.value = !0)
         })) : m("", !0),
         w.value ? (l(), E(bt, {
           key: 1,
@@ -837,8 +837,8 @@ const ot = {
       ]),
       e.searchProvider ? (l(), E(et, {
         key: 0,
-        open: x.value,
-        "onUpdate:open": c[4] || (c[4] = (p) => x.value = p),
+        open: h.value,
+        "onUpdate:open": c[4] || (c[4] = (p) => h.value = p),
         "search-provider": e.searchProvider,
         placeholder: e.searchPlaceholder,
         types: e.searchTypes,
@@ -849,7 +849,7 @@ const ot = {
 };
 export {
   Gt as AppHeader,
-  j as DEFAULT_SEARCH_TYPES,
+  D as DEFAULT_SEARCH_TYPES,
   et as GlobalSearchModal,
   Oe as GlobalSearchPill,
   bt as HeaderNotificationDropdown,

package/dist/config/tailwind/index.js

@@ -1,3 +1,18 @@
+/**
+ * Semantic theme token helper.
+ *
+ * Resolves a colour from the `--zui-*-rgb` channel triplets defined in
+ * `public/css/theme.css`, keeping Tailwind's slash-opacity modifier working
+ * (`bg-surface/50`) because the value is emitted as `rgb(R G B / <alpha-value>)`.
+ *
+ * The second argument is a hard-coded fallback equal to the LIGHT value of the
+ * token. It means these utilities still render sane light-mode colours in an app
+ * that has not imported `theme.css` yet, instead of collapsing to an invalid
+ * declaration. Adoption is therefore safe in either order.
+ */
+const themeToken = (name, lightFallback) =>
+    `rgb(var(--zui-${name}-rgb, ${lightFallback}) / <alpha-value>)`;
+
 /** @type {import('tailwindcss').Config} */
 export default {
     content: [
@@ -365,6 +380,40 @@ export default {
             },
             white: '#ffffff',
 
+            // ---------------------------------------------------------------
+            // Semantic theme tokens (theme-aware; see public/css/theme.css).
+            //
+            // ADDITIVE. These are new names — no existing scale above is
+            // renumbered, remapped or altered. They are the ONLY colours in this
+            // file that change between light and dark.
+            //
+            // NEUTRALS ONLY, on purpose. Brand and status colours (error,
+            // success, warning, gra, tis, grp, nhsop*/nssop*/ncsop*/nmsop* and
+            // every per-module scale) stay fixed across themes: in an
+            // emergency-services product a risk or status indicator must not
+            // change hue with the theme.
+            //
+            //   bg-surface  bg-surface-raised  bg-surface-sunken  bg-surface-hover
+            //   text-content  text-content-muted
+            //   border-line  border-line-strong
+            //   ring-focus  outline-focus
+            // ---------------------------------------------------------------
+            surface: {
+                DEFAULT: themeToken('surface', '241 242 243'),
+                raised: themeToken('surface-raised', '255 255 255'),
+                sunken: themeToken('surface-sunken', '228 230 232'),
+                hover: themeToken('surface-hover', '238 247 245'),
+            },
+            content: {
+                DEFAULT: themeToken('content', '23 36 44'),
+                muted: themeToken('content-muted', '90 102 108'),
+            },
+            line: {
+                DEFAULT: themeToken('line', '227 232 234'),
+                strong: themeToken('line-strong', '200 206 208'),
+            },
+            focus: themeToken('focus', '26 138 125'),
+
             // SOP colours
             nhsop01: '#14968C',
             nhsop02: '#42124C',

package/dist/css/theme.css

@@ -0,0 +1,85 @@
+/* ============================================================================
+   zeal-ui semantic theme tokens
+   ----------------------------------------------------------------------------
+   OPT-IN. This file is not imported by base.css. Nothing in a consuming app
+   changes until the app imports it:
+
+       import '@zealsolutions/zeal-ui/css/theme.css'
+
+   Light mode is the default (plain :root). Dark mode is opted into by setting
+   data-theme on the root element:
+
+       document.documentElement.dataset.theme = 'dark'   // or delete to go light
+
+   Values are stored as space-separated RGB channel triplets (`--zui-*-rgb`) so
+   Tailwind's slash-opacity modifier works (`bg-surface/50`). Each triplet has a
+   matching ready-to-use colour var (`--zui-*`) for hand-written CSS, derived
+   from the triplet so there is one source of truth per token.
+
+   WHAT FLIPS AND WHAT DOES NOT
+   ----------------------------------------------------------------------------
+   FLIPS  — neutrals only: surfaces, text, hairlines, focus ring. These carry no
+            meaning beyond depth and legibility, so inverting them is safe.
+   FIXED  — every brand and status colour in the Tailwind palette (error,
+            success, warning, gra, tis, grp, the nhsop/nssop/ncsop/nmsop sets and
+            every per-module scale). This is an emergency-services product: a
+            risk or status indicator must read as the same hue in both themes.
+            Deliberately NOT tokenised here. See MIGRATION.md for the contrast
+            caveat that comes with holding those hues fixed.
+   ========================================================================== */
+
+:root {
+    color-scheme: light;
+
+    /* -- surfaces: sunken < surface < raised, by lightness -- */
+    --zui-surface-rgb: 241 242 243;         /* #f1f2f3  steel-100      */
+    --zui-surface-raised-rgb: 255 255 255;  /* #ffffff  white          */
+    --zui-surface-sunken-rgb: 228 230 232;  /* #e4e6e8  steel-200      */
+    --zui-surface-hover-rgb: 238 247 245;   /* #eef7f5  proclusteal-50 */
+
+    /* -- ink -- */
+    --zui-content-rgb: 23 36 44;            /* #17242c  black-900        */
+    --zui-content-muted-rgb: 90 102 108;    /* #5a666c  proclusteal-600  */
+
+    /* -- hairlines -- */
+    --zui-line-rgb: 227 232 234;            /* #e3e8ea  proclusteal-300 */
+    --zui-line-strong-rgb: 200 206 208;     /* #c8ced0  black-600       */
+
+    /* -- focus ring -- */
+    --zui-focus-rgb: 26 138 125;            /* #1a8a7d  proclusteal-950 */
+
+    /* -- derived colour values, for CSS that is not going through Tailwind -- */
+    --zui-surface: rgb(var(--zui-surface-rgb));
+    --zui-surface-raised: rgb(var(--zui-surface-raised-rgb));
+    --zui-surface-sunken: rgb(var(--zui-surface-sunken-rgb));
+    --zui-surface-hover: rgb(var(--zui-surface-hover-rgb));
+    --zui-content: rgb(var(--zui-content-rgb));
+    --zui-content-muted: rgb(var(--zui-content-muted-rgb));
+    --zui-line: rgb(var(--zui-line-rgb));
+    --zui-line-strong: rgb(var(--zui-line-strong-rgb));
+    --zui-focus: rgb(var(--zui-focus-rgb));
+}
+
+:root[data-theme="dark"] {
+    color-scheme: dark;
+
+    /* -- surfaces: sunken < surface < raised, by lightness (ladder preserved) -- */
+    --zui-surface-rgb: 23 36 44;            /* #17242c  black-900 */
+    --zui-surface-raised-rgb: 31 47 56;     /* #1f2f38  new       */
+    --zui-surface-sunken-rgb: 7 21 30;      /* #07151e  black-950 */
+    --zui-surface-hover-rgb: 38 54 63;      /* #26363f  new       */
+
+    /* -- ink -- */
+    --zui-content-rgb: 229 231 232;         /* #e5e7e8  black-100       */
+    --zui-content-muted-rgb: 154 164 173;   /* #9aa4ad  proclusteal-400 */
+
+    /* -- hairlines -- */
+    --zui-line-rgb: 44 58 67;               /* #2c3a43  new */
+    --zui-line-strong-rgb: 68 81 90;        /* #44515a  new */
+
+    /* -- focus ring: lifted from proclusteal-950 so it stays visible on dark -- */
+    --zui-focus-rgb: 47 185 168;            /* #2fb9a8  new */
+}
+
+/* The derived `--zui-*` colour vars above reference the triplets, so they follow
+   the theme automatically and are not repeated in the dark block. */

package/dist/style.css

@@ -1 +1 @@
-.preview-content[data-v-e4d41bb0] ul{list-style:disc;margin-left:1.5rem}.preview-content[data-v-e4d41bb0] ol{list-style:decimal;margin-left:1.5rem}.preview-content[data-v-e4d41bb0] p{margin-bottom:.5rem}.preview-content[data-v-e4d41bb0] a{color:#326d68;text-decoration:underline}.preview-content[data-v-e4d41bb0] img{max-width:100%;height:auto}.preview-content[data-v-e4d41bb0] table{border-collapse:collapse}.preview-content[data-v-e4d41bb0] td,.preview-content[data-v-e4d41bb0] th{border:1px solid #c8ced0;padding:4px 8px}.preview-content[data-v-e4d41bb0] ins{text-decoration:none;background-color:#d4fcbc}.preview-content[data-v-e4d41bb0] del{text-decoration:line-through;background-color:#fbb6c2;color:#555}.gs-marked[data-v-b4eb0ff3] mark{background:#1a8a7d33;color:inherit;border-radius:3px;padding:0 2px}.columns-container[data-v-3f6f48fb]{position:relative;margin:16px 0;border-radius:8px}.columns-content[data-v-3f6f48fb]{min-height:100px}@media (max-width: 767px){.columns-content[data-v-3f6f48fb]{flex-direction:column!important}}.v-enter-active,.v-leave-active{transition:opacity .3s ease}.v-enter-from,.v-leave-to{opacity:0}
+.preview-content[data-v-e4d41bb0] ul{list-style:disc;margin-left:1.5rem}.preview-content[data-v-e4d41bb0] ol{list-style:decimal;margin-left:1.5rem}.preview-content[data-v-e4d41bb0] p{margin-bottom:.5rem}.preview-content[data-v-e4d41bb0] a{color:#326d68;text-decoration:underline}.preview-content[data-v-e4d41bb0] img{max-width:100%;height:auto}.preview-content[data-v-e4d41bb0] table{border-collapse:collapse}.preview-content[data-v-e4d41bb0] td,.preview-content[data-v-e4d41bb0] th{border:1px solid #c8ced0;padding:4px 8px}.preview-content[data-v-e4d41bb0] ins{text-decoration:none;background-color:#d4fcbc}.preview-content[data-v-e4d41bb0] del{text-decoration:line-through;background-color:#fbb6c2;color:#555}.gs-marked[data-v-facb4f52] mark{background:#1a8a7d33;color:inherit;border-radius:3px;padding:0 2px}.columns-container[data-v-3f6f48fb]{position:relative;margin:16px 0;border-radius:8px}.columns-content[data-v-3f6f48fb]{min-height:100px}@media (max-width: 767px){.columns-content[data-v-3f6f48fb]{flex-direction:column!important}}.v-enter-active,.v-leave-active{transition:opacity .3s ease}.v-enter-from,.v-leave-to{opacity:0}

package/package.json

@@ -1,121 +1,122 @@
 {
-    "name": "@zealsolutions/zeal-ui",
-    "version": "1.0.0-alpha.341",
-    "description": "UI library for Zeal Solutions",
-    "author": "Zeal Solutions",
-    "license": "ISC",
-    "bugs": {
-        "url": "https://github.com/zeal-solutions/zeal-ui/issues"
-    },
-    "homepage": "https://github.com/zeal-solutions/zeal-ui#readme",
-    "keywords": [
-        "zeal",
-        "ui"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/zeal-solutions/zeal-ui.git"
-    },
-    "main": "dist/index.js",
-    "browser": "dist/index.js",
-    "module": "dist/index.js",
-    "files": [
-        "dist/*"
-    ],
-    "exports": {
-        "./css/typography.css": "./dist/css/typography.css",
-        "./css/base.css": "./dist/css/base.css",
-        "./css/editorStyles.css": "./dist/css/editorStyles.css",
-        "./config/tailwind": "./dist/config/tailwind/index.js",
-        "./buttons": "./dist/components/buttons/index.js",
-        "./forms": "./dist/components/forms/index.js",
-        "./header": "./dist/components/header/index.js",
-        "./icons": "./dist/components/icons/index.js",
-        "./inputs": "./dist/components/inputs/index.js",
-        "./layouts": "./dist/components/layouts/index.js",
-        "./logos": "./dist/components/logos/index.js",
-        "./menus": "./dist/components/menus/index.js",
-        "./modals": "./dist/components/modals/index.js",
-        "./navigation": "./dist/components/navigation/index.js",
-        "./overlays": "./dist/components/overlays/index.js",
-        "./session": "./dist/components/session/index.js",
-        "./sop-diff": "./dist/components/sop-diff/index.js",
-        "./style.css": "./dist/style.css",
-        "./tiptap": "./dist/components/tiptap/index.js",
-        "./tooltips": "./dist/components/tooltips/index.js",
-        "./transitions": "./dist/components/transitions/index.js",
-        "./utils": "./dist/utils/index",
-        "./tables": "./dist/components/tables/index.js"
-    },
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "build:publish": "npm run build && npm publish",
-        "prepublishOnly": "npm run build",
-        "preview": "vite preview",
-        "test": "vitest run",
-        "storybook": "storybook dev -p 6006",
-        "build-storybook": "storybook build",
-        "chromatic": "npx chromatic --project-token=chpt_368bf7fc8d469c1"
-    },
-    "dependencies": {
-        "@floating-ui/dom": "^1.7.2",
-        "@floating-ui/vue": "^1.1.7",
-        "@gocapsule/column-extension": "^1.0.0-beta-3",
-        "@tailwindcss/forms": "^0.5.7",
-        "@tailwindcss/line-clamp": "^0.4.4",
-        "@tiptap-extend/columns": "^2.1.6",
-        "@tiptap/core": "^2.6.6",
-        "@tiptap/extension-bubble-menu": "^2.6.6",
-        "@tiptap/extension-color": "^2.6.6",
-        "@tiptap/extension-document": "^2.6.6",
-        "@tiptap/extension-gapcursor": "^2.8.0",
-        "@tiptap/extension-heading": "^2.6.6",
-        "@tiptap/extension-link": "^2.23.0",
-        "@tiptap/extension-list-item": "^2.6.6",
-        "@tiptap/extension-paragraph": "^2.6.6",
-        "@tiptap/extension-placeholder": "^2.12.0",
-        "@tiptap/extension-table": "^2.8.0",
-        "@tiptap/extension-table-cell": "^2.8.0",
-        "@tiptap/extension-table-header": "^2.8.0",
-        "@tiptap/extension-table-row": "^2.8.0",
-        "@tiptap/extension-text": "^2.6.6",
-        "@tiptap/extension-text-align": "^2.7.2",
-        "@tiptap/extension-text-style": "^2.6.6",
-        "@tiptap/extension-underline": "^2.6.6",
-        "@tiptap/pm": "^2.6.6",
-        "@tiptap/starter-kit": "^2.6.6",
-        "@tiptap/vue-3": "^2.7.2",
-        "@vueuse/core": "^11.2.0",
-        "axios": "^1.6.8",
-        "i": "^0.3.7",
-        "less": "^4.2.0",
-        "lodash": "^4.17.21",
-        "postcss": "^8.4.38",
-        "tailwindcss": "^3.4.3",
-        "tailwindcss-convert-px-to-rem": "^1.0.4",
-        "vue": "^3.4.21"
-    },
-    "devDependencies": {
-        "@chromatic-com/storybook": "^1.6.0",
-        "@storybook/addon-essentials": "^8.1.11",
-        "@storybook/addon-interactions": "^8.1.11",
-        "@storybook/addon-links": "^8.1.11",
-        "@storybook/addon-mdx-gfm": "^8.1.11",
-        "@storybook/blocks": "^8.1.11",
-        "@storybook/test": "^8.1.11",
-        "@storybook/vue3": "^8.1.11",
-        "@storybook/vue3-vite": "^8.1.11",
-        "@vitejs/plugin-vue": "^5.0.4",
-        "@vue/test-utils": "^2.4.11",
-        "@whitespace/storybook-addon-html": "^6.1.1",
-        "autoprefixer": "^10.4.19",
-        "chromatic": "^11.3.1",
-        "jsdom": "^25.0.0",
-        "storybook": "^8.1.11",
-        "vite": "^5.2.8",
-        "vite-plugin-vue-devtools": "^7.0.25",
-        "vitest": "^3.0.0"
-    }
+  "name": "@zealsolutions/zeal-ui",
+  "version": "1.0.0-alpha.343",
+  "description": "UI library for Zeal Solutions",
+  "author": "Zeal Solutions",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/zeal-solutions/zeal-ui/issues"
+  },
+  "homepage": "https://github.com/zeal-solutions/zeal-ui#readme",
+  "keywords": [
+    "zeal",
+    "ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zeal-solutions/zeal-ui.git"
+  },
+  "main": "dist/index.js",
+  "browser": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist/*"
+  ],
+  "exports": {
+    "./css/typography.css": "./dist/css/typography.css",
+    "./css/base.css": "./dist/css/base.css",
+    "./css/editorStyles.css": "./dist/css/editorStyles.css",
+    "./css/theme.css": "./dist/css/theme.css",
+    "./config/tailwind": "./dist/config/tailwind/index.js",
+    "./buttons": "./dist/components/buttons/index.js",
+    "./forms": "./dist/components/forms/index.js",
+    "./header": "./dist/components/header/index.js",
+    "./icons": "./dist/components/icons/index.js",
+    "./inputs": "./dist/components/inputs/index.js",
+    "./layouts": "./dist/components/layouts/index.js",
+    "./logos": "./dist/components/logos/index.js",
+    "./menus": "./dist/components/menus/index.js",
+    "./modals": "./dist/components/modals/index.js",
+    "./navigation": "./dist/components/navigation/index.js",
+    "./overlays": "./dist/components/overlays/index.js",
+    "./session": "./dist/components/session/index.js",
+    "./sop-diff": "./dist/components/sop-diff/index.js",
+    "./style.css": "./dist/style.css",
+    "./tiptap": "./dist/components/tiptap/index.js",
+    "./tooltips": "./dist/components/tooltips/index.js",
+    "./transitions": "./dist/components/transitions/index.js",
+    "./utils": "./dist/utils/index",
+    "./tables": "./dist/components/tables/index.js"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:publish": "npm run build && npm publish",
+    "prepublishOnly": "npm run build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_368bf7fc8d469c1"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.2",
+    "@floating-ui/vue": "^1.1.7",
+    "@gocapsule/column-extension": "^1.0.0-beta-3",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/line-clamp": "^0.4.4",
+    "@tiptap-extend/columns": "^2.1.6",
+    "@tiptap/core": "^2.6.6",
+    "@tiptap/extension-bubble-menu": "^2.6.6",
+    "@tiptap/extension-color": "^2.6.6",
+    "@tiptap/extension-document": "^2.6.6",
+    "@tiptap/extension-gapcursor": "^2.8.0",
+    "@tiptap/extension-heading": "^2.6.6",
+    "@tiptap/extension-link": "^2.23.0",
+    "@tiptap/extension-list-item": "^2.6.6",
+    "@tiptap/extension-paragraph": "^2.6.6",
+    "@tiptap/extension-placeholder": "^2.12.0",
+    "@tiptap/extension-table": "^2.8.0",
+    "@tiptap/extension-table-cell": "^2.8.0",
+    "@tiptap/extension-table-header": "^2.8.0",
+    "@tiptap/extension-table-row": "^2.8.0",
+    "@tiptap/extension-text": "^2.6.6",
+    "@tiptap/extension-text-align": "^2.7.2",
+    "@tiptap/extension-text-style": "^2.6.6",
+    "@tiptap/extension-underline": "^2.6.6",
+    "@tiptap/pm": "^2.6.6",
+    "@tiptap/starter-kit": "^2.6.6",
+    "@tiptap/vue-3": "^2.7.2",
+    "@vueuse/core": "^11.2.0",
+    "axios": "^1.6.8",
+    "i": "^0.3.7",
+    "less": "^4.2.0",
+    "lodash": "^4.17.21",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "tailwindcss-convert-px-to-rem": "^1.0.4",
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.0",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-mdx-gfm": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/test": "^8.1.11",
+    "@storybook/vue3": "^8.1.11",
+    "@storybook/vue3-vite": "^8.1.11",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/test-utils": "^2.4.11",
+    "@whitespace/storybook-addon-html": "^6.1.1",
+    "autoprefixer": "^10.4.19",
+    "chromatic": "^11.3.1",
+    "jsdom": "^25.0.0",
+    "storybook": "^8.1.11",
+    "vite": "^5.2.8",
+    "vite-plugin-vue-devtools": "^7.0.25",
+    "vitest": "^3.0.0"
+  }
 }