veylan-component-library 1.2.0 → 1.2.1

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

@@ -1,4 +1,4 @@
-import { defineComponent as w, createElementBlock as n, createCommentVNode as s, openBlock as a, 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 I, createStaticVNode as b, ref as S, computed as V, withDirectives as P, vModelText as E } from "vue";
+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",
@@ -11,7 +11,7 @@ const K = /* @__PURE__ */ w({
   emits: ["close", "primary", "secondary"],
   setup(i, { expose: t, emit: l }) {
     t();
-    const o = i, x = l, u = { props: o, emit: x, handleClose: () => {
+    const a = i, x = l, u = { props: a, emit: x, handleClose: () => {
       x("close");
     }, handlePrimary: () => {
       x("primary");
@@ -22,18 +22,18 @@ const K = /* @__PURE__ */ w({
   }
 }), y = (i, t) => {
   const l = i.__vccOpts || i;
-  for (const [o, x] of t)
-    l[o] = x;
+  for (const [a, x] of t)
+    l[a] = x;
   return l;
-}, 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 = { 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(i, t, l, o, x, p) {
-  return l.isOpen ? (a(), n("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: M(o.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, [
       s(" Header "),
@@ -51,8 +51,8 @@ function ee(i, t, l, o, x, p) {
         e(
           "button",
           {
-            onClick: o.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" }
           },
           g(l.secondaryButtonText),
@@ -62,8 +62,8 @@ function ee(i, t, l, o, x, p) {
         e(
           "button",
           {
-            onClick: o.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" }
           },
           g(l.primaryButtonText),
@@ -85,8 +85,8 @@ const Nt = /* @__PURE__ */ y(K, [["render", ee], ["__file", "/root/app/code/src/
   emits: ["click"],
   setup(i, { expose: t, emit: l }) {
     t();
-    const o = l, p = { emit: o, handleClick: () => {
-      o("click");
+    const a = l, v = { emit: a, handleClick: () => {
+      a("click");
     }, get ArrowLeft() {
       return W;
     }, get ArrowRight() {
@@ -96,35 +96,35 @@ const Nt = /* @__PURE__ */ y(K, [["render", ee], ["__file", "/root/app/code/src/
     }, get ChevronDown() {
       return U;
     } };
-    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 }), le = ["disabled"];
-function se(i, t, l, o, x, p) {
-  return a(), n("button", {
-    onClick: o.handleClick,
+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": l.variant === "primary" && !l.disabled,
-        "bg-white text-black hover:bg-gray-50": l.variant === "outlined" && !l.disabled,
-        "bg-transparent text-black": l.variant === "text" && !l.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: N({
       paddingLeft: l.rightIcon === "dropdown" ? "16px" : "24px",
       paddingRight: l.rightIcon === "dropdown" ? "8px" : "24px",
-      ...l.variant === "outlined" && !l.disabled && l.rightIcon === "dropdown" ? { borderWidth: "1px", borderColor: "#C8C8C8" } : l.variant === "outlined" && !l.disabled ? { borderWidth: "1px", borderColor: "black" } : {},
-      ...l.variant === "disabled" || l.disabled ? { backgroundColor: "#E8E8E8", color: "#8F8F8F" } : {}
+      ...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" } : {}
     })
   }, [
     s(" Left Icon "),
-    l.leftIcon === "arrow" ? (a(), k(o.ArrowLeft, {
+    l.leftIcon === "arrow" ? (o(), k(a.ArrowLeft, {
       key: 0,
       size: 20,
       "stroke-width": 1.5
-    })) : l.leftIcon === "share" ? (a(), k(o.Share2, {
+    })) : l.leftIcon === "share" ? (o(), k(a.Share2, {
       key: 1,
       size: 20,
       "stroke-width": 1.5
@@ -138,22 +138,22 @@ function se(i, t, l, o, x, p) {
       ))
     ]),
     s(" Right Icon "),
-    l.rightIcon === "arrow" ? (a(), k(o.ArrowRight, {
+    l.rightIcon === "arrow" ? (o(), k(a.ArrowRight, {
       key: 2,
       size: 20,
       "stroke-width": 1.5
-    })) : l.rightIcon === "share" ? (a(), k(o.Share2, {
+    })) : l.rightIcon === "share" ? (o(), k(a.Share2, {
       key: 3,
       size: 20,
       "stroke-width": 1.5
-    })) : l.rightIcon === "dropdown" ? (a(), k(o.ChevronDown, {
+    })) : l.rightIcon === "dropdown" ? (o(), k(a.ChevronDown, {
       key: 4,
       size: 20,
       "stroke-width": 1.5
     })) : s("v-if", !0)
   ], 14, le);
 }
-const Vt = /* @__PURE__ */ y(te, [["render", se], ["__file", "/root/app/code/src/components/ButtonComponent.vue"]]), oe = /* @__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 },
@@ -176,19 +176,19 @@ const Vt = /* @__PURE__ */ y(te, [["render", se], ["__file", "/root/app/code/src
   emits: ["menu-click", "add-click"],
   setup(i, { expose: t }) {
     t();
-    const o = { props: i };
-    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+    const a = { props: i };
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
-}), ae = { class: "absolute inset-0" }, ne = ["src", "alt"], re = { class: "relative flex justify-between items-start w-full" }, ie = {
+}), 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" }
 }, xe = {
   style: { width: "18px", height: "18px" },
@@ -201,17 +201,17 @@ const Vt = /* @__PURE__ */ y(te, [["render", se], ["__file", "/root/app/code/src
   style: { padding: "0 16px", gap: "8px", margin: "0" }
 }, ue = {
   key: 0,
-  class: "text-black",
+  class: "text-veylan-black",
   style: { "font-size": "16px", "font-weight": "600", "line-height": "20px" }
-}, pe = {
+}, ve = {
   key: 1,
-  class: "text-black",
+  class: "text-veylan-black",
   style: { "font-size": "12px", "font-weight": "400", "line-height": "18px" }
-}, fe = {
+}, pe = {
   key: 2,
   class: "flex items-end",
   style: { padding: "0 16px", gap: "4px" }
-}, ve = {
+}, fe = {
   class: "flex justify-between items-end flex-1",
   style: { height: "24px" }
 }, ye = {
@@ -227,16 +227,16 @@ const Vt = /* @__PURE__ */ y(te, [["render", se], ["__file", "/root/app/code/src
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function be(i, t, l, o, x, p) {
-  return a(), n(
+function be(i, t, l, a, x, v) {
+  return o(), n(
     "div",
     {
-      class: z(["flex flex-col bg-white rounded-2xl shadow-card w-full", l.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" }
     },
     [
       s(" Card Image Section "),
-      l.showImage ? (a(), n(
+      l.showImage ? (o(), n(
         "div",
         {
           key: 0,
@@ -245,7 +245,7 @@ function be(i, t, l, o, x, p) {
         },
         [
           s(" Background Image "),
-          e("div", ae, [
+          e("div", oe, [
             e("img", {
               src: l.imageSrc,
               alt: l.imageAlt,
@@ -255,15 +255,15 @@ function be(i, t, l, o, x, p) {
           s(" Card Header Overlay "),
           e("div", re, [
             s(" Labels/Pills "),
-            l.showLabels ? (a(), n("div", ie, [
-              l.label1 ? (a(), n(
+            l.showLabels ? (o(), n("div", ie, [
+              l.label1 ? (o(), n(
                 "div",
                 de,
                 g(l.label1),
                 1
                 /* TEXT */
               )) : s("v-if", !0),
-              l.label2 ? (a(), n(
+              l.label2 ? (o(), n(
                 "div",
                 ce,
                 g(l.label2),
@@ -272,13 +272,13 @@ function be(i, t, l, o, x, p) {
               )) : s("v-if", !0)
             ])) : s("v-if", !0),
             s(" Menu Button "),
-            l.showMenu ? (a(), n("button", {
+            l.showMenu ? (o(), n("button", {
               key: 1,
               onClick: t[0] || (t[0] = (r) => i.$emit("menu-click")),
-              class: "flex justify-center items-center flex-shrink-0 rounded-full bg-white hover:bg-gray-100 transition-colors",
+              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" }
             }, [
-              (a(), n("svg", xe, t[2] || (t[2] = [
+              (o(), n("svg", xe, t[2] || (t[2] = [
                 e(
                   "path",
                   {
@@ -326,31 +326,31 @@ function be(i, t, l, o, x, p) {
         /* CLASS */
       )) : s("v-if", !0),
       s(" Content Section "),
-      l.showContent ? (a(), n("div", ge, [
-        l.title ? (a(), n(
+      l.showContent ? (o(), n("div", ge, [
+        l.title ? (o(), n(
           "h3",
           ue,
           g(l.title),
           1
           /* TEXT */
         )) : s("v-if", !0),
-        l.description ? (a(), n(
+        l.description ? (o(), n(
           "p",
-          pe,
+          ve,
           g(l.description),
           1
           /* TEXT */
         )) : s("v-if", !0)
       ])) : s("v-if", !0),
       s(" Footer Section "),
-      l.showFooter ? (a(), n("div", fe, [
-        e("div", ve, [
+      l.showFooter ? (o(), n("div", pe, [
+        e("div", fe, [
           s(" Member Avatars "),
-          l.showMembers ? (a(), n("div", ye, [
-            (a(!0), n(
+          l.showMembers ? (o(), n("div", ye, [
+            (o(!0), n(
               m,
               null,
-              C(l.members, (r, d) => (a(), n("div", {
+              C(l.members, (r, d) => (o(), n("div", {
                 key: d,
                 class: "relative",
                 style: { width: "24px", height: "24px" }
@@ -389,13 +389,13 @@ function be(i, t, l, o, x, p) {
             ))
           ])) : s("v-if", !0),
           s(" Add Button "),
-          l.showAddButton ? (a(), n("button", {
+          l.showAddButton ? (o(), n("button", {
             key: 1,
             onClick: t[1] || (t[1] = (r) => i.$emit("add-click")),
-            class: "flex justify-center items-center flex-shrink-0 rounded-full bg-black hover:bg-gray-800 transition-colors",
+            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" }
           }, [
-            (a(), n("svg", he, t[4] || (t[4] = [
+            (o(), n("svg", he, t[4] || (t[4] = [
               e(
                 "path",
                 {
@@ -431,7 +431,7 @@ function be(i, t, l, o, x, p) {
     /* CLASS */
   );
 }
-const Pt = /* @__PURE__ */ y(oe, [["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 },
@@ -454,42 +454,42 @@ const Pt = /* @__PURE__ */ y(oe, [["render", be], ["__file", "/root/app/code/src
   emits: ["menu-click", "add-click"],
   setup(i, { expose: t }) {
     t();
-    const o = { props: i, get MoreHorizontal() {
+    const a = { props: i, get MoreHorizontal() {
       return R;
     } };
-    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+    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" }
-}, qe = {
+}, De = {
   key: 1,
-  class: "text-black",
+  class: "text-veylan-black",
   style: { "font-size": "12px", "font-weight": "400", "line-height": "18px" }
 }, Ae = {
   key: 2,
   class: "flex items-end mt-auto",
   style: { padding: "0 16px", gap: "4px" }
-}, Le = {
+}, qe = {
   class: "flex justify-between items-end flex-1",
   style: { height: "24px" }
-}, De = {
+}, Le = {
   key: 0,
   class: "flex items-center",
   style: { gap: "4px" }
@@ -502,16 +502,16 @@ const Pt = /* @__PURE__ */ y(oe, [["render", be], ["__file", "/root/app/code/src
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function Te(i, t, l, o, x, p) {
-  return a(), n(
+function Te(i, t, l, a, x, v) {
+  return o(), n(
     "div",
     {
-      class: z(["flex flex-col bg-white rounded-2xl shadow-card w-full", l.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" }
     },
     [
       s(" Card Image Section "),
-      l.showImage ? (a(), n(
+      l.showImage ? (o(), n(
         "div",
         {
           key: 0,
@@ -530,15 +530,15 @@ function Te(i, t, l, o, x, p) {
           s(" Card Header Overlay "),
           e("div", Ce, [
             s(" Labels/Pills "),
-            l.showLabels ? (a(), n("div", ze, [
-              l.label1 ? (a(), n(
+            l.showLabels ? (o(), n("div", ze, [
+              l.label1 ? (o(), n(
                 "div",
                 Se,
                 g(l.label1),
                 1
                 /* TEXT */
               )) : s("v-if", !0),
-              l.label2 ? (a(), n(
+              l.label2 ? (o(), n(
                 "div",
                 Me,
                 g(l.label2),
@@ -547,15 +547,15 @@ function Te(i, t, l, o, x, p) {
               )) : s("v-if", !0)
             ])) : s("v-if", !0),
             s(" Menu Button "),
-            l.showMenu ? (a(), n("button", {
+            l.showMenu ? (o(), n("button", {
               key: 1,
               onClick: t[0] || (t[0] = (r) => i.$emit("menu-click")),
-              class: "flex justify-center items-center flex-shrink-0 rounded-full bg-white hover:bg-gray-100 transition-colors",
+              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(o.MoreHorizontal, {
+              B(a.MoreHorizontal, {
                 size: 16,
-                color: "black",
+                color: "#000000",
                 "stroke-width": 2
               })
             ])) : s("v-if", !0)
@@ -565,31 +565,31 @@ function Te(i, t, l, o, x, p) {
         /* CLASS */
       )) : s("v-if", !0),
       s(" Content Section "),
-      l.showContent ? (a(), n("div", Ie, [
-        l.title ? (a(), n(
+      l.showContent ? (o(), n("div", Be, [
+        l.title ? (o(), n(
           "h3",
-          Be,
+          Ie,
           g(l.title),
           1
           /* TEXT */
         )) : s("v-if", !0),
-        l.description ? (a(), n(
+        l.description ? (o(), n(
           "p",
-          qe,
+          De,
           g(l.description),
           1
           /* TEXT */
         )) : s("v-if", !0)
       ])) : s("v-if", !0),
       s(" Footer Section "),
-      l.showFooter ? (a(), n("div", Ae, [
-        e("div", Le, [
+      l.showFooter ? (o(), n("div", Ae, [
+        e("div", qe, [
           s(" Member Avatars "),
-          l.showMembers ? (a(), n("div", De, [
-            (a(!0), n(
+          l.showMembers ? (o(), n("div", Le, [
+            (o(!0), n(
               m,
               null,
-              C(l.members, (r, d) => (a(), n("div", {
+              C(l.members, (r, d) => (o(), n("div", {
                 key: d,
                 class: "relative",
                 style: { width: "24px", height: "24px" }
@@ -628,13 +628,13 @@ function Te(i, t, l, o, x, p) {
             ))
           ])) : s("v-if", !0),
           s(" Add Button "),
-          l.showAddButton ? (a(), n("button", {
+          l.showAddButton ? (o(), n("button", {
             key: 1,
             onClick: t[1] || (t[1] = (r) => i.$emit("add-click")),
-            class: "flex justify-center items-center flex-shrink-0 rounded-full bg-black hover:bg-gray-800 transition-colors",
+            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" }
           }, [
-            (a(), n("svg", Fe, t[3] || (t[3] = [
+            (o(), n("svg", Fe, t[3] || (t[3] = [
               e(
                 "path",
                 {
@@ -678,8 +678,8 @@ const Et = /* @__PURE__ */ y(we, [["render", Te], ["__file", "/root/app/code/src
     return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
   }
 }), Ne = { class: "flex flex-col gap-12 w-full" };
-function Ve(i, t, l, o, x, p) {
-  return a(), n("div", Ne, [
+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 "),
@@ -702,24 +702,24 @@ const Ut = /* @__PURE__ */ y(je, [["render", Ve], ["__file", "/root/app/code/src
   emits: ["close", "add"],
   setup(i, { expose: t, emit: l }) {
     t();
-    const o = i, x = l, p = S(null), r = S(!1), d = S(""), u = S([]), _ = S([...o.initialCollaborators]), L = V(() => o.availableUsersList.filter((f) => {
-      const v = !_.value.some((j) => j.email === f.email);
-      if (!d.value) return v;
+    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 v && (f.name.toLowerCase().includes(h) || f.email.toLowerCase().includes(h));
-    })), D = (f) => u.value.some((v) => v.email === f.email), H = (f) => {
-      const v = u.value.findIndex((h) => h.email === f.email);
-      v > -1 ? u.value.splice(v, 1) : u.value.push(f), d.value = "";
-    }, F = (f) => {
-      const v = u.value.findIndex((h) => h.email === f.email);
-      v > -1 && u.value.splice(v, 1);
-    }, T = (f) => {
-      const v = _.value.findIndex((h) => h.email === f.email);
-      v > -1 && _.value.splice(v, 1);
-    }, B = () => {
-      p.value?.focus();
-    }, q = { props: o, emit: x, hiddenInput: p, showDropdown: r, searchQuery: d, selectedUsers: u, collaborators: _, availableUsers: L, isUserSelected: D, toggleUser: H, removeUser: F, removeCollaborator: T, focusInput: B, toggleDropdown: () => {
-      r.value = !r.value, r.value && B();
+      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(() => {
         r.value = !1;
@@ -727,36 +727,36 @@ const Ut = /* @__PURE__ */ y(je, [["render", Ve], ["__file", "/root/app/code/src
     }, closeModal: () => {
       x("close"), u.value = [], d.value = "", r.value = !1;
     }, addCollaborators: () => {
-      u.value.length > 0 && (u.value.forEach((f) => {
-        _.value.some((v) => v.email === f.email) || _.value.push(f);
+      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(q, "__isScriptSetup", { enumerable: !1, value: !0 }), q;
+    return Object.defineProperty(D, "__isScriptSetup", { enumerable: !1, value: !0 }), D;
   }
-}), Ee = { class: "bg-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 = {
+}), 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"
-}, Re = ["onMousedown"], Ze = { class: "flex-1" }, $e = { class: "text-sm font-semibold text-black" }, Qe = { class: "text-sm text-gray-600" }, Ke = {
+  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"
+  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-black",
+  class: "font-semibold text-veylan-black",
   style: { "font-size": "14px" }
 }, Xe = {
-  class: "text-black",
+  class: "text-veylan-black",
   style: { "font-size": "14px" }
 }, et = ["onClick"];
-function tt(i, t, l, o, x, p) {
-  return l.isOpen ? (a(), n("div", {
+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: M(o.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", 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 */
@@ -775,23 +775,23 @@ function tt(i, t, l, o, x, p) {
       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: o.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
         }, [
           s(" Plus Icon "),
           e("button", {
             type: "button",
-            class: "flex-shrink-0 text-gray-800 text-xl font-light",
-            onClick: o.toggleDropdown
+            class: "flex-shrink-0 text-veylan-gray-800 text-xl font-light",
+            onClick: a.toggleDropdown
           }, " + "),
           s(" Selected User Pills "),
           e("div", Ge, [
-            (a(!0), n(
+            (o(!0), n(
               m,
               null,
-              C(o.selectedUsers, (r) => (a(), n("span", {
+              C(a.selectedUsers, (r) => (o(), n("span", {
                 key: r.email,
-                class: "inline-flex items-center gap-2 px-3 py-1.5 bg-gray-100 rounded-lg text-sm font-normal text-black"
+                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(
                   g(r.display) + " ",
@@ -799,8 +799,8 @@ function tt(i, t, l, o, x, p) {
                   /* TEXT */
                 ),
                 e("button", {
-                  onClick: M((d) => o.removeUser(r), ["stop"]),
-                  class: "text-gray-600 hover:text-black transition-colors"
+                  onClick: M((d) => a.removeUser(r), ["stop"]),
+                  class: "text-veylan-gray-600 hover:text-veylan-black transition-colors"
                 }, " × ", 8, Oe)
               ]))),
               128
@@ -812,30 +812,30 @@ function tt(i, t, l, o, x, p) {
               {
                 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: t[0] || (t[0] = (r) => o.showDropdown = !0),
-                onBlur: o.handleBlur,
-                "onUpdate:modelValue": t[1] || (t[1] = (r) => o.searchQuery = r)
+                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, o.searchQuery]
+              [E, a.searchQuery]
             ])
           ])
         ]),
         s(" Dropdown "),
-        o.showDropdown ? (a(), n("div", We, [
-          (a(!0), n(
+        a.showDropdown ? (o(), n("div", We, [
+          (o(!0), n(
             m,
             null,
-            C(o.availableUsers, (r) => (a(), n("button", {
+            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: M((d) => o.toggleUser(r), ["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", Ze, [
                 e(
@@ -853,7 +853,7 @@ function tt(i, t, l, o, x, p) {
                   /* TEXT */
                 )
               ]),
-              o.isUserSelected(r) ? (a(), n("div", Ke, " ✓ ")) : s("v-if", !0)
+              a.isUserSelected(r) ? (o(), n("div", Ke, " ✓ ")) : s("v-if", !0)
             ], 40, Re))),
             128
             /* KEYED_FRAGMENT */
@@ -862,12 +862,12 @@ function tt(i, t, l, o, x, p) {
       ]),
       s(" Collaborators List "),
       e("div", Ye, [
-        (a(!0), n(
+        (o(!0), n(
           m,
           null,
-          C(o.collaborators, (r) => (a(), n("div", {
+          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-gray-200"
+            class: "grid grid-cols-[1fr_1.5fr_auto] gap-4 items-center py-4 border-b border-veylan-gray-400"
           }, [
             e(
               "div",
@@ -884,8 +884,8 @@ function tt(i, t, l, o, x, p) {
               /* TEXT */
             ),
             e("button", {
-              onClick: (d) => o.removeCollaborator(r),
-              class: "text-gray-800 hover:text-black transition-colors text-2xl leading-none"
+              onClick: (d) => a.removeCollaborator(r),
+              class: "text-veylan-gray-800 hover:text-veylan-black transition-colors text-2xl leading-none"
             }, " × ", 8, et)
           ]))),
           128
@@ -895,8 +895,8 @@ function tt(i, t, l, o, x, p) {
       s(" Action Buttons "),
       e("div", { class: "flex gap-4 pt-6" }, [
         e("button", {
-          onClick: o.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" }
         }, t[2] || (t[2] = [
           e(
@@ -926,8 +926,8 @@ function tt(i, t, l, o, x, p) {
           )
         ])),
         e("button", {
-          onClick: o.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 ")
       ])
@@ -949,9 +949,9 @@ const Gt = /* @__PURE__ */ y(Pe, [["render", tt], ["__scopeId", "data-v-f6014a35
   emits: ["item-click"],
   setup(i, { expose: t, emit: l }) {
     t();
-    const o = l, r = { emit: o, handleItemClick: (d) => {
-      o("item-click", d);
-    }, getIconColor: (d) => d ? "#C3FF00" : "white", get Home() {
+    const a = l, r = { emit: a, handleItemClick: (d) => {
+      a("item-click", d);
+    }, getIconColor: (d) => d ? "#A2DA00" : "#FFFFFF", get Home() {
       return Q;
     }, get MessageSquare() {
       return $;
@@ -960,59 +960,59 @@ const Gt = /* @__PURE__ */ y(Pe, [["render", tt], ["__scopeId", "data-v-f6014a35
     } };
     return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
   }
-}), st = { class: "sidebar-nav group bg-black flex flex-col justify-between shadow-md" }, ot = { class: "pt-10 px-2 flex flex-col gap-8" }, at = { 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, o, x, p) {
-  return a(), n(
+}), 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,
     [
       s(" Expandable Sidebar Navigation "),
       e("aside", st, [
         s(" Top Section "),
-        e("div", ot, [
+        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", at, [
-            (a(!0), n(
+          e("div", ot, [
+            (o(!0), n(
               m,
               null,
-              C(l.items, (r, d) => (a(), n("div", {
+              C(l.items, (r, d) => (o(), n("div", {
                 key: d,
-                onClick: (u) => o.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-[#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"])
               }, [
                 s(" Dashboard Icon "),
-                r.icon === "dashboard" ? (a(), k(o.Home, {
+                r.icon === "dashboard" ? (o(), k(a.Home, {
                   key: 0,
                   class: "flex-shrink-0",
                   size: 20,
                   "stroke-width": 1.5,
-                  color: o.getIconColor(l.activeItem === d)
-                }, null, 8, ["color"])) : r.icon === "conversations" ? (a(), n(
+                  color: a.getIconColor(l.activeItem === d)
+                }, null, 8, ["color"])) : r.icon === "conversations" ? (o(), n(
                   m,
                   { key: 1 },
                   [
                     s(" Conversations Icon "),
-                    I(o.MessageSquare, {
+                    B(a.MessageSquare, {
                       class: "flex-shrink-0",
                       size: 20,
                       "stroke-width": 1.5,
-                      color: o.getIconColor(l.activeItem === d)
+                      color: a.getIconColor(l.activeItem === d)
                     }, null, 8, ["color"])
                   ],
                   2112
                   /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                )) : r.icon === "templates" ? (a(), n(
+                )) : r.icon === "templates" ? (o(), n(
                   m,
                   { key: 2 },
                   [
                     s(" Templates Icon "),
-                    I(o.ToyBrick, {
+                    B(a.ToyBrick, {
                       class: "flex-shrink-0",
                       size: 20,
                       "stroke-width": 1.5,
-                      color: o.getIconColor(l.activeItem === d)
+                      color: a.getIconColor(l.activeItem === d)
                     }, null, 8, ["color"])
                   ],
                   2112
@@ -1061,16 +1061,16 @@ function ut(i, t, l, o, x, p) {
     /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
   );
 }
-const Ot = /* @__PURE__ */ y(lt, [["render", ut], ["__scopeId", "data-v-4c3eb68c"], ["__file", "/root/app/code/src/components/NavigationSidebar.vue"]]), pt = /* @__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(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 vt(i, t, l, o, x, p) {
-  return a(), n("div", ft, [
+}), 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",
@@ -1277,14 +1277,14 @@ function vt(i, t, l, o, x, p) {
     ))
   ]);
 }
-const Wt = /* @__PURE__ */ y(pt, [["render", vt], ["__file", "/root/app/code/src/components/TextStyles.vue"]]), yt = {}, mt = {
+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 ht(i, t) {
-  return a(), n("svg", mt, t[0] || (t[0] = [
+  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" },
@@ -1301,7 +1301,7 @@ const Rt = /* @__PURE__ */ y(yt, [["render", ht], ["__file", "/root/app/code/src
   fill: "currentColor"
 };
 function _t(i, t) {
-  return a(), n("svg", wt, t[0] || (t[0] = [
+  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" },
@@ -1318,7 +1318,7 @@ const Zt = /* @__PURE__ */ y(bt, [["render", _t], ["__file", "/root/app/code/src
   fill: "currentColor"
 };
 function zt(i, t) {
-  return a(), n("svg", Ct, t[0] || (t[0] = [
+  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" },
@@ -1334,8 +1334,8 @@ const $t = /* @__PURE__ */ y(kt, [["render", zt], ["__file", "/root/app/code/src
   height: "20",
   fill: "currentColor"
 };
-function It(i, t) {
-  return a(), n("svg", Mt, t[0] || (t[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" },
@@ -1345,7 +1345,7 @@ function It(i, t) {
     )
   ]));
 }
-const Qt = /* @__PURE__ */ y(St, [["render", It], ["__file", "/root/app/code/src/components/icons/IconSupport.vue"]]), Bt = {}, qt = {
+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",
@@ -1357,7 +1357,7 @@ const Qt = /* @__PURE__ */ y(St, [["render", It], ["__file", "/root/app/code/src
   viewBox: "0 0 24 24"
 };
 function At(i, t) {
-  return a(), n("svg", qt, t[0] || (t[0] = [
+  return o(), n("svg", Dt, t[0] || (t[0] = [
     e(
       "path",
       {
@@ -1370,7 +1370,7 @@ function At(i, t) {
     )
   ]));
 }
-const Kt = /* @__PURE__ */ y(Bt, [["render", At], ["__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 {
   Nt as BaseModal,
   Vt as ButtonComponent,