veylan-component-library 1.0.2 → 1.1.0

package/dist/fusion-component-library.es.js

@@ -1,6 +1,6 @@
-import { defineComponent as b, createElementBlock as i, createCommentVNode as o, openBlock as a, withModifiers as z, createElementVNode as e, renderSlot as H, toDisplayString as c, normalizeStyle as P, normalizeClass as k, createBlock as w, createTextVNode as M, Fragment as g, renderList as _, createVNode as I, ref as C, computed as N, withDirectives as F, vModelText as E, createStaticVNode as S } from "vue";
-import { ChevronDown as U, Share2 as O, ArrowRight as R, ArrowLeft as Z, MoreHorizontal as G, ToyBrick as Q, MessageSquare as $, Home as K } from "lucide-vue-next";
-const W = /* @__PURE__ */ b({
+import { defineComponent as w, createElementBlock as i, createCommentVNode as o, openBlock as n, withModifiers as S, createElementVNode as e, renderSlot as H, toDisplayString as u, normalizeStyle as D, normalizeClass as C, createBlock as _, createTextVNode as c, Fragment as v, renderList as k, createVNode as I, ref as z, computed as N, withDirectives as P, vModelText as E, createStaticVNode as M } from "vue";
+import { ChevronDown as U, Share2 as O, ArrowRight as W, ArrowLeft as R, MoreHorizontal as Z, ToyBrick as G, MessageSquare as Q, Home as $ } from "lucide-vue-next";
+const K = /* @__PURE__ */ w({
   __name: "BaseModal",
   props: {
     isOpen: { type: Boolean, required: !1, default: !1 },
@@ -11,36 +11,36 @@ const W = /* @__PURE__ */ b({
   emits: ["close", "primary", "secondary"],
   setup(r, { expose: l, emit: t }) {
     l();
-    const s = r, u = t, f = { props: s, emit: u, handleClose: () => {
-      u("close");
+    const s = r, f = t, x = { props: s, emit: f, handleClose: () => {
+      f("close");
     }, handlePrimary: () => {
-      u("primary");
+      f("primary");
     }, handleSecondary: () => {
-      u("secondary");
+      f("secondary");
     } };
-    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
+    return Object.defineProperty(x, "__isScriptSetup", { enumerable: !1, value: !0 }), x;
   }
-}), m = (r, l) => {
+}), g = (r, l) => {
   const t = r.__vccOpts || r;
-  for (const [s, u] of l)
-    t[s] = u;
+  for (const [s, f] of l)
+    t[s] = f;
   return t;
 }, Y = { class: "bg-white rounded-2xl w-full max-w-[630px] p-8 shadow-xl" }, J = {
   class: "text-2xl font-bold text-black mb-8",
   style: { "letter-spacing": "0" }
 }, X = { class: "flex gap-4 pt-6" };
-function ee(r, l, t, s, u, p) {
-  return t.isOpen ? (a(), i("div", {
+function ee(r, l, t, s, f, m) {
+  return t.isOpen ? (n(), i("div", {
     key: 0,
     class: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4",
-    onClick: z(s.handleClose, ["self"])
+    onClick: S(s.handleClose, ["self"])
   }, [
     e("div", Y, [
       o(" Header "),
       e(
         "h2",
         J,
-        c(t.title),
+        u(t.title),
         1
         /* TEXT */
       ),
@@ -55,7 +55,7 @@ function ee(r, l, t, s, u, p) {
             class: "flex-1 h-8 flex items-center justify-center px-4 text-gray-800 rounded-xl hover:bg-gray-50 transition-colors font-medium",
             style: { "font-size": "12px" }
           },
-          c(t.secondaryButtonText),
+          u(t.secondaryButtonText),
           1
           /* TEXT */
         ),
@@ -66,7 +66,7 @@ function ee(r, l, t, s, u, p) {
             class: "flex-1 h-8 px-4 bg-black text-white rounded-xl hover:bg-gray-800 transition-colors font-medium",
             style: { "font-size": "12px" }
           },
-          c(t.primaryButtonText),
+          u(t.primaryButtonText),
           1
           /* TEXT */
         )
@@ -74,7 +74,7 @@ function ee(r, l, t, s, u, p) {
     ])
   ])) : o("v-if", !0);
 }
-const jt = /* @__PURE__ */ m(W, [["render", ee], ["__file", "/root/app/code/src/components/BaseModal.vue"]]), te = /* @__PURE__ */ b({
+const Ft = /* @__PURE__ */ g(K, [["render", ee], ["__file", "/root/app/code/src/components/BaseModal.vue"]]), te = /* @__PURE__ */ w({
   __name: "ButtonComponent",
   props: {
     variant: { type: String, required: !1, default: "primary" },
@@ -85,25 +85,25 @@ const jt = /* @__PURE__ */ m(W, [["render", ee], ["__file", "/root/app/code/src/
   emits: ["click"],
   setup(r, { expose: l, emit: t }) {
     l();
-    const s = t, p = { emit: s, handleClick: () => {
+    const s = t, m = { emit: s, handleClick: () => {
       s("click");
     }, get ArrowLeft() {
-      return Z;
-    }, get ArrowRight() {
       return R;
+    }, get ArrowRight() {
+      return W;
     }, get Share2() {
       return O;
     }, get ChevronDown() {
       return U;
     } };
-    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
   }
 }), le = ["disabled"];
-function oe(r, l, t, s, u, p) {
-  return a(), i("button", {
+function oe(r, l, t, s, f, m) {
+  return n(), i("button", {
     onClick: s.handleClick,
     disabled: t.disabled || t.variant === "disabled",
-    class: k([
+    class: C([
       "flex items-center justify-center gap-3 h-8 rounded-lg font-medium text-sm transition-all duration-200",
       {
         "bg-black text-white hover:bg-gray-800": t.variant === "primary" && !t.disabled,
@@ -112,7 +112,7 @@ function oe(r, l, t, s, u, p) {
         "cursor-not-allowed": t.variant === "disabled" || t.disabled
       }
     ]),
-    style: P({
+    style: D({
       paddingLeft: t.rightIcon === "dropdown" ? "16px" : "24px",
       paddingRight: t.rightIcon === "dropdown" ? "8px" : "24px",
       ...t.variant === "outlined" && !t.disabled && t.rightIcon === "dropdown" ? { borderWidth: "1px", borderColor: "#C8C8C8" } : t.variant === "outlined" && !t.disabled ? { borderWidth: "1px", borderColor: "black" } : {},
@@ -120,40 +120,40 @@ function oe(r, l, t, s, u, p) {
     })
   }, [
     o(" Left Icon "),
-    t.leftIcon === "arrow" ? (a(), w(s.ArrowLeft, {
+    t.leftIcon === "arrow" ? (n(), _(s.ArrowLeft, {
       key: 0,
       size: 20,
       "stroke-width": 1.5
-    })) : t.leftIcon === "share" ? (a(), w(s.Share2, {
+    })) : t.leftIcon === "share" ? (n(), _(s.Share2, {
       key: 1,
       size: 20,
       "stroke-width": 1.5
     })) : o("v-if", !0),
     o(" Text Slot "),
     H(r.$slots, "default", {}, () => [
-      l[0] || (l[0] = M(
+      l[0] || (l[0] = c(
         "Button",
         -1
         /* CACHED */
       ))
     ]),
     o(" Right Icon "),
-    t.rightIcon === "arrow" ? (a(), w(s.ArrowRight, {
+    t.rightIcon === "arrow" ? (n(), _(s.ArrowRight, {
       key: 2,
       size: 20,
       "stroke-width": 1.5
-    })) : t.rightIcon === "share" ? (a(), w(s.Share2, {
+    })) : t.rightIcon === "share" ? (n(), _(s.Share2, {
       key: 3,
       size: 20,
       "stroke-width": 1.5
-    })) : t.rightIcon === "dropdown" ? (a(), w(s.ChevronDown, {
+    })) : t.rightIcon === "dropdown" ? (n(), _(s.ChevronDown, {
       key: 4,
       size: 20,
       "stroke-width": 1.5
     })) : o("v-if", !0)
   ], 14, le);
 }
-const Vt = /* @__PURE__ */ m(te, [["render", oe], ["__file", "/root/app/code/src/components/ButtonComponent.vue"]]), se = /* @__PURE__ */ b({
+const jt = /* @__PURE__ */ g(te, [["render", oe], ["__file", "/root/app/code/src/components/ButtonComponent.vue"]]), se = /* @__PURE__ */ w({
   __name: "CampaignCard",
   props: {
     showImage: { type: Boolean, required: !1, default: !0 },
@@ -179,7 +179,7 @@ const Vt = /* @__PURE__ */ m(te, [["render", oe], ["__file", "/root/app/code/src
     const s = { props: r };
     return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }
-}), ae = { class: "absolute inset-0" }, ie = ["src", "alt"], ne = { class: "relative flex justify-between items-start w-full" }, re = {
+}), ne = { class: "absolute inset-0" }, ie = ["src", "alt"], ae = { class: "relative flex justify-between items-start w-full" }, re = {
   key: 0,
   class: "flex items-center gap-2"
 }, de = {
@@ -199,11 +199,11 @@ const Vt = /* @__PURE__ */ m(te, [["render", oe], ["__file", "/root/app/code/src
   key: 1,
   class: "flex flex-col",
   style: { padding: "0 16px", gap: "8px", margin: "0" }
-}, he = {
+}, xe = {
   key: 0,
   class: "text-black",
   style: { "font-size": "16px", "font-weight": "600", "line-height": "20px" }
-}, xe = {
+}, he = {
   key: 1,
   class: "text-black",
   style: { "font-size": "12px", "font-weight": "400", "line-height": "18px" }
@@ -227,25 +227,25 @@ const Vt = /* @__PURE__ */ m(te, [["render", oe], ["__file", "/root/app/code/src
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function be(r, l, t, s, u, p) {
-  return a(), i(
+function be(r, l, t, s, f, m) {
+  return n(), i(
     "div",
     {
-      class: k(["flex flex-col bg-white rounded-2xl shadow-card w-full", t.cardClasses]),
+      class: C(["flex flex-col bg-white rounded-2xl shadow-card w-full", t.cardClasses]),
       style: { gap: "16px", padding: "16px 0 24px 0" }
     },
     [
       o(" Card Image Section "),
-      t.showImage ? (a(), i(
+      t.showImage ? (n(), i(
         "div",
         {
           key: 0,
-          class: k(["relative flex-shrink-0 overflow-hidden rounded-t-2xl", t.imageClasses]),
+          class: C(["relative flex-shrink-0 overflow-hidden rounded-t-2xl", t.imageClasses]),
           style: { height: "126px", margin: "-16px 0 0 0", padding: "16px 16px 0 16px", display: "flex", "justify-content": "space-between", "align-items": "flex-start", width: "100%" }
         },
         [
           o(" Background Image "),
-          e("div", ae, [
+          e("div", ne, [
             e("img", {
               src: t.imageSrc,
               alt: t.imageAlt,
@@ -253,32 +253,32 @@ function be(r, l, t, s, u, p) {
             }, null, 8, ie)
           ]),
           o(" Card Header Overlay "),
-          e("div", ne, [
+          e("div", ae, [
             o(" Labels/Pills "),
-            t.showLabels ? (a(), i("div", re, [
-              t.label1 ? (a(), i(
+            t.showLabels ? (n(), i("div", re, [
+              t.label1 ? (n(), i(
                 "div",
                 de,
-                c(t.label1),
+                u(t.label1),
                 1
                 /* TEXT */
               )) : o("v-if", !0),
-              t.label2 ? (a(), i(
+              t.label2 ? (n(), i(
                 "div",
                 ce,
-                c(t.label2),
+                u(t.label2),
                 1
                 /* TEXT */
               )) : o("v-if", !0)
             ])) : o("v-if", !0),
             o(" Menu Button "),
-            t.showMenu ? (a(), i("button", {
+            t.showMenu ? (n(), i("button", {
               key: 1,
-              onClick: l[0] || (l[0] = (n) => r.$emit("menu-click")),
+              onClick: l[0] || (l[0] = (a) => r.$emit("menu-click")),
               class: "flex justify-center items-center flex-shrink-0 rounded-full bg-white hover:bg-gray-100 transition-colors",
               style: { width: "32px", height: "32px" }
             }, [
-              (a(), i("svg", ue, l[2] || (l[2] = [
+              (n(), i("svg", ue, l[2] || (l[2] = [
                 e(
                   "path",
                   {
@@ -326,31 +326,31 @@ function be(r, l, t, s, u, p) {
         /* CLASS */
       )) : o("v-if", !0),
       o(" Content Section "),
-      t.showContent ? (a(), i("div", fe, [
-        t.title ? (a(), i(
+      t.showContent ? (n(), i("div", fe, [
+        t.title ? (n(), i(
           "h3",
-          he,
-          c(t.title),
+          xe,
+          u(t.title),
           1
           /* TEXT */
         )) : o("v-if", !0),
-        t.description ? (a(), i(
+        t.description ? (n(), i(
           "p",
-          xe,
-          c(t.description),
+          he,
+          u(t.description),
           1
           /* TEXT */
         )) : o("v-if", !0)
       ])) : o("v-if", !0),
       o(" Footer Section "),
-      t.showFooter ? (a(), i("div", pe, [
+      t.showFooter ? (n(), i("div", pe, [
         e("div", me, [
           o(" Member Avatars "),
-          t.showMembers ? (a(), i("div", ge, [
-            (a(!0), i(
-              g,
+          t.showMembers ? (n(), i("div", ge, [
+            (n(!0), i(
+              v,
               null,
-              _(t.members, (n, d) => (a(), i("div", {
+              k(t.members, (a, d) => (n(), i("div", {
                 key: d,
                 class: "relative",
                 style: { width: "24px", height: "24px" }
@@ -379,7 +379,7 @@ function be(r, l, t, s, u, p) {
                 e(
                   "div",
                   ve,
-                  c(n),
+                  u(a),
                   1
                   /* TEXT */
                 )
@@ -389,13 +389,13 @@ function be(r, l, t, s, u, p) {
             ))
           ])) : o("v-if", !0),
           o(" Add Button "),
-          t.showAddButton ? (a(), i("button", {
+          t.showAddButton ? (n(), i("button", {
             key: 1,
-            onClick: l[1] || (l[1] = (n) => r.$emit("add-click")),
+            onClick: l[1] || (l[1] = (a) => r.$emit("add-click")),
             class: "flex justify-center items-center flex-shrink-0 rounded-full bg-black hover:bg-gray-800 transition-colors",
             style: { width: "32px", height: "32px" }
           }, [
-            (a(), i("svg", ye, l[4] || (l[4] = [
+            (n(), i("svg", ye, l[4] || (l[4] = [
               e(
                 "path",
                 {
@@ -431,7 +431,7 @@ function be(r, l, t, s, u, p) {
     /* CLASS */
   );
 }
-const Dt = /* @__PURE__ */ m(se, [["render", be], ["__file", "/root/app/code/src/components/CampaignCard.vue"]]), we = /* @__PURE__ */ b({
+const Vt = /* @__PURE__ */ g(se, [["render", be], ["__file", "/root/app/code/src/components/CampaignCard.vue"]]), we = /* @__PURE__ */ w({
   __name: "CardComponents",
   props: {
     showImage: { type: Boolean, required: !1, default: !0 },
@@ -455,7 +455,7 @@ const Dt = /* @__PURE__ */ m(se, [["render", be], ["__file", "/root/app/code/src
   setup(r, { expose: l }) {
     l();
     const s = { props: r, get MoreHorizontal() {
-      return G;
+      return Z;
     } };
     return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }
@@ -489,33 +489,33 @@ const Dt = /* @__PURE__ */ m(se, [["render", be], ["__file", "/root/app/code/src
 }, qe = {
   class: "flex justify-between items-end flex-1",
   style: { height: "24px" }
-}, Ae = {
+}, Te = {
   key: 0,
   class: "flex items-center",
   style: { gap: "4px" }
-}, Te = {
+}, Ae = {
   class: "absolute left-0 top-0 flex items-center justify-center text-white",
   style: { width: "24px", height: "24px", "font-size": "8px", "font-weight": "500", "line-height": "24px", "letter-spacing": "-0.08px" }
-}, je = {
+}, Fe = {
   style: { width: "12px", height: "12px" },
   viewBox: "0 0 12 12",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function Ve(r, l, t, s, u, p) {
-  return a(), i(
+function je(r, l, t, s, f, m) {
+  return n(), i(
     "div",
     {
-      class: k(["flex flex-col bg-white rounded-2xl shadow-card w-full", t.cardClasses]),
+      class: C(["flex flex-col bg-white rounded-2xl shadow-card w-full", t.cardClasses]),
       style: { gap: "16px", padding: "16px 0 24px 0" }
     },
     [
       o(" Card Image Section "),
-      t.showImage ? (a(), i(
+      t.showImage ? (n(), i(
         "div",
         {
           key: 0,
-          class: k(["relative flex-shrink-0 overflow-hidden rounded-t-2xl", t.imageClasses]),
+          class: C(["relative flex-shrink-0 overflow-hidden rounded-t-2xl", t.imageClasses]),
           style: { height: "126px", margin: "-16px 0 0 0", padding: "16px 16px 0 16px", display: "flex", "justify-content": "space-between", "align-items": "flex-start", width: "100%" }
         },
         [
@@ -530,26 +530,26 @@ function Ve(r, l, t, s, u, p) {
           o(" Card Header Overlay "),
           e("div", Ce, [
             o(" Labels/Pills "),
-            t.showLabels ? (a(), i("div", ze, [
-              t.label1 ? (a(), i(
+            t.showLabels ? (n(), i("div", ze, [
+              t.label1 ? (n(), i(
                 "div",
                 Se,
-                c(t.label1),
+                u(t.label1),
                 1
                 /* TEXT */
               )) : o("v-if", !0),
-              t.label2 ? (a(), i(
+              t.label2 ? (n(), i(
                 "div",
                 Me,
-                c(t.label2),
+                u(t.label2),
                 1
                 /* TEXT */
               )) : o("v-if", !0)
             ])) : o("v-if", !0),
             o(" Menu Button "),
-            t.showMenu ? (a(), i("button", {
+            t.showMenu ? (n(), i("button", {
               key: 1,
-              onClick: l[0] || (l[0] = (n) => r.$emit("menu-click")),
+              onClick: l[0] || (l[0] = (a) => r.$emit("menu-click")),
               class: "flex justify-center items-center flex-shrink-0 rounded-full bg-white hover:bg-gray-100 transition-colors",
               style: { width: "24px", height: "24px" }
             }, [
@@ -565,31 +565,31 @@ function Ve(r, l, t, s, u, p) {
         /* CLASS */
       )) : o("v-if", !0),
       o(" Content Section "),
-      t.showContent ? (a(), i("div", Ie, [
-        t.title ? (a(), i(
+      t.showContent ? (n(), i("div", Ie, [
+        t.title ? (n(), i(
           "h3",
           Be,
-          c(t.title),
+          u(t.title),
           1
           /* TEXT */
         )) : o("v-if", !0),
-        t.description ? (a(), i(
+        t.description ? (n(), i(
           "p",
           Le,
-          c(t.description),
+          u(t.description),
           1
           /* TEXT */
         )) : o("v-if", !0)
       ])) : o("v-if", !0),
       o(" Footer Section "),
-      t.showFooter ? (a(), i("div", He, [
+      t.showFooter ? (n(), i("div", He, [
         e("div", qe, [
           o(" Member Avatars "),
-          t.showMembers ? (a(), i("div", Ae, [
-            (a(!0), i(
-              g,
+          t.showMembers ? (n(), i("div", Te, [
+            (n(!0), i(
+              v,
               null,
-              _(t.members, (n, d) => (a(), i("div", {
+              k(t.members, (a, d) => (n(), i("div", {
                 key: d,
                 class: "relative",
                 style: { width: "24px", height: "24px" }
@@ -617,8 +617,8 @@ function Ve(r, l, t, s, u, p) {
                 )),
                 e(
                   "div",
-                  Te,
-                  c(n),
+                  Ae,
+                  u(a),
                   1
                   /* TEXT */
                 )
@@ -628,13 +628,13 @@ function Ve(r, l, t, s, u, p) {
             ))
           ])) : o("v-if", !0),
           o(" Add Button "),
-          t.showAddButton ? (a(), i("button", {
+          t.showAddButton ? (n(), i("button", {
             key: 1,
-            onClick: l[1] || (l[1] = (n) => r.$emit("add-click")),
+            onClick: l[1] || (l[1] = (a) => r.$emit("add-click")),
             class: "flex justify-center items-center flex-shrink-0 rounded-full bg-black hover:bg-gray-800 transition-colors",
             style: { width: "24px", height: "24px" }
           }, [
-            (a(), i("svg", je, l[3] || (l[3] = [
+            (n(), i("svg", Fe, l[3] || (l[3] = [
               e(
                 "path",
                 {
@@ -670,7 +670,7 @@ function Ve(r, l, t, s, u, p) {
     /* CLASS */
   );
 }
-const Pt = /* @__PURE__ */ m(we, [["render", Ve], ["__file", "/root/app/code/src/components/CardComponents.vue"]]), De = /* @__PURE__ */ b({
+const Dt = /* @__PURE__ */ g(we, [["render", je], ["__file", "/root/app/code/src/components/CardComponents.vue"]]), Ve = /* @__PURE__ */ w({
   __name: "InviteCollaboratorsModalV2",
   props: {
     isOpen: { type: Boolean, required: !1, default: !1 },
@@ -680,57 +680,57 @@ const Pt = /* @__PURE__ */ m(we, [["render", Ve], ["__file", "/root/app/code/src
   emits: ["close", "add"],
   setup(r, { expose: l, emit: t }) {
     l();
-    const s = r, u = t, p = C(null), n = C(!1), d = C(""), f = C([]), y = C([...s.initialCollaborators]), q = N(() => s.availableUsersList.filter((h) => {
-      const x = !y.value.some((D) => D.email === h.email);
-      if (!d.value) return x;
-      const v = d.value.toLowerCase();
-      return x && (h.name.toLowerCase().includes(v) || h.email.toLowerCase().includes(v));
-    })), A = (h) => f.value.some((x) => x.email === h.email), T = (h) => {
-      const x = f.value.findIndex((v) => v.email === h.email);
-      x > -1 ? f.value.splice(x, 1) : f.value.push(h), d.value = "";
+    const s = r, f = t, m = z(null), a = z(!1), d = z(""), x = z([]), b = z([...s.initialCollaborators]), q = N(() => s.availableUsersList.filter((h) => {
+      const p = !b.value.some((V) => V.email === h.email);
+      if (!d.value) return p;
+      const y = d.value.toLowerCase();
+      return p && (h.name.toLowerCase().includes(y) || h.email.toLowerCase().includes(y));
+    })), T = (h) => x.value.some((p) => p.email === h.email), A = (h) => {
+      const p = x.value.findIndex((y) => y.email === h.email);
+      p > -1 ? x.value.splice(p, 1) : x.value.push(h), d.value = "";
+    }, F = (h) => {
+      const p = x.value.findIndex((y) => y.email === h.email);
+      p > -1 && x.value.splice(p, 1);
     }, j = (h) => {
-      const x = f.value.findIndex((v) => v.email === h.email);
-      x > -1 && f.value.splice(x, 1);
-    }, V = (h) => {
-      const x = y.value.findIndex((v) => v.email === h.email);
-      x > -1 && y.value.splice(x, 1);
+      const p = b.value.findIndex((y) => y.email === h.email);
+      p > -1 && b.value.splice(p, 1);
     }, B = () => {
-      p.value?.focus();
-    }, L = { props: s, emit: u, hiddenInput: p, showDropdown: n, searchQuery: d, selectedUsers: f, collaborators: y, availableUsers: q, isUserSelected: A, toggleUser: T, removeUser: j, removeCollaborator: V, focusInput: B, toggleDropdown: () => {
-      n.value = !n.value, n.value && B();
+      m.value?.focus();
+    }, L = { props: s, emit: f, hiddenInput: m, showDropdown: a, searchQuery: d, selectedUsers: x, collaborators: b, availableUsers: q, isUserSelected: T, toggleUser: A, removeUser: F, removeCollaborator: j, focusInput: B, toggleDropdown: () => {
+      a.value = !a.value, a.value && B();
     }, handleBlur: () => {
       setTimeout(() => {
-        n.value = !1;
+        a.value = !1;
       }, 200);
     }, closeModal: () => {
-      u("close"), f.value = [], d.value = "", n.value = !1;
+      f("close"), x.value = [], d.value = "", a.value = !1;
     }, addCollaborators: () => {
-      f.value.length > 0 && (f.value.forEach((h) => {
-        y.value.some((x) => x.email === h.email) || y.value.push(h);
-      }), u("add", f.value, y.value), f.value = [], d.value = "", n.value = !1), u("close");
+      x.value.length > 0 && (x.value.forEach((h) => {
+        b.value.some((p) => p.email === h.email) || b.value.push(h);
+      }), f("add", x.value, b.value), x.value = [], d.value = "", a.value = !1), f("close");
     } };
     return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;
   }
-}), Pe = { class: "bg-white rounded-2xl w-full max-w-[630px] p-8 shadow-xl" }, Ne = { class: "relative mb-6" }, Fe = { class: "flex flex-wrap gap-2 flex-1" }, Ee = ["onClick"], Ue = {
+}), De = { class: "bg-white rounded-2xl w-full max-w-[630px] p-8 shadow-xl" }, Ne = { class: "relative mb-6" }, Pe = { class: "flex flex-wrap gap-2 flex-1" }, Ee = ["onClick"], Ue = {
   key: 0,
   class: "absolute top-full left-0 right-0 mt-2 bg-white border border-gray-200 rounded-xl shadow-lg max-h-64 overflow-y-auto z-10"
-}, Oe = ["onMousedown"], Re = { class: "flex-1" }, Ze = { class: "text-sm font-semibold text-black" }, Ge = { class: "text-sm text-gray-600" }, Qe = {
+}, Oe = ["onMousedown"], We = { class: "flex-1" }, Re = { class: "text-sm font-semibold text-black" }, Ze = { class: "text-sm text-gray-600" }, Ge = {
   key: 0,
   class: "w-5 h-5 flex items-center justify-center text-black"
-}, $e = { class: "collaborators-list mb-8 max-h-96 overflow-y-auto" }, Ke = {
+}, Qe = { class: "collaborators-list mb-8 max-h-96 overflow-y-auto" }, $e = {
   class: "font-semibold text-black",
   style: { "font-size": "14px" }
-}, We = {
+}, Ke = {
   class: "text-black",
   style: { "font-size": "14px" }
 }, Ye = ["onClick"];
-function Je(r, l, t, s, u, p) {
-  return t.isOpen ? (a(), i("div", {
+function Je(r, l, t, s, f, m) {
+  return t.isOpen ? (n(), i("div", {
     key: 0,
     class: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4",
-    onClick: z(s.closeModal, ["self"])
+    onClick: S(s.closeModal, ["self"])
   }, [
-    e("div", Pe, [
+    e("div", De, [
       o(" Header "),
       l[3] || (l[3] = e(
         "h2",
@@ -763,21 +763,21 @@ function Je(r, l, t, s, u, p) {
             onClick: s.toggleDropdown
           }, " + "),
           o(" Selected User Pills "),
-          e("div", Fe, [
-            (a(!0), i(
-              g,
+          e("div", Pe, [
+            (n(!0), i(
+              v,
               null,
-              _(s.selectedUsers, (n) => (a(), i("span", {
-                key: n.email,
+              k(s.selectedUsers, (a) => (n(), i("span", {
+                key: a.email,
                 class: "inline-flex items-center gap-2 px-3 py-1.5 bg-gray-100 rounded-lg text-sm font-normal text-black"
               }, [
-                M(
-                  c(n.display) + " ",
+                c(
+                  u(a.display) + " ",
                   1
                   /* TEXT */
                 ),
                 e("button", {
-                  onClick: z((d) => s.removeUser(n), ["stop"]),
+                  onClick: S((d) => s.removeUser(a), ["stop"]),
                   class: "text-gray-600 hover:text-black transition-colors"
                 }, " × ", 8, Ee)
               ]))),
@@ -785,16 +785,16 @@ function Je(r, l, t, s, u, p) {
               /* KEYED_FRAGMENT */
             )),
             o(" Hidden Input for Focus "),
-            F(e(
+            P(e(
               "input",
               {
                 ref: "hiddenInput",
                 type: "text",
                 class: "flex-1 min-w-[100px] outline-none bg-transparent text-black placeholder-gray-400",
                 placeholder: "",
-                onFocus: l[0] || (l[0] = (n) => s.showDropdown = !0),
+                onFocus: l[0] || (l[0] = (a) => s.showDropdown = !0),
                 onBlur: s.handleBlur,
-                "onUpdate:modelValue": l[1] || (l[1] = (n) => s.searchQuery = n)
+                "onUpdate:modelValue": l[1] || (l[1] = (a) => s.searchQuery = a)
               },
               null,
               544
@@ -805,33 +805,33 @@ function Je(r, l, t, s, u, p) {
           ])
         ]),
         o(" Dropdown "),
-        s.showDropdown ? (a(), i("div", Ue, [
-          (a(!0), i(
-            g,
+        s.showDropdown ? (n(), i("div", Ue, [
+          (n(!0), i(
+            v,
             null,
-            _(s.availableUsers, (n) => (a(), i("button", {
-              key: n.email,
+            k(s.availableUsers, (a) => (n(), i("button", {
+              key: a.email,
               type: "button",
               class: "w-full px-4 py-3 text-left hover:bg-gray-50 transition-colors flex items-center justify-between group",
-              onMousedown: z((d) => s.toggleUser(n), ["prevent"])
+              onMousedown: S((d) => s.toggleUser(a), ["prevent"])
             }, [
-              e("div", Re, [
+              e("div", We, [
                 e(
                   "div",
-                  Ze,
-                  c(n.name),
+                  Re,
+                  u(a.name),
                   1
                   /* TEXT */
                 ),
                 e(
                   "div",
-                  Ge,
-                  c(n.email),
+                  Ze,
+                  u(a.email),
                   1
                   /* TEXT */
                 )
               ]),
-              s.isUserSelected(n) ? (a(), i("div", Qe, " ✓ ")) : o("v-if", !0)
+              s.isUserSelected(a) ? (n(), i("div", Ge, " ✓ ")) : o("v-if", !0)
             ], 40, Oe))),
             128
             /* KEYED_FRAGMENT */
@@ -839,30 +839,30 @@ function Je(r, l, t, s, u, p) {
         ])) : o("v-if", !0)
       ]),
       o(" Collaborators List "),
-      e("div", $e, [
-        (a(!0), i(
-          g,
+      e("div", Qe, [
+        (n(!0), i(
+          v,
           null,
-          _(s.collaborators, (n) => (a(), i("div", {
-            key: n.email,
+          k(s.collaborators, (a) => (n(), i("div", {
+            key: a.email,
             class: "grid grid-cols-[1fr_1.5fr_auto] gap-4 items-center py-4 border-b border-gray-200"
           }, [
             e(
               "div",
-              Ke,
-              c(n.name),
+              $e,
+              u(a.name),
               1
               /* TEXT */
             ),
             e(
               "div",
-              We,
-              c(n.email),
+              Ke,
+              u(a.email),
               1
               /* TEXT */
             ),
             e("button", {
-              onClick: (d) => s.removeCollaborator(n),
+              onClick: (d) => s.removeCollaborator(a),
               class: "text-gray-800 hover:text-black transition-colors text-2xl leading-none"
             }, " × ", 8, Ye)
           ]))),
@@ -897,7 +897,7 @@ function Je(r, l, t, s, u, p) {
             -1
             /* CACHED */
           ),
-          M(
+          c(
             " Cancel ",
             -1
             /* CACHED */
@@ -912,7 +912,7 @@ function Je(r, l, t, s, u, p) {
     ])
   ])) : o("v-if", !0);
 }
-const Nt = /* @__PURE__ */ m(De, [["render", Je], ["__scopeId", "data-v-f6014a35"], ["__file", "/root/app/code/src/components/InviteCollaboratorsModalV2.vue"]]), Xe = /* @__PURE__ */ b({
+const Nt = /* @__PURE__ */ g(Ve, [["render", Je], ["__scopeId", "data-v-f6014a35"], ["__file", "/root/app/code/src/components/InviteCollaboratorsModalV2.vue"]]), Xe = /* @__PURE__ */ w({
   __name: "NavigationSidebar",
   props: {
     items: { type: Array, required: !1, default: () => [
@@ -927,21 +927,21 @@ const Nt = /* @__PURE__ */ m(De, [["render", Je], ["__scopeId", "data-v-f6014a35
   emits: ["item-click"],
   setup(r, { expose: l, emit: t }) {
     l();
-    const s = t, n = { emit: s, handleItemClick: (d) => {
+    const s = t, a = { emit: s, handleItemClick: (d) => {
       s("item-click", d);
     }, getIconColor: (d) => d ? "#C3FF00" : "white", get Home() {
-      return K;
-    }, get MessageSquare() {
       return $;
-    }, get ToyBrick() {
+    }, get MessageSquare() {
       return Q;
+    }, get ToyBrick() {
+      return G;
     } };
-    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
-}), et = { class: "sidebar-nav group bg-black flex flex-col justify-between shadow-md" }, tt = { class: "pt-10 px-2 flex flex-col gap-8" }, lt = { class: "flex flex-col gap-4" }, ot = ["onClick"], st = { class: "nav-label text-sm text-gray-300 whitespace-nowrap" }, at = { class: "flex flex-col items-start px-4 pb-8 gap-4" }, it = { class: "profile-section flex items-center gap-3 w-full" }, nt = { class: "profile-text flex-1 min-w-0" }, rt = { class: "text-sm text-white font-medium whitespace-nowrap" }, dt = { class: "text-[10px] text-gray-400 whitespace-nowrap" };
-function ct(r, l, t, s, u, p) {
-  return a(), i(
-    g,
+}), et = { class: "sidebar-nav group bg-black flex flex-col justify-between shadow-md" }, tt = { class: "pt-10 px-2 flex flex-col gap-8" }, lt = { class: "flex flex-col gap-4" }, ot = ["onClick"], st = { class: "nav-label text-sm text-gray-300 whitespace-nowrap" }, nt = { class: "flex flex-col items-start px-4 pb-8 gap-4" }, it = { class: "profile-section flex items-center gap-3 w-full" }, at = { class: "profile-text flex-1 min-w-0" }, rt = { class: "text-sm text-white font-medium whitespace-nowrap" }, dt = { class: "text-[10px] text-gray-400 whitespace-nowrap" };
+function ct(r, l, t, s, f, m) {
+  return n(), i(
+    v,
     null,
     [
       o(" Expandable Sidebar Navigation "),
@@ -949,26 +949,26 @@ function ct(r, l, t, s, u, p) {
         o(" Top Section "),
         e("div", tt, [
           o(" Logo "),
-          l[0] || (l[0] = S('<div class="px-2" data-v-4c3eb68c><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-4c3eb68c><path d="M0 11.8333V0L11.8333 11.8333H0Z" fill="white" data-v-4c3eb68c></path><path d="M11.8333 12.166V23.9994L0 12.166H11.8333Z" fill="white" data-v-4c3eb68c></path><path d="M24 11.8333V0L12.1667 11.8333H24Z" fill="white" data-v-4c3eb68c></path><path d="M12.1665 12.166H23.9998L12.1665 23.9994V12.166Z" fill="white" data-v-4c3eb68c></path></svg></div>', 1)),
+          l[0] || (l[0] = M('<div class="px-2" data-v-4c3eb68c><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-4c3eb68c><path d="M0 11.8333V0L11.8333 11.8333H0Z" fill="white" data-v-4c3eb68c></path><path d="M11.8333 12.166V23.9994L0 12.166H11.8333Z" fill="white" data-v-4c3eb68c></path><path d="M24 11.8333V0L12.1667 11.8333H24Z" fill="white" data-v-4c3eb68c></path><path d="M12.1665 12.166H23.9998L12.1665 23.9994V12.166Z" fill="white" data-v-4c3eb68c></path></svg></div>', 1)),
           o(" Navigation Items "),
           e("div", lt, [
-            (a(!0), i(
-              g,
+            (n(!0), i(
+              v,
               null,
-              _(t.items, (n, d) => (a(), i("div", {
+              k(t.items, (a, d) => (n(), i("div", {
                 key: d,
-                onClick: (f) => s.handleItemClick(d),
-                class: k(["nav-item flex items-center gap-[18px] px-2.5 py-2 rounded-lg cursor-pointer transition-colors duration-200", t.activeItem === d ? "bg-[#232323]" : "hover:bg-[#232323]"])
+                onClick: (x) => s.handleItemClick(d),
+                class: C(["nav-item flex items-center gap-[18px] px-2.5 py-2 rounded-lg cursor-pointer transition-colors duration-200", t.activeItem === d ? "bg-[#232323]" : "hover:bg-[#232323]"])
               }, [
                 o(" Dashboard Icon "),
-                n.icon === "dashboard" ? (a(), w(s.Home, {
+                a.icon === "dashboard" ? (n(), _(s.Home, {
                   key: 0,
                   class: "flex-shrink-0",
                   size: 20,
                   "stroke-width": 1.5,
                   color: s.getIconColor(t.activeItem === d)
-                }, null, 8, ["color"])) : n.icon === "conversations" ? (a(), i(
-                  g,
+                }, null, 8, ["color"])) : a.icon === "conversations" ? (n(), i(
+                  v,
                   { key: 1 },
                   [
                     o(" Conversations Icon "),
@@ -981,8 +981,8 @@ function ct(r, l, t, s, u, p) {
                   ],
                   2112
                   /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                )) : n.icon === "templates" ? (a(), i(
-                  g,
+                )) : a.icon === "templates" ? (n(), i(
+                  v,
                   { key: 2 },
                   [
                     o(" Templates Icon "),
@@ -999,7 +999,7 @@ function ct(r, l, t, s, u, p) {
                 e(
                   "span",
                   st,
-                  c(n.name),
+                  u(a.name),
                   1
                   /* TEXT */
                 )
@@ -1010,27 +1010,27 @@ function ct(r, l, t, s, u, p) {
           ])
         ]),
         o(" Bottom Section - Profile "),
-        e("div", at, [
+        e("div", nt, [
           o(" User Profile "),
           e("div", it, [
-            l[1] || (l[1] = S('<div class="relative flex-shrink-0" data-v-4c3eb68c><svg width="32" height="32" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-4c3eb68c><circle cx="20" cy="20" r="20" fill="#5D5D5D" data-v-4c3eb68c></circle></svg><svg class="absolute top-2 left-2" width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-4c3eb68c><path d="M15.8332 17.5V15.8333C15.8332 14.9493 15.482 14.1014 14.8569 13.4763C14.2317 12.8512 13.3839 12.5 12.4998 12.5H7.49984C6.61578 12.5 5.76794 12.8512 5.14281 13.4763C4.51769 14.1014 4.1665 14.9493 4.1665 15.8333V17.5M13.3332 5.83333C13.3332 7.67428 11.8408 9.16667 9.99984 9.16667C8.15889 9.16667 6.6665 7.67428 6.6665 5.83333C6.6665 3.99238 8.15889 2.5 9.99984 2.5C11.8408 2.5 13.3332 3.99238 13.3332 5.83333Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-v-4c3eb68c></path></svg></div>', 1)),
-            e("div", nt, [
+            l[1] || (l[1] = M('<div class="relative flex-shrink-0" data-v-4c3eb68c><svg width="32" height="32" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-4c3eb68c><circle cx="20" cy="20" r="20" fill="#5D5D5D" data-v-4c3eb68c></circle></svg><svg class="absolute top-2 left-2" width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-4c3eb68c><path d="M15.8332 17.5V15.8333C15.8332 14.9493 15.482 14.1014 14.8569 13.4763C14.2317 12.8512 13.3839 12.5 12.4998 12.5H7.49984C6.61578 12.5 5.76794 12.8512 5.14281 13.4763C4.51769 14.1014 4.1665 14.9493 4.1665 15.8333V17.5M13.3332 5.83333C13.3332 7.67428 11.8408 9.16667 9.99984 9.16667C8.15889 9.16667 6.6665 7.67428 6.6665 5.83333C6.6665 3.99238 8.15889 2.5 9.99984 2.5C11.8408 2.5 13.3332 3.99238 13.3332 5.83333Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-v-4c3eb68c></path></svg></div>', 1)),
+            e("div", at, [
               e(
                 "div",
                 rt,
-                c(t.userName),
+                u(t.userName),
                 1
                 /* TEXT */
               ),
               e(
                 "div",
                 dt,
-                c(t.userVersion),
+                u(t.userVersion),
                 1
                 /* TEXT */
               )
             ]),
-            l[2] || (l[2] = S('<button class="profile-menu flex-shrink-0" data-v-4c3eb68c><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-4c3eb68c><path fill-rule="evenodd" clip-rule="evenodd" d="M10.0007 1.66797C10.4427 1.66797 10.8666 1.84356 11.1792 2.15612C11.4917 2.46868 11.6673 2.89261 11.6673 3.33464C11.6673 3.77666 11.4917 4.20059 11.1792 4.51315C10.8666 4.82571 10.4427 5.0013 10.0007 5.0013C9.55862 5.0013 9.1347 4.82571 8.82214 4.51315C8.50958 4.20059 8.33398 3.77666 8.33398 3.33464C8.33398 2.89261 8.50958 2.46868 8.82214 2.15612C9.1347 1.84356 9.55862 1.66797 10.0007 1.66797Z" fill="white" data-v-4c3eb68c></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10.0007 8.33203C10.4427 8.33203 10.8666 8.50763 11.1792 8.82019C11.4917 9.13275 11.6673 9.55667 11.6673 9.9987C11.6673 10.4407 11.4917 10.8646 11.1792 11.1772C10.8666 11.4898 10.4427 11.6654 10.0007 11.6654C9.55862 11.6654 9.1347 11.4898 8.82214 11.1772C8.50958 10.8646 8.33398 10.4407 8.33398 9.9987C8.33398 9.55667 8.50958 9.13275 8.82214 8.82019C9.1347 8.50763 9.55862 8.33203 10.0007 8.33203Z" fill="white" data-v-4c3eb68c></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99967 15C10.4417 15 10.8656 15.1756 11.1782 15.4882C11.4907 15.8007 11.6663 16.2246 11.6663 16.6667C11.6663 17.1087 11.4907 17.5326 11.1782 17.8452C10.8656 18.1577 10.4417 18.3333 9.99967 18.3333C9.55765 18.3333 9.13372 18.1577 8.82116 17.8452C8.5086 17.5326 8.33301 17.1087 8.33301 16.6667C8.33301 16.2246 8.5086 15.8007 8.82116 15.4882C9.13372 15.1756 9.55765 15 9.99967 15Z" fill="white" data-v-4c3eb68c></path></svg></button>', 1))
+            l[2] || (l[2] = M('<button class="profile-menu flex-shrink-0" data-v-4c3eb68c><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-4c3eb68c><path fill-rule="evenodd" clip-rule="evenodd" d="M10.0007 1.66797C10.4427 1.66797 10.8666 1.84356 11.1792 2.15612C11.4917 2.46868 11.6673 2.89261 11.6673 3.33464C11.6673 3.77666 11.4917 4.20059 11.1792 4.51315C10.8666 4.82571 10.4427 5.0013 10.0007 5.0013C9.55862 5.0013 9.1347 4.82571 8.82214 4.51315C8.50958 4.20059 8.33398 3.77666 8.33398 3.33464C8.33398 2.89261 8.50958 2.46868 8.82214 2.15612C9.1347 1.84356 9.55862 1.66797 10.0007 1.66797Z" fill="white" data-v-4c3eb68c></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10.0007 8.33203C10.4427 8.33203 10.8666 8.50763 11.1792 8.82019C11.4917 9.13275 11.6673 9.55667 11.6673 9.9987C11.6673 10.4407 11.4917 10.8646 11.1792 11.1772C10.8666 11.4898 10.4427 11.6654 10.0007 11.6654C9.55862 11.6654 9.1347 11.4898 8.82214 11.1772C8.50958 10.8646 8.33398 10.4407 8.33398 9.9987C8.33398 9.55667 8.50958 9.13275 8.82214 8.82019C9.1347 8.50763 9.55862 8.33203 10.0007 8.33203Z" fill="white" data-v-4c3eb68c></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99967 15C10.4417 15 10.8656 15.1756 11.1782 15.4882C11.4907 15.8007 11.6663 16.2246 11.6663 16.6667C11.6663 17.1087 11.4907 17.5326 11.1782 17.8452C10.8656 18.1577 10.4417 18.3333 9.99967 18.3333C9.55765 18.3333 9.13372 18.1577 8.82116 17.8452C8.5086 17.5326 8.33301 17.1087 8.33301 16.6667C8.33301 16.2246 8.5086 15.8007 8.82116 15.4882C9.13372 15.1756 9.55765 15 9.99967 15Z" fill="white" data-v-4c3eb68c></path></svg></button>', 1))
           ])
         ])
       ])
@@ -1039,7 +1039,7 @@ function ct(r, l, t, s, u, p) {
     /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
   );
 }
-const Ft = /* @__PURE__ */ m(Xe, [["render", ct], ["__scopeId", "data-v-4c3eb68c"], ["__file", "/root/app/code/src/components/NavigationSidebar.vue"]]), ut = /* @__PURE__ */ b({
+const Pt = /* @__PURE__ */ g(Xe, [["render", ct], ["__scopeId", "data-v-4c3eb68c"], ["__file", "/root/app/code/src/components/NavigationSidebar.vue"]]), ut = /* @__PURE__ */ w({
   __name: "TextStyles",
   setup(r, { expose: l }) {
     l();
@@ -1047,40 +1047,58 @@ const Ft = /* @__PURE__ */ m(Xe, [["render", ct], ["__scopeId", "data-v-4c3eb68c
     return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
   }
 }), ft = { class: "flex flex-col gap-12 w-full" };
-function ht(r, l, t, s, u, p) {
-  return a(), i("div", ft, [
-    o(" Deliverable Header "),
+function xt(r, l, t, s, f, m) {
+  return n(), i("div", ft, [
+    o(" h1 "),
     l[0] || (l[0] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
-        e("p", { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" }, "Deliverable Header"),
-        e("h1", { class: "deliverable-header" }, "Deliverable Header"),
-        e("code", { class: "text-xs bg-gray-100 px-2 py-1 rounded" }, "32px / 600 / 38px line-height")
+        e("p", { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" }, "h1"),
+        e("h1", { class: "text-h1" }, "This is a headline"),
+        e("p", { class: "text-sm text-gray-700 bg-gray-100 px-3 py-2 rounded" }, [
+          e("strong", null, "Class:"),
+          c(),
+          e("code", null, "text-h1"),
+          e("br"),
+          c(" Inter / Font Size: 32px / Font Weight: 600 / Line Height: 38px ")
+        ])
       ],
       -1
       /* CACHED */
     )),
-    o(" Page and Subheaders (Large) "),
+    o(" h2 "),
     l[1] || (l[1] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
-        e("p", { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" }, "Page and Subheaders (Large)"),
-        e("h2", { class: "page-subheader-large" }, "Page and Subheaders"),
-        e("code", { class: "text-xs bg-gray-100 px-2 py-1 rounded" }, "24px / 600 / 28px line-height")
+        e("p", { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" }, "h2"),
+        e("h2", { class: "text-h2" }, "This is a headline"),
+        e("p", { class: "text-sm text-gray-700 bg-gray-100 px-3 py-2 rounded" }, [
+          e("strong", null, "Class:"),
+          c(),
+          e("code", null, "text-h2"),
+          e("br"),
+          c(" Inter / Font Size: 24px / Font Weight: 600 / Line Height: 28px ")
+        ])
       ],
       -1
       /* CACHED */
     )),
-    o(" Page and Subheaders (Medium) "),
+    o(" h3 "),
     l[2] || (l[2] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
-        e("p", { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" }, "Page and Subheaders (Medium)"),
-        e("h3", { class: "page-subheader-medium" }, "Page and Subheaders"),
-        e("code", { class: "text-xs bg-gray-100 px-2 py-1 rounded" }, "20px / 600 / 28px line-height")
+        e("p", { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" }, "h3"),
+        e("h3", { class: "text-h3" }, "This is a headline"),
+        e("p", { class: "text-sm text-gray-700 bg-gray-100 px-3 py-2 rounded" }, [
+          e("strong", null, "Class:"),
+          c(),
+          e("code", null, "text-h3"),
+          e("br"),
+          c(" Inter / Font Size: 20px / Font Weight: 600 / Line Height: 28px ")
+        ])
       ],
       -1
       /* CACHED */
@@ -1091,8 +1109,14 @@ function ht(r, l, t, s, u, p) {
       { class: "flex flex-col gap-3" },
       [
         e("p", { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" }, "Card Headline Copy"),
-        e("h4", { class: "card-headline" }, "Card Headline Copy"),
-        e("code", { class: "text-xs bg-gray-100 px-2 py-1 rounded" }, "16px / 600 / 20px line-height / capitalize")
+        e("h4", { class: "text-card-headline" }, "Card Headline Copy"),
+        e("p", { class: "text-sm text-gray-700 bg-gray-100 px-3 py-2 rounded" }, [
+          e("strong", null, "Class:"),
+          c(),
+          e("code", null, "text-card-headline"),
+          e("br"),
+          c(" Inter / Font Size: 16px / Font Weight: 600 / Line Height: 20px / Text Transform: capitalize ")
+        ])
       ],
       -1
       /* CACHED */
@@ -1103,8 +1127,14 @@ function ht(r, l, t, s, u, p) {
       { class: "flex flex-col gap-3" },
       [
         e("p", { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" }, "Body Text (Large) - Header"),
-        e("p", { class: "body-text-large-header" }, "Header of body text content."),
-        e("code", { class: "text-xs bg-gray-100 px-2 py-1 rounded" }, "14px / 700 / 20px line-height")
+        e("p", { class: "text-body-lg-header" }, "Header of body text content."),
+        e("p", { class: "text-sm text-gray-700 bg-gray-100 px-3 py-2 rounded" }, [
+          e("strong", null, "Class:"),
+          c(),
+          e("code", null, "text-body-lg-header"),
+          e("br"),
+          c(" Inter / Font Size: 14px / Font Weight: 700 / Line Height: 20px ")
+        ])
       ],
       -1
       /* CACHED */
@@ -1115,8 +1145,14 @@ function ht(r, l, t, s, u, p) {
       { class: "flex flex-col gap-3" },
       [
         e("p", { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" }, "Body Text (Large)"),
-        e("p", { class: "body-text-large" }, "Body text content. Lorem ipsum dolere sit amet nonummy consectuter adspecit. Lorem ipsum dolere sit amet nonummy consectuter adspecit."),
-        e("code", { class: "text-xs bg-gray-100 px-2 py-1 rounded" }, "14px / 400 / 20px line-height")
+        e("p", { class: "text-body-lg" }, "Body text content. Lorem ipsum dolere sit amet nonummy consectuter adspecit. Lorem ipsum dolere sit amet nonummy consectuter adspecit."),
+        e("p", { class: "text-sm text-gray-700 bg-gray-100 px-3 py-2 rounded" }, [
+          e("strong", null, "Class:"),
+          c(),
+          e("code", null, "text-body-lg"),
+          e("br"),
+          c(" Inter / Font Size: 14px / Font Weight: 400 / Line Height: 20px ")
+        ])
       ],
       -1
       /* CACHED */
@@ -1127,8 +1163,14 @@ function ht(r, l, t, s, u, p) {
       { class: "flex flex-col gap-3" },
       [
         e("p", { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" }, "Body Text (Small) - Header"),
-        e("p", { class: "body-text-small-header" }, "Header of body text content."),
-        e("code", { class: "text-xs bg-gray-100 px-2 py-1 rounded" }, "12px / 700 / 20px line-height")
+        e("p", { class: "text-body-sm-header" }, "Header of body text content."),
+        e("p", { class: "text-sm text-gray-700 bg-gray-100 px-3 py-2 rounded" }, [
+          e("strong", null, "Class:"),
+          c(),
+          e("code", null, "text-body-sm-header"),
+          e("br"),
+          c(" Inter / Font Size: 12px / Font Weight: 700 / Line Height: 20px ")
+        ])
       ],
       -1
       /* CACHED */
@@ -1139,8 +1181,14 @@ function ht(r, l, t, s, u, p) {
       { class: "flex flex-col gap-3" },
       [
         e("p", { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" }, "Body Text (Small)"),
-        e("p", { class: "body-text-small" }, "Body text content. Lorem ipsum dolere sit amet nonummy consectuter adspecit. Lorem ipsum dolere sit amet nonummy consectuter adspecit."),
-        e("code", { class: "text-xs bg-gray-100 px-2 py-1 rounded" }, "12px / 400 / 18px line-height")
+        e("p", { class: "text-body-sm" }, "Body text content. Lorem ipsum dolere sit amet nonummy consectuter adspecit. Lorem ipsum dolere sit amet nonummy consectuter adspecit."),
+        e("p", { class: "text-sm text-gray-700 bg-gray-100 px-3 py-2 rounded" }, [
+          e("strong", null, "Class:"),
+          c(),
+          e("code", null, "text-body-sm"),
+          e("br"),
+          c(" Inter / Font Size: 12px / Font Weight: 400 / Line Height: 18px ")
+        ])
       ],
       -1
       /* CACHED */
@@ -1155,7 +1203,13 @@ function ht(r, l, t, s, u, p) {
           href: "#",
           class: "text-link"
         }, "Text Links, Navigation or Actions"),
-        e("code", { class: "text-xs bg-gray-100 px-2 py-1 rounded" }, "14px / 500 / 20px line-height")
+        e("p", { class: "text-sm text-gray-700 bg-gray-100 px-3 py-2 rounded" }, [
+          e("strong", null, "Class:"),
+          c(),
+          e("code", null, "text-link"),
+          e("br"),
+          c(" Inter / Font Size: 14px / Font Weight: 500 / Line Height: 20px ")
+        ])
       ],
       -1
       /* CACHED */
@@ -1170,7 +1224,13 @@ function ht(r, l, t, s, u, p) {
           href: "#",
           class: "text-link-active"
         }, "Text Links, Navigation or Actions - ON"),
-        e("code", { class: "text-xs bg-gray-100 px-2 py-1 rounded" }, "14px / 600 / 20px line-height")
+        e("p", { class: "text-sm text-gray-700 bg-gray-100 px-3 py-2 rounded" }, [
+          e("strong", null, "Class:"),
+          c(),
+          e("code", null, "text-link-active"),
+          e("br"),
+          c(" Inter / Font Size: 14px / Font Weight: 600 / Line Height: 20px ")
+        ])
       ],
       -1
       /* CACHED */
@@ -1181,22 +1241,28 @@ function ht(r, l, t, s, u, p) {
       { class: "flex flex-col gap-3" },
       [
         e("p", { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" }, "Labels"),
-        e("p", { class: "label" }, "Labels"),
-        e("code", { class: "text-xs bg-gray-100 px-2 py-1 rounded" }, "10px / 600 / 20px line-height / 0.5px letter-spacing / uppercase")
+        e("p", { class: "text-label" }, "Labels"),
+        e("p", { class: "text-sm text-gray-700 bg-gray-100 px-3 py-2 rounded" }, [
+          e("strong", null, "Class:"),
+          c(),
+          e("code", null, "text-label"),
+          e("br"),
+          c(" Inter / Font Size: 10px / Font Weight: 600 / Line Height: 20px / Letter Spacing: 0.5px / Text Transform: uppercase ")
+        ])
       ],
       -1
       /* CACHED */
     ))
   ]);
 }
-const Et = /* @__PURE__ */ m(ut, [["render", ht], ["__scopeId", "data-v-716d7101"], ["__file", "/root/app/code/src/components/TextStyles.vue"]]), xt = {}, pt = {
+const Et = /* @__PURE__ */ g(ut, [["render", xt], ["__file", "/root/app/code/src/components/TextStyles.vue"]]), ht = {}, pt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "20",
   height: "20",
   fill: "currentColor"
 };
 function mt(r, l) {
-  return a(), i("svg", pt, l[0] || (l[0] = [
+  return n(), i("svg", pt, l[0] || (l[0] = [
     e(
       "path",
       { d: "M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z" },
@@ -1206,14 +1272,14 @@ function mt(r, l) {
     )
   ]));
 }
-const Ut = /* @__PURE__ */ m(xt, [["render", mt], ["__file", "/root/app/code/src/components/icons/IconCommunity.vue"]]), gt = {}, vt = {
+const Ut = /* @__PURE__ */ g(ht, [["render", mt], ["__file", "/root/app/code/src/components/icons/IconCommunity.vue"]]), gt = {}, vt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "20",
   height: "17",
   fill: "currentColor"
 };
 function yt(r, l) {
-  return a(), i("svg", vt, l[0] || (l[0] = [
+  return n(), i("svg", vt, l[0] || (l[0] = [
     e(
       "path",
       { d: "M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z" },
@@ -1223,14 +1289,14 @@ function yt(r, l) {
     )
   ]));
 }
-const Ot = /* @__PURE__ */ m(gt, [["render", yt], ["__file", "/root/app/code/src/components/icons/IconDocumentation.vue"]]), bt = {}, wt = {
+const Ot = /* @__PURE__ */ g(gt, [["render", yt], ["__file", "/root/app/code/src/components/icons/IconDocumentation.vue"]]), bt = {}, wt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "18",
   height: "20",
   fill: "currentColor"
 };
 function _t(r, l) {
-  return a(), i("svg", wt, l[0] || (l[0] = [
+  return n(), i("svg", wt, l[0] || (l[0] = [
     e(
       "path",
       { d: "M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z" },
@@ -1240,14 +1306,14 @@ function _t(r, l) {
     )
   ]));
 }
-const Rt = /* @__PURE__ */ m(bt, [["render", _t], ["__file", "/root/app/code/src/components/icons/IconEcosystem.vue"]]), kt = {}, Ct = {
+const Wt = /* @__PURE__ */ g(bt, [["render", _t], ["__file", "/root/app/code/src/components/icons/IconEcosystem.vue"]]), kt = {}, Ct = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "20",
   height: "20",
   fill: "currentColor"
 };
 function zt(r, l) {
-  return a(), i("svg", Ct, l[0] || (l[0] = [
+  return n(), i("svg", Ct, l[0] || (l[0] = [
     e(
       "path",
       { d: "M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z" },
@@ -1257,7 +1323,7 @@ function zt(r, l) {
     )
   ]));
 }
-const Zt = /* @__PURE__ */ m(kt, [["render", zt], ["__file", "/root/app/code/src/components/icons/IconSupport.vue"]]), St = {}, Mt = {
+const Rt = /* @__PURE__ */ g(kt, [["render", zt], ["__file", "/root/app/code/src/components/icons/IconSupport.vue"]]), St = {}, Mt = {
   xmlns: "http://www.w3.org/2000/svg",
   "xmlns:xlink": "http://www.w3.org/1999/xlink",
   "aria-hidden": "true",
@@ -1269,7 +1335,7 @@ const Zt = /* @__PURE__ */ m(kt, [["render", zt], ["__file", "/root/app/code/src
   viewBox: "0 0 24 24"
 };
 function It(r, l) {
-  return a(), i("svg", Mt, l[0] || (l[0] = [
+  return n(), i("svg", Mt, l[0] || (l[0] = [
     e(
       "path",
       {
@@ -1282,19 +1348,19 @@ function It(r, l) {
     )
   ]));
 }
-const Gt = /* @__PURE__ */ m(St, [["render", It], ["__file", "/root/app/code/src/components/icons/IconTooling.vue"]]);
+const Zt = /* @__PURE__ */ g(St, [["render", It], ["__file", "/root/app/code/src/components/icons/IconTooling.vue"]]);
 export {
-  jt as BaseModal,
-  Vt as ButtonComponent,
-  Dt as CampaignCard,
-  Pt as CardComponents,
+  Ft as BaseModal,
+  jt as ButtonComponent,
+  Vt as CampaignCard,
+  Dt as CardComponents,
   Ut as IconCommunity,
   Ot as IconDocumentation,
-  Rt as IconEcosystem,
-  Zt as IconSupport,
-  Gt as IconTooling,
+  Wt as IconEcosystem,
+  Rt as IconSupport,
+  Zt as IconTooling,
   Nt as InviteCollaboratorsModalV2,
-  Ft as NavigationSidebar,
+  Pt as NavigationSidebar,
   Et as TextStyles
 };
 //# sourceMappingURL=fusion-component-library.es.js.map