@oneclick.dev/cms-core-modules 0.0.110 → 0.0.112

package/dist/{GlobalStyling-C9VthHWK.mjs → GlobalStyling-Bp2PiOWt.mjs}

@@ -1,10 +1,10 @@
-import { defineComponent as X, ref as w, reactive as h, resolveComponent as f, openBlock as a, createBlock as p, withCtx as n, createVNode as s, createTextVNode as m, toDisplayString as R, createElementVNode as t, withDirectives as I, vModelText as O, createElementBlock as F, createCommentVNode as G, computed as Q, normalizeStyle as N, unref as g, onMounted as le, Fragment as W, renderList as Y } from "vue";
-import { useConfirmation as ee, useModuleRoute as te, useModuleStorage as oe, useModuleBreadcrumbs as se } from "@oneclick.dev/cms-kit";
-import { Circle as B, CircleCheckBig as A, ChevronLeft as ne, Plus as Z } from "lucide-vue-next";
-const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }, de = { class: "relative" }, ie = { class: "grid grid-cols-3 gap-2 mb-6" }, ue = { class: "relative" }, ce = { class: "relative" }, me = { class: "relative" }, ye = { class: "grid grid-cols-1 gap-2 mb-6" }, pe = { class: "relative" }, ve = { class: "flex items-center space-x-2" }, be = { class: "flex items-center space-x-2" }, ge = { class: "grid grid-cols-2 gap-2 mb-6" }, fe = { key: 0 }, xe = { class: "relative" }, Ce = { key: 1 }, ke = { class: "relative" }, De = {
+import { defineComponent as se, ref as U, reactive as ne, resolveComponent as g, openBlock as a, createBlock as f, withCtx as r, createVNode as s, createTextVNode as m, toDisplayString as B, createElementVNode as t, withDirectives as J, vModelText as M, createElementBlock as D, createCommentVNode as P, computed as K, normalizeStyle as N, unref as b, onMounted as ce, Fragment as le, renderList as te } from "vue";
+import { useConfirmation as ae, useModuleRoute as me, useModuleStorage as pe, useModuleBreadcrumbs as ye } from "@oneclick.dev/cms-kit";
+import { Circle as R, CircleCheckBig as L, ChevronLeft as ve, Plus as oe, Check as fe, Trash2 as be } from "lucide-vue-next";
+const ge = { class: "grid py-4" }, xe = { class: "grid grid-cols-2 gap-2 mb-6" }, Ce = { class: "relative" }, ke = { class: "grid grid-cols-3 gap-2 mb-6" }, De = { class: "relative" }, Fe = { class: "relative" }, Se = { class: "relative" }, $e = { class: "grid grid-cols-1 gap-2 mb-6" }, Te = { class: "relative" }, we = { class: "flex items-center space-x-2" }, Ve = { class: "flex items-center space-x-2" }, Ue = { class: "grid grid-cols-2 gap-2 mb-6" }, ze = { key: 0 }, Ne = { class: "relative" }, Be = { key: 1 }, Ae = { class: "relative" }, _e = {
   key: 0,
   class: "bg-muted px-4 py-2 rounded-md text-sm"
-}, Fe = /* @__PURE__ */ X({
+}, Re = /* @__PURE__ */ se({
   __name: "SectionStyleDialog",
   props: {
     buttons: {
@@ -13,8 +13,8 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
     }
   },
   emits: ["add", "edit", "delete"],
-  setup(P, { expose: j, emit: $ }) {
-    const { confirm: T } = ee(), U = $, k = w(!1), D = w("create"), y = w(null), c = w(!1), e = h({
+  setup(q, { expose: Q, emit: $ }) {
+    const { confirm: T } = ae(), A = $, F = U(!1), S = U("create"), v = U(null), c = U(!1), e = ne({
       name: "",
       rendering: "class",
       className: "",
@@ -24,39 +24,39 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
         titleColor: "#000000",
         textColor: "#000000"
       }
-    }), J = (S) => {
-      S ? (D.value = "edit", y.value = S.id, c.value = S.id === "DEFAULT", e.name = S.name || "", e.rendering = S.rendering || "class", e.className = S.className || "", e.componentName = S.componentName || "", e.styles.backgroundColor = S.styles.backgroundColor || "#FFFFFF", e.styles.titleColor = S.styles.titleColor || "#000000", e.styles.textColor = S.styles.textColor || "#000000") : (D.value = "create", y.value = null, c.value = !1, e.name = "", e.rendering = "class", e.className = "", e.componentName = "", e.styles.backgroundColor = "#FFFFFF", e.styles.titleColor = "#000000", e.styles.textColor = "#000000"), k.value = !0;
-    }, _ = () => {
-      U("add", e), k.value = !1;
-    }, M = () => {
-      c.value && (e.name = "Default"), U("edit", { id: y.value, ...e }), k.value = !1;
+    }), w = (V) => {
+      V ? (S.value = "edit", v.value = V.id, c.value = V.id === "DEFAULT", e.name = V.name || "", e.rendering = V.rendering || "class", e.className = V.className || "", e.componentName = V.componentName || "", e.styles.backgroundColor = V.styles.backgroundColor || "#FFFFFF", e.styles.titleColor = V.styles.titleColor || "#000000", e.styles.textColor = V.styles.textColor || "#000000") : (S.value = "create", v.value = null, c.value = !1, e.name = "", e.rendering = "class", e.className = "", e.componentName = "", e.styles.backgroundColor = "#FFFFFF", e.styles.titleColor = "#000000", e.styles.textColor = "#000000"), F.value = !0;
+    }, G = () => {
+      A("add", e), F.value = !1;
+    }, j = () => {
+      c.value && (e.name = "Default"), A("edit", { id: v.value, ...e }), F.value = !1;
     }, H = async () => {
       if (c.value) return;
-      await T("Are you sure you want to delete this theme? This action cannot be undone.", "Delete Theme", "Delete") && (U("delete", y.value), k.value = !1);
-    }, K = () => {
+      await T("Are you sure you want to delete this theme? This action cannot be undone.", "Delete Theme", "Delete") && (A("delete", v.value), F.value = !1);
+    }, W = () => {
       e.styles.backgroundColor = "#FFFFFF", e.styles.titleColor = "#000000", e.styles.textColor = "#000000";
     };
-    return j({
-      openDialog: J
-    }), (S, i) => {
-      const u = f("DialogTitle"), l = f("DialogDescription"), q = f("DialogHeader"), z = f("Label"), L = f("Input"), x = f("RadioGroupItem"), V = f("RadioGroup"), E = f("Button"), r = f("DialogFooter"), o = f("DialogScrollContent"), b = f("Dialog");
-      return a(), p(b, {
-        open: k.value,
-        "onUpdate:open": i[10] || (i[10] = (v) => k.value = v)
+    return Q({
+      openDialog: w
+    }), (V, i) => {
+      const u = g("DialogTitle"), l = g("DialogDescription"), X = g("DialogHeader"), _ = g("Label"), E = g("Input"), k = g("RadioGroupItem"), z = g("RadioGroup"), O = g("Button"), Y = g("DialogFooter"), I = g("DialogScrollContent"), Z = g("Dialog");
+      return a(), f(Z, {
+        open: F.value,
+        "onUpdate:open": i[10] || (i[10] = (C) => F.value = C)
       }, {
-        default: n(() => [
-          s(o, { class: "sm:max-w-2xl" }, {
-            default: n(() => [
-              s(q, null, {
-                default: n(() => [
+        default: r(() => [
+          s(I, { class: "sm:max-w-2xl" }, {
+            default: r(() => [
+              s(X, null, {
+                default: r(() => [
                   s(u, null, {
-                    default: n(() => [
-                      m(R(D.value === "create" ? "Add New Section Style" : "Edit Section Style"), 1)
+                    default: r(() => [
+                      m(B(S.value === "create" ? "Add New Section Style" : "Edit Section Style"), 1)
                     ]),
                     _: 1
                   }),
                   s(l, null, {
-                    default: n(() => [...i[11] || (i[11] = [
+                    default: r(() => [...i[11] || (i[11] = [
                       m(" These settings change how this section looks in the editor. To style your live site, add matching CSS or use a custom component. ", -1)
                     ])]),
                     _: 1
@@ -64,22 +64,22 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                 ]),
                 _: 1
               }),
-              t("div", ae, [
-                t("div", re, [
+              t("div", ge, [
+                t("div", xe, [
                   t("div", null, [
-                    s(z, {
+                    s(_, {
                       class: "mb-2",
                       for: "collection-theme-dialog-theme-name"
                     }, {
-                      default: n(() => [...i[12] || (i[12] = [
+                      default: r(() => [...i[12] || (i[12] = [
                         m("Display name", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", de, [
-                      s(L, {
+                    t("div", Ce, [
+                      s(E, {
                         modelValue: e.name,
-                        "onUpdate:modelValue": i[0] || (i[0] = (v) => e.name = v),
+                        "onUpdate:modelValue": i[0] || (i[0] = (C) => e.name = C),
                         id: "collection-theme-dialog-theme-name",
                         disabled: c.value
                       }, null, 8, ["modelValue", "disabled"])
@@ -87,83 +87,83 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                   ])
                 ]),
                 i[21] || (i[21] = t("h2", { class: "font-semibold mb-4" }, "Style Settings", -1)),
-                t("div", ie, [
+                t("div", ke, [
                   t("div", null, [
-                    s(z, {
+                    s(_, {
                       class: "mb-2",
                       for: "collection-theme-dialog-background-color"
                     }, {
-                      default: n(() => [...i[13] || (i[13] = [
+                      default: r(() => [...i[13] || (i[13] = [
                         m("Background color", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", ue, [
-                      I(t("input", {
-                        "onUpdate:modelValue": i[1] || (i[1] = (v) => e.styles.backgroundColor = v),
+                    t("div", De, [
+                      J(t("input", {
+                        "onUpdate:modelValue": i[1] || (i[1] = (C) => e.styles.backgroundColor = C),
                         type: "color",
                         label: "Primary Color",
                         class: "absolute top-0.5 left-1 size-8"
                       }, null, 512), [
-                        [O, e.styles.backgroundColor]
+                        [M, e.styles.backgroundColor]
                       ]),
-                      s(L, {
+                      s(E, {
                         modelValue: e.styles.backgroundColor,
-                        "onUpdate:modelValue": i[2] || (i[2] = (v) => e.styles.backgroundColor = v),
+                        "onUpdate:modelValue": i[2] || (i[2] = (C) => e.styles.backgroundColor = C),
                         class: "pl-12",
                         id: "collection-theme-dialog-background-color"
                       }, null, 8, ["modelValue"])
                     ])
                   ]),
                   t("div", null, [
-                    s(z, {
+                    s(_, {
                       class: "mb-2",
                       for: "collection-theme-dialog-title-color"
                     }, {
-                      default: n(() => [...i[14] || (i[14] = [
+                      default: r(() => [...i[14] || (i[14] = [
                         m("Heading color", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", ce, [
-                      I(t("input", {
-                        "onUpdate:modelValue": i[3] || (i[3] = (v) => e.styles.titleColor = v),
+                    t("div", Fe, [
+                      J(t("input", {
+                        "onUpdate:modelValue": i[3] || (i[3] = (C) => e.styles.titleColor = C),
                         type: "color",
                         label: "Primary Color",
                         class: "absolute top-0.5 left-1 size-8"
                       }, null, 512), [
-                        [O, e.styles.titleColor]
+                        [M, e.styles.titleColor]
                       ]),
-                      s(L, {
+                      s(E, {
                         modelValue: e.styles.titleColor,
-                        "onUpdate:modelValue": i[4] || (i[4] = (v) => e.styles.titleColor = v),
+                        "onUpdate:modelValue": i[4] || (i[4] = (C) => e.styles.titleColor = C),
                         class: "pl-12",
                         id: "collection-theme-dialog-title-color"
                       }, null, 8, ["modelValue"])
                     ])
                   ]),
                   t("div", null, [
-                    s(z, {
+                    s(_, {
                       class: "mb-2",
                       for: "collection-theme-dialog-text-color"
                     }, {
-                      default: n(() => [...i[15] || (i[15] = [
+                      default: r(() => [...i[15] || (i[15] = [
                         m("Body text color", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", me, [
-                      I(t("input", {
-                        "onUpdate:modelValue": i[5] || (i[5] = (v) => e.styles.textColor = v),
+                    t("div", Se, [
+                      J(t("input", {
+                        "onUpdate:modelValue": i[5] || (i[5] = (C) => e.styles.textColor = C),
                         type: "color",
                         label: "Primary Color",
                         class: "absolute top-0.5 left-1 size-8"
                       }, null, 512), [
-                        [O, e.styles.textColor]
+                        [M, e.styles.textColor]
                       ]),
-                      s(L, {
+                      s(E, {
                         modelValue: e.styles.textColor,
-                        "onUpdate:modelValue": i[6] || (i[6] = (v) => e.styles.textColor = v),
+                        "onUpdate:modelValue": i[6] || (i[6] = (C) => e.styles.textColor = C),
                         class: "pl-12",
                         id: "collection-theme-dialog-text-color"
                       }, null, 8, ["modelValue"])
@@ -171,40 +171,40 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                   ])
                 ]),
                 i[22] || (i[22] = t("h2", { class: "font-semibold mb-4" }, "Rendering Method", -1)),
-                t("div", ye, [
+                t("div", $e, [
                   t("div", null, [
-                    t("div", pe, [
-                      s(z, { class: "mb-4 text-muted-foreground" }, {
-                        default: n(() => [...i[16] || (i[16] = [
+                    t("div", Te, [
+                      s(_, { class: "mb-4 text-muted-foreground" }, {
+                        default: r(() => [...i[16] || (i[16] = [
                           m("Choose how this section should be styled on your site:", -1)
                         ])]),
                         _: 1
                       }),
-                      s(V, {
+                      s(z, {
                         modelValue: e.rendering,
-                        "onUpdate:modelValue": i[7] || (i[7] = (v) => e.rendering = v),
+                        "onUpdate:modelValue": i[7] || (i[7] = (C) => e.rendering = C),
                         "default-value": "class"
                       }, {
-                        default: n(() => [
-                          t("div", ve, [
-                            s(x, {
+                        default: r(() => [
+                          t("div", we, [
+                            s(k, {
                               id: "collection-theme-dialog-render-class",
                               value: "class"
                             }),
-                            s(z, { for: "collection-theme-dialog-render-class" }, {
-                              default: n(() => [...i[17] || (i[17] = [
+                            s(_, { for: "collection-theme-dialog-render-class" }, {
+                              default: r(() => [...i[17] || (i[17] = [
                                 m("Use a CSS class", -1)
                               ])]),
                               _: 1
                             })
                           ]),
-                          t("div", be, [
-                            s(x, {
+                          t("div", Ve, [
+                            s(k, {
                               id: "collection-theme-dialog-render-component",
                               value: "component"
                             }),
-                            s(z, { for: "collection-theme-dialog-render-component" }, {
-                              default: n(() => [...i[18] || (i[18] = [
+                            s(_, { for: "collection-theme-dialog-render-component" }, {
+                              default: r(() => [...i[18] || (i[18] = [
                                 m("Custom component", -1)
                               ])]),
                               _: 1
@@ -216,92 +216,92 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                     ])
                   ])
                 ]),
-                t("div", ge, [
-                  e.rendering === "class" ? (a(), F("div", fe, [
-                    s(z, {
+                t("div", Ue, [
+                  e.rendering === "class" ? (a(), D("div", ze, [
+                    s(_, {
                       class: "mb-2",
                       for: "collection-theme-dialog-class-name"
                     }, {
-                      default: n(() => [...i[19] || (i[19] = [
+                      default: r(() => [...i[19] || (i[19] = [
                         m("Class name", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", xe, [
-                      s(L, {
+                    t("div", Ne, [
+                      s(E, {
                         modelValue: e.className,
-                        "onUpdate:modelValue": i[8] || (i[8] = (v) => e.className = v),
+                        "onUpdate:modelValue": i[8] || (i[8] = (C) => e.className = C),
                         id: "collection-theme-dialog-class-name"
                       }, null, 8, ["modelValue"])
                     ])
-                  ])) : (a(), F("div", Ce, [
-                    s(z, {
+                  ])) : (a(), D("div", Be, [
+                    s(_, {
                       class: "mb-2",
                       for: "collection-theme-dialog-component-name"
                     }, {
-                      default: n(() => [...i[20] || (i[20] = [
+                      default: r(() => [...i[20] || (i[20] = [
                         m("Component name", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", ke, [
-                      s(L, {
+                    t("div", Ae, [
+                      s(E, {
                         modelValue: e.componentName,
-                        "onUpdate:modelValue": i[9] || (i[9] = (v) => e.componentName = v),
+                        "onUpdate:modelValue": i[9] || (i[9] = (C) => e.componentName = C),
                         id: "collection-theme-dialog-component-name"
                       }, null, 8, ["modelValue"])
                     ])
                   ]))
                 ]),
-                e.rendering === "class" ? (a(), F("pre", De, "." + R(e.className) + ` {
-  background-color: ` + R(e.styles.backgroundColor) + `;
-  color: ` + R(e.styles.textColor) + `;
+                e.rendering === "class" ? (a(), D("pre", _e, "." + B(e.className) + ` {
+  background-color: ` + B(e.styles.backgroundColor) + `;
+  color: ` + B(e.styles.textColor) + `;
 
   h1, h2, h3, h4, h5, h6 {
-    color: ` + R(e.styles.titleColor) + `;
+    color: ` + B(e.styles.titleColor) + `;
   }
 }
-`, 1)) : G("", !0)
+`, 1)) : P("", !0)
               ]),
-              s(r, null, {
-                default: n(() => [
-                  D.value === "edit" && !c.value ? (a(), p(E, {
+              s(Y, null, {
+                default: r(() => [
+                  S.value === "edit" && !c.value ? (a(), f(O, {
                     key: 0,
                     variant: "destructive",
                     class: "mr-auto",
                     onClick: H
                   }, {
-                    default: n(() => [...i[23] || (i[23] = [
+                    default: r(() => [...i[23] || (i[23] = [
                       m(" Delete Style ", -1)
                     ])]),
                     _: 1
-                  })) : G("", !0),
-                  D.value === "edit" && c.value ? (a(), p(E, {
+                  })) : P("", !0),
+                  S.value === "edit" && c.value ? (a(), f(O, {
                     key: 1,
                     variant: "outline",
                     class: "mr-auto",
-                    onClick: K
+                    onClick: W
                   }, {
-                    default: n(() => [...i[24] || (i[24] = [
+                    default: r(() => [...i[24] || (i[24] = [
                       m(" Reset to Default ", -1)
                     ])]),
                     _: 1
-                  })) : G("", !0),
-                  D.value === "create" ? (a(), p(E, {
+                  })) : P("", !0),
+                  S.value === "create" ? (a(), f(O, {
                     key: 2,
                     type: "submit",
-                    onClick: _
+                    onClick: G
                   }, {
-                    default: n(() => [...i[25] || (i[25] = [
+                    default: r(() => [...i[25] || (i[25] = [
                       m(" Add Style ", -1)
                     ])]),
                     _: 1
-                  })) : (a(), p(E, {
+                  })) : (a(), f(O, {
                     key: 3,
                     type: "submit",
-                    onClick: M
+                    onClick: j
                   }, {
-                    default: n(() => [...i[26] || (i[26] = [
+                    default: r(() => [...i[26] || (i[26] = [
                       m(" Save Changes ", -1)
                     ])]),
                     _: 1
@@ -317,10 +317,10 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
       }, 8, ["open"]);
     };
   }
-}), Se = { class: "grid py-4" }, $e = { class: "grid grid-cols-2 gap-2 mb-6" }, Te = { class: "relative" }, Ve = { class: "grid grid-cols-3 gap-2 mb-6" }, we = { class: "relative" }, Ne = { class: "relative" }, Ue = { class: "relative" }, ze = { class: "grid grid-cols-1 gap-2 mb-6" }, Be = { class: "relative" }, Ae = { class: "flex items-center space-x-2" }, Re = { class: "flex items-center space-x-2" }, Le = { class: "grid grid-cols-2 gap-2 mb-6" }, Ee = { key: 0 }, _e = { class: "relative" }, Ie = { key: 1 }, Oe = { class: "relative" }, Ge = {
+}), Le = { class: "grid py-4" }, Ie = { class: "grid grid-cols-2 gap-2 mb-6" }, Ee = { class: "relative" }, Oe = { class: "grid grid-cols-3 gap-2 mb-6" }, Ge = { class: "relative" }, Je = { class: "relative" }, Me = { class: "relative" }, He = { class: "grid grid-cols-1 gap-2 mb-6" }, Pe = { class: "relative" }, je = { class: "flex items-center space-x-2" }, We = { class: "flex items-center space-x-2" }, Ke = { class: "grid grid-cols-2 gap-2 mb-6" }, qe = { key: 0 }, Qe = { class: "relative" }, Xe = { key: 1 }, Ye = { class: "relative" }, Ze = {
   key: 0,
   class: "bg-muted px-4 py-2 rounded-md text-sm"
-}, Je = /* @__PURE__ */ X({
+}, he = /* @__PURE__ */ se({
   __name: "ButtonStyleDialog",
   props: {
     defaultBackground: {
@@ -329,8 +329,8 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
     }
   },
   emits: ["add", "edit", "delete"],
-  setup(P, { expose: j, emit: $ }) {
-    const { confirm: T } = ee(), U = $, k = w(!1), D = w("create"), y = w(null), c = w(!1), e = h({
+  setup(q, { expose: Q, emit: $ }) {
+    const { confirm: T } = ae(), A = $, F = U(!1), S = U("create"), v = U(null), c = U(!1), e = ne({
       name: "",
       rendering: "class",
       className: "",
@@ -342,18 +342,18 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
         buttonRoundness: "none",
         buttonStyle: "default"
       }
-    }), J = (u) => {
-      u ? (D.value = "edit", y.value = u.id, c.value = u.id === "DEFAULT", e.name = u.name || "", e.rendering = u.rendering || "class", e.className = u.className || "", e.componentName = u.componentName || "", e.styles.backgroundColor = u.styles.backgroundColor || "#FFFFFF", e.styles.textColor = u.styles.textColor || "#000000", e.styles.borderColor = u.styles.borderColor || "#000000", e.styles.buttonRoundness = u.styles.buttonRoundness || "none", e.styles.buttonStyle = u.styles.buttonStyle || "default") : (D.value = "create", y.value = null, c.value = !1, e.name = "", e.rendering = "class", e.className = "", e.componentName = "", e.styles.backgroundColor = "#FFFFFF", e.styles.textColor = "#000000", e.styles.borderColor = "#000000", e.styles.buttonRoundness = "none", e.styles.buttonStyle = "default"), k.value = !0;
-    }, _ = () => {
-      U("add", e), k.value = !1;
-    }, M = () => {
-      c.value && (e.name = "Default"), U("edit", { id: y.value, ...e }), k.value = !1;
+    }), w = (u) => {
+      u ? (S.value = "edit", v.value = u.id, c.value = u.id === "DEFAULT", e.name = u.name || "", e.rendering = u.rendering || "class", e.className = u.className || "", e.componentName = u.componentName || "", e.styles.backgroundColor = u.styles.backgroundColor || "#FFFFFF", e.styles.textColor = u.styles.textColor || "#000000", e.styles.borderColor = u.styles.borderColor || "#000000", e.styles.buttonRoundness = u.styles.buttonRoundness || "none", e.styles.buttonStyle = u.styles.buttonStyle || "default") : (S.value = "create", v.value = null, c.value = !1, e.name = "", e.rendering = "class", e.className = "", e.componentName = "", e.styles.backgroundColor = "#FFFFFF", e.styles.textColor = "#000000", e.styles.borderColor = "#000000", e.styles.buttonRoundness = "none", e.styles.buttonStyle = "default"), F.value = !0;
+    }, G = () => {
+      A("add", e), F.value = !1;
+    }, j = () => {
+      c.value && (e.name = "Default"), A("edit", { id: v.value, ...e }), F.value = !1;
     }, H = async () => {
       if (c.value) return;
-      await T("Are you sure you want to delete this theme? This action cannot be undone.", "Delete Theme", "Delete") && (U("delete", y.value), k.value = !1);
-    }, K = () => {
+      await T("Are you sure you want to delete this theme? This action cannot be undone.", "Delete Theme", "Delete") && (A("delete", v.value), F.value = !1);
+    }, W = () => {
       e.styles.backgroundColor = "#FFFFFF", e.styles.textColor = "#000000", e.styles.borderColor = "#000000", e.styles.buttonRoundness = "none", e.styles.buttonStyle = "default";
-    }, S = (u) => {
+    }, V = (u) => {
       switch (u) {
         case "none":
           return 0;
@@ -366,7 +366,7 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
         default:
           return 0;
       }
-    }, i = Q(() => {
+    }, i = K(() => {
       let u = "." + e.className + ` {
 `;
       return u += `  background-color: ${e.styles.backgroundColor};
@@ -374,31 +374,31 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
 `, e.styles.buttonStyle === "outline" ? u += `  border: 1px solid ${e.styles.borderColor};
 ` : e.styles.buttonStyle === "shadow" ? u += `  box-shadow: 0 3px 6px #ccc;
 ` : e.styles.buttonStyle === "retro" && (u += `  box-shadow: inset 0 0 0 2px ${e.styles.borderColor}, 2px 2px 0 ${e.styles.borderColor};
-`), e.styles.buttonRoundness !== "none" && (u += `  border-radius: ${S(e.styles.buttonRoundness)}px;
+`), e.styles.buttonRoundness !== "none" && (u += `  border-radius: ${V(e.styles.buttonRoundness)}px;
 `), u += `}
 `, u;
     });
-    return j({
-      openDialog: J
+    return Q({
+      openDialog: w
     }), (u, l) => {
-      const q = f("DialogTitle"), z = f("DialogDescription"), L = f("DialogHeader"), x = f("Label"), V = f("Input"), E = f("RadioGroupItem"), r = f("RadioGroup"), o = f("Button"), b = f("DialogFooter"), v = f("DialogScrollContent"), C = f("Dialog");
-      return a(), p(C, {
-        open: k.value,
-        "onUpdate:open": l[18] || (l[18] = (d) => k.value = d)
+      const X = g("DialogTitle"), _ = g("DialogDescription"), E = g("DialogHeader"), k = g("Label"), z = g("Input"), O = g("RadioGroupItem"), Y = g("RadioGroup"), I = g("Button"), Z = g("DialogFooter"), C = g("DialogScrollContent"), h = g("Dialog");
+      return a(), f(h, {
+        open: F.value,
+        "onUpdate:open": l[18] || (l[18] = (d) => F.value = d)
       }, {
-        default: n(() => [
-          s(v, { class: "sm:max-w-2xl" }, {
-            default: n(() => [
-              s(L, null, {
-                default: n(() => [
-                  s(q, null, {
-                    default: n(() => [
-                      m(R(D.value === "create" ? "Add New Button Style" : "Edit Button Style"), 1)
+        default: r(() => [
+          s(C, { class: "sm:max-w-2xl" }, {
+            default: r(() => [
+              s(E, null, {
+                default: r(() => [
+                  s(X, null, {
+                    default: r(() => [
+                      m(B(S.value === "create" ? "Add New Button Style" : "Edit Button Style"), 1)
                     ]),
                     _: 1
                   }),
-                  s(z, null, {
-                    default: n(() => [...l[19] || (l[19] = [
+                  s(_, null, {
+                    default: r(() => [...l[19] || (l[19] = [
                       m(" These settings change how this section looks in the editor. To style your live site, add matching CSS or use a custom component. ", -1)
                     ])]),
                     _: 1
@@ -406,20 +406,20 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                 ]),
                 _: 1
               }),
-              t("div", Se, [
-                t("div", $e, [
+              t("div", Le, [
+                t("div", Ie, [
                   t("div", null, [
-                    s(x, {
+                    s(k, {
                       class: "mb-2",
                       for: "collection-theme-dialog-theme-name"
                     }, {
-                      default: n(() => [...l[20] || (l[20] = [
+                      default: r(() => [...l[20] || (l[20] = [
                         m("Display name", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", Te, [
-                      s(V, {
+                    t("div", Ee, [
+                      s(z, {
                         modelValue: e.name,
                         "onUpdate:modelValue": l[0] || (l[0] = (d) => e.name = d),
                         id: "collection-theme-dialog-theme-name",
@@ -429,27 +429,27 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                   ])
                 ]),
                 l[38] || (l[38] = t("h2", { class: "font-semibold mb-4" }, "Style Settings", -1)),
-                t("div", Ve, [
+                t("div", Oe, [
                   t("div", null, [
-                    s(x, {
+                    s(k, {
                       class: "mb-2",
                       for: "collection-theme-dialog-background-color"
                     }, {
-                      default: n(() => [...l[21] || (l[21] = [
+                      default: r(() => [...l[21] || (l[21] = [
                         m("Background color", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", we, [
-                      I(t("input", {
+                    t("div", Ge, [
+                      J(t("input", {
                         "onUpdate:modelValue": l[1] || (l[1] = (d) => e.styles.backgroundColor = d),
                         type: "color",
                         label: "Primary Color",
                         class: "absolute top-0.5 left-1 size-8"
                       }, null, 512), [
-                        [O, e.styles.backgroundColor]
+                        [M, e.styles.backgroundColor]
                       ]),
-                      s(V, {
+                      s(z, {
                         modelValue: e.styles.backgroundColor,
                         "onUpdate:modelValue": l[2] || (l[2] = (d) => e.styles.backgroundColor = d),
                         class: "pl-12",
@@ -458,25 +458,25 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                     ])
                   ]),
                   t("div", null, [
-                    s(x, {
+                    s(k, {
                       class: "mb-2",
                       for: "collection-theme-dialog-text-color"
                     }, {
-                      default: n(() => [...l[22] || (l[22] = [
+                      default: r(() => [...l[22] || (l[22] = [
                         m("Text color", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", Ne, [
-                      I(t("input", {
+                    t("div", Je, [
+                      J(t("input", {
                         "onUpdate:modelValue": l[3] || (l[3] = (d) => e.styles.textColor = d),
                         type: "color",
                         label: "Primary Color",
                         class: "absolute top-0.5 left-1 size-8"
                       }, null, 512), [
-                        [O, e.styles.textColor]
+                        [M, e.styles.textColor]
                       ]),
-                      s(V, {
+                      s(z, {
                         modelValue: e.styles.textColor,
                         "onUpdate:modelValue": l[4] || (l[4] = (d) => e.styles.textColor = d),
                         class: "pl-12",
@@ -485,25 +485,25 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                     ])
                   ]),
                   t("div", null, [
-                    s(x, {
+                    s(k, {
                       class: "mb-2",
                       for: "collection-theme-dialog-border-color"
                     }, {
-                      default: n(() => [...l[23] || (l[23] = [
+                      default: r(() => [...l[23] || (l[23] = [
                         m("Border color", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", Ue, [
-                      I(t("input", {
+                    t("div", Me, [
+                      J(t("input", {
                         "onUpdate:modelValue": l[5] || (l[5] = (d) => e.styles.borderColor = d),
                         type: "color",
                         label: "Primary Color",
                         class: "absolute top-0.5 left-1 size-8"
                       }, null, 512), [
-                        [O, e.styles.borderColor]
+                        [M, e.styles.borderColor]
                       ]),
-                      s(V, {
+                      s(z, {
                         modelValue: e.styles.borderColor,
                         "onUpdate:modelValue": l[6] || (l[6] = (d) => e.styles.borderColor = d),
                         class: "pl-12",
@@ -515,25 +515,25 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                 t("div", {
                   style: N(`--button-background-color: ${e.styles.backgroundColor}; --button-text-color: ${e.styles.textColor}`)
                 }, [
-                  s(x, { class: "mb-4" }, {
-                    default: n(() => [...l[24] || (l[24] = [
+                  s(k, { class: "mb-4" }, {
+                    default: r(() => [...l[24] || (l[24] = [
                       m("Shape", -1)
                     ])]),
                     _: 1
                   }),
                   t("div", {
                     class: "grid grid-cols-4 gap-4 mb-6 p-2 rounded",
-                    style: N({ backgroundColor: P.defaultBackground })
+                    style: N({ backgroundColor: q.defaultBackground })
                   }, [
                     t("div", {
                       class: "flex flex-col gap-2 items-center cursor-pointer",
                       onClick: l[7] || (l[7] = (d) => e.styles.buttonRoundness = "none")
                     }, [
                       l[25] || (l[25] = t("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)]" }, "Button", -1)),
-                      e.styles.buttonRoundness !== "none" ? (a(), p(g(B), {
+                      e.styles.buttonRoundness !== "none" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
@@ -543,10 +543,10 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                       onClick: l[8] || (l[8] = (d) => e.styles.buttonRoundness = "small")
                     }, [
                       l[26] || (l[26] = t("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[8px]" }, "Button", -1)),
-                      e.styles.buttonRoundness !== "small" ? (a(), p(g(B), {
+                      e.styles.buttonRoundness !== "small" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
@@ -556,10 +556,10 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                       onClick: l[9] || (l[9] = (d) => e.styles.buttonRoundness = "medium")
                     }, [
                       l[27] || (l[27] = t("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[12px]" }, "Button", -1)),
-                      e.styles.buttonRoundness !== "medium" ? (a(), p(g(B), {
+                      e.styles.buttonRoundness !== "medium" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
@@ -569,34 +569,34 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                       onClick: l[10] || (l[10] = (d) => e.styles.buttonRoundness = "pill")
                     }, [
                       l[28] || (l[28] = t("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[99px]" }, "Button", -1)),
-                      e.styles.buttonRoundness !== "pill" ? (a(), p(g(B), {
+                      e.styles.buttonRoundness !== "pill" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
                     ])
                   ], 4),
-                  s(x, { class: "mb-4" }, {
-                    default: n(() => [...l[29] || (l[29] = [
+                  s(k, { class: "mb-4" }, {
+                    default: r(() => [...l[29] || (l[29] = [
                       m("Style", -1)
                     ])]),
                     _: 1
                   }),
                   t("div", {
                     class: "grid grid-cols-4 gap-4 mb-6 p-2 rounded",
-                    style: N(`--button-border-radius: ${S(e.styles.buttonRoundness)}px; --button-border-color: ${e.styles.borderColor}; background-color: ${P.defaultBackground}`)
+                    style: N(`--button-border-radius: ${V(e.styles.buttonRoundness)}px; --button-border-color: ${e.styles.borderColor}; background-color: ${q.defaultBackground}`)
                   }, [
                     t("div", {
                       class: "flex flex-col gap-2 items-center cursor-pointer",
                       onClick: l[11] || (l[11] = (d) => e.styles.buttonStyle = "default")
                     }, [
                       l[30] || (l[30] = t("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[var(--button-border-radius)]" }, "Button", -1)),
-                      e.styles.buttonStyle !== "default" ? (a(), p(g(B), {
+                      e.styles.buttonStyle !== "default" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
@@ -606,10 +606,10 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                       onClick: l[12] || (l[12] = (d) => e.styles.buttonStyle = "outline")
                     }, [
                       l[31] || (l[31] = t("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[var(--button-border-radius)] border border-[var(--button-border-color)]" }, " Button ", -1)),
-                      e.styles.buttonStyle !== "outline" ? (a(), p(g(B), {
+                      e.styles.buttonStyle !== "outline" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
@@ -622,10 +622,10 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                         class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[var(--button-border-radius)]",
                         style: { "box-shadow": "0 3px 6px #ccc" }
                       }, " Button ", -1)),
-                      e.styles.buttonStyle !== "shadow" ? (a(), p(g(B), {
+                      e.styles.buttonStyle !== "shadow" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
@@ -638,10 +638,10 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                         class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[var(--button-border-radius)]",
                         style: N(`box-shadow: inset 0 0 0 2px ${e.styles.borderColor}, 2px 2px 0 ${e.styles.borderColor};`)
                       }, " Button ", 4),
-                      e.styles.buttonStyle !== "retro" ? (a(), p(g(B), {
+                      e.styles.buttonStyle !== "retro" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
@@ -649,40 +649,40 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                   ], 4)
                 ], 4),
                 l[39] || (l[39] = t("h2", { class: "font-semibold mb-4" }, "Rendering Method", -1)),
-                t("div", ze, [
+                t("div", He, [
                   t("div", null, [
-                    t("div", Be, [
-                      s(x, { class: "mb-4 text-muted-foreground" }, {
-                        default: n(() => [...l[33] || (l[33] = [
+                    t("div", Pe, [
+                      s(k, { class: "mb-4 text-muted-foreground" }, {
+                        default: r(() => [...l[33] || (l[33] = [
                           m("Choose how this section should be styled on your site:", -1)
                         ])]),
                         _: 1
                       }),
-                      s(r, {
+                      s(Y, {
                         modelValue: e.rendering,
                         "onUpdate:modelValue": l[15] || (l[15] = (d) => e.rendering = d),
                         "default-value": "class"
                       }, {
-                        default: n(() => [
-                          t("div", Ae, [
-                            s(E, {
+                        default: r(() => [
+                          t("div", je, [
+                            s(O, {
                               id: "collection-theme-dialog-render-class",
                               value: "class"
                             }),
-                            s(x, { for: "collection-theme-dialog-render-class" }, {
-                              default: n(() => [...l[34] || (l[34] = [
+                            s(k, { for: "collection-theme-dialog-render-class" }, {
+                              default: r(() => [...l[34] || (l[34] = [
                                 m("Use a CSS class", -1)
                               ])]),
                               _: 1
                             })
                           ]),
-                          t("div", Re, [
-                            s(E, {
+                          t("div", We, [
+                            s(O, {
                               id: "collection-theme-dialog-render-component",
                               value: "component"
                             }),
-                            s(x, { for: "collection-theme-dialog-render-component" }, {
-                              default: n(() => [...l[35] || (l[35] = [
+                            s(k, { for: "collection-theme-dialog-render-component" }, {
+                              default: r(() => [...l[35] || (l[35] = [
                                 m("Custom component", -1)
                               ])]),
                               _: 1
@@ -694,36 +694,36 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                     ])
                   ])
                 ]),
-                t("div", Le, [
-                  e.rendering === "class" ? (a(), F("div", Ee, [
-                    s(x, {
+                t("div", Ke, [
+                  e.rendering === "class" ? (a(), D("div", qe, [
+                    s(k, {
                       class: "mb-2",
                       for: "collection-theme-dialog-class-name"
                     }, {
-                      default: n(() => [...l[36] || (l[36] = [
+                      default: r(() => [...l[36] || (l[36] = [
                         m("Class name", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", _e, [
-                      s(V, {
+                    t("div", Qe, [
+                      s(z, {
                         modelValue: e.className,
                         "onUpdate:modelValue": l[16] || (l[16] = (d) => e.className = d),
                         id: "collection-theme-dialog-class-name"
                       }, null, 8, ["modelValue"])
                     ])
-                  ])) : (a(), F("div", Ie, [
-                    s(x, {
+                  ])) : (a(), D("div", Xe, [
+                    s(k, {
                       class: "mb-2",
                       for: "collection-theme-dialog-component-name"
                     }, {
-                      default: n(() => [...l[37] || (l[37] = [
+                      default: r(() => [...l[37] || (l[37] = [
                         m("Component name", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", Oe, [
-                      s(V, {
+                    t("div", Ye, [
+                      s(z, {
                         modelValue: e.componentName,
                         "onUpdate:modelValue": l[17] || (l[17] = (d) => e.componentName = d),
                         id: "collection-theme-dialog-component-name"
@@ -731,47 +731,47 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                     ])
                   ]))
                 ]),
-                e.rendering === "class" ? (a(), F("pre", Ge, R(i.value), 1)) : G("", !0)
+                e.rendering === "class" ? (a(), D("pre", Ze, B(i.value), 1)) : P("", !0)
               ]),
-              s(b, null, {
-                default: n(() => [
-                  D.value === "edit" && !c.value ? (a(), p(o, {
+              s(Z, null, {
+                default: r(() => [
+                  S.value === "edit" && !c.value ? (a(), f(I, {
                     key: 0,
                     variant: "destructive",
                     class: "mr-auto",
                     onClick: H
                   }, {
-                    default: n(() => [...l[40] || (l[40] = [
+                    default: r(() => [...l[40] || (l[40] = [
                       m(" Delete Style ", -1)
                     ])]),
                     _: 1
-                  })) : G("", !0),
-                  D.value === "edit" && c.value ? (a(), p(o, {
+                  })) : P("", !0),
+                  S.value === "edit" && c.value ? (a(), f(I, {
                     key: 1,
                     variant: "outline",
                     class: "mr-auto",
-                    onClick: K
+                    onClick: W
                   }, {
-                    default: n(() => [...l[41] || (l[41] = [
+                    default: r(() => [...l[41] || (l[41] = [
                       m(" Reset to Default ", -1)
                     ])]),
                     _: 1
-                  })) : G("", !0),
-                  D.value === "create" ? (a(), p(o, {
+                  })) : P("", !0),
+                  S.value === "create" ? (a(), f(I, {
                     key: 2,
                     type: "submit",
-                    onClick: _
+                    onClick: G
                   }, {
-                    default: n(() => [...l[42] || (l[42] = [
+                    default: r(() => [...l[42] || (l[42] = [
                       m(" Add Style ", -1)
                     ])]),
                     _: 1
-                  })) : (a(), p(o, {
+                  })) : (a(), f(I, {
                     key: 3,
                     type: "submit",
-                    onClick: M
+                    onClick: j
                   }, {
-                    default: n(() => [...l[43] || (l[43] = [
+                    default: r(() => [...l[43] || (l[43] = [
                       m(" Save Changes ", -1)
                     ])]),
                     _: 1
@@ -787,10 +787,10 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
       }, 8, ["open"]);
     };
   }
-}), Me = { class: "grid py-4" }, He = { class: "grid grid-cols-2 gap-2 mb-6" }, Pe = { class: "relative" }, je = { class: "grid grid-cols-4 gap-2 mb-6" }, Ke = { class: "relative" }, qe = { class: "relative" }, Qe = { class: "relative" }, We = { class: "relative" }, Xe = { class: "grid grid-cols-1 gap-2 mb-6" }, Ye = { class: "relative" }, Ze = { class: "flex items-center space-x-2" }, he = { class: "flex items-center space-x-2" }, el = { class: "grid grid-cols-2 gap-2 mb-6" }, ll = { key: 0 }, tl = { class: "relative" }, ol = { key: 1 }, sl = { class: "relative" }, nl = {
+}), el = { class: "grid py-4" }, ll = { class: "grid grid-cols-2 gap-2 mb-6" }, tl = { class: "relative" }, ol = { class: "grid grid-cols-4 gap-2 mb-6" }, sl = { class: "relative" }, nl = { class: "relative" }, al = { class: "relative" }, rl = { class: "relative" }, dl = { class: "grid grid-cols-1 gap-2 mb-6" }, il = { class: "relative" }, ul = { class: "flex items-center space-x-2" }, cl = { class: "flex items-center space-x-2" }, ml = { class: "grid grid-cols-2 gap-2 mb-6" }, pl = { key: 0 }, yl = { class: "relative" }, vl = { key: 1 }, fl = { class: "relative" }, bl = {
   key: 0,
   class: "bg-muted px-4 py-2 rounded-md text-sm"
-}, al = /* @__PURE__ */ X({
+}, gl = /* @__PURE__ */ se({
   __name: "CardStyleDialog",
   props: {
     defaultBackground: {
@@ -799,8 +799,8 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
     }
   },
   emits: ["add", "edit", "delete"],
-  setup(P, { expose: j, emit: $ }) {
-    const { confirm: T } = ee(), U = $, k = w(!1), D = w("create"), y = w(null), c = w(!1), e = h({
+  setup(q, { expose: Q, emit: $ }) {
+    const { confirm: T } = ae(), A = $, F = U(!1), S = U("create"), v = U(null), c = U(!1), e = ne({
       name: "",
       rendering: "class",
       className: "",
@@ -813,18 +813,18 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
         roundness: "none",
         style: "default"
       }
-    }), J = (u) => {
-      u ? (D.value = "edit", y.value = u.id, c.value = u.id === "DEFAULT", e.name = u.name || "", e.rendering = u.rendering || "class", e.className = u.className || "", e.componentName = u.componentName || "", e.styles.backgroundColor = u.styles.backgroundColor || "#FFFFFF", e.styles.titleColor = u.styles.titleColor || "#000000", e.styles.textColor = u.styles.textColor || "#000000", e.styles.borderColor = u.styles.borderColor || "#000000", e.styles.roundness = u.styles.roundness || "none", e.styles.style = u.styles.style || "default") : (D.value = "create", y.value = null, c.value = !1, e.name = "", e.rendering = "class", e.className = "", e.componentName = "", e.styles.backgroundColor = "#FFFFFF", e.styles.titleColor = "#000000", e.styles.textColor = "#000000", e.styles.borderColor = "#000000", e.styles.roundness = "none", e.styles.style = "default"), k.value = !0;
-    }, _ = () => {
-      U("add", e), k.value = !1;
-    }, M = () => {
-      c.value && (e.name = "Default"), U("edit", { id: y.value, ...e }), k.value = !1;
+    }), w = (u) => {
+      u ? (S.value = "edit", v.value = u.id, c.value = u.id === "DEFAULT", e.name = u.name || "", e.rendering = u.rendering || "class", e.className = u.className || "", e.componentName = u.componentName || "", e.styles.backgroundColor = u.styles.backgroundColor || "#FFFFFF", e.styles.titleColor = u.styles.titleColor || "#000000", e.styles.textColor = u.styles.textColor || "#000000", e.styles.borderColor = u.styles.borderColor || "#000000", e.styles.roundness = u.styles.roundness || "none", e.styles.style = u.styles.style || "default") : (S.value = "create", v.value = null, c.value = !1, e.name = "", e.rendering = "class", e.className = "", e.componentName = "", e.styles.backgroundColor = "#FFFFFF", e.styles.titleColor = "#000000", e.styles.textColor = "#000000", e.styles.borderColor = "#000000", e.styles.roundness = "none", e.styles.style = "default"), F.value = !0;
+    }, G = () => {
+      A("add", e), F.value = !1;
+    }, j = () => {
+      c.value && (e.name = "Default"), A("edit", { id: v.value, ...e }), F.value = !1;
     }, H = async () => {
       if (c.value) return;
-      await T("Are you sure you want to delete this theme? This action cannot be undone.", "Delete Theme", "Delete") && (U("delete", y.value), k.value = !1);
-    }, K = () => {
+      await T("Are you sure you want to delete this theme? This action cannot be undone.", "Delete Theme", "Delete") && (A("delete", v.value), F.value = !1);
+    }, W = () => {
       e.styles.backgroundColor = "#FFFFFF", e.styles.titleColor = "#000000", e.styles.textColor = "#000000", e.styles.borderColor = "#000000", e.styles.roundness = "none", e.styles.style = "default";
-    }, S = (u) => {
+    }, V = (u) => {
       switch (u) {
         case "none":
           return 0;
@@ -835,7 +835,7 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
         default:
           return 0;
       }
-    }, i = Q(() => {
+    }, i = K(() => {
       let u = "." + e.className + ` {
 `;
       return u += `  background-color: ${e.styles.backgroundColor};
@@ -843,31 +843,31 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
 `, e.styles.style === "outline" ? u += `  border: 1px solid ${e.styles.borderColor};
 ` : e.styles.style === "shadow" ? u += `  box-shadow: 0 3px 6px #ccc;
 ` : e.styles.style === "retro" && (u += `  box-shadow: inset 0 0 0 2px ${e.styles.borderColor}, 2px 2px 0 ${e.styles.borderColor};
-`), e.styles.roundness !== "none" && (u += `  border-radius: ${S(e.styles.roundness)}px;
+`), e.styles.roundness !== "none" && (u += `  border-radius: ${V(e.styles.roundness)}px;
 `), u += `}
 `, u;
     });
-    return j({
-      openDialog: J
+    return Q({
+      openDialog: w
     }), (u, l) => {
-      const q = f("DialogTitle"), z = f("DialogDescription"), L = f("DialogHeader"), x = f("Label"), V = f("Input"), E = f("RadioGroupItem"), r = f("RadioGroup"), o = f("Button"), b = f("DialogFooter"), v = f("DialogScrollContent"), C = f("Dialog");
-      return a(), p(C, {
-        open: k.value,
-        "onUpdate:open": l[19] || (l[19] = (d) => k.value = d)
+      const X = g("DialogTitle"), _ = g("DialogDescription"), E = g("DialogHeader"), k = g("Label"), z = g("Input"), O = g("RadioGroupItem"), Y = g("RadioGroup"), I = g("Button"), Z = g("DialogFooter"), C = g("DialogScrollContent"), h = g("Dialog");
+      return a(), f(h, {
+        open: F.value,
+        "onUpdate:open": l[19] || (l[19] = (d) => F.value = d)
       }, {
-        default: n(() => [
-          s(v, { class: "sm:max-w-2xl" }, {
-            default: n(() => [
-              s(L, null, {
-                default: n(() => [
-                  s(q, null, {
-                    default: n(() => [
-                      m(R(D.value === "create" ? "Add New Card Style" : "Edit Card Style"), 1)
+        default: r(() => [
+          s(C, { class: "sm:max-w-2xl" }, {
+            default: r(() => [
+              s(E, null, {
+                default: r(() => [
+                  s(X, null, {
+                    default: r(() => [
+                      m(B(S.value === "create" ? "Add New Card Style" : "Edit Card Style"), 1)
                     ]),
                     _: 1
                   }),
-                  s(z, null, {
-                    default: n(() => [...l[20] || (l[20] = [
+                  s(_, null, {
+                    default: r(() => [...l[20] || (l[20] = [
                       m(" These settings change how this section looks in the editor. To style your live site, add matching CSS or use a custom component. ", -1)
                     ])]),
                     _: 1
@@ -875,20 +875,20 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                 ]),
                 _: 1
               }),
-              t("div", Me, [
-                t("div", He, [
+              t("div", el, [
+                t("div", ll, [
                   t("div", null, [
-                    s(x, {
+                    s(k, {
                       class: "mb-2",
                       for: "collection-theme-dialog-theme-name"
                     }, {
-                      default: n(() => [...l[21] || (l[21] = [
+                      default: r(() => [...l[21] || (l[21] = [
                         m("Display name", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", Pe, [
-                      s(V, {
+                    t("div", tl, [
+                      s(z, {
                         modelValue: e.name,
                         "onUpdate:modelValue": l[0] || (l[0] = (d) => e.name = d),
                         id: "collection-theme-dialog-theme-name",
@@ -898,27 +898,27 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                   ])
                 ]),
                 l[40] || (l[40] = t("h2", { class: "font-semibold mb-4" }, "Style Settings", -1)),
-                t("div", je, [
+                t("div", ol, [
                   t("div", null, [
-                    s(x, {
+                    s(k, {
                       class: "mb-2",
                       for: "collection-theme-dialog-background-color"
                     }, {
-                      default: n(() => [...l[22] || (l[22] = [
+                      default: r(() => [...l[22] || (l[22] = [
                         m("Background color", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", Ke, [
-                      I(t("input", {
+                    t("div", sl, [
+                      J(t("input", {
                         "onUpdate:modelValue": l[1] || (l[1] = (d) => e.styles.backgroundColor = d),
                         type: "color",
                         label: "Background color",
                         class: "absolute top-0.5 left-1 size-8"
                       }, null, 512), [
-                        [O, e.styles.backgroundColor]
+                        [M, e.styles.backgroundColor]
                       ]),
-                      s(V, {
+                      s(z, {
                         modelValue: e.styles.backgroundColor,
                         "onUpdate:modelValue": l[2] || (l[2] = (d) => e.styles.backgroundColor = d),
                         class: "pl-12",
@@ -927,25 +927,25 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                     ])
                   ]),
                   t("div", null, [
-                    s(x, {
+                    s(k, {
                       class: "mb-2",
                       for: "collection-theme-dialog-title-color"
                     }, {
-                      default: n(() => [...l[23] || (l[23] = [
+                      default: r(() => [...l[23] || (l[23] = [
                         m("Heading color", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", qe, [
-                      I(t("input", {
+                    t("div", nl, [
+                      J(t("input", {
                         "onUpdate:modelValue": l[3] || (l[3] = (d) => e.styles.titleColor = d),
                         type: "color",
                         label: "Heading color",
                         class: "absolute top-0.5 left-1 size-8"
                       }, null, 512), [
-                        [O, e.styles.titleColor]
+                        [M, e.styles.titleColor]
                       ]),
-                      s(V, {
+                      s(z, {
                         modelValue: e.styles.titleColor,
                         "onUpdate:modelValue": l[4] || (l[4] = (d) => e.styles.titleColor = d),
                         class: "pl-12",
@@ -954,25 +954,25 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                     ])
                   ]),
                   t("div", null, [
-                    s(x, {
+                    s(k, {
                       class: "mb-2",
                       for: "collection-theme-dialog-text-color"
                     }, {
-                      default: n(() => [...l[24] || (l[24] = [
+                      default: r(() => [...l[24] || (l[24] = [
                         m("Text color", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", Qe, [
-                      I(t("input", {
+                    t("div", al, [
+                      J(t("input", {
                         "onUpdate:modelValue": l[5] || (l[5] = (d) => e.styles.textColor = d),
                         type: "color",
                         label: "Text color",
                         class: "absolute top-0.5 left-1 size-8"
                       }, null, 512), [
-                        [O, e.styles.textColor]
+                        [M, e.styles.textColor]
                       ]),
-                      s(V, {
+                      s(z, {
                         modelValue: e.styles.textColor,
                         "onUpdate:modelValue": l[6] || (l[6] = (d) => e.styles.textColor = d),
                         class: "pl-12",
@@ -981,25 +981,25 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                     ])
                   ]),
                   t("div", null, [
-                    s(x, {
+                    s(k, {
                       class: "mb-2",
                       for: "collection-theme-dialog-border-color"
                     }, {
-                      default: n(() => [...l[25] || (l[25] = [
+                      default: r(() => [...l[25] || (l[25] = [
                         m("Border color", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", We, [
-                      I(t("input", {
+                    t("div", rl, [
+                      J(t("input", {
                         "onUpdate:modelValue": l[7] || (l[7] = (d) => e.styles.borderColor = d),
                         type: "color",
                         label: "Border color",
                         class: "absolute top-0.5 left-1 size-8"
                       }, null, 512), [
-                        [O, e.styles.borderColor]
+                        [M, e.styles.borderColor]
                       ]),
-                      s(V, {
+                      s(z, {
                         modelValue: e.styles.borderColor,
                         "onUpdate:modelValue": l[8] || (l[8] = (d) => e.styles.borderColor = d),
                         class: "pl-12",
@@ -1011,15 +1011,15 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                 t("div", {
                   style: N(`--card-background-color: ${e.styles.backgroundColor}; --card-title-color: ${e.styles.titleColor}; --card-text-color: ${e.styles.textColor}`)
                 }, [
-                  s(x, { class: "mb-4" }, {
-                    default: n(() => [...l[26] || (l[26] = [
+                  s(k, { class: "mb-4" }, {
+                    default: r(() => [...l[26] || (l[26] = [
                       m("Shape", -1)
                     ])]),
                     _: 1
                   }),
                   t("div", {
                     class: "grid grid-cols-3 gap-4 mb-6 p-2 rounded",
-                    style: N({ backgroundColor: P.defaultBackground })
+                    style: N({ backgroundColor: q.defaultBackground })
                   }, [
                     t("div", {
                       class: "flex flex-col gap-2 items-center cursor-pointer",
@@ -1029,10 +1029,10 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                         t("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card"),
                         t("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.")
                       ], -1)),
-                      e.styles.roundness !== "none" ? (a(), p(g(B), {
+                      e.styles.roundness !== "none" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
@@ -1045,10 +1045,10 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                         t("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card"),
                         t("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.")
                       ], -1)),
-                      e.styles.roundness !== "small" ? (a(), p(g(B), {
+                      e.styles.roundness !== "small" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
@@ -1061,24 +1061,24 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                         t("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card"),
                         t("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.")
                       ], -1)),
-                      e.styles.roundness !== "medium" ? (a(), p(g(B), {
+                      e.styles.roundness !== "medium" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
                     ])
                   ], 4),
-                  s(x, { class: "mb-4" }, {
-                    default: n(() => [...l[30] || (l[30] = [
+                  s(k, { class: "mb-4" }, {
+                    default: r(() => [...l[30] || (l[30] = [
                       m("Style", -1)
                     ])]),
                     _: 1
                   }),
                   t("div", {
                     class: "grid grid-cols-4 gap-4 mb-6 p-2 rounded",
-                    style: N(`--card-border-radius: ${S(e.styles.roundness)}px; --card-border-color: ${e.styles.borderColor}; background-color: ${P.defaultBackground}`)
+                    style: N(`--card-border-radius: ${V(e.styles.roundness)}px; --card-border-color: ${e.styles.borderColor}; background-color: ${q.defaultBackground}`)
                   }, [
                     t("div", {
                       class: "flex flex-col gap-2 items-center cursor-pointer",
@@ -1088,10 +1088,10 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                         t("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card"),
                         t("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.")
                       ], -1)),
-                      e.styles.style !== "default" ? (a(), p(g(B), {
+                      e.styles.style !== "default" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
@@ -1104,10 +1104,10 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                         t("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card"),
                         t("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.")
                       ], -1)),
-                      e.styles.style !== "outline" ? (a(), p(g(B), {
+                      e.styles.style !== "outline" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
@@ -1123,10 +1123,10 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                         t("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card"),
                         t("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.")
                       ], -1)),
-                      e.styles.style !== "shadow" ? (a(), p(g(B), {
+                      e.styles.style !== "shadow" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
@@ -1142,10 +1142,10 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                         t("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card", -1),
                         t("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.", -1)
                       ])], 4),
-                      e.styles.style !== "retro" ? (a(), p(g(B), {
+                      e.styles.style !== "retro" ? (a(), f(b(R), {
                         key: 0,
                         class: "size-4 text-black/30"
-                      })) : (a(), p(g(A), {
+                      })) : (a(), f(b(L), {
                         key: 1,
                         class: "size-4 text-black"
                       }))
@@ -1153,40 +1153,40 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                   ], 4)
                 ], 4),
                 l[41] || (l[41] = t("h2", { class: "font-semibold mb-4" }, "Rendering Method", -1)),
-                t("div", Xe, [
+                t("div", dl, [
                   t("div", null, [
-                    t("div", Ye, [
-                      s(x, { class: "mb-4 text-muted-foreground" }, {
-                        default: n(() => [...l[35] || (l[35] = [
+                    t("div", il, [
+                      s(k, { class: "mb-4 text-muted-foreground" }, {
+                        default: r(() => [...l[35] || (l[35] = [
                           m("Choose how this section should be styled on your site:", -1)
                         ])]),
                         _: 1
                       }),
-                      s(r, {
+                      s(Y, {
                         modelValue: e.rendering,
                         "onUpdate:modelValue": l[16] || (l[16] = (d) => e.rendering = d),
                         "default-value": "class"
                       }, {
-                        default: n(() => [
-                          t("div", Ze, [
-                            s(E, {
+                        default: r(() => [
+                          t("div", ul, [
+                            s(O, {
                               id: "collection-theme-dialog-render-class",
                               value: "class"
                             }),
-                            s(x, { for: "collection-theme-dialog-render-class" }, {
-                              default: n(() => [...l[36] || (l[36] = [
+                            s(k, { for: "collection-theme-dialog-render-class" }, {
+                              default: r(() => [...l[36] || (l[36] = [
                                 m("Use a CSS class", -1)
                               ])]),
                               _: 1
                             })
                           ]),
-                          t("div", he, [
-                            s(E, {
+                          t("div", cl, [
+                            s(O, {
                               id: "collection-theme-dialog-render-component",
                               value: "component"
                             }),
-                            s(x, { for: "collection-theme-dialog-render-component" }, {
-                              default: n(() => [...l[37] || (l[37] = [
+                            s(k, { for: "collection-theme-dialog-render-component" }, {
+                              default: r(() => [...l[37] || (l[37] = [
                                 m("Custom component", -1)
                               ])]),
                               _: 1
@@ -1198,36 +1198,36 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                     ])
                   ])
                 ]),
-                t("div", el, [
-                  e.rendering === "class" ? (a(), F("div", ll, [
-                    s(x, {
+                t("div", ml, [
+                  e.rendering === "class" ? (a(), D("div", pl, [
+                    s(k, {
                       class: "mb-2",
                       for: "collection-theme-dialog-class-name"
                     }, {
-                      default: n(() => [...l[38] || (l[38] = [
+                      default: r(() => [...l[38] || (l[38] = [
                         m("Class name", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", tl, [
-                      s(V, {
+                    t("div", yl, [
+                      s(z, {
                         modelValue: e.className,
                         "onUpdate:modelValue": l[17] || (l[17] = (d) => e.className = d),
                         id: "collection-theme-dialog-class-name"
                       }, null, 8, ["modelValue"])
                     ])
-                  ])) : (a(), F("div", ol, [
-                    s(x, {
+                  ])) : (a(), D("div", vl, [
+                    s(k, {
                       class: "mb-2",
                       for: "collection-theme-dialog-component-name"
                     }, {
-                      default: n(() => [...l[39] || (l[39] = [
+                      default: r(() => [...l[39] || (l[39] = [
                         m("Component name", -1)
                       ])]),
                       _: 1
                     }),
-                    t("div", sl, [
-                      s(V, {
+                    t("div", fl, [
+                      s(z, {
                         modelValue: e.componentName,
                         "onUpdate:modelValue": l[18] || (l[18] = (d) => e.componentName = d),
                         id: "collection-theme-dialog-component-name"
@@ -1235,47 +1235,47 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
                     ])
                   ]))
                 ]),
-                e.rendering === "class" ? (a(), F("pre", nl, R(i.value), 1)) : G("", !0)
+                e.rendering === "class" ? (a(), D("pre", bl, B(i.value), 1)) : P("", !0)
               ]),
-              s(b, null, {
-                default: n(() => [
-                  D.value === "edit" && !c.value ? (a(), p(o, {
+              s(Z, null, {
+                default: r(() => [
+                  S.value === "edit" && !c.value ? (a(), f(I, {
                     key: 0,
                     variant: "destructive",
                     class: "mr-auto",
                     onClick: H
                   }, {
-                    default: n(() => [...l[42] || (l[42] = [
+                    default: r(() => [...l[42] || (l[42] = [
                       m(" Delete Style ", -1)
                     ])]),
                     _: 1
-                  })) : G("", !0),
-                  D.value === "edit" && c.value ? (a(), p(o, {
+                  })) : P("", !0),
+                  S.value === "edit" && c.value ? (a(), f(I, {
                     key: 1,
                     variant: "outline",
                     class: "mr-auto",
-                    onClick: K
+                    onClick: W
                   }, {
-                    default: n(() => [...l[43] || (l[43] = [
+                    default: r(() => [...l[43] || (l[43] = [
                       m(" Reset to Default ", -1)
                     ])]),
                     _: 1
-                  })) : G("", !0),
-                  D.value === "create" ? (a(), p(o, {
+                  })) : P("", !0),
+                  S.value === "create" ? (a(), f(I, {
                     key: 2,
                     type: "submit",
-                    onClick: _
+                    onClick: G
                   }, {
-                    default: n(() => [...l[44] || (l[44] = [
+                    default: r(() => [...l[44] || (l[44] = [
                       m(" Add Style ", -1)
                     ])]),
                     _: 1
-                  })) : (a(), p(o, {
+                  })) : (a(), f(I, {
                     key: 3,
                     type: "submit",
-                    onClick: M
+                    onClick: j
                   }, {
-                    default: n(() => [...l[45] || (l[45] = [
+                    default: r(() => [...l[45] || (l[45] = [
                       m(" Save Changes ", -1)
                     ])]),
                     _: 1
@@ -1291,298 +1291,444 @@ const ae = { class: "grid py-4" }, re = { class: "grid grid-cols-2 gap-2 mb-6" }
       }, 8, ["open"]);
     };
   }
-}), rl = { class: "w-full" }, dl = { class: "flex items-center justify-between gap-4 w-full my-4" }, il = {
+}), xl = { class: "w-full" }, Cl = { class: "flex items-center justify-between gap-4 w-full my-4" }, kl = {
   key: 0,
   class: "flex gap-4 flex-wrap mb-8"
-}, ul = ["onClick"], cl = { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, ml = {
+}, Dl = ["onClick"], Fl = { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, Sl = {
   key: 1,
   class: "flex gap-4 flex-wrap mb-8"
-}, yl = {
+}, $l = {
   key: 2,
   class: "flex gap-4 flex-wrap mb-8"
-}, pl = ["onClick"], vl = { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, bl = {
+}, Tl = ["onClick"], wl = { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, Vl = {
   key: 3,
   class: "flex gap-4 flex-wrap mb-8"
-}, gl = {
+}, Ul = {
   key: 4,
   class: "flex gap-4 flex-wrap mb-8"
-}, fl = ["onClick"], xl = { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, Cl = {
+}, zl = ["onClick"], Nl = { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, Bl = {
   key: 5,
   class: "flex gap-4 flex-wrap mb-8"
-}, Sl = /* @__PURE__ */ X({
+}, Al = {
+  key: 6,
+  class: "mb-8"
+}, _l = { class: "flex flex-wrap items-center gap-3 mb-4" }, Rl = { class: "flex items-center gap-3 rounded-md border border-border px-3 py-2" }, Ll = { class: "font-mono text-sm uppercase" }, Il = {
+  key: 0,
+  class: "flex flex-wrap gap-3"
+}, El = ["aria-label", "title", "onClick"], Ol = { class: "min-w-24" }, Gl = { class: "font-mono text-sm uppercase" }, Jl = { class: "text-xs text-muted-foreground" }, Ml = {
+  key: 1,
+  class: "text-muted-foreground"
+}, Hl = {
+  key: 7,
+  class: "flex gap-4 flex-wrap mb-8"
+}, Kl = /* @__PURE__ */ se({
   __name: "GlobalStyling",
-  setup(P) {
-    const { navigateTo: j } = te(), { getModuleData: $, setModuleData: T } = oe();
-    se(() => [
+  setup(q) {
+    const { navigateTo: Q } = me(), { getModuleData: $, setModuleData: T } = pe();
+    ye(() => [
       { text: "Global Styling" }
     ]);
-    const U = w(""), k = w(""), D = w(""), y = w(null), c = w(null), e = w(null), J = Q(() => y.value === null ? null : y.value && y.value.find((r) => r.id === "DEFAULT") ? y.value : [
+    const A = U(""), F = U(""), S = U(""), v = U(null), c = U(null), e = U(null), w = U(null), G = U("#3B82F6"), j = K(() => v.value === null ? null : v.value && v.value.find((n) => n.id === "DEFAULT") ? v.value : [
       { id: "DEFAULT", name: "Default", className: "", styles: { backgroundColor: "#FFFFFF", textColor: "#000000" } },
-      ...y.value
-    ]), _ = Q(() => J.value?.find((r) => r.id === "DEFAULT")?.styles.backgroundColor ?? "#FFFFFF"), M = Q(() => c.value === null ? null : c.value && c.value.find((r) => r.id === "DEFAULT") ? c.value : [
+      ...v.value
+    ]), H = K(() => j.value?.find((n) => n.id === "DEFAULT")?.styles.backgroundColor ?? "#FFFFFF"), W = K(() => c.value === null ? null : c.value && c.value.find((n) => n.id === "DEFAULT") ? c.value : [
       { id: "DEFAULT", name: "Default", className: "", styles: { backgroundColor: "#FFFFFF", textColor: "#000000" } },
       ...c.value
-    ]), H = Q(() => e.value === null ? null : e.value && e.value.find((r) => r.id === "DEFAULT") ? e.value : [
+    ]), V = K(() => e.value === null ? null : e.value && e.value.find((n) => n.id === "DEFAULT") ? e.value : [
       { id: "DEFAULT", name: "Default", className: "", styles: { backgroundColor: "#FFFFFF", textColor: "#000000" } },
       ...e.value
-    ]);
-    async function K(r) {
-      let o = JSON.parse(JSON.stringify(r)), b = crypto.randomUUID();
-      o.id = b, y.value.push(o), y.value = await $("sectionThemes") || [], y.value.push(o), T("sectionThemes", y.value);
+    ]), i = K(() => w.value), u = K(() => w.value === null ? !1 : !w.value.some((n) => n.color === C(G.value)));
+    async function l(n) {
+      let o = JSON.parse(JSON.stringify(n)), y = crypto.randomUUID();
+      o.id = y, v.value.push(o), v.value = await $("sectionThemes") || [], v.value.push(o), T("sectionThemes", v.value);
     }
-    async function S(r) {
-      let o = JSON.parse(JSON.stringify(r)), b = y.value.findIndex((v) => v.id === o.id);
-      b !== -1 ? y.value[b] = o : o.id === "DEFAULT" && (Array.isArray(y.value) || (y.value = []), y.value = [
+    async function X(n) {
+      let o = JSON.parse(JSON.stringify(n)), y = v.value.findIndex((x) => x.id === o.id);
+      y !== -1 ? v.value[y] = o : o.id === "DEFAULT" && (Array.isArray(v.value) || (v.value = []), v.value = [
         { id: "DEFAULT", name: "Default", styles: o.styles },
-        ...y.value
-      ]), y.value = await $("sectionThemes") || [], b = y.value.findIndex((v) => v.id === o.id), b !== -1 ? (y.value[b] = o, T("sectionThemes", y.value)) : o.id === "DEFAULT" && (Array.isArray(y.value) || (y.value = []), y.value = [
+        ...v.value
+      ]), v.value = await $("sectionThemes") || [], y = v.value.findIndex((x) => x.id === o.id), y !== -1 ? (v.value[y] = o, T("sectionThemes", v.value)) : o.id === "DEFAULT" && (Array.isArray(v.value) || (v.value = []), v.value = [
         { id: "DEFAULT", name: "Default", styles: o.styles },
-        ...y.value
-      ], T("sectionThemes", y.value));
+        ...v.value
+      ], T("sectionThemes", v.value));
     }
-    async function i(r) {
-      y.value = y.value.filter((o) => o.id !== r), y.value = await $("sectionThemes") || [], y.value = y.value.filter((o) => o.id !== r), T("sectionThemes", y.value);
+    async function _(n) {
+      v.value = v.value.filter((o) => o.id !== n), v.value = await $("sectionThemes") || [], v.value = v.value.filter((o) => o.id !== n), T("sectionThemes", v.value);
     }
-    async function u(r) {
-      let o = JSON.parse(JSON.stringify(r)), b = crypto.randomUUID();
-      o.id = b, c.value.push(o), c.value = await $("buttonThemes") || [], c.value.push(o), T("buttonThemes", c.value);
+    async function E(n) {
+      let o = JSON.parse(JSON.stringify(n)), y = crypto.randomUUID();
+      o.id = y, c.value.push(o), c.value = await $("buttonThemes") || [], c.value.push(o), T("buttonThemes", c.value);
     }
-    async function l(r) {
-      let o = JSON.parse(JSON.stringify(r)), b = c.value.findIndex((v) => v.id === o.id);
-      b !== -1 ? c.value[b] = o : o.id === "DEFAULT" && (Array.isArray(c.value) || (c.value = []), c.value = [
+    async function k(n) {
+      let o = JSON.parse(JSON.stringify(n)), y = c.value.findIndex((x) => x.id === o.id);
+      y !== -1 ? c.value[y] = o : o.id === "DEFAULT" && (Array.isArray(c.value) || (c.value = []), c.value = [
         { id: "DEFAULT", name: "Default", styles: o.styles },
         ...c.value
-      ]), c.value = await $("buttonThemes") || [], b = c.value.findIndex((v) => v.id === o.id), b !== -1 ? (c.value[b] = o, T("buttonThemes", c.value)) : o.id === "DEFAULT" && (Array.isArray(c.value) || (c.value = []), c.value = [
+      ]), c.value = await $("buttonThemes") || [], y = c.value.findIndex((x) => x.id === o.id), y !== -1 ? (c.value[y] = o, T("buttonThemes", c.value)) : o.id === "DEFAULT" && (Array.isArray(c.value) || (c.value = []), c.value = [
         { id: "DEFAULT", name: "Default", styles: o.styles },
         ...c.value
       ], T("buttonThemes", c.value));
     }
-    async function q(r) {
-      c.value = c.value.filter((o) => o.id !== r), c.value = await $("buttonThemes") || [], c.value = c.value.filter((o) => o.id !== r), T("buttonThemes", c.value);
+    async function z(n) {
+      c.value = c.value.filter((o) => o.id !== n), c.value = await $("buttonThemes") || [], c.value = c.value.filter((o) => o.id !== n), T("buttonThemes", c.value);
     }
-    const z = function(r) {
+    const O = function(n) {
       let o = {};
-      if (o.backgroundColor = r.styles.backgroundColor, o.color = r.styles.textColor, r.styles.buttonStyle === "outline" ? o.border = `1px solid ${r.styles.borderColor}` : r.styles.buttonStyle === "shadow" ? o.boxShadow = "0 3px 6px #ccc" : r.styles.buttonStyle === "retro" && (o.boxShadow = `inset 0 0 0 2px ${r.styles.borderColor}, 2px 2px 0 ${r.styles.borderColor}`), r.styles.buttonRoundness !== "none") {
-        let b = 0;
-        r.styles.buttonRoundness === "small" ? b = 4 : r.styles.buttonRoundness === "medium" ? b = 8 : r.styles.buttonRoundness === "pill" && (b = 9999), o.borderRadius = `${b}px`;
+      if (o.backgroundColor = n.styles.backgroundColor, o.color = n.styles.textColor, n.styles.buttonStyle === "outline" ? o.border = `1px solid ${n.styles.borderColor}` : n.styles.buttonStyle === "shadow" ? o.boxShadow = "0 3px 6px #ccc" : n.styles.buttonStyle === "retro" && (o.boxShadow = `inset 0 0 0 2px ${n.styles.borderColor}, 2px 2px 0 ${n.styles.borderColor}`), n.styles.buttonRoundness !== "none") {
+        let y = 0;
+        n.styles.buttonRoundness === "small" ? y = 4 : n.styles.buttonRoundness === "medium" ? y = 8 : n.styles.buttonRoundness === "pill" && (y = 9999), o.borderRadius = `${y}px`;
       }
       return o;
     };
-    async function L(r) {
-      let o = JSON.parse(JSON.stringify(r)), b = crypto.randomUUID();
-      o.id = b, e.value.push(o), e.value = await $("cardThemes") || [], e.value.push(o), T("cardThemes", e.value);
+    async function Y(n) {
+      let o = JSON.parse(JSON.stringify(n)), y = crypto.randomUUID();
+      o.id = y, e.value.push(o), e.value = await $("cardThemes") || [], e.value.push(o), T("cardThemes", e.value);
     }
-    async function x(r) {
-      let o = JSON.parse(JSON.stringify(r)), b = e.value.findIndex((v) => v.id === o.id);
-      b !== -1 ? e.value[b] = o : o.id === "DEFAULT" && (Array.isArray(e.value) || (e.value = []), e.value = [
+    async function I(n) {
+      let o = JSON.parse(JSON.stringify(n)), y = e.value.findIndex((x) => x.id === o.id);
+      y !== -1 ? e.value[y] = o : o.id === "DEFAULT" && (Array.isArray(e.value) || (e.value = []), e.value = [
         { id: "DEFAULT", name: "Default", styles: o.styles },
         ...e.value
-      ]), e.value = await $("cardThemes") || [], b = e.value.findIndex((v) => v.id === o.id), b !== -1 ? (e.value[b] = o, T("cardThemes", e.value)) : o.id === "DEFAULT" && (Array.isArray(e.value) || (e.value = []), e.value = [
+      ]), e.value = await $("cardThemes") || [], y = e.value.findIndex((x) => x.id === o.id), y !== -1 ? (e.value[y] = o, T("cardThemes", e.value)) : o.id === "DEFAULT" && (Array.isArray(e.value) || (e.value = []), e.value = [
         { id: "DEFAULT", name: "Default", styles: o.styles },
         ...e.value
       ], T("cardThemes", e.value));
     }
-    async function V(r) {
-      e.value = e.value.filter((o) => o.id !== r), e.value = await $("cardThemes") || [], e.value = e.value.filter((o) => o.id !== r), T("cardThemes", e.value);
+    async function Z(n) {
+      e.value = e.value.filter((o) => o.id !== n), e.value = await $("cardThemes") || [], e.value = e.value.filter((o) => o.id !== n), T("cardThemes", e.value);
     }
-    const E = function(r) {
+    function C(n) {
+      return n.startsWith("#") ? n.toUpperCase() : `#${n.toUpperCase()}`;
+    }
+    function h() {
+      return [
+        { id: "WHITE", name: "White", color: "#FFFFFF", isDefault: !1 },
+        { id: "BLACK", name: "Black", color: "#000000", isDefault: !0 }
+      ];
+    }
+    function d(n) {
+      if (!Array.isArray(n)) return [];
+      let o = !1;
+      const y = n.map((x) => {
+        const p = typeof x == "string" ? {
+          id: crypto.randomUUID(),
+          color: C(x),
+          isDefault: !1
+        } : {
+          id: x.id || crypto.randomUUID(),
+          name: x.name,
+          color: C(x.color),
+          isDefault: !!x.isDefault
+        };
+        return p.isDefault && (p.isDefault = !o, o = !0), p;
+      });
+      return y.length && !o && (y[0].isDefault = !0), y;
+    }
+    async function de() {
+      const n = d(await $("iconColors") ?? w.value ?? []), o = C(G.value);
+      if (n.some((y) => y.color === o)) {
+        w.value = n;
+        return;
+      }
+      w.value = [
+        ...n,
+        {
+          id: crypto.randomUUID(),
+          color: o,
+          isDefault: n.length === 0
+        }
+      ], T("iconColors", w.value);
+    }
+    async function ie(n) {
+      const o = d(await $("iconColors") ?? w.value ?? []), y = o.find((p) => p.id === n), x = o.filter((p) => p.id !== n);
+      y?.isDefault && x.length && (x[0].isDefault = !0), w.value = x, T("iconColors", w.value);
+    }
+    async function re(n) {
+      const o = d(await $("iconColors") ?? w.value ?? []);
+      w.value = o.map((y) => ({
+        ...y,
+        isDefault: y.id === n
+      })), T("iconColors", w.value);
+    }
+    const ue = function(n) {
       let o = {};
-      if (o.backgroundColor = r.styles.backgroundColor, o.color = r.styles.textColor, r.styles.style === "outline" ? o.border = `1px solid ${r.styles.borderColor}` : r.styles.style === "shadow" ? o.boxShadow = "0 3px 6px #ccc" : r.styles.style === "retro" && (o.boxShadow = `inset 0 0 0 2px ${r.styles.borderColor}, 2px 2px 0 ${r.styles.borderColor}`), r.styles.roundness !== "none") {
-        let b = 0;
-        r.styles.roundness === "small" ? b = 4 : r.styles.roundness === "medium" && (b = 8), o.borderRadius = `${b}px`;
+      if (o.backgroundColor = n.styles.backgroundColor, o.color = n.styles.textColor, n.styles.style === "outline" ? o.border = `1px solid ${n.styles.borderColor}` : n.styles.style === "shadow" ? o.boxShadow = "0 3px 6px #ccc" : n.styles.style === "retro" && (o.boxShadow = `inset 0 0 0 2px ${n.styles.borderColor}, 2px 2px 0 ${n.styles.borderColor}`), n.styles.roundness !== "none") {
+        let y = 0;
+        n.styles.roundness === "small" ? y = 4 : n.styles.roundness === "medium" && (y = 8), o.borderRadius = `${y}px`;
       }
       return o;
     };
-    return le(() => {
-      $("sectionThemes").then((r) => {
-        y.value = r || [];
-      }), $("buttonThemes").then((r) => {
-        c.value = r || [];
-      }), $("cardThemes").then((r) => {
-        e.value = r || [];
+    return ce(() => {
+      $("sectionThemes").then((n) => {
+        v.value = n || [];
+      }), $("buttonThemes").then((n) => {
+        c.value = n || [];
+      }), $("cardThemes").then((n) => {
+        e.value = n || [];
+      }), $("iconColors").then((n) => {
+        if (n == null) {
+          w.value = h(), T("iconColors", w.value);
+          return;
+        }
+        w.value = d(n);
       });
-    }), (r, o) => {
-      const b = f("Button"), v = f("Skeleton");
-      return a(), F(W, null, [
-        t("div", rl, [
-          t("div", dl, [
-            s(b, {
-              onClick: o[0] || (o[0] = (C) => g(j)("/")),
+    }), (n, o) => {
+      const y = g("Button"), x = g("Skeleton");
+      return a(), D(le, null, [
+        t("div", xl, [
+          t("div", Cl, [
+            s(y, {
+              onClick: o[0] || (o[0] = (p) => b(Q)("/")),
               variant: "link",
               class: "!pl-0"
             }, {
-              default: n(() => [
-                s(g(ne), { class: "size-4" }),
-                o[4] || (o[4] = m(" Collections ", -1))
+              default: r(() => [
+                s(b(ve), { class: "size-4" }),
+                o[5] || (o[5] = m(" Collections ", -1))
               ]),
               _: 1
             })
           ]),
-          o[10] || (o[10] = t("h1", { class: "text-3xl mb-8" }, "Global Styling", -1)),
-          o[11] || (o[11] = t("h3", { class: "text-2xl mb-2" }, "Section Variants", -1)),
-          o[12] || (o[12] = t("p", { class: "mb-6 max-w-3xl text-muted-foreground" }, " Set up the default design variants for your sections. These styles will be available across all collections by default, but you can choose to disable them within individual collections if needed. ", -1)),
-          J.value !== null ? (a(), F("div", il, [
+          o[12] || (o[12] = t("h1", { class: "text-3xl mb-8" }, "Global Styling", -1)),
+          o[13] || (o[13] = t("h3", { class: "text-2xl mb-2" }, "Section Variants", -1)),
+          o[14] || (o[14] = t("p", { class: "mb-6 max-w-3xl text-muted-foreground" }, " Set up the default design variants for your sections. These styles will be available across all collections by default, but you can choose to disable them within individual collections if needed. ", -1)),
+          j.value !== null ? (a(), D("div", kl, [
             t("div", {
               class: "group/item flex flex-col gap-2 items-center",
-              onClick: o[1] || (o[1] = (C) => U.value.openDialog())
+              onClick: o[1] || (o[1] = (p) => A.value.openDialog())
             }, [
-              s(b, {
+              s(y, {
                 variant: "outline",
                 class: "size-44 border-dotted",
                 tabindex: "-1"
               }, {
-                default: n(() => [
-                  s(g(Z), { class: "size-14" })
+                default: r(() => [
+                  s(b(oe), { class: "size-14" })
                 ]),
                 _: 1
               }),
-              o[5] || (o[5] = t("p", { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, "New Style", -1))
+              o[6] || (o[6] = t("p", { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, "New Style", -1))
             ]),
-            (a(!0), F(W, null, Y(J.value, (C) => (a(), F("div", {
+            (a(!0), D(le, null, te(j.value, (p) => (a(), D("div", {
               class: "group/item flex flex-col gap-2 text-black items-center cursor-pointer hover:brightness-105 transition-all duration-300",
-              key: C.id,
-              onClick: (d) => U.value.openDialog(C)
+              key: p.id,
+              onClick: (ee) => A.value.openDialog(p)
             }, [
               t("div", {
                 class: "flex flex-col items-start rounded-md p-4 size-44",
-                style: N({ backgroundColor: C.styles.backgroundColor, border: "1px solid #E5E7EB" })
+                style: N({ backgroundColor: p.styles.backgroundColor, border: "1px solid #E5E7EB" })
               }, [
                 t("strong", {
                   class: "text-2xl",
-                  style: N({ color: C.styles.titleColor })
+                  style: N({ color: p.styles.titleColor })
                 }, "Title", 4),
                 t("p", {
                   class: "mb-1",
-                  style: N({ color: C.styles.textColor })
-                }, [...o[6] || (o[6] = [
+                  style: N({ color: p.styles.textColor })
+                }, [...o[7] || (o[7] = [
                   m("Lorem ipsum dolor", -1),
                   t("br", null, null, -1),
                   m("sit amet.", -1)
                 ])], 4),
-                C.className ? (a(), F("p", {
+                p.className ? (a(), D("p", {
                   key: 0,
                   class: "px-3 py-1.5 rounded-[99px]",
-                  style: N({ backgroundColor: C.styles.textColor, color: C.styles.backgroundColor })
-                }, "." + R(C.className), 5)) : G("", !0)
+                  style: N({ backgroundColor: p.styles.textColor, color: p.styles.backgroundColor })
+                }, "." + B(p.className), 5)) : P("", !0)
               ], 4),
-              t("p", cl, R(C.name), 1)
-            ], 8, ul))), 128))
-          ])) : (a(), F("div", ml, [
-            s(v, { class: "size-44 rounded-md" }),
-            s(v, { class: "size-44 rounded-md" })
+              t("p", Fl, B(p.name), 1)
+            ], 8, Dl))), 128))
+          ])) : (a(), D("div", Sl, [
+            s(x, { class: "size-44 rounded-md" }),
+            s(x, { class: "size-44 rounded-md" })
           ])),
-          o[13] || (o[13] = t("h3", { class: "text-2xl mb-2" }, "Button Variants", -1)),
-          o[14] || (o[14] = t("p", { class: "mb-6 max-w-3xl text-muted-foreground" }, " Define your standard button styles here. Collections can inherit these defaults or customize their own variants for more tailored experiences. ", -1)),
-          M.value !== null ? (a(), F("div", yl, [
+          o[15] || (o[15] = t("h3", { class: "text-2xl mb-2" }, "Button Variants", -1)),
+          o[16] || (o[16] = t("p", { class: "mb-6 max-w-3xl text-muted-foreground" }, " Define your standard button styles here. Collections can inherit these defaults or customize their own variants for more tailored experiences. ", -1)),
+          W.value !== null ? (a(), D("div", $l, [
             t("div", {
               class: "group/item flex flex-col gap-2 items-center",
-              onClick: o[2] || (o[2] = (C) => k.value.openDialog())
+              onClick: o[2] || (o[2] = (p) => F.value.openDialog())
             }, [
-              s(b, {
+              s(y, {
                 variant: "outline",
                 class: "size-44 border-dotted",
                 tabindex: "-1"
               }, {
-                default: n(() => [
-                  s(g(Z), { class: "size-14" })
+                default: r(() => [
+                  s(b(oe), { class: "size-14" })
                 ]),
                 _: 1
               }),
-              o[7] || (o[7] = t("p", { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, "New Style", -1))
+              o[8] || (o[8] = t("p", { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, "New Style", -1))
             ]),
-            (a(!0), F(W, null, Y(M.value, (C) => (a(), F("div", {
+            (a(!0), D(le, null, te(W.value, (p) => (a(), D("div", {
               class: "group/item flex flex-col gap-2 text-black items-center cursor-pointer hover:brightness-105 transition-all duration-300",
-              key: C.id,
-              onClick: (d) => k.value.openDialog(C)
+              key: p.id,
+              onClick: (ee) => F.value.openDialog(p)
             }, [
               t("div", {
                 class: "flex flex-col items-center justify-center rounded-md p-4 size-44",
-                style: N({ backgroundColor: _.value })
+                style: N({ backgroundColor: H.value })
               }, [
                 t("div", {
-                  style: N(z(C)),
+                  style: N(O(p)),
                   class: "px-4 py-2"
                 }, " Button ", 4)
               ], 4),
-              t("p", vl, R(C.name), 1)
-            ], 8, pl))), 128))
-          ])) : (a(), F("div", bl, [
-            s(v, { class: "size-44 rounded-md" }),
-            s(v, { class: "size-44 rounded-md" })
+              t("p", wl, B(p.name), 1)
+            ], 8, Tl))), 128))
+          ])) : (a(), D("div", Vl, [
+            s(x, { class: "size-44 rounded-md" }),
+            s(x, { class: "size-44 rounded-md" })
           ])),
-          o[15] || (o[15] = t("h3", { class: "text-2xl mb-2" }, "Card Variants", -1)),
-          o[16] || (o[16] = t("p", { class: "mb-6 max-w-3xl text-muted-foreground" }, " Define your standard card styles here. Collections can inherit these defaults or customize their own variants for more tailored experiences. ", -1)),
-          H.value !== null ? (a(), F("div", gl, [
+          o[17] || (o[17] = t("h3", { class: "text-2xl mb-2" }, "Card Variants", -1)),
+          o[18] || (o[18] = t("p", { class: "mb-6 max-w-3xl text-muted-foreground" }, " Define your standard card styles here. Collections can inherit these defaults or customize their own variants for more tailored experiences. ", -1)),
+          V.value !== null ? (a(), D("div", Ul, [
             t("div", {
               class: "group/item flex flex-col gap-2 items-center",
-              onClick: o[3] || (o[3] = (C) => D.value.openDialog())
+              onClick: o[3] || (o[3] = (p) => S.value.openDialog())
             }, [
-              s(b, {
+              s(y, {
                 variant: "outline",
                 class: "size-44 border-dotted",
                 tabindex: "-1"
               }, {
-                default: n(() => [
-                  s(g(Z), { class: "size-14" })
+                default: r(() => [
+                  s(b(oe), { class: "size-14" })
                 ]),
                 _: 1
               }),
-              o[8] || (o[8] = t("p", { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, "New Style", -1))
+              o[9] || (o[9] = t("p", { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, "New Style", -1))
             ]),
-            (a(!0), F(W, null, Y(H.value, (C) => (a(), F("div", {
+            (a(!0), D(le, null, te(V.value, (p) => (a(), D("div", {
               class: "group/item flex flex-col gap-2 text-black items-center cursor-pointer hover:brightness-105 transition-all duration-300",
-              key: C.id,
-              onClick: (d) => D.value.openDialog(C)
+              key: p.id,
+              onClick: (ee) => S.value.openDialog(p)
             }, [
               t("div", {
                 class: "flex flex-col items-center justify-center rounded-md p-4 size-44",
-                style: N({ backgroundColor: _.value })
+                style: N({ backgroundColor: H.value })
               }, [
                 t("div", {
-                  style: N(E(C)),
+                  style: N(ue(p)),
                   class: "p-4"
                 }, [
                   t("strong", {
                     class: "text-2xl",
-                    style: N({ color: C.styles.titleColor })
+                    style: N({ color: p.styles.titleColor })
                   }, "Card", 4),
-                  o[9] || (o[9] = t("p", null, "Lorem ipsum dolor sit amet.", -1))
+                  o[10] || (o[10] = t("p", null, "Lorem ipsum dolor sit amet.", -1))
                 ], 4)
               ], 4),
-              t("p", xl, R(C.name), 1)
-            ], 8, fl))), 128))
-          ])) : (a(), F("div", Cl, [
-            s(v, { class: "size-44 rounded-md" }),
-            s(v, { class: "size-44 rounded-md" })
+              t("p", Nl, B(p.name), 1)
+            ], 8, zl))), 128))
+          ])) : (a(), D("div", Bl, [
+            s(x, { class: "size-44 rounded-md" }),
+            s(x, { class: "size-44 rounded-md" })
+          ])),
+          o[19] || (o[19] = t("h3", { class: "text-2xl mb-2" }, "Icon Colors", -1)),
+          o[20] || (o[20] = t("p", { class: "mb-6 max-w-3xl text-muted-foreground" }, " Manage the color options available for icons and choose which one is used by default. ", -1)),
+          i.value !== null ? (a(), D("div", Al, [
+            t("div", _l, [
+              t("label", Rl, [
+                J(t("input", {
+                  "onUpdate:modelValue": o[4] || (o[4] = (p) => G.value = p),
+                  type: "color",
+                  class: "h-9 w-12 cursor-pointer rounded border border-border bg-transparent p-1"
+                }, null, 512), [
+                  [M, G.value]
+                ]),
+                t("span", Ll, B(G.value), 1)
+              ]),
+              s(y, {
+                onClick: de,
+                disabled: !u.value
+              }, {
+                default: r(() => [
+                  s(b(oe), { class: "size-4" }),
+                  o[11] || (o[11] = m(" Add Color ", -1))
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            i.value.length ? (a(), D("div", Il, [
+              (a(!0), D(le, null, te(i.value, (p) => (a(), D("div", {
+                class: "flex items-center gap-3 rounded-md border border-border p-3",
+                key: p.id
+              }, [
+                t("button", {
+                  type: "button",
+                  class: "size-10 rounded-md border border-border",
+                  style: N({ backgroundColor: p.color }),
+                  "aria-label": `Set ${p.color} as default icon color`,
+                  title: `Set ${p.color} as default`,
+                  onClick: (ee) => re(p.id)
+                }, null, 12, El),
+                t("div", Ol, [
+                  t("p", Gl, B(p.color), 1),
+                  t("p", Jl, B(p.isDefault ? "Default" : p.name || "Icon color"), 1)
+                ]),
+                s(y, {
+                  type: "button",
+                  size: "icon",
+                  variant: p.isDefault ? "default" : "outline",
+                  "aria-pressed": p.isDefault,
+                  "aria-label": `Set ${p.color} as default icon color`,
+                  title: `Set ${p.color} as default`,
+                  onClick: (ee) => re(p.id)
+                }, {
+                  default: r(() => [
+                    s(b(fe), { class: "size-4" })
+                  ]),
+                  _: 1
+                }, 8, ["variant", "aria-pressed", "aria-label", "title", "onClick"]),
+                s(y, {
+                  type: "button",
+                  size: "icon",
+                  variant: "outline",
+                  "aria-label": `Delete ${p.color}`,
+                  title: `Delete ${p.color}`,
+                  onClick: (ee) => ie(p.id)
+                }, {
+                  default: r(() => [
+                    s(b(be), { class: "size-4" })
+                  ]),
+                  _: 1
+                }, 8, ["aria-label", "title", "onClick"])
+              ]))), 128))
+            ])) : (a(), D("p", Ml, "No icon colors configured."))
+          ])) : (a(), D("div", Hl, [
+            s(x, { class: "size-44 rounded-md" }),
+            s(x, { class: "size-44 rounded-md" })
           ]))
         ]),
-        s(Fe, {
+        s(Re, {
           ref_key: "sectionStyleDialog",
-          ref: U,
-          onAdd: K,
-          onEdit: S,
-          onDelete: i
+          ref: A,
+          onAdd: l,
+          onEdit: X,
+          onDelete: _
         }, null, 512),
-        s(Je, {
+        s(he, {
           ref_key: "buttonStyleDialog",
-          ref: k,
-          defaultBackground: _.value,
-          onAdd: u,
-          onEdit: l,
-          onDelete: q
+          ref: F,
+          defaultBackground: H.value,
+          onAdd: E,
+          onEdit: k,
+          onDelete: z
         }, null, 8, ["defaultBackground"]),
-        s(al, {
+        s(gl, {
           ref_key: "cardStyleDialog",
-          ref: D,
-          defaultBackground: _.value,
-          onAdd: L,
-          onEdit: x,
-          onDelete: V
+          ref: S,
+          defaultBackground: H.value,
+          onAdd: Y,
+          onEdit: I,
+          onDelete: Z
         }, null, 8, ["defaultBackground"])
       ], 64);
     };
   }
 });
 export {
-  Sl as default
+  Kl as default
 };