npm - veylan-component-library - Versions diffs - 1.1.2 → 1.2.1 - Mend

veylan-component-library 1.1.2 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/components/ColorStyles.vue.d.ts +2 -0
package/dist/fusion-component-library.es.js +459 -436
package/dist/fusion-component-library.es.js.map +1 -1
package/dist/fusion-component-library.umd.js +1 -1
package/dist/fusion-component-library.umd.js.map +1 -1
package/dist/index.d.ts +2 -0
package/dist/veylan-component-library.css +1 -1
package/package.json +2 -2
package/tailwind.config.js +47 -0

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

@@ -1,5 +1,5 @@
-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";
+import { defineComponent as w, createElementBlock as n, createCommentVNode as s, openBlock as o, withModifiers as M, createElementVNode as e, renderSlot as A, toDisplayString as g, normalizeStyle as N, normalizeClass as z, createBlock as k, createTextVNode as c, Fragment as m, renderList as C, createVNode as B, createStaticVNode as b, ref as S, computed as V, withDirectives as P, vModelText as E } from "vue";
+import { ChevronDown as U, Share2 as G, ArrowRight as O, ArrowLeft as W, MoreHorizontal as R, ToyBrick as Z, MessageSquare as $, Home as Q } from "lucide-vue-next";
 const K = /* @__PURE__ */ w({
   __name: "BaseModal",
   props: {
@@ -9,72 +9,72 @@ const K = /* @__PURE__ */ w({
     secondaryButtonText: { type: String, required: !1, default: "Cancel" }
   },
   emits: ["close", "primary", "secondary"],
-  setup(r, { expose: l, emit: t }) {
-    l();
-    const s = r, f = t, x = { props: s, emit: f, handleClose: () => {
-      f("close");
+  setup(i, { expose: t, emit: l }) {
+    t();
+    const a = i, x = l, u = { props: a, emit: x, handleClose: () => {
+      x("close");
     }, handlePrimary: () => {
-      f("primary");
+      x("primary");
     }, handleSecondary: () => {
-      f("secondary");
+      x("secondary");
     } };
-    return Object.defineProperty(x, "__isScriptSetup", { enumerable: !1, value: !0 }), x;
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
   }
-}), g = (r, l) => {
-  const t = r.__vccOpts || r;
-  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",
+}), y = (i, t) => {
+  const l = i.__vccOpts || i;
+  for (const [a, x] of t)
+    l[a] = x;
+  return l;
+}, Y = { class: "bg-veylan-white rounded-2xl w-full max-w-[630px] p-8 shadow-xl" }, J = {
+  class: "text-2xl font-bold text-veylan-black mb-8",
   style: { "letter-spacing": "0" }
 }, X = { class: "flex gap-4 pt-6" };
-function ee(r, l, t, s, f, m) {
-  return t.isOpen ? (n(), i("div", {
+function ee(i, t, l, a, x, v) {
+  return l.isOpen ? (o(), n("div", {
     key: 0,
-    class: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4",
-    onClick: S(s.handleClose, ["self"])
+    class: "fixed inset-0 bg-veylan-black/50 flex items-center justify-center z-50 p-4",
+    onClick: M(a.handleClose, ["self"])
   }, [
     e("div", Y, [
-      o(" Header "),
+      s(" Header "),
       e(
         "h2",
         J,
-        u(t.title),
+        g(l.title),
         1
         /* TEXT */
       ),
-      o(" Content Slot "),
-      H(r.$slots, "default"),
-      o(" Action Buttons "),
+      s(" Content Slot "),
+      A(i.$slots, "default"),
+      s(" Action Buttons "),
       e("div", X, [
         e(
           "button",
           {
-            onClick: s.handleSecondary,
-            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",
+            onClick: a.handleSecondary,
+            class: "flex-1 h-8 flex items-center justify-center px-4 text-veylan-gray-800 rounded-xl hover:bg-veylan-gray-300 transition-colors font-medium",
             style: { "font-size": "12px" }
           },
-          u(t.secondaryButtonText),
+          g(l.secondaryButtonText),
           1
           /* TEXT */
         ),
         e(
           "button",
           {
-            onClick: s.handlePrimary,
-            class: "flex-1 h-8 px-4 bg-black text-white rounded-xl hover:bg-gray-800 transition-colors font-medium",
+            onClick: a.handlePrimary,
+            class: "flex-1 h-8 px-4 bg-veylan-black text-veylan-white rounded-xl hover:bg-veylan-gray-900 transition-colors font-medium",
             style: { "font-size": "12px" }
           },
-          u(t.primaryButtonText),
+          g(l.primaryButtonText),
           1
           /* TEXT */
         )
       ])
     ])
-  ])) : o("v-if", !0);
+  ])) : s("v-if", !0);
 }
-const Ft = /* @__PURE__ */ g(K, [["render", ee], ["__file", "/root/app/code/src/components/BaseModal.vue"]]), te = /* @__PURE__ */ w({
+const Nt = /* @__PURE__ */ y(K, [["render", ee], ["__file", "/root/app/code/src/components/BaseModal.vue"]]), te = /* @__PURE__ */ w({
   __name: "ButtonComponent",
   props: {
     variant: { type: String, required: !1, default: "primary" },
@@ -83,77 +83,77 @@ const Ft = /* @__PURE__ */ g(K, [["render", ee], ["__file", "/root/app/code/src/
     disabled: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["click"],
-  setup(r, { expose: l, emit: t }) {
-    l();
-    const s = t, m = { emit: s, handleClick: () => {
-      s("click");
+  setup(i, { expose: t, emit: l }) {
+    t();
+    const a = l, v = { emit: a, handleClick: () => {
+      a("click");
     }, get ArrowLeft() {
-      return R;
-    }, get ArrowRight() {
       return W;
-    }, get Share2() {
+    }, get ArrowRight() {
       return O;
+    }, get Share2() {
+      return G;
     }, get ChevronDown() {
       return U;
     } };
-    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 }), le = ["disabled"];
-function oe(r, l, t, s, f, m) {
-  return n(), i("button", {
-    onClick: s.handleClick,
-    disabled: t.disabled || t.variant === "disabled",
-    class: C([
+function se(i, t, l, a, x, v) {
+  return o(), n("button", {
+    onClick: a.handleClick,
+    disabled: l.disabled || l.variant === "disabled",
+    class: z([
       "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,
-        "bg-white text-black hover:bg-gray-50": t.variant === "outlined" && !t.disabled,
-        "bg-transparent text-black": t.variant === "text" && !t.disabled,
-        "cursor-not-allowed": t.variant === "disabled" || t.disabled
+        "bg-veylan-black text-veylan-white hover:bg-veylan-gray-900": l.variant === "primary" && !l.disabled,
+        "bg-veylan-white text-veylan-black hover:bg-veylan-gray-300": l.variant === "outlined" && !l.disabled,
+        "bg-transparent text-veylan-black": l.variant === "text" && !l.disabled,
+        "cursor-not-allowed": l.variant === "disabled" || l.disabled
       }
     ]),
-    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" } : {},
-      ...t.variant === "disabled" || t.disabled ? { backgroundColor: "#E8E8E8", color: "#8F8F8F" } : {}
+    style: N({
+      paddingLeft: l.rightIcon === "dropdown" ? "16px" : "24px",
+      paddingRight: l.rightIcon === "dropdown" ? "8px" : "24px",
+      ...l.variant === "outlined" && !l.disabled && l.rightIcon === "dropdown" ? { borderWidth: "1px", borderColor: "#BDBDBD" } : l.variant === "outlined" && !l.disabled ? { borderWidth: "1px", borderColor: "#000000" } : {},
+      ...l.variant === "disabled" || l.disabled ? { backgroundColor: "#DDDDDD", color: "#7D7D7D" } : {}
     })
   }, [
-    o(" Left Icon "),
-    t.leftIcon === "arrow" ? (n(), _(s.ArrowLeft, {
+    s(" Left Icon "),
+    l.leftIcon === "arrow" ? (o(), k(a.ArrowLeft, {
       key: 0,
       size: 20,
       "stroke-width": 1.5
-    })) : t.leftIcon === "share" ? (n(), _(s.Share2, {
+    })) : l.leftIcon === "share" ? (o(), k(a.Share2, {
       key: 1,
       size: 20,
       "stroke-width": 1.5
-    })) : o("v-if", !0),
-    o(" Text Slot "),
-    H(r.$slots, "default", {}, () => [
-      l[0] || (l[0] = c(
+    })) : s("v-if", !0),
+    s(" Text Slot "),
+    A(i.$slots, "default", {}, () => [
+      t[0] || (t[0] = c(
         "Button",
         -1
         /* CACHED */
       ))
     ]),
-    o(" Right Icon "),
-    t.rightIcon === "arrow" ? (n(), _(s.ArrowRight, {
+    s(" Right Icon "),
+    l.rightIcon === "arrow" ? (o(), k(a.ArrowRight, {
       key: 2,
       size: 20,
       "stroke-width": 1.5
-    })) : t.rightIcon === "share" ? (n(), _(s.Share2, {
+    })) : l.rightIcon === "share" ? (o(), k(a.Share2, {
       key: 3,
       size: 20,
       "stroke-width": 1.5
-    })) : t.rightIcon === "dropdown" ? (n(), _(s.ChevronDown, {
+    })) : l.rightIcon === "dropdown" ? (o(), k(a.ChevronDown, {
       key: 4,
       size: 20,
       "stroke-width": 1.5
-    })) : o("v-if", !0)
+    })) : s("v-if", !0)
   ], 14, le);
 }
-const jt = /* @__PURE__ */ g(te, [["render", oe], ["__file", "/root/app/code/src/components/ButtonComponent.vue"]]), se = /* @__PURE__ */ w({
+const Vt = /* @__PURE__ */ y(te, [["render", se], ["__file", "/root/app/code/src/components/ButtonComponent.vue"]]), ae = /* @__PURE__ */ w({
   __name: "CampaignCard",
   props: {
     showImage: { type: Boolean, required: !1, default: !0 },
@@ -174,111 +174,111 @@ const jt = /* @__PURE__ */ g(te, [["render", oe], ["__file", "/root/app/code/src
     cardClasses: { type: String, required: !1, default: "" }
   },
   emits: ["menu-click", "add-click"],
-  setup(r, { expose: l }) {
-    l();
-    const s = { props: r };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+  setup(i, { expose: t }) {
+    t();
+    const a = { props: i };
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
-}), ne = { class: "absolute inset-0" }, ie = ["src", "alt"], ae = { class: "relative flex justify-between items-start w-full" }, re = {
+}), oe = { class: "absolute inset-0" }, ne = ["src", "alt"], re = { class: "relative flex justify-between items-start w-full" }, ie = {
   key: 0,
   class: "flex items-center gap-2"
 }, de = {
   key: 0,
-  class: "flex h-6 px-2.5 justify-center items-center rounded-lg bg-white text-black font-medium",
+  class: "flex h-6 px-2.5 justify-center items-center rounded-lg bg-veylan-white text-veylan-black font-medium",
   style: { gap: "10px", "line-height": "24px", "font-size": "10px" }
 }, ce = {
   key: 1,
-  class: "flex h-6 px-2.5 justify-center items-center rounded-lg bg-black text-white font-medium",
+  class: "flex h-6 px-2.5 justify-center items-center rounded-lg bg-veylan-black text-veylan-white font-medium",
   style: { gap: "10px", "line-height": "24px", "font-size": "10px" }
-}, ue = {
+}, xe = {
   style: { width: "18px", height: "18px" },
   viewBox: "0 0 18 18",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, fe = {
+}, ge = {
   key: 1,
   class: "flex flex-col",
   style: { padding: "0 16px", gap: "8px", margin: "0" }
-}, xe = {
+}, ue = {
   key: 0,
-  class: "text-black",
+  class: "text-veylan-black",
   style: { "font-size": "16px", "font-weight": "600", "line-height": "20px" }
-}, he = {
+}, ve = {
   key: 1,
-  class: "text-black",
+  class: "text-veylan-black",
   style: { "font-size": "12px", "font-weight": "400", "line-height": "18px" }
 }, pe = {
   key: 2,
   class: "flex items-end",
   style: { padding: "0 16px", gap: "4px" }
-}, me = {
+}, fe = {
   class: "flex justify-between items-end flex-1",
   style: { height: "24px" }
-}, ge = {
+}, ye = {
   key: 0,
   class: "flex items-center",
   style: { gap: "4px" }
-}, ve = {
+}, me = {
   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" }
-}, ye = {
+}, he = {
   style: { width: "12px", height: "12px" },
   viewBox: "0 0 12 12",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function be(r, l, t, s, f, m) {
-  return n(), i(
+function be(i, t, l, a, x, v) {
+  return o(), n(
     "div",
     {
-      class: C(["flex flex-col bg-white rounded-2xl shadow-card w-full", t.cardClasses]),
+      class: z(["flex flex-col bg-veylan-white rounded-2xl shadow-card w-full", l.cardClasses]),
       style: { gap: "16px", padding: "16px 0 24px 0" }
     },
     [
-      o(" Card Image Section "),
-      t.showImage ? (n(), i(
+      s(" Card Image Section "),
+      l.showImage ? (o(), n(
         "div",
         {
           key: 0,
-          class: C(["relative flex-shrink-0 overflow-hidden rounded-t-2xl", t.imageClasses]),
+          class: z(["relative flex-shrink-0 overflow-hidden rounded-t-2xl", l.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", ne, [
+          s(" Background Image "),
+          e("div", oe, [
             e("img", {
-              src: t.imageSrc,
-              alt: t.imageAlt,
+              src: l.imageSrc,
+              alt: l.imageAlt,
               class: "w-full h-full object-cover"
-            }, null, 8, ie)
+            }, null, 8, ne)
           ]),
-          o(" Card Header Overlay "),
-          e("div", ae, [
-            o(" Labels/Pills "),
-            t.showLabels ? (n(), i("div", re, [
-              t.label1 ? (n(), i(
+          s(" Card Header Overlay "),
+          e("div", re, [
+            s(" Labels/Pills "),
+            l.showLabels ? (o(), n("div", ie, [
+              l.label1 ? (o(), n(
                 "div",
                 de,
-                u(t.label1),
+                g(l.label1),
                 1
                 /* TEXT */
-              )) : o("v-if", !0),
-              t.label2 ? (n(), i(
+              )) : s("v-if", !0),
+              l.label2 ? (o(), n(
                 "div",
                 ce,
-                u(t.label2),
+                g(l.label2),
                 1
                 /* TEXT */
-              )) : o("v-if", !0)
-            ])) : o("v-if", !0),
-            o(" Menu Button "),
-            t.showMenu ? (n(), i("button", {
+              )) : s("v-if", !0)
+            ])) : s("v-if", !0),
+            s(" Menu Button "),
+            l.showMenu ? (o(), n("button", {
               key: 1,
-              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",
+              onClick: t[0] || (t[0] = (r) => i.$emit("menu-click")),
+              class: "flex justify-center items-center flex-shrink-0 rounded-full bg-veylan-white hover:bg-veylan-gray-300 transition-colors",
               style: { width: "32px", height: "32px" }
             }, [
-              (n(), i("svg", ue, l[2] || (l[2] = [
+              (o(), n("svg", xe, t[2] || (t[2] = [
                 e(
                   "path",
                   {
@@ -319,43 +319,43 @@ function be(r, l, t, s, f, m) {
                   /* CACHED */
                 )
               ])))
-            ])) : o("v-if", !0)
+            ])) : s("v-if", !0)
           ])
         ],
         2
         /* CLASS */
-      )) : o("v-if", !0),
-      o(" Content Section "),
-      t.showContent ? (n(), i("div", fe, [
-        t.title ? (n(), i(
+      )) : s("v-if", !0),
+      s(" Content Section "),
+      l.showContent ? (o(), n("div", ge, [
+        l.title ? (o(), n(
           "h3",
-          xe,
-          u(t.title),
+          ue,
+          g(l.title),
           1
           /* TEXT */
-        )) : o("v-if", !0),
-        t.description ? (n(), i(
+        )) : s("v-if", !0),
+        l.description ? (o(), n(
           "p",
-          he,
-          u(t.description),
+          ve,
+          g(l.description),
           1
           /* TEXT */
-        )) : o("v-if", !0)
-      ])) : o("v-if", !0),
-      o(" Footer Section "),
-      t.showFooter ? (n(), i("div", pe, [
-        e("div", me, [
-          o(" Member Avatars "),
-          t.showMembers ? (n(), i("div", ge, [
-            (n(!0), i(
-              v,
+        )) : s("v-if", !0)
+      ])) : s("v-if", !0),
+      s(" Footer Section "),
+      l.showFooter ? (o(), n("div", pe, [
+        e("div", fe, [
+          s(" Member Avatars "),
+          l.showMembers ? (o(), n("div", ye, [
+            (o(!0), n(
+              m,
               null,
-              k(t.members, (a, d) => (n(), i("div", {
+              C(l.members, (r, d) => (o(), n("div", {
                 key: d,
                 class: "relative",
                 style: { width: "24px", height: "24px" }
               }, [
-                l[3] || (l[3] = e(
+                t[3] || (t[3] = e(
                   "svg",
                   {
                     class: "absolute left-0 top-0",
@@ -378,8 +378,8 @@ function be(r, l, t, s, f, m) {
                 )),
                 e(
                   "div",
-                  ve,
-                  u(a),
+                  me,
+                  g(r),
                   1
                   /* TEXT */
                 )
@@ -387,15 +387,15 @@ function be(r, l, t, s, f, m) {
               128
               /* KEYED_FRAGMENT */
             ))
-          ])) : o("v-if", !0),
-          o(" Add Button "),
-          t.showAddButton ? (n(), i("button", {
+          ])) : s("v-if", !0),
+          s(" Add Button "),
+          l.showAddButton ? (o(), n("button", {
             key: 1,
-            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",
+            onClick: t[1] || (t[1] = (r) => i.$emit("add-click")),
+            class: "flex justify-center items-center flex-shrink-0 rounded-full bg-veylan-black hover:bg-veylan-gray-900 transition-colors",
             style: { width: "32px", height: "32px" }
           }, [
-            (n(), i("svg", ye, l[4] || (l[4] = [
+            (o(), n("svg", he, t[4] || (t[4] = [
               e(
                 "path",
                 {
@@ -423,15 +423,15 @@ function be(r, l, t, s, f, m) {
                 /* CACHED */
               )
             ])))
-          ])) : o("v-if", !0)
+          ])) : s("v-if", !0)
         ])
-      ])) : o("v-if", !0)
+      ])) : s("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const Vt = /* @__PURE__ */ g(se, [["render", be], ["__file", "/root/app/code/src/components/CampaignCard.vue"]]), we = /* @__PURE__ */ w({
+const Pt = /* @__PURE__ */ y(ae, [["render", be], ["__file", "/root/app/code/src/components/CampaignCard.vue"]]), we = /* @__PURE__ */ w({
   __name: "CardComponents",
   props: {
     showImage: { type: Boolean, required: !1, default: !0 },
@@ -452,48 +452,48 @@ const Vt = /* @__PURE__ */ g(se, [["render", be], ["__file", "/root/app/code/src
     cardClasses: { type: String, required: !1, default: "" }
   },
   emits: ["menu-click", "add-click"],
-  setup(r, { expose: l }) {
-    l();
-    const s = { props: r, get MoreHorizontal() {
-      return Z;
+  setup(i, { expose: t }) {
+    t();
+    const a = { props: i, get MoreHorizontal() {
+      return R;
     } };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 }), _e = { class: "absolute inset-0" }, ke = ["src", "alt"], Ce = { class: "relative flex justify-between items-start w-full" }, ze = {
   key: 0,
   class: "flex items-center gap-2"
 }, Se = {
   key: 0,
-  class: "flex h-6 px-2.5 justify-center items-center rounded-lg bg-white text-black font-medium",
+  class: "flex h-6 px-2.5 justify-center items-center rounded-lg bg-veylan-white text-veylan-black font-medium",
   style: { gap: "10px", "line-height": "24px", "font-size": "10px" }
 }, Me = {
   key: 1,
-  class: "flex h-6 px-2.5 justify-center items-center rounded-lg bg-black text-white font-medium",
+  class: "flex h-6 px-2.5 justify-center items-center rounded-lg bg-veylan-black text-veylan-white font-medium",
   style: { gap: "10px", "line-height": "24px", "font-size": "10px" }
-}, Ie = {
+}, Be = {
   key: 1,
   class: "flex flex-col",
   style: { padding: "0 16px", gap: "8px", margin: "0" }
-}, Be = {
+}, Ie = {
   key: 0,
-  class: "text-black",
+  class: "text-veylan-black",
   style: { "font-size": "16px", "font-weight": "600", "line-height": "20px" }
-}, Le = {
+}, De = {
   key: 1,
-  class: "text-black",
+  class: "text-veylan-black",
   style: { "font-size": "12px", "font-weight": "400", "line-height": "18px" }
-}, He = {
+}, Ae = {
   key: 2,
   class: "flex items-end mt-auto",
   style: { padding: "0 16px", gap: "4px" }
 }, qe = {
   class: "flex justify-between items-end flex-1",
   style: { height: "24px" }
-}, Te = {
+}, Le = {
   key: 0,
   class: "flex items-center",
   style: { gap: "4px" }
-}, Ae = {
+}, He = {
   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" }
 }, Fe = {
@@ -502,99 +502,99 @@ const Vt = /* @__PURE__ */ g(se, [["render", be], ["__file", "/root/app/code/src
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function je(r, l, t, s, f, m) {
-  return n(), i(
+function Te(i, t, l, a, x, v) {
+  return o(), n(
     "div",
     {
-      class: C(["flex flex-col bg-white rounded-2xl shadow-card w-full", t.cardClasses]),
+      class: z(["flex flex-col bg-veylan-white rounded-2xl shadow-card w-full", l.cardClasses]),
       style: { gap: "16px", padding: "16px 0 24px 0" }
     },
     [
-      o(" Card Image Section "),
-      t.showImage ? (n(), i(
+      s(" Card Image Section "),
+      l.showImage ? (o(), n(
         "div",
         {
           key: 0,
-          class: C(["relative flex-shrink-0 overflow-hidden rounded-t-2xl", t.imageClasses]),
+          class: z(["relative flex-shrink-0 overflow-hidden rounded-t-2xl", l.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 "),
+          s(" Background Image "),
           e("div", _e, [
             e("img", {
-              src: t.imageSrc,
-              alt: t.imageAlt,
+              src: l.imageSrc,
+              alt: l.imageAlt,
               class: "w-full h-full object-cover"
             }, null, 8, ke)
           ]),
-          o(" Card Header Overlay "),
+          s(" Card Header Overlay "),
           e("div", Ce, [
-            o(" Labels/Pills "),
-            t.showLabels ? (n(), i("div", ze, [
-              t.label1 ? (n(), i(
+            s(" Labels/Pills "),
+            l.showLabels ? (o(), n("div", ze, [
+              l.label1 ? (o(), n(
                 "div",
                 Se,
-                u(t.label1),
+                g(l.label1),
                 1
                 /* TEXT */
-              )) : o("v-if", !0),
-              t.label2 ? (n(), i(
+              )) : s("v-if", !0),
+              l.label2 ? (o(), n(
                 "div",
                 Me,
-                u(t.label2),
+                g(l.label2),
                 1
                 /* TEXT */
-              )) : o("v-if", !0)
-            ])) : o("v-if", !0),
-            o(" Menu Button "),
-            t.showMenu ? (n(), i("button", {
+              )) : s("v-if", !0)
+            ])) : s("v-if", !0),
+            s(" Menu Button "),
+            l.showMenu ? (o(), n("button", {
               key: 1,
-              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",
+              onClick: t[0] || (t[0] = (r) => i.$emit("menu-click")),
+              class: "flex justify-center items-center flex-shrink-0 rounded-full bg-veylan-white hover:bg-veylan-gray-300 transition-colors",
               style: { width: "24px", height: "24px" }
             }, [
-              I(s.MoreHorizontal, {
+              B(a.MoreHorizontal, {
                 size: 16,
-                color: "black",
+                color: "#000000",
                 "stroke-width": 2
               })
-            ])) : o("v-if", !0)
+            ])) : s("v-if", !0)
           ])
         ],
         2
         /* CLASS */
-      )) : o("v-if", !0),
-      o(" Content Section "),
-      t.showContent ? (n(), i("div", Ie, [
-        t.title ? (n(), i(
+      )) : s("v-if", !0),
+      s(" Content Section "),
+      l.showContent ? (o(), n("div", Be, [
+        l.title ? (o(), n(
           "h3",
-          Be,
-          u(t.title),
+          Ie,
+          g(l.title),
           1
           /* TEXT */
-        )) : o("v-if", !0),
-        t.description ? (n(), i(
+        )) : s("v-if", !0),
+        l.description ? (o(), n(
           "p",
-          Le,
-          u(t.description),
+          De,
+          g(l.description),
           1
           /* TEXT */
-        )) : o("v-if", !0)
-      ])) : o("v-if", !0),
-      o(" Footer Section "),
-      t.showFooter ? (n(), i("div", He, [
+        )) : s("v-if", !0)
+      ])) : s("v-if", !0),
+      s(" Footer Section "),
+      l.showFooter ? (o(), n("div", Ae, [
         e("div", qe, [
-          o(" Member Avatars "),
-          t.showMembers ? (n(), i("div", Te, [
-            (n(!0), i(
-              v,
+          s(" Member Avatars "),
+          l.showMembers ? (o(), n("div", Le, [
+            (o(!0), n(
+              m,
               null,
-              k(t.members, (a, d) => (n(), i("div", {
+              C(l.members, (r, d) => (o(), n("div", {
                 key: d,
                 class: "relative",
                 style: { width: "24px", height: "24px" }
               }, [
-                l[2] || (l[2] = e(
+                t[2] || (t[2] = e(
                   "svg",
                   {
                     class: "absolute left-0 top-0",
@@ -617,8 +617,8 @@ function je(r, l, t, s, f, m) {
                 )),
                 e(
                   "div",
-                  Ae,
-                  u(a),
+                  He,
+                  g(r),
                   1
                   /* TEXT */
                 )
@@ -626,15 +626,15 @@ function je(r, l, t, s, f, m) {
               128
               /* KEYED_FRAGMENT */
             ))
-          ])) : o("v-if", !0),
-          o(" Add Button "),
-          t.showAddButton ? (n(), i("button", {
+          ])) : s("v-if", !0),
+          s(" Add Button "),
+          l.showAddButton ? (o(), n("button", {
             key: 1,
-            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",
+            onClick: t[1] || (t[1] = (r) => i.$emit("add-click")),
+            class: "flex justify-center items-center flex-shrink-0 rounded-full bg-veylan-black hover:bg-veylan-gray-900 transition-colors",
             style: { width: "24px", height: "24px" }
           }, [
-            (n(), i("svg", Fe, l[3] || (l[3] = [
+            (o(), n("svg", Fe, t[3] || (t[3] = [
               e(
                 "path",
                 {
@@ -662,15 +662,37 @@ function je(r, l, t, s, f, m) {
                 /* CACHED */
               )
             ])))
-          ])) : o("v-if", !0)
+          ])) : s("v-if", !0)
         ])
-      ])) : o("v-if", !0)
+      ])) : s("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const Dt = /* @__PURE__ */ g(we, [["render", je], ["__file", "/root/app/code/src/components/CardComponents.vue"]]), Ve = /* @__PURE__ */ w({
+const Et = /* @__PURE__ */ y(we, [["render", Te], ["__file", "/root/app/code/src/components/CardComponents.vue"]]), je = /* @__PURE__ */ w({
+  __name: "ColorStyles",
+  setup(i, { expose: t }) {
+    t();
+    const l = {};
+    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+  }
+}), Ne = { class: "flex flex-col gap-12 w-full" };
+function Ve(i, t, l, a, x, v) {
+  return o(), n("div", Ne, [
+    s(" Neutrals "),
+    t[0] || (t[0] = b('<div class="flex flex-col gap-4"><h3 class="text-lg font-semibold text-gray-900">Neutrals</h3><div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4"><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-black border border-gray-200"></div><p class="text-xs font-medium">Black</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-black</code><code class="text-xs text-gray-600">#000000</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-white border border-gray-200"></div><p class="text-xs font-medium">White</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-white</code><code class="text-xs text-gray-600">#FFFFFF</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-gray-900"></div><p class="text-xs font-medium">Gray 900</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-gray-900</code><code class="text-xs text-gray-600">#2D2D2D</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-gray-800"></div><p class="text-xs font-medium">Gray 800</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-gray-800</code><code class="text-xs text-gray-600">#3D3D3D</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-gray-700"></div><p class="text-xs font-medium">Gray 700</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-gray-700</code><code class="text-xs text-gray-600">#5D5D5D</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-gray-600"></div><p class="text-xs font-medium">Gray 600</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-gray-600</code><code class="text-xs text-gray-600">#7D7D7D</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-gray-500"></div><p class="text-xs font-medium">Gray 500</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-gray-500</code><code class="text-xs text-gray-600">#9D9D9D</code></div></div><div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4"><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-gray-400"></div><p class="text-xs font-medium">Gray 400</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-gray-400</code><code class="text-xs text-gray-600">#BDBDBD</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-gray-300 border border-gray-200"></div><p class="text-xs font-medium">Gray 300</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-gray-300</code><code class="text-xs text-gray-600">#DDDDDD</code></div></div></div>', 1)),
+    s(" Green/Lime Palette "),
+    t[1] || (t[1] = b('<div class="flex flex-col gap-4"><h3 class="text-lg font-semibold text-gray-900">Green/Lime</h3><div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4"><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-green-900"></div><p class="text-xs font-medium">Green 900</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-green-900</code><code class="text-xs text-gray-600">#3D5A00</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-green-800"></div><p class="text-xs font-medium">Green 800</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-green-800</code><code class="text-xs text-gray-600">#527A00</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-green-700"></div><p class="text-xs font-medium">Green 700</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-green-700</code><code class="text-xs text-gray-600">#6A9A00</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-green-600"></div><p class="text-xs font-medium">Green 600</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-green-600</code><code class="text-xs text-gray-600">#85BA00</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-green-500"></div><p class="text-xs font-medium">Green 500</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-green-500</code><code class="text-xs text-gray-600">#A2DA00</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-green-400"></div><p class="text-xs font-medium">Green 400</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-green-400</code><code class="text-xs text-gray-600">#BFEA60</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-green-300"></div><p class="text-xs font-medium">Green 300</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-green-300</code><code class="text-xs text-gray-600">#DFF5A0</code></div></div></div>', 1)),
+    s(" Cyan/Turquoise Palette "),
+    t[2] || (t[2] = b('<div class="flex flex-col gap-4"><h3 class="text-lg font-semibold text-gray-900">Cyan/Turquoise</h3><div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4"><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-cyan-900"></div><p class="text-xs font-medium">Cyan 900</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-cyan-900</code><code class="text-xs text-gray-600">#005A5A</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-cyan-800"></div><p class="text-xs font-medium">Cyan 800</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-cyan-800</code><code class="text-xs text-gray-600">#007A7A</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-cyan-700"></div><p class="text-xs font-medium">Cyan 700</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-cyan-700</code><code class="text-xs text-gray-600">#009A9A</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-cyan-600"></div><p class="text-xs font-medium">Cyan 600</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-cyan-600</code><code class="text-xs text-gray-600">#00BABA</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-cyan-500"></div><p class="text-xs font-medium">Cyan 500</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-cyan-500</code><code class="text-xs text-gray-600">#00DADA</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-cyan-400"></div><p class="text-xs font-medium">Cyan 400</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-cyan-400</code><code class="text-xs text-gray-600">#60EAEA</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-cyan-300"></div><p class="text-xs font-medium">Cyan 300</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-cyan-300</code><code class="text-xs text-gray-600">#A0F5F5</code></div></div></div>', 1)),
+    s(" Accent Colors "),
+    t[3] || (t[3] = b('<div class="flex flex-col gap-4"><h3 class="text-lg font-semibold text-gray-900">Accent Colors</h3><div class="grid grid-cols-2 md:grid-cols-4 gap-4"><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-accent-cyan"></div><p class="text-xs font-medium">Accent Cyan</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-accent-cyan</code><code class="text-xs text-gray-600">#00DADA</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-accent-lime"></div><p class="text-xs font-medium">Accent Lime</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-accent-lime</code><code class="text-xs text-gray-600">#A2DA00</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-accent-yellow"></div><p class="text-xs font-medium">Accent Yellow</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-accent-yellow</code><code class="text-xs text-gray-600">#FFD700</code></div><div class="flex flex-col gap-2"><div class="w-full h-20 rounded-lg bg-veylan-accent-orange"></div><p class="text-xs font-medium">Accent Orange</p><code class="text-xs bg-gray-100 px-2 py-1 rounded">bg-veylan-accent-orange</code><code class="text-xs text-gray-600">#FF6B35</code></div></div></div>', 1)),
+    s(" Usage Examples "),
+    t[4] || (t[4] = b('<div class="flex flex-col gap-4"><h3 class="text-lg font-semibold text-gray-900">Usage Examples</h3><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><div class="bg-white border border-gray-200 rounded-lg p-6"><h4 class="text-sm font-semibold mb-3">Background Colors</h4><div class="space-y-2 text-sm"><code class="block bg-gray-100 px-3 py-2 rounded">className=&quot;bg-veylan-cyan-500&quot;</code><code class="block bg-gray-100 px-3 py-2 rounded">className=&quot;bg-veylan-green-600&quot;</code><code class="block bg-gray-100 px-3 py-2 rounded">className=&quot;bg-veylan-accent-lime&quot;</code></div></div><div class="bg-white border border-gray-200 rounded-lg p-6"><h4 class="text-sm font-semibold mb-3">Text Colors</h4><div class="space-y-2 text-sm"><code class="block bg-gray-100 px-3 py-2 rounded">className=&quot;text-veylan-cyan-500&quot;</code><code class="block bg-gray-100 px-3 py-2 rounded">className=&quot;text-veylan-green-600&quot;</code><code class="block bg-gray-100 px-3 py-2 rounded">className=&quot;text-veylan-accent-lime&quot;</code></div></div><div class="bg-white border border-gray-200 rounded-lg p-6"><h4 class="text-sm font-semibold mb-3">Border Colors</h4><div class="space-y-2 text-sm"><code class="block bg-gray-100 px-3 py-2 rounded">className=&quot;border-veylan-cyan-500&quot;</code><code class="block bg-gray-100 px-3 py-2 rounded">className=&quot;border-veylan-green-600&quot;</code><code class="block bg-gray-100 px-3 py-2 rounded">className=&quot;border-veylan-accent-lime&quot;</code></div></div><div class="bg-white border border-gray-200 rounded-lg p-6"><h4 class="text-sm font-semibold mb-3">Hover States</h4><div class="space-y-2 text-sm"><code class="block bg-gray-100 px-3 py-2 rounded">className=&quot;hover:bg-veylan-cyan-600&quot;</code><code class="block bg-gray-100 px-3 py-2 rounded">className=&quot;hover:text-veylan-green-700&quot;</code><code class="block bg-gray-100 px-3 py-2 rounded">className=&quot;hover:border-veylan-accent-lime&quot;</code></div></div></div></div>', 1))
+  ]);
+}
+const Ut = /* @__PURE__ */ y(je, [["render", Ve], ["__file", "/root/app/code/src/components/ColorStyles.vue"]]), Pe = /* @__PURE__ */ w({
   __name: "InviteCollaboratorsModalV2",
   props: {
     isOpen: { type: Boolean, required: !1, default: !1 },
@@ -678,69 +700,69 @@ const Dt = /* @__PURE__ */ g(we, [["render", je], ["__file", "/root/app/code/src
     initialCollaborators: { type: Array, required: !1, default: () => [] }
   },
   emits: ["close", "add"],
-  setup(r, { expose: l, emit: t }) {
-    l();
-    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 p = b.value.findIndex((y) => y.email === h.email);
-      p > -1 && b.value.splice(p, 1);
-    }, 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();
+  setup(i, { expose: t, emit: l }) {
+    t();
+    const a = i, x = l, v = S(null), r = S(!1), d = S(""), u = S([]), _ = S([...a.initialCollaborators]), q = V(() => a.availableUsersList.filter((p) => {
+      const f = !_.value.some((j) => j.email === p.email);
+      if (!d.value) return f;
+      const h = d.value.toLowerCase();
+      return f && (p.name.toLowerCase().includes(h) || p.email.toLowerCase().includes(h));
+    })), L = (p) => u.value.some((f) => f.email === p.email), H = (p) => {
+      const f = u.value.findIndex((h) => h.email === p.email);
+      f > -1 ? u.value.splice(f, 1) : u.value.push(p), d.value = "";
+    }, F = (p) => {
+      const f = u.value.findIndex((h) => h.email === p.email);
+      f > -1 && u.value.splice(f, 1);
+    }, T = (p) => {
+      const f = _.value.findIndex((h) => h.email === p.email);
+      f > -1 && _.value.splice(f, 1);
+    }, I = () => {
+      v.value?.focus();
+    }, D = { props: a, emit: x, hiddenInput: v, showDropdown: r, searchQuery: d, selectedUsers: u, collaborators: _, availableUsers: q, isUserSelected: L, toggleUser: H, removeUser: F, removeCollaborator: T, focusInput: I, toggleDropdown: () => {
+      r.value = !r.value, r.value && I();
     }, handleBlur: () => {
       setTimeout(() => {
-        a.value = !1;
+        r.value = !1;
       }, 200);
     }, closeModal: () => {
-      f("close"), x.value = [], d.value = "", a.value = !1;
+      x("close"), u.value = [], d.value = "", r.value = !1;
     }, addCollaborators: () => {
-      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");
+      u.value.length > 0 && (u.value.forEach((p) => {
+        _.value.some((f) => f.email === p.email) || _.value.push(p);
+      }), x("add", u.value, _.value), u.value = [], d.value = "", r.value = !1), x("close");
     } };
-    return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;
+    return Object.defineProperty(D, "__isScriptSetup", { enumerable: !1, value: !0 }), D;
   }
-}), 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 = {
+}), Ee = { class: "bg-veylan-white rounded-2xl w-full max-w-[630px] p-8 shadow-xl" }, Ue = { class: "relative mb-6" }, Ge = { class: "flex flex-wrap gap-2 flex-1" }, Oe = ["onClick"], We = {
   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"], We = { class: "flex-1" }, Re = { class: "text-sm font-semibold text-black" }, Ze = { class: "text-sm text-gray-600" }, Ge = {
+  class: "absolute top-full left-0 right-0 mt-2 bg-veylan-white border border-veylan-gray-400 rounded-xl shadow-lg max-h-64 overflow-y-auto z-10"
+}, Re = ["onMousedown"], Ze = { class: "flex-1" }, $e = { class: "text-sm font-semibold text-veylan-black" }, Qe = { class: "text-sm text-gray-600" }, Ke = {
   key: 0,
-  class: "w-5 h-5 flex items-center justify-center text-black"
-}, Qe = { class: "collaborators-list mb-8 max-h-96 overflow-y-auto" }, $e = {
-  class: "font-semibold text-black",
+  class: "w-5 h-5 flex items-center justify-center text-veylan-black"
+}, Ye = { class: "collaborators-list mb-8 max-h-96 overflow-y-auto" }, Je = {
+  class: "font-semibold text-veylan-black",
   style: { "font-size": "14px" }
-}, Ke = {
-  class: "text-black",
+}, Xe = {
+  class: "text-veylan-black",
   style: { "font-size": "14px" }
-}, Ye = ["onClick"];
-function Je(r, l, t, s, f, m) {
-  return t.isOpen ? (n(), i("div", {
+}, et = ["onClick"];
+function tt(i, t, l, a, x, v) {
+  return l.isOpen ? (o(), n("div", {
     key: 0,
-    class: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4",
-    onClick: S(s.closeModal, ["self"])
+    class: "fixed inset-0 bg-veylan-black/50 flex items-center justify-center z-50 p-4",
+    onClick: M(a.closeModal, ["self"])
   }, [
-    e("div", De, [
-      o(" Header "),
-      l[3] || (l[3] = e(
+    e("div", Ee, [
+      s(" Header "),
+      t[3] || (t[3] = e(
         "h2",
-        { class: "text-2xl font-bold text-black mb-8" },
+        { class: "text-2xl font-bold text-veylan-black mb-8" },
         "Invite Collaborators",
         -1
         /* CACHED */
       )),
-      o(" Users Label "),
-      l[4] || (l[4] = e(
+      s(" Users Label "),
+      t[4] || (t[4] = e(
         "label",
         {
           class: "block font-normal text-gray-500 mb-3",
@@ -750,133 +772,133 @@ function Je(r, l, t, s, f, m) {
         -1
         /* CACHED */
       )),
-      o(" Multi-select Input "),
-      e("div", Ne, [
+      s(" Multi-select Input "),
+      e("div", Ue, [
         e("div", {
-          class: "flex items-center gap-2 w-full px-4 py-2 border border-gray-300 rounded-xl bg-white focus-within:border-gray-400 focus-within:outline-none transition-colors cursor-text min-h-[40px]",
-          onClick: s.focusInput
+          class: "flex items-center gap-2 w-full px-4 py-2 border border-veylan-gray-400 rounded-xl bg-veylan-white focus-within:border-veylan-gray-500 focus-within:outline-none transition-colors cursor-text min-h-[40px]",
+          onClick: a.focusInput
         }, [
-          o(" Plus Icon "),
+          s(" Plus Icon "),
           e("button", {
             type: "button",
-            class: "flex-shrink-0 text-gray-800 text-xl font-light",
-            onClick: s.toggleDropdown
+            class: "flex-shrink-0 text-veylan-gray-800 text-xl font-light",
+            onClick: a.toggleDropdown
           }, " + "),
-          o(" Selected User Pills "),
-          e("div", Pe, [
-            (n(!0), i(
-              v,
+          s(" Selected User Pills "),
+          e("div", Ge, [
+            (o(!0), n(
+              m,
               null,
-              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"
+              C(a.selectedUsers, (r) => (o(), n("span", {
+                key: r.email,
+                class: "inline-flex items-center gap-2 px-3 py-1.5 bg-veylan-gray-300 rounded-lg text-sm font-normal text-veylan-black"
               }, [
                 c(
-                  u(a.display) + " ",
+                  g(r.display) + " ",
                   1
                   /* TEXT */
                 ),
                 e("button", {
-                  onClick: S((d) => s.removeUser(a), ["stop"]),
-                  class: "text-gray-600 hover:text-black transition-colors"
-                }, " × ", 8, Ee)
+                  onClick: M((d) => a.removeUser(r), ["stop"]),
+                  class: "text-veylan-gray-600 hover:text-veylan-black transition-colors"
+                }, " × ", 8, Oe)
               ]))),
               128
               /* KEYED_FRAGMENT */
             )),
-            o(" Hidden Input for Focus "),
+            s(" Hidden Input for Focus "),
             P(e(
               "input",
               {
                 ref: "hiddenInput",
                 type: "text",
-                class: "flex-1 min-w-[100px] outline-none bg-transparent text-black placeholder-gray-400",
+                class: "flex-1 min-w-[100px] outline-none bg-transparent text-veylan-black placeholder-gray-400",
                 placeholder: "",
-                onFocus: l[0] || (l[0] = (a) => s.showDropdown = !0),
-                onBlur: s.handleBlur,
-                "onUpdate:modelValue": l[1] || (l[1] = (a) => s.searchQuery = a)
+                onFocus: t[0] || (t[0] = (r) => a.showDropdown = !0),
+                onBlur: a.handleBlur,
+                "onUpdate:modelValue": t[1] || (t[1] = (r) => a.searchQuery = r)
               },
               null,
               544
               /* NEED_HYDRATION, NEED_PATCH */
             ), [
-              [E, s.searchQuery]
+              [E, a.searchQuery]
             ])
           ])
         ]),
-        o(" Dropdown "),
-        s.showDropdown ? (n(), i("div", Ue, [
-          (n(!0), i(
-            v,
+        s(" Dropdown "),
+        a.showDropdown ? (o(), n("div", We, [
+          (o(!0), n(
+            m,
             null,
-            k(s.availableUsers, (a) => (n(), i("button", {
-              key: a.email,
+            C(a.availableUsers, (r) => (o(), n("button", {
+              key: r.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: S((d) => s.toggleUser(a), ["prevent"])
+              class: "w-full px-4 py-3 text-left hover:bg-veylan-gray-300 transition-colors flex items-center justify-between group",
+              onMousedown: M((d) => a.toggleUser(r), ["prevent"])
             }, [
-              e("div", We, [
+              e("div", Ze, [
                 e(
                   "div",
-                  Re,
-                  u(a.name),
+                  $e,
+                  g(r.name),
                   1
                   /* TEXT */
                 ),
                 e(
                   "div",
-                  Ze,
-                  u(a.email),
+                  Qe,
+                  g(r.email),
                   1
                   /* TEXT */
                 )
               ]),
-              s.isUserSelected(a) ? (n(), i("div", Ge, " ✓ ")) : o("v-if", !0)
-            ], 40, Oe))),
+              a.isUserSelected(r) ? (o(), n("div", Ke, " ✓ ")) : s("v-if", !0)
+            ], 40, Re))),
             128
             /* KEYED_FRAGMENT */
           ))
-        ])) : o("v-if", !0)
+        ])) : s("v-if", !0)
       ]),
-      o(" Collaborators List "),
-      e("div", Qe, [
-        (n(!0), i(
-          v,
+      s(" Collaborators List "),
+      e("div", Ye, [
+        (o(!0), n(
+          m,
           null,
-          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"
+          C(a.collaborators, (r) => (o(), n("div", {
+            key: r.email,
+            class: "grid grid-cols-[1fr_1.5fr_auto] gap-4 items-center py-4 border-b border-veylan-gray-400"
           }, [
             e(
               "div",
-              $e,
-              u(a.name),
+              Je,
+              g(r.name),
               1
               /* TEXT */
             ),
             e(
               "div",
-              Ke,
-              u(a.email),
+              Xe,
+              g(r.email),
               1
               /* TEXT */
             ),
             e("button", {
-              onClick: (d) => s.removeCollaborator(a),
-              class: "text-gray-800 hover:text-black transition-colors text-2xl leading-none"
-            }, " × ", 8, Ye)
+              onClick: (d) => a.removeCollaborator(r),
+              class: "text-veylan-gray-800 hover:text-veylan-black transition-colors text-2xl leading-none"
+            }, " × ", 8, et)
           ]))),
           128
           /* KEYED_FRAGMENT */
         ))
       ]),
-      o(" Action Buttons "),
+      s(" Action Buttons "),
       e("div", { class: "flex gap-4 pt-6" }, [
         e("button", {
-          onClick: s.closeModal,
-          class: "flex-1 h-8 flex items-center justify-center gap-2 px-4 text-gray-800 rounded-xl hover:bg-gray-50 transition-colors font-medium",
+          onClick: a.closeModal,
+          class: "flex-1 h-8 flex items-center justify-center gap-2 px-4 text-veylan-gray-800 rounded-xl hover:bg-veylan-gray-300 transition-colors font-medium",
           style: { "font-size": "12px" }
-        }, l[2] || (l[2] = [
+        }, t[2] || (t[2] = [
           e(
             "svg",
             {
@@ -904,15 +926,15 @@ function Je(r, l, t, s, f, m) {
           )
         ])),
         e("button", {
-          onClick: s.addCollaborators,
-          class: "flex-1 h-8 px-4 bg-black text-white rounded-xl hover:bg-gray-800 transition-colors font-medium",
+          onClick: a.addCollaborators,
+          class: "flex-1 h-8 px-4 bg-veylan-black text-veylan-white rounded-xl hover:bg-veylan-gray-900 transition-colors font-medium",
           style: { "font-size": "12px" }
         }, " Add Collaborators ")
       ])
     ])
-  ])) : o("v-if", !0);
+  ])) : s("v-if", !0);
 }
-const Nt = /* @__PURE__ */ g(Ve, [["render", Je], ["__scopeId", "data-v-f6014a35"], ["__file", "/root/app/code/src/components/InviteCollaboratorsModalV2.vue"]]), Xe = /* @__PURE__ */ w({
+const Gt = /* @__PURE__ */ y(Pe, [["render", tt], ["__scopeId", "data-v-f6014a35"], ["__file", "/root/app/code/src/components/InviteCollaboratorsModalV2.vue"]]), lt = /* @__PURE__ */ w({
   __name: "NavigationSidebar",
   props: {
     items: { type: Array, required: !1, default: () => [
@@ -925,112 +947,112 @@ const Nt = /* @__PURE__ */ g(Ve, [["render", Je], ["__scopeId", "data-v-f6014a35
     activeItem: { type: Number, required: !1, default: 0 }
   },
   emits: ["item-click"],
-  setup(r, { expose: l, emit: t }) {
-    l();
-    const s = t, a = { emit: s, handleItemClick: (d) => {
-      s("item-click", d);
-    }, getIconColor: (d) => d ? "#C3FF00" : "white", get Home() {
-      return $;
-    }, get MessageSquare() {
+  setup(i, { expose: t, emit: l }) {
+    t();
+    const a = l, r = { emit: a, handleItemClick: (d) => {
+      a("item-click", d);
+    }, getIconColor: (d) => d ? "#A2DA00" : "#FFFFFF", get Home() {
       return Q;
+    }, get MessageSquare() {
+      return $;
     }, get ToyBrick() {
-      return G;
+      return Z;
     } };
-    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+    return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
   }
-}), 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,
+}), st = { class: "sidebar-nav group bg-veylan-black flex flex-col justify-between shadow-md" }, at = { class: "pt-10 px-2 flex flex-col gap-8" }, ot = { class: "flex flex-col gap-4" }, nt = ["onClick"], rt = { class: "nav-label text-sm text-gray-300 whitespace-nowrap" }, it = { class: "flex flex-col items-start px-4 pb-8 gap-4" }, dt = { class: "profile-section flex items-center gap-3 w-full" }, ct = { class: "profile-text flex-1 min-w-0" }, xt = { class: "text-sm text-white font-medium whitespace-nowrap" }, gt = { class: "text-[10px] text-gray-400 whitespace-nowrap" };
+function ut(i, t, l, a, x, v) {
+  return o(), n(
+    m,
     null,
     [
-      o(" Expandable Sidebar Navigation "),
-      e("aside", et, [
-        o(" Top Section "),
-        e("div", tt, [
-          o(" Logo "),
-          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, [
-            (n(!0), i(
-              v,
+      s(" Expandable Sidebar Navigation "),
+      e("aside", st, [
+        s(" Top Section "),
+        e("div", at, [
+          s(" Logo "),
+          t[0] || (t[0] = b('<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)),
+          s(" Navigation Items "),
+          e("div", ot, [
+            (o(!0), n(
+              m,
               null,
-              k(t.items, (a, d) => (n(), i("div", {
+              C(l.items, (r, d) => (o(), n("div", {
                 key: d,
-                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]"])
+                onClick: (u) => a.handleItemClick(d),
+                class: z(["nav-item flex items-center gap-[18px] px-2.5 py-2 rounded-lg cursor-pointer transition-colors duration-200", l.activeItem === d ? "bg-veylan-gray-900" : "hover:bg-veylan-gray-900"])
               }, [
-                o(" Dashboard Icon "),
-                a.icon === "dashboard" ? (n(), _(s.Home, {
+                s(" Dashboard Icon "),
+                r.icon === "dashboard" ? (o(), k(a.Home, {
                   key: 0,
                   class: "flex-shrink-0",
                   size: 20,
                   "stroke-width": 1.5,
-                  color: s.getIconColor(t.activeItem === d)
-                }, null, 8, ["color"])) : a.icon === "conversations" ? (n(), i(
-                  v,
+                  color: a.getIconColor(l.activeItem === d)
+                }, null, 8, ["color"])) : r.icon === "conversations" ? (o(), n(
+                  m,
                   { key: 1 },
                   [
-                    o(" Conversations Icon "),
-                    I(s.MessageSquare, {
+                    s(" Conversations Icon "),
+                    B(a.MessageSquare, {
                       class: "flex-shrink-0",
                       size: 20,
                       "stroke-width": 1.5,
-                      color: s.getIconColor(t.activeItem === d)
+                      color: a.getIconColor(l.activeItem === d)
                     }, null, 8, ["color"])
                   ],
                   2112
                   /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                )) : a.icon === "templates" ? (n(), i(
-                  v,
+                )) : r.icon === "templates" ? (o(), n(
+                  m,
                   { key: 2 },
                   [
-                    o(" Templates Icon "),
-                    I(s.ToyBrick, {
+                    s(" Templates Icon "),
+                    B(a.ToyBrick, {
                       class: "flex-shrink-0",
                       size: 20,
                       "stroke-width": 1.5,
-                      color: s.getIconColor(t.activeItem === d)
+                      color: a.getIconColor(l.activeItem === d)
                     }, null, 8, ["color"])
                   ],
                   2112
                   /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                )) : o("v-if", !0),
+                )) : s("v-if", !0),
                 e(
                   "span",
-                  st,
-                  u(a.name),
+                  rt,
+                  g(r.name),
                   1
                   /* TEXT */
                 )
-              ], 10, ot))),
+              ], 10, nt))),
               128
               /* KEYED_FRAGMENT */
             ))
           ])
         ]),
-        o(" Bottom Section - Profile "),
-        e("div", nt, [
-          o(" User Profile "),
-          e("div", it, [
-            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, [
+        s(" Bottom Section - Profile "),
+        e("div", it, [
+          s(" User Profile "),
+          e("div", dt, [
+            t[1] || (t[1] = b('<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", ct, [
               e(
                 "div",
-                rt,
-                u(t.userName),
+                xt,
+                g(l.userName),
                 1
                 /* TEXT */
               ),
               e(
                 "div",
-                dt,
-                u(t.userVersion),
+                gt,
+                g(l.userVersion),
                 1
                 /* TEXT */
               )
             ]),
-            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))
+            t[2] || (t[2] = b('<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,18 +1061,18 @@ function ct(r, l, t, s, f, m) {
     /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
   );
 }
-const Pt = /* @__PURE__ */ g(Xe, [["render", ct], ["__scopeId", "data-v-4c3eb68c"], ["__file", "/root/app/code/src/components/NavigationSidebar.vue"]]), ut = /* @__PURE__ */ w({
+const Ot = /* @__PURE__ */ y(lt, [["render", ut], ["__scopeId", "data-v-4c3eb68c"], ["__file", "/root/app/code/src/components/NavigationSidebar.vue"]]), vt = /* @__PURE__ */ w({
   __name: "TextStyles",
-  setup(r, { expose: l }) {
-    l();
-    const t = {};
-    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
+  setup(i, { expose: t }) {
+    t();
+    const l = {};
+    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
   }
-}), ft = { class: "flex flex-col gap-12 w-full" };
-function xt(r, l, t, s, f, m) {
-  return n(), i("div", ft, [
-    o(" h1 "),
-    l[0] || (l[0] = e(
+}), pt = { class: "flex flex-col gap-12 w-full" };
+function ft(i, t, l, a, x, v) {
+  return o(), n("div", pt, [
+    s(" h1 "),
+    t[0] || (t[0] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
@@ -1067,8 +1089,8 @@ function xt(r, l, t, s, f, m) {
       -1
       /* CACHED */
     )),
-    o(" h2 "),
-    l[1] || (l[1] = e(
+    s(" h2 "),
+    t[1] || (t[1] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
@@ -1085,8 +1107,8 @@ function xt(r, l, t, s, f, m) {
       -1
       /* CACHED */
     )),
-    o(" h3 "),
-    l[2] || (l[2] = e(
+    s(" h3 "),
+    t[2] || (t[2] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
@@ -1103,8 +1125,8 @@ function xt(r, l, t, s, f, m) {
       -1
       /* CACHED */
     )),
-    o(" Card Headline Copy "),
-    l[3] || (l[3] = e(
+    s(" Card Headline Copy "),
+    t[3] || (t[3] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
@@ -1121,8 +1143,8 @@ function xt(r, l, t, s, f, m) {
       -1
       /* CACHED */
     )),
-    o(" Body Text (Large) - Header "),
-    l[4] || (l[4] = e(
+    s(" Body Text (Large) - Header "),
+    t[4] || (t[4] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
@@ -1139,8 +1161,8 @@ function xt(r, l, t, s, f, m) {
       -1
       /* CACHED */
     )),
-    o(" Body Text (Large) "),
-    l[5] || (l[5] = e(
+    s(" Body Text (Large) "),
+    t[5] || (t[5] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
@@ -1157,8 +1179,8 @@ function xt(r, l, t, s, f, m) {
       -1
       /* CACHED */
     )),
-    o(" Body Text (Small) - Header "),
-    l[6] || (l[6] = e(
+    s(" Body Text (Small) - Header "),
+    t[6] || (t[6] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
@@ -1175,8 +1197,8 @@ function xt(r, l, t, s, f, m) {
       -1
       /* CACHED */
     )),
-    o(" Body Text (Small) "),
-    l[7] || (l[7] = e(
+    s(" Body Text (Small) "),
+    t[7] || (t[7] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
@@ -1193,8 +1215,8 @@ function xt(r, l, t, s, f, m) {
       -1
       /* CACHED */
     )),
-    o(" Text Links (Default) "),
-    l[8] || (l[8] = e(
+    s(" Text Links (Default) "),
+    t[8] || (t[8] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
@@ -1214,8 +1236,8 @@ function xt(r, l, t, s, f, m) {
       -1
       /* CACHED */
     )),
-    o(" Text Links (Active/ON) "),
-    l[9] || (l[9] = e(
+    s(" Text Links (Active/ON) "),
+    t[9] || (t[9] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
@@ -1235,8 +1257,8 @@ function xt(r, l, t, s, f, m) {
       -1
       /* CACHED */
     )),
-    o(" Labels "),
-    l[10] || (l[10] = e(
+    s(" Labels "),
+    t[10] || (t[10] = e(
       "div",
       { class: "flex flex-col gap-3" },
       [
@@ -1255,14 +1277,14 @@ function xt(r, l, t, s, f, m) {
     ))
   ]);
 }
-const Et = /* @__PURE__ */ g(ut, [["render", xt], ["__file", "/root/app/code/src/components/TextStyles.vue"]]), ht = {}, pt = {
+const Wt = /* @__PURE__ */ y(vt, [["render", ft], ["__file", "/root/app/code/src/components/TextStyles.vue"]]), yt = {}, mt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "20",
   height: "20",
   fill: "currentColor"
 };
-function mt(r, l) {
-  return n(), i("svg", pt, l[0] || (l[0] = [
+function ht(i, t) {
+  return o(), n("svg", mt, t[0] || (t[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" },
@@ -1272,14 +1294,14 @@ function mt(r, l) {
     )
   ]));
 }
-const Ut = /* @__PURE__ */ g(ht, [["render", mt], ["__file", "/root/app/code/src/components/icons/IconCommunity.vue"]]), gt = {}, vt = {
+const Rt = /* @__PURE__ */ y(yt, [["render", ht], ["__file", "/root/app/code/src/components/icons/IconCommunity.vue"]]), bt = {}, wt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "20",
   height: "17",
   fill: "currentColor"
 };
-function yt(r, l) {
-  return n(), i("svg", vt, l[0] || (l[0] = [
+function _t(i, t) {
+  return o(), n("svg", wt, t[0] || (t[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" },
@@ -1289,14 +1311,14 @@ function yt(r, l) {
     )
   ]));
 }
-const Ot = /* @__PURE__ */ g(gt, [["render", yt], ["__file", "/root/app/code/src/components/icons/IconDocumentation.vue"]]), bt = {}, wt = {
+const Zt = /* @__PURE__ */ y(bt, [["render", _t], ["__file", "/root/app/code/src/components/icons/IconDocumentation.vue"]]), kt = {}, Ct = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "18",
   height: "20",
   fill: "currentColor"
 };
-function _t(r, l) {
-  return n(), i("svg", wt, l[0] || (l[0] = [
+function zt(i, t) {
+  return o(), n("svg", Ct, t[0] || (t[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" },
@@ -1306,14 +1328,14 @@ function _t(r, l) {
     )
   ]));
 }
-const Wt = /* @__PURE__ */ g(bt, [["render", _t], ["__file", "/root/app/code/src/components/icons/IconEcosystem.vue"]]), kt = {}, Ct = {
+const $t = /* @__PURE__ */ y(kt, [["render", zt], ["__file", "/root/app/code/src/components/icons/IconEcosystem.vue"]]), St = {}, Mt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "20",
   height: "20",
   fill: "currentColor"
 };
-function zt(r, l) {
-  return n(), i("svg", Ct, l[0] || (l[0] = [
+function Bt(i, t) {
+  return o(), n("svg", Mt, t[0] || (t[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" },
@@ -1323,7 +1345,7 @@ function zt(r, l) {
     )
   ]));
 }
-const Rt = /* @__PURE__ */ g(kt, [["render", zt], ["__file", "/root/app/code/src/components/icons/IconSupport.vue"]]), St = {}, Mt = {
+const Qt = /* @__PURE__ */ y(St, [["render", Bt], ["__file", "/root/app/code/src/components/icons/IconSupport.vue"]]), It = {}, Dt = {
   xmlns: "http://www.w3.org/2000/svg",
   "xmlns:xlink": "http://www.w3.org/1999/xlink",
   "aria-hidden": "true",
@@ -1334,8 +1356,8 @@ const Rt = /* @__PURE__ */ g(kt, [["render", zt], ["__file", "/root/app/code/src
   preserveAspectRatio: "xMidYMid meet",
   viewBox: "0 0 24 24"
 };
-function It(r, l) {
-  return n(), i("svg", Mt, l[0] || (l[0] = [
+function At(i, t) {
+  return o(), n("svg", Dt, t[0] || (t[0] = [
     e(
       "path",
       {
@@ -1348,19 +1370,20 @@ function It(r, l) {
     )
   ]));
 }
-const Zt = /* @__PURE__ */ g(St, [["render", It], ["__file", "/root/app/code/src/components/icons/IconTooling.vue"]]);
+const Kt = /* @__PURE__ */ y(It, [["render", At], ["__file", "/root/app/code/src/components/icons/IconTooling.vue"]]);
 export {
-  Ft as BaseModal,
-  jt as ButtonComponent,
-  Vt as CampaignCard,
-  Dt as CardComponents,
-  Ut as IconCommunity,
-  Ot as IconDocumentation,
-  Wt as IconEcosystem,
-  Rt as IconSupport,
-  Zt as IconTooling,
-  Nt as InviteCollaboratorsModalV2,
-  Pt as NavigationSidebar,
-  Et as TextStyles
+  Nt as BaseModal,
+  Vt as ButtonComponent,
+  Pt as CampaignCard,
+  Et as CardComponents,
+  Ut as ColorStyles,
+  Rt as IconCommunity,
+  Zt as IconDocumentation,
+  $t as IconEcosystem,
+  Qt as IconSupport,
+  Kt as IconTooling,
+  Gt as InviteCollaboratorsModalV2,
+  Ot as NavigationSidebar,
+  Wt as TextStyles
 };
 //# sourceMappingURL=fusion-component-library.es.js.map