@stachelock/ui 0.2.13 → 0.3.0

package/dist/index.js

@@ -1,64 +1,127 @@
-import { a as le, g as ae, s as ne } from "./id-DafBB_QF.js";
-import { defineAsyncComponent as y, defineComponent as g, computed as C, ref as S, watch as v, createElementBlock as p, openBlock as c, normalizeClass as $, createCommentVNode as u, createElementVNode as a, toDisplayString as f, reactive as w, createVNode as m } from "vue";
-import d from "./components/TextInput.js";
-import { _ as me } from "./UiAvatar.vue_vue_type_script_setup_true_lang-CDNjUA1L.js";
-import { _ as pe } from "./UiBreadcrumb.vue_vue_type_script_setup_true_lang-quGuN9v4.js";
-import { _ as fe } from "./UiLoading.vue_vue_type_script_setup_true_lang-KbLKA4SA.js";
-import { _ as xe } from "./UiModal.vue_vue_type_script_setup_true_lang-SAo39zpS.js";
-import { _ as be } from "./UiNavLink.vue_vue_type_script_setup_true_lang-Bz5oiCCk.js";
-import { _ as ye } from "./UiProgressBar.vue_vue_type_script_setup_true_lang-D4-B3A7K.js";
-import { _ as Se } from "./UiTable.vue_vue_type_script_setup_true_lang-hI1_xamh.js";
-import { _ as $e } from "./UiTransition.vue_vue_type_script_setup_true_lang-DwBTj18t.js";
-import { _ as Te } from "./CalendarHeader.vue_vue_type_script_setup_true_lang-Cirr0hMB.js";
-import { _ as Fe } from "./DayCalendar.vue_vue_type_script_setup_true_lang-xE5bCa3O.js";
-import { _ as je } from "./EventCard.vue_vue_type_script_setup_true_lang-YV1lfgUY.js";
-import { _ as _e } from "./EventsList.vue_vue_type_script_setup_true_lang-Cn_WOpZi.js";
-import { _ as Ne } from "./MonthCalendar.vue_vue_type_script_setup_true_lang-B9Bs0z8j.js";
-import { _ as De } from "./WeekCalendar.vue_vue_type_script_setup_true_lang-DAFQiRI9.js";
-import { _ as Ue } from "./YearCalendar.vue_vue_type_script_setup_true_lang-BfJkvmpN.js";
-import { _ as Me } from "./DynamicForm.vue_vue_type_script_setup_true_lang-BpfPAZiT.js";
-import { _ as Re } from "./DynamicFormField.vue_vue_type_script_setup_true_lang-DvT03FIS.js";
-import { _ as T } from "./CheckboxInput.vue_vue_type_script_setup_true_lang-tYAo46wK.js";
-import { _ as I } from "./ComboboxInput.vue_vue_type_script_setup_true_lang-LE2kDHpU.js";
-import { _ as F } from "./TextAreaInput.vue_vue_type_script_setup_true_lang-CbR651TU.js";
-import { _ as E } from "./SwitchInput.vue_vue_type_script_setup_true_lang-BFr2SByh.js";
-import { _ as x } from "./SelectInput.vue_vue_type_script_setup_true_lang-BPjHLHdM.js";
-import { _ as Be } from "./TagifyInput.vue_vue_type_script_setup_true_lang-DRR6jt_8.js";
-import { _ as Ge } from "./DashboardLayout.vue_vue_type_script_setup_true_lang-Cg83utkU.js";
-import { _ as Ye } from "./DefaultLayout.vue_vue_type_script_setup_true_lang-BZAz6aC-.js";
-import { _ as Je } from "./HeaderLayout.vue_vue_type_script_setup_true_lang-BY2G6hCc.js";
-import { _ as Qe } from "./NavigationGroup.vue_vue_type_script_setup_true_lang-2tAB9Hbx.js";
-import { _ as Ze } from "./NavigationItem.vue_vue_type_script_setup_true_lang-CEsuYl3S.js";
-import { _ as tt } from "./SidebarLayout.vue_vue_type_script_setup_true_lang-CzLbBcNS.js";
-import { default as ot } from "./components/Badge.js";
-import { default as lt } from "./components/Button.js";
-import { default as nt } from "./components/LoadingDots.js";
-import { default as mt } from "./calendars/CalendarDashboard.js";
-import { default as pt } from "./forms/FormFieldWrapper.js";
-const j = {
+import { a as It, g as Mt, s as jt } from "./id-DafBB_QF.js";
+import { defineAsyncComponent as K, createElementBlock as d, openBlock as i, createElementVNode as s, defineComponent as S, ref as H, watch as G, createBlock as W, unref as w, withCtx as b, createVNode as p, normalizeStyle as _, createTextVNode as $, withDirectives as D, vModelText as N, Fragment as V, renderList as B, normalizeClass as v, toDisplayString as h, computed as y, createCommentVNode as g, reactive as Q, useSlots as X, renderSlot as m, Transition as U, vShow as ee } from "vue";
+import M from "./inputs/TextInput.js";
+import { useCalendar as At } from "./composables/useCalendar.js";
+import { c as Lt, u as Et } from "./useEventSegments-B-r_8zCW.js";
+import { useFormValidation as Dt } from "./composables/useFormValidation.js";
+import { U as Pt, W as Nt, d as Ut, i as Ot, u as Rt } from "./useMap-BaZEIoWM.js";
+import { useModal as Gt } from "./composables/useModal.js";
+import { useNotifications as Yt } from "./composables/useNotifications.js";
+import { g as qt, u as Zt } from "./useSimpleTabs-CSgkChEU.js";
+import { f as Qt, i as Xt, s as el, a as sl, t as tl, c as ll, b as ol, u as al } from "./useStringTransform-CSr7nZWg.js";
+import { useTabs as nl } from "./composables/useTabs.js";
+import { useTheme as Y, presetThemes as se } from "./composables/useTheme.js";
+import { _ as dl } from "./LottieAnimation.vue_vue_type_script_setup_true_lang-CwOOShcM.js";
+import { _ as te } from "./UiAvatar.vue_vue_type_script_setup_true_lang-Ci7VLRZx.js";
+import { _ as F } from "./UiBadge.vue_vue_type_script_setup_true_lang-CV8WVEXL.js";
+import { _ as cl } from "./UiButtonGroup.vue_vue_type_script_setup_true_lang-BKyznfxi.js";
+import { _ as pl } from "./UiCheckbox.vue_vue_type_script_setup_true_lang-B5fPB7PH.js";
+import { _ as le } from "./UiLoading.vue_vue_type_script_setup_true_lang-DldleD-3.js";
+import { _ as gl } from "./UiMenu.vue_vue_type_script_setup_true_lang-aJddpshR.js";
+import { _ as xl } from "./UiModal.vue_vue_type_script_setup_true_lang-CFgLuifQ.js";
+import { _ as bl } from "./UiNavLink.vue_vue_type_script_setup_true_lang-C23h6Do0.js";
+import { _ as _l } from "./UiProgressBar.vue_vue_type_script_setup_true_lang-BioTMORv.js";
+import { _ as kl } from "./UiTable.vue_vue_type_script_setup_true_lang-BuOCaPzi.js";
+import { _ as $l } from "./UiTransition.vue_vue_type_script_setup_true_lang-DwBTj18t.js";
+import { _ as Tl } from "./CalendarHeader.vue_vue_type_script_setup_true_lang-DRwe4rw8.js";
+import { _ as Ml } from "./DayCalendar.vue_vue_type_script_setup_true_lang-BV9vYYuX.js";
+import { _ as Vl } from "./EventCard.vue_vue_type_script_setup_true_lang-j1mtKShZ.js";
+import { _ as Bl } from "./EventsList.vue_vue_type_script_setup_true_lang-D3q9wJ4E.js";
+import { _ as El } from "./MonthCalendar.vue_vue_type_style_index_0_lang-CnX3Ih0W.js";
+import { _ as Dl } from "./YearCalendar.vue_vue_type_script_setup_true_lang-C01PTLg8.js";
+import { _ as Pl } from "./BarChart.vue_vue_type_script_setup_true_lang-Dnuzd7vZ.js";
+import { _ as Ul } from "./FunnelChart.vue_vue_type_script_setup_true_lang-B8QYlJ-s.js";
+import { _ as Rl } from "./LineChart.vue_vue_type_script_setup_true_lang-DszQ-a5L.js";
+import { _ as Gl } from "./PieChart.vue_vue_type_script_setup_true_lang-DJRcsty7.js";
+import { _ as Yl } from "./SparklineChart.vue_vue_type_script_setup_true_lang-DDTcpEjy.js";
+import { _ as ql } from "./StatCard.vue_vue_type_script_setup_true_lang-DTOT0-WB.js";
+import { _ as Kl } from "./ComingSoon.vue_vue_type_script_setup_true_lang-C5GU-yiK.js";
+import { _ as Xl } from "./EmptyState.vue_vue_type_script_setup_true_lang-B_XAq5Sr.js";
+import { _ as so } from "./DynamicForm.vue_vue_type_script_setup_true_lang-DRDP86Yc.js";
+import { _ as lo } from "./DynamicFormField.vue_vue_type_script_setup_true_lang-Ct8b80dM.js";
+import { _ as ao } from "./AddDeleteButtonGroup.vue_vue_type_script_setup_true_lang-CFS3lVF-.js";
+import { _ as oe } from "./CheckboxInput.vue_vue_type_script_setup_true_lang-B8wJVkPP.js";
+import { _ as ae } from "./ComboboxInput.vue_vue_type_script_setup_true_lang-ClGP5YU0.js";
+import { _ as no } from "./DatepickerInput.vue_vue_type_style_index_0_lang-BdkGLw0H.js";
+import { _ as uo } from "./EmailInput.vue_vue_type_script_setup_true_lang-Dhfgs2Jn.js";
+import { _ as fo } from "./EmptyInput.vue_vue_type_script_setup_true_lang-BDxgc5Bs.js";
+import { _ as mo } from "./FileDropzoneInput.vue_vue_type_script_setup_true_lang-CclXceTb.js";
+import { _ as ho } from "./HiddenInput.vue_vue_type_script_setup_true_lang-DYdvWmVE.js";
+import { _ as re } from "./TextAreaInput.vue_vue_type_script_setup_true_lang-BMpc-5ln.js";
+import { _ as ne } from "./SwitchInput.vue_vue_type_script_setup_true_lang-D6M1qwP1.js";
+import { _ as O } from "./SelectInput.vue_vue_type_script_setup_true_lang--yUL7bcx.js";
+import { _ as yo } from "./SelectTextInput.vue_vue_type_script_setup_true_lang-B2Gw_se2.js";
+import { _ as vo } from "./SwitchInputGroup.vue_vue_type_script_setup_true_lang-BNKKEAMq.js";
+import { _ as Co } from "./TagifyInput.vue_vue_type_script_setup_true_lang-CAK6ZIiz.js";
+import { _ as wo } from "./DashboardLayout.vue_vue_type_script_setup_true_lang-DV-XVWqh.js";
+import { _ as So } from "./DefaultLayout.vue_vue_type_script_setup_true_lang-BZAz6aC-.js";
+import { _ as Io } from "./HeaderLayout.vue_vue_type_script_setup_true_lang-BY2G6hCc.js";
+import { _ as jo } from "./NavigationGroup.vue_vue_type_script_setup_true_lang-2tAB9Hbx.js";
+import { _ as Ao } from "./NavigationItem.vue_vue_type_script_setup_true_lang-CEsuYl3S.js";
+import { _ as Lo } from "./ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-Cri9BiBy.js";
+import { _ as Fo } from "./ProjectLogo.vue_vue_type_script_setup_true_lang-CtroDq7L.js";
+import { _ as zo } from "./SidebarLayout.vue_vue_type_script_setup_true_lang-BD2PF5xp.js";
+import { _ as No } from "./UiMapAll.vue_vue_type_script_setup_true_lang-CMAyvJMk.js";
+import { _ as Oo } from "./AlertModal.vue_vue_type_script_setup_true_lang-CxwewAVy.js";
+import { _ as Ho } from "./BaseModal.vue_vue_type_script_setup_true_lang-Cr_GAD6Q.js";
+import { _ as Wo } from "./NotificationToast.vue_vue_type_script_setup_true_lang-Cm5RsC7C.js";
+import { _ as Jo } from "./StepperPanels.vue_vue_type_script_setup_true_lang-BtHrfqFI.js";
+import { _ as Zo } from "./InlineTabs.vue_vue_type_script_setup_true_lang-DhkX5sWS.js";
+import { _ as Qo } from "./TabGroup.vue_vue_type_script_setup_true_lang-DrhDwLL3.js";
+import { _ as ea } from "./TabGroupUnderline.vue_vue_type_script_setup_true_lang-Di33js6c.js";
+import { _ as ta } from "./TabsInPills.vue_vue_type_script_setup_true_lang-CMxaK0Kw.js";
+import { _ as oa } from "./BackgroundGradientWrapper.vue_vue_type_script_setup_true_lang-B570pdYL.js";
+import { _ as ra } from "./CardWrapper.vue_vue_type_script_setup_true_lang-D59QBAi9.js";
+import { _ as ia } from "./DisclosureWrapper.vue_vue_type_script_setup_true_lang-B-Mr_vdx.js";
+import { _ as ua } from "./FormErrorWrapper.vue_vue_type_script_setup_true_lang-BQOlG_ab.js";
+import { default as fa } from "./components/CloudinaryImage.js";
+import A from "./components/Button.js";
+import { S as ie, h as R } from "./transition-_rPfnoET.js";
+import { Y as de, G as ue, V as ce } from "./dialog-B2WA4G25.js";
+import { r as fe } from "./XMarkIcon-Cwy3T6p8.js";
+import { _ as J } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { default as ma } from "./components/Banner.js";
+import { default as ha } from "./components/Breadcrumb.js";
+import { default as ya } from "./components/LoadingDots.js";
+import { default as va } from "./calendars/CalendarDashboard.js";
+import { default as Ca } from "./calendars/WeekCalendar.js";
+import { default as wa } from "./charts/BaseChart.js";
+import { areaChartConfig as Sa, barChartConfig as Ta, baseTheme as Ia, chartColors as Ma, chartTypography as ja, formatDuration as Va, formatNumber as Aa, formatPercentage as Ba, funnelChartConfig as La, getAreaGradient as Ea, hexToRgb as Fa, lineChartConfig as Da, pieChartConfig as za, stachelockColors as Pa, toRgba as Na } from "./charts/chartTheme.js";
+import { default as Oa } from "./forms/FormFieldWrapper.js";
+import { default as Ha } from "./inputs/PhoneInput.js";
+import { default as Wa } from "./inputs/RichTextInput.js";
+import { default as Ja } from "./loading/ContentSkeleton.js";
+import { default as Za } from "./loading/SmartLoadingIndicator.js";
+import { default as Qa } from "./maps/GoogleMap.js";
+import { default as er } from "./maps/UiInfoWindow.js";
+import { default as tr } from "./maps/UiMap.js";
+import { default as or } from "./maps/UiMapMarker.js";
+import { default as rr } from "./modals/ImageCropperModal.js";
+import { default as ir } from "./notifications/NotificationContainer.js";
+const pe = {
   text: {
     component: "TextInput",
-    loader: () => Promise.resolve(d)
+    loader: () => Promise.resolve(M)
   },
   email: {
     component: "TextInput",
-    loader: () => Promise.resolve(d)
+    loader: () => Promise.resolve(M)
   },
   password: {
     component: "TextInput",
-    loader: () => Promise.resolve(d)
+    loader: () => Promise.resolve(M)
   },
   number: {
     component: "TextInput",
-    loader: () => Promise.resolve(d)
+    loader: () => Promise.resolve(M)
   },
   tel: {
     component: "TextInput",
-    loader: () => Promise.resolve(d)
+    loader: () => Promise.resolve(M)
   },
   url: {
     component: "TextInput",
-    loader: () => Promise.resolve(d)
+    loader: () => Promise.resolve(M)
   },
   textarea: {
     component: "TextAreaInput",
@@ -81,29 +144,29 @@ const j = {
     loader: () => import("./inputs/SwitchInput.js")
   }
 };
-class A {
-  componentMap = { ...j };
+class me {
+  componentMap = { ...pe };
   loadedComponents = /* @__PURE__ */ new Map();
   /**
    * Register a new component type
    */
-  register(e, t, o) {
-    this.componentMap[e] = { component: t, loader: o }, this.loadedComponents.delete(e);
+  register(e, a, t) {
+    this.componentMap[e] = { component: a, loader: t }, this.loadedComponents.delete(e);
   }
   /**
    * Get a component for a field type
    */
   getComponent(e) {
-    const t = this.componentMap[e];
-    if (!t)
+    const a = this.componentMap[e];
+    if (!a)
       return console.warn(`Component type "${e}" is not registered`), null;
     if (this.loadedComponents.has(e))
       return this.loadedComponents.get(e);
-    const o = y({
-      loader: t.loader,
+    const t = K({
+      loader: a.loader,
       delay: 0
     });
-    return this.loadedComponents.set(e, o), o;
+    return this.loadedComponents.set(e, t), t;
   }
   /**
    * Check if a component type is registered
@@ -130,14 +193,14 @@ class A {
     this.loadedComponents.clear();
   }
 }
-const b = new A();
-function Q(s, e, t) {
-  b.register(s, e, t);
+const q = new me();
+function pt(r, e, a) {
+  q.register(r, e, a);
 }
-function X(s) {
-  return b.getComponent(s);
+function mt(r) {
+  return q.getComponent(r);
 }
-const h = {
+const Z = {
   colors: {
     primary: {
       50: "#edeff9",
@@ -240,47 +303,47 @@ const h = {
     "2xl": "1536px"
   }
 };
-function _(s, e = h) {
-  const t = { ...e };
-  function o(l, n) {
-    if (n && typeof n == "object" && !Array.isArray(n))
-      for (const r in n)
-        n.hasOwnProperty(r) && (l[r] && typeof l[r] == "object" && !Array.isArray(l[r]) ? l[r] = o(l[r], n[r]) : l[r] = n[r]);
-    return l;
+function ge(r, e = Z) {
+  const a = { ...e };
+  function t(n, f) {
+    if (f && typeof f == "object" && !Array.isArray(f))
+      for (const l in f)
+        Object.prototype.hasOwnProperty.call(f, l) && (n[l] && typeof n[l] == "object" && !Array.isArray(n[l]) ? n[l] = t(n[l], f[l]) : n[l] = f[l]);
+    return n;
   }
-  return o(t, s);
+  return t(a, r);
 }
-function k(s) {
+function he(r) {
   let e = `:root {
 `;
-  return s.colors && Object.entries(s.colors).forEach(([t, o]) => {
-    typeof o == "object" && o !== null && Object.entries(o).forEach(([l, n]) => {
-      const r = l === "DEFAULT" ? t : `${t}-${l}`;
-      e += `  --sl-color-${r}: ${n};
+  return r.colors && Object.entries(r.colors).forEach(([a, t]) => {
+    typeof t == "object" && t !== null && Object.entries(t).forEach(([n, f]) => {
+      const l = n === "DEFAULT" ? a : `${a}-${n}`;
+      e += `  --sl-color-${l}: ${f};
 `;
-      const i = N(n);
-      i && (e += `  --sl-color-${r}-rgb: ${i};
+      const c = xe(f);
+      c && (e += `  --sl-color-${l}-rgb: ${c};
 `);
     });
-  }), s.spacing && Object.entries(s.spacing).forEach(([t, o]) => {
-    e += `  --sl-spacing-${t}: ${o};
+  }), r.spacing && Object.entries(r.spacing).forEach(([a, t]) => {
+    e += `  --sl-spacing-${a}: ${t};
 `;
-  }), s.borderRadius && Object.entries(s.borderRadius).forEach(([t, o]) => {
-    const l = t === "DEFAULT" ? "radius" : `radius-${t}`;
-    e += `  --sl-${l}: ${o};
+  }), r.borderRadius && Object.entries(r.borderRadius).forEach(([a, t]) => {
+    const n = a === "DEFAULT" ? "radius" : `radius-${a}`;
+    e += `  --sl-${n}: ${t};
 `;
-  }), s.shadows && Object.entries(s.shadows).forEach(([t, o]) => {
-    const l = t === "DEFAULT" ? "shadow" : `shadow-${t}`;
-    e += `  --sl-${l}: ${o};
+  }), r.shadows && Object.entries(r.shadows).forEach(([a, t]) => {
+    const n = a === "DEFAULT" ? "shadow" : `shadow-${a}`;
+    e += `  --sl-${n}: ${t};
 `;
-  }), s.typography && (s.typography.fontFamily && Object.entries(s.typography.fontFamily).forEach(([t, o]) => {
-    e += `  --sl-font-family-${t}: ${o.join(", ")};
+  }), r.typography && (r.typography.fontFamily && Object.entries(r.typography.fontFamily).forEach(([a, t]) => {
+    e += `  --sl-font-family-${a}: ${t.join(", ")};
 `;
-  }), s.typography.fontSize && Object.entries(s.typography.fontSize).forEach(([t, o]) => {
-    e += `  --sl-font-size-${t}: ${o};
+  }), r.typography.fontSize && Object.entries(r.typography.fontSize).forEach(([a, t]) => {
+    e += `  --sl-font-size-${a}: ${t};
 `;
-  })), s.breakpoints && Object.entries(s.breakpoints).forEach(([t, o]) => {
-    e += `  --sl-breakpoint-${t}: ${o};
+  })), r.breakpoints && Object.entries(r.breakpoints).forEach(([a, t]) => {
+    e += `  --sl-breakpoint-${a}: ${t};
 `;
   }), e += `  --sl-ring-color: var(--sl-color-stachelock-600, #3e4b9a);
 `, e += `  --sl-ring-offset-color: #ffffff;
@@ -296,44 +359,44 @@ function k(s) {
 `, e += `}
 `, e;
 }
-function Z(s) {
+function gt(r) {
   let e = `export default {
 `;
   return e += `  prefix: "sl-",
 `, e += `  theme: {
 `, e += `    extend: {
-`, s.colors && (e += `      colors: {
-`, Object.entries(s.colors).forEach(([t, o]) => {
-    typeof o == "object" && o !== null && (e += `        "${t}": {
-`, Object.entries(o).forEach(([l, n]) => {
-      e += `          "${l === "DEFAULT" ? "DEFAULT" : l}": "${n}",
+`, r.colors && (e += `      colors: {
+`, Object.entries(r.colors).forEach(([a, t]) => {
+    typeof t == "object" && t !== null && (e += `        "${a}": {
+`, Object.entries(t).forEach(([n, f]) => {
+      e += `          "${n === "DEFAULT" ? "DEFAULT" : n}": "${f}",
 `;
     }), e += `        },
 `);
   }), e += `      },
-`), s.spacing && (e += `      spacing: {
-`, Object.entries(s.spacing).forEach(([t, o]) => {
-    e += `        "${t}": "${o}",
+`), r.spacing && (e += `      spacing: {
+`, Object.entries(r.spacing).forEach(([a, t]) => {
+    e += `        "${a}": "${t}",
 `;
   }), e += `      },
-`), s.borderRadius && (e += `      borderRadius: {
-`, Object.entries(s.borderRadius).forEach(([t, o]) => {
-    e += `        "${t === "DEFAULT" ? "DEFAULT" : t}": "${o}",
+`), r.borderRadius && (e += `      borderRadius: {
+`, Object.entries(r.borderRadius).forEach(([a, t]) => {
+    e += `        "${a === "DEFAULT" ? "DEFAULT" : a}": "${t}",
 `;
   }), e += `      },
-`), s.shadows && (e += `      boxShadow: {
-`, Object.entries(s.shadows).forEach(([t, o]) => {
-    e += `        "${t === "DEFAULT" ? "DEFAULT" : t}": "${o}",
+`), r.shadows && (e += `      boxShadow: {
+`, Object.entries(r.shadows).forEach(([a, t]) => {
+    e += `        "${a === "DEFAULT" ? "DEFAULT" : a}": "${t}",
 `;
   }), e += `      },
-`), s.typography && (s.typography.fontFamily && (e += `      fontFamily: {
-`, Object.entries(s.typography.fontFamily).forEach(([t, o]) => {
-    e += `        "${t}": [${o.map((l) => `"${l}"`).join(", ")}],
+`), r.typography && (r.typography.fontFamily && (e += `      fontFamily: {
+`, Object.entries(r.typography.fontFamily).forEach(([a, t]) => {
+    e += `        "${a}": [${t.map((n) => `"${n}"`).join(", ")}],
 `;
   }), e += `      },
-`), s.typography.fontSize && (e += `      fontSize: {
-`, Object.entries(s.typography.fontSize).forEach(([t, o]) => {
-    e += `        "${t}": "${o}",
+`), r.typography.fontSize && (e += `      fontSize: {
+`, Object.entries(r.typography.fontSize).forEach(([a, t]) => {
+    e += `        "${a}": "${t}",
 `;
   }), e += `      },
 `)), e += `    },
@@ -341,83 +404,360 @@ function Z(s) {
 `, e += `};
 `, e;
 }
-function N(s) {
-  if (typeof s != "string") return null;
-  let e = s.trim();
-  if (!e.startsWith("#") || (e = e.slice(1), e.length === 3 && (e = e.split("").map((n) => n + n).join("")), e.length !== 6)) return null;
-  const t = parseInt(e.slice(0, 2), 16), o = parseInt(e.slice(2, 4), 16), l = parseInt(e.slice(4, 6), 16);
-  return Number.isNaN(t) || Number.isNaN(o) || Number.isNaN(l) ? null : `${t} ${o} ${l}`;
+function xe(r) {
+  if (typeof r != "string") return null;
+  let e = r.trim();
+  if (!e.startsWith("#") || (e = e.slice(1), e.length === 3 && (e = e.split("").map((f) => f + f).join("")), e.length !== 6)) return null;
+  const a = parseInt(e.slice(0, 2), 16), t = parseInt(e.slice(2, 4), 16), n = parseInt(e.slice(4, 6), 16);
+  return Number.isNaN(a) || Number.isNaN(t) || Number.isNaN(n) ? null : `${a} ${t} ${n}`;
 }
-const L = {
+function ye(r, e) {
+  return i(), d("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    s("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z"
+    })
+  ]);
+}
+const be = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto" }, ve = { class: "sl-flex sl-min-h-full sl-items-center sl-justify-center sl-p-4" }, _e = { class: "sl-bg-gradient-to-r sl-from-gray-900 sl-to-gray-800 sl-px-6 sl-py-4" }, Ce = { class: "sl-flex sl-items-center sl-justify-between" }, ke = { class: "sl-flex sl-items-center sl-gap-3" }, we = { class: "sl-p-6 sl-space-y-6" }, $e = { class: "sl-flex sl-items-center sl-gap-4" }, Se = { class: "sl-relative" }, Te = { class: "sl-flex-1" }, Ie = { class: "sl-grid sl-grid-cols-2 sl-gap-2" }, Me = ["onClick"], je = { class: "sl-min-w-0" }, Ve = { class: "sl-text-sm sl-font-medium sl-text-gray-900 sl-truncate" }, Ae = { class: "sl-text-xs sl-text-gray-500 sl-truncate" }, Be = { class: "sl-rounded-xl sl-border sl-border-gray-200 sl-bg-gray-50 sl-p-4 sl-space-y-4" }, Le = { class: "sl-flex sl-flex-wrap sl-gap-2" }, Ee = { class: "sl-flex sl-flex-wrap sl-gap-2" }, Fe = { class: "sl-flex sl-items-center sl-gap-4" }, De = { class: "sl-flex sl-items-center sl-gap-3" }, ze = { class: "sl-flex sl-rounded-lg sl-overflow-hidden sl-shadow-sm" }, Pe = { class: "sl-border-t sl-border-gray-200 sl-bg-gray-50 sl-px-6 sl-py-4" }, Ne = { class: "sl-flex sl-items-center sl-justify-between" }, Ue = { class: "sl-flex sl-gap-3" }, Oe = /* @__PURE__ */ S({
+  __name: "ThemeDebugModal",
+  props: {
+    modelValue: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(r, { emit: e }) {
+    const a = e, { currentPrimaryColor: t, applyTheme: n, resetTheme: f } = Y(), l = H(t.value);
+    G(t, (T) => {
+      l.value = T;
+    });
+    const c = () => {
+      n(l.value);
+    }, j = (T) => {
+      l.value = T, n(T);
+    }, C = () => {
+      f(), l.value = "#3e4b9a";
+    }, k = () => {
+      a("update:modelValue", !1);
+    }, L = () => {
+      n(l.value), a("update:modelValue", !1);
+    };
+    return (T, u) => (i(), W(w(ie), {
+      as: "template",
+      show: T.modelValue
+    }, {
+      default: b(() => [
+        p(w(de), {
+          as: "div",
+          class: "sl-relative sl-z-[100]",
+          onClose: k
+        }, {
+          default: b(() => [
+            p(w(R), {
+              as: "template",
+              enter: "ease-out duration-300",
+              "enter-from": "opacity-0",
+              "enter-to": "opacity-100",
+              leave: "ease-in duration-200",
+              "leave-from": "opacity-100",
+              "leave-to": "opacity-0"
+            }, {
+              default: b(() => u[2] || (u[2] = [
+                s("div", { class: "sl-fixed sl-inset-0 sl-bg-gray-900/60 sl-backdrop-blur-sm sl-transition-opacity" }, null, -1)
+              ])),
+              _: 1,
+              __: [2]
+            }),
+            s("div", be, [
+              s("div", ve, [
+                p(w(R), {
+                  as: "template",
+                  enter: "ease-out duration-300",
+                  "enter-from": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+                  "enter-to": "opacity-100 translate-y-0 sm:scale-100",
+                  leave: "ease-in duration-200",
+                  "leave-from": "opacity-100 translate-y-0 sm:scale-100",
+                  "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                }, {
+                  default: b(() => [
+                    p(w(ue), { class: "sl-relative sl-transform sl-overflow-hidden sl-rounded-2xl sl-bg-white sl-shadow-2xl sl-transition-all sl-w-full sm:sl-max-w-lg" }, {
+                      default: b(() => [
+                        s("div", _e, [
+                          s("div", Ce, [
+                            s("div", ke, [
+                              s("div", {
+                                class: "sl-flex sl-h-10 sl-w-10 sl-items-center sl-justify-center sl-rounded-lg",
+                                style: _({ backgroundColor: l.value })
+                              }, [
+                                p(w(ye), { class: "sl-h-5 sl-w-5 sl-text-white" })
+                              ], 4),
+                              s("div", null, [
+                                p(w(ce), { class: "sl-text-lg sl-font-semibold sl-text-white" }, {
+                                  default: b(() => u[3] || (u[3] = [
+                                    $(" Theme Customizer ", -1)
+                                  ])),
+                                  _: 1,
+                                  __: [3]
+                                }),
+                                u[4] || (u[4] = s("p", { class: "sl-text-xs sl-text-gray-400" }, "Preview how components adapt to different colors", -1))
+                              ])
+                            ]),
+                            s("button", {
+                              onClick: k,
+                              class: "sl-rounded-lg sl-p-2 sl-text-gray-400 hover:sl-bg-gray-700 hover:sl-text-white sl-transition-colors"
+                            }, [
+                              p(w(fe), { class: "sl-h-5 sl-w-5" })
+                            ])
+                          ])
+                        ]),
+                        s("div", we, [
+                          s("div", null, [
+                            u[5] || (u[5] = s("label", { class: "sl-block sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-3" }, " Primary Color ", -1)),
+                            s("div", $e, [
+                              s("div", Se, [
+                                D(s("input", {
+                                  type: "color",
+                                  "onUpdate:modelValue": u[0] || (u[0] = (x) => l.value = x),
+                                  onInput: c,
+                                  class: "sl-h-14 sl-w-14 sl-cursor-pointer sl-rounded-xl sl-border-2 sl-border-gray-200 sl-p-1 sl-shadow-sm hover:sl-border-gray-300 sl-transition-colors"
+                                }, null, 544), [
+                                  [N, l.value]
+                                ])
+                              ]),
+                              s("div", Te, [
+                                D(s("input", {
+                                  type: "text",
+                                  "onUpdate:modelValue": u[1] || (u[1] = (x) => l.value = x),
+                                  onInput: c,
+                                  placeholder: "#3e4b9a",
+                                  class: "sl-block sl-w-full sl-rounded-lg sl-border sl-border-gray-300 sl-px-4 sl-py-3 sl-text-sm sl-font-mono sl-text-gray-900 sl-shadow-sm focus:sl-border-primary-500 focus:sl-ring-2 focus:sl-ring-primary-500/20 sl-transition-all"
+                                }, null, 544), [
+                                  [N, l.value]
+                                ])
+                              ])
+                            ])
+                          ]),
+                          s("div", null, [
+                            u[6] || (u[6] = s("label", { class: "sl-block sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-3" }, " Preset Themes ", -1)),
+                            s("div", Ie, [
+                              (i(!0), d(V, null, B(w(se), (x) => (i(), d("button", {
+                                key: x.name,
+                                onClick: (E) => j(x.color),
+                                class: v(["sl-group sl-relative sl-flex sl-items-center sl-gap-3 sl-rounded-lg sl-border sl-border-gray-200 sl-p-3 sl-text-left sl-transition-all hover:sl-border-gray-300 hover:sl-shadow-sm", { "sl-ring-2 sl-ring-offset-2": l.value.toLowerCase() === x.color.toLowerCase() }]),
+                                style: _(l.value.toLowerCase() === x.color.toLowerCase() ? { "--tw-ring-color": x.color } : {})
+                              }, [
+                                s("div", {
+                                  class: "sl-h-8 sl-w-8 sl-rounded-lg sl-shadow-sm sl-flex-shrink-0",
+                                  style: _({ backgroundColor: x.color })
+                                }, null, 4),
+                                s("div", je, [
+                                  s("p", Ve, h(x.name), 1),
+                                  s("p", Ae, h(x.description), 1)
+                                ])
+                              ], 14, Me))), 128))
+                            ])
+                          ]),
+                          s("div", null, [
+                            u[15] || (u[15] = s("label", { class: "sl-block sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-3" }, " Live Preview ", -1)),
+                            s("div", Be, [
+                              s("div", Le, [
+                                p(A, {
+                                  theme: "primary",
+                                  size: "sm"
+                                }, {
+                                  default: b(() => u[7] || (u[7] = [
+                                    $("Primary", -1)
+                                  ])),
+                                  _: 1,
+                                  __: [7]
+                                }),
+                                p(A, {
+                                  theme: "primary",
+                                  size: "sm",
+                                  outlined: ""
+                                }, {
+                                  default: b(() => u[8] || (u[8] = [
+                                    $("Outlined", -1)
+                                  ])),
+                                  _: 1,
+                                  __: [8]
+                                }),
+                                p(A, {
+                                  theme: "secondary",
+                                  size: "sm"
+                                }, {
+                                  default: b(() => u[9] || (u[9] = [
+                                    $("Secondary", -1)
+                                  ])),
+                                  _: 1,
+                                  __: [9]
+                                })
+                              ]),
+                              s("div", Ee, [
+                                p(F, { theme: "primary" }, {
+                                  default: b(() => u[10] || (u[10] = [
+                                    $("Primary Badge", -1)
+                                  ])),
+                                  _: 1,
+                                  __: [10]
+                                }),
+                                p(F, { theme: "success" }, {
+                                  default: b(() => u[11] || (u[11] = [
+                                    $("Success", -1)
+                                  ])),
+                                  _: 1,
+                                  __: [11]
+                                }),
+                                p(F, { theme: "warning" }, {
+                                  default: b(() => u[12] || (u[12] = [
+                                    $("Warning", -1)
+                                  ])),
+                                  _: 1,
+                                  __: [12]
+                                })
+                              ]),
+                              s("div", Fe, [
+                                p(le, { size: "sm" }),
+                                u[13] || (u[13] = s("span", { class: "sl-text-sm sl-text-gray-600" }, "Loading indicator", -1))
+                              ]),
+                              s("div", De, [
+                                p(te, {
+                                  name: "Theme Test",
+                                  size: "md"
+                                }),
+                                u[14] || (u[14] = s("span", { class: "sl-text-sm sl-text-gray-600" }, "Avatar with initials", -1))
+                              ])
+                            ])
+                          ]),
+                          s("div", null, [
+                            u[16] || (u[16] = s("label", { class: "sl-block sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-3" }, " Generated Palette ", -1)),
+                            s("div", ze, [
+                              (i(), d(V, null, B([50, 100, 200, 300, 400, 500, 600, 700, 800, 900], (x) => s("div", {
+                                key: x,
+                                class: "sl-flex-1 sl-h-8 sl-relative sl-group",
+                                style: _({ backgroundColor: `rgb(var(--sl-color-primary-${x}-rgb, 128 128 128))` })
+                              }, [
+                                s("span", {
+                                  class: v(["sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-text-[9px] sl-font-medium sl-opacity-0 group-hover:sl-opacity-100 sl-transition-opacity", x < 500 ? "sl-text-gray-700" : "sl-text-white"])
+                                }, h(x), 3)
+                              ], 4)), 64))
+                            ])
+                          ])
+                        ]),
+                        s("div", Pe, [
+                          s("div", Ne, [
+                            s("button", {
+                              onClick: C,
+                              class: "sl-text-sm sl-text-gray-600 hover:sl-text-gray-900 sl-font-medium sl-transition-colors"
+                            }, " Reset to Default "),
+                            s("div", Ue, [
+                              p(A, {
+                                theme: "secondary",
+                                size: "sm",
+                                onButtonClick: k
+                              }, {
+                                default: b(() => u[17] || (u[17] = [
+                                  $(" Close ", -1)
+                                ])),
+                                _: 1,
+                                __: [17]
+                              }),
+                              p(A, {
+                                theme: "primary",
+                                size: "sm",
+                                onButtonClick: L
+                              }, {
+                                default: b(() => u[18] || (u[18] = [
+                                  $(" Apply Theme ", -1)
+                                ])),
+                                _: 1,
+                                __: [18]
+                              })
+                            ])
+                          ])
+                        ])
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })
+              ])
+            ])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["show"]));
+  }
+}), ht = /* @__PURE__ */ J(Oe, [["__scopeId", "data-v-3bcc4447"]]), Re = {
   viewBox: "0 0 36 36",
   class: "sl-transform -sl-rotate-90 sl-w-full sl-h-full"
-}, D = ["stroke-dasharray"], V = {
+}, He = ["stroke-width"], Ge = ["stroke", "stroke-dasharray", "stroke-width"], We = {
   key: 0,
-  class: "sl-absolute sl-top-1/2 sl-left-1/2 sl-transform -sl-translate-x-1/2 -sl-translate-y-1/2 sl-text-center"
-}, U = {
-  key: 1,
-  class: "sl-absolute sl-top-1/2 sl-left-1/2 sl-transform -sl-translate-x-1/2 -sl-translate-y-1/2 sl-text-center sl-text-xs"
-}, ee = /* @__PURE__ */ g({
+  class: "sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center"
+}, xt = /* @__PURE__ */ S({
   __name: "UiRadialProgressBar",
   props: {
-    progress: {
-      type: Number,
-      default: 0
-    },
-    label: {
-      type: String,
-      default: ""
-    },
-    showProgressLabel: {
-      type: Boolean,
-      default: !1
-    },
-    size: {
-      type: String,
-      default: "md"
-    }
+    value: { default: 0 },
+    size: { default: 64 },
+    showLabel: { type: Boolean, default: !0 },
+    label: { default: "" },
+    color: { default: "primary" },
+    trackWidth: { default: 3.8 }
   },
-  setup(s) {
-    const e = s, t = C(() => {
-      switch (e.size) {
-        case "xs":
-          return "sl-h-4 sl-w-4";
-        case "sm":
-          return "sl-h-8 sl-w-8";
-        case "md":
-          return "sl-h-12 sl-w-12";
-        case "lg":
-          return "sl-h-16 sl-w-16";
-        default:
-          return "sl-h-8 sl-w-8";
-      }
-    }), o = S(e.progress);
-    return v(() => e.progress, (l) => {
-      o.value = l;
-    }), (l, n) => (c(), p("div", {
-      class: $(["sl-relative", t.value])
+  setup(r) {
+    const e = r, a = y(() => Math.min(100, Math.max(0, e.value))), t = y(() => ({
+      width: `${e.size}px`,
+      height: `${e.size}px`
+    })), n = y(() => ({
+      primary: "var(--sl-color-primary-600, #3e4b9a)",
+      success: "#22c55e",
+      // green-500
+      warning: "#eab308",
+      // yellow-500
+      danger: "#ef4444"
+      // red-500
+    })[e.color]), f = y(() => e.size < 48 ? "sl-text-xs sl-font-medium sl-text-slate-700 dark:sl-text-slate-300" : e.size < 80 ? "sl-text-sm sl-font-semibold sl-text-slate-700 dark:sl-text-slate-300" : e.size < 120 ? "sl-text-base sl-font-semibold sl-text-slate-700 dark:sl-text-slate-300" : "sl-text-lg sl-font-bold sl-text-slate-700 dark:sl-text-slate-300");
+    return (l, c) => (i(), d("div", {
+      class: "sl-relative sl-inline-flex",
+      style: _(t.value)
     }, [
-      (c(), p("svg", L, [
-        n[0] || (n[0] = a("path", {
-          class: "sl-fill-none sl-stroke-gray-300",
-          "stroke-width": "3.8",
+      (i(), d("svg", Re, [
+        s("path", {
+          class: "sl-fill-none sl-stroke-gray-200 dark:sl-stroke-slate-600",
+          "stroke-width": l.trackWidth,
           d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
-        }, null, -1)),
-        a("path", {
-          class: "sl-fill-none sl-stroke-stachelock-600 sl-stroke-linecap-round sl-transition-[stroke-dasharray] sl-duration-500 sl-ease-out",
-          "stroke-dasharray": o.value + ", 100",
-          "stroke-width": "3.8",
+        }, null, 8, He),
+        s("path", {
+          class: "sl-fill-none sl-transition-all sl-duration-500 sl-ease-out",
+          stroke: n.value,
+          "stroke-linecap": "round",
+          "stroke-dasharray": `${a.value}, 100`,
+          "stroke-width": l.trackWidth,
           d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
-        }, null, 8, D)
+        }, null, 8, Ge)
       ])),
-      s.label && s.label.length > 0 ? (c(), p("div", V, f(s.label), 1)) : u("", !0),
-      s.showProgressLabel ? (c(), p("div", U, f(o.value) + "% ", 1)) : u("", !0)
-    ], 2));
+      l.showLabel || l.label ? (i(), d("div", We, [
+        s("span", {
+          class: v(f.value)
+        }, h(l.label || `${a.value}%`), 3)
+      ])) : g("", !0)
+    ], 4));
   }
-}), O = { class: "sl-bg-white sl-rounded-lg sl-shadow sl-p-6" }, M = { class: "sl-space-y-8" }, P = { class: "sl-grid sl-grid-cols-1 sl-md:grid-cols-2 sl-gap-6" }, R = { class: "sl-bg-gray-50 sl-rounded-md sl-p-4 sl-text-sm sl-text-gray-700" }, z = { class: "sl-whitespace-pre-wrap" }, te = /* @__PURE__ */ g({
+}), Ye = { class: "sl-bg-white sl-rounded-lg sl-shadow sl-p-6" }, Je = { class: "sl-space-y-8" }, qe = { class: "sl-grid sl-grid-cols-1 sl-md:grid-cols-2 sl-gap-6" }, Ze = { class: "sl-bg-gray-50 sl-rounded-md sl-p-4 sl-text-sm sl-text-gray-700" }, Ke = { class: "sl-whitespace-pre-wrap" }, yt = /* @__PURE__ */ S({
   __name: "InputsShowcase",
-  setup(s) {
-    const e = w({
+  setup(r) {
+    const e = Q({
       text: "",
       textArea: "",
       switchOn: !1,
@@ -425,18 +765,18 @@ const L = {
       selectedFruit: null,
       selectedLanguages: [],
       selectedCity: null
-    }), t = [
+    }), a = [
       { id: 1, name: "Apple" },
       { id: 2, name: "Banana" },
       { id: 3, name: "Cherry" },
       { id: 4, name: "Durian", disabled: !0 }
-    ], o = [
+    ], t = [
       { id: 1, name: "TypeScript" },
       { id: 2, name: "JavaScript" },
       { id: 3, name: "Python" },
       { id: 4, name: "Go" },
       { id: 5, name: "Rust" }
-    ], l = [
+    ], n = [
       { id: 1, name: "New York" },
       { id: 2, name: "San Francisco" },
       { id: 3, name: "Seattle" },
@@ -446,174 +786,817 @@ const L = {
       { id: 7, name: "Miami" },
       { id: 8, name: "Boston" }
     ];
-    return (n, r) => (c(), p("section", O, [
-      r[15] || (r[15] = a("h2", { class: "sl-text-xl sl-font-semibold sl-mb-4" }, "All Inputs Showcase", -1)),
-      a("div", M, [
-        a("div", null, [
-          r[7] || (r[7] = a("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Text Input", -1)),
-          m(d, {
+    return (f, l) => (i(), d("section", Ye, [
+      l[15] || (l[15] = s("h2", { class: "sl-text-xl sl-font-semibold sl-mb-4" }, "All Inputs Showcase", -1)),
+      s("div", Je, [
+        s("div", null, [
+          l[7] || (l[7] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Text Input", -1)),
+          p(M, {
             name: "demoText",
             label: "Text Input",
             placeholder: "Type something...",
             value: e.text,
-            "onUpdate:value": r[0] || (r[0] = (i) => e.text = i)
+            "onUpdate:value": l[0] || (l[0] = (c) => e.text = c)
           }, null, 8, ["value"])
         ]),
-        a("div", null, [
-          r[8] || (r[8] = a("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Text Area", -1)),
-          m(F, {
+        s("div", null, [
+          l[8] || (l[8] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Text Area", -1)),
+          p(re, {
             name: "demoTextArea",
             label: "Text Area",
             placeholder: "Write a longer message...",
             rows: 4,
             maxlength: 200,
             modelValue: e.textArea,
-            "onUpdate:modelValue": r[1] || (r[1] = (i) => e.textArea = i)
+            "onUpdate:modelValue": l[1] || (l[1] = (c) => e.textArea = c)
           }, null, 8, ["modelValue"])
         ]),
-        a("div", null, [
-          r[9] || (r[9] = a("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Switch", -1)),
-          m(E, {
+        s("div", null, [
+          l[9] || (l[9] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Switch", -1)),
+          p(ne, {
             name: "demoSwitch",
             label: "Enable feature",
             modelValue: e.switchOn,
-            "onUpdate:modelValue": r[2] || (r[2] = (i) => e.switchOn = i),
+            "onUpdate:modelValue": l[2] || (l[2] = (c) => e.switchOn = c),
             textTrue: "ON",
             textFalse: "OFF"
           }, null, 8, ["modelValue"])
         ]),
-        a("div", null, [
-          r[10] || (r[10] = a("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Checkbox", -1)),
-          m(T, {
+        s("div", null, [
+          l[10] || (l[10] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Checkbox", -1)),
+          p(oe, {
             name: "demoCheckbox",
             label: "I agree to the terms",
             modelValue: e.checkbox,
-            "onUpdate:modelValue": r[3] || (r[3] = (i) => e.checkbox = i)
+            "onUpdate:modelValue": l[3] || (l[3] = (c) => e.checkbox = c)
           }, null, 8, ["modelValue"])
         ]),
-        a("div", P, [
-          a("div", null, [
-            r[11] || (r[11] = a("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Select (Single)", -1)),
-            m(x, {
+        s("div", qe, [
+          s("div", null, [
+            l[11] || (l[11] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Select (Single)", -1)),
+            p(O, {
               name: "demoSelect",
               label: "Favorite Fruit",
               placeholder: "Select a fruit",
-              items: t,
+              items: a,
               modelValue: e.selectedFruit,
-              "onUpdate:modelValue": r[4] || (r[4] = (i) => e.selectedFruit = i)
+              "onUpdate:modelValue": l[4] || (l[4] = (c) => e.selectedFruit = c)
             }, null, 8, ["modelValue"])
           ]),
-          a("div", null, [
-            r[12] || (r[12] = a("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Select (Multiple)", -1)),
-            m(x, {
+          s("div", null, [
+            l[12] || (l[12] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Select (Multiple)", -1)),
+            p(O, {
               name: "demoSelectMulti",
               label: "Favorite Languages",
               placeholder: "Select languages",
-              items: o,
+              items: t,
               multiple: "",
               showAll: "",
               modelValue: e.selectedLanguages,
-              "onUpdate:modelValue": r[5] || (r[5] = (i) => e.selectedLanguages = i)
+              "onUpdate:modelValue": l[5] || (l[5] = (c) => e.selectedLanguages = c)
             }, null, 8, ["modelValue"])
           ])
         ]),
-        a("div", null, [
-          r[13] || (r[13] = a("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Combobox", -1)),
-          m(I, {
+        s("div", null, [
+          l[13] || (l[13] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Combobox", -1)),
+          p(ae, {
             name: "demoCombobox",
             label: "Search a City",
             placeholder: "Start typing...",
-            items: l,
+            items: n,
             modelValue: e.selectedCity,
-            "onUpdate:modelValue": r[6] || (r[6] = (i) => e.selectedCity = i)
+            "onUpdate:modelValue": l[6] || (l[6] = (c) => e.selectedCity = c)
           }, null, 8, ["modelValue"])
         ]),
-        a("div", R, [
-          r[14] || (r[14] = a("div", { class: "sl-font-semibold sl-mb-1" }, "State", -1)),
-          a("pre", z, f(e), 1)
+        s("div", Ze, [
+          l[14] || (l[14] = s("div", { class: "sl-font-semibold sl-mb-1" }, "State", -1)),
+          s("pre", Ke, h(e), 1)
         ])
       ])
     ]));
   }
+}), Qe = { class: "sl-flex sl-items-center sl-gap-4" }, Xe = {
+  key: 0,
+  class: "sl-flex-shrink-0 sl-flex sl-items-center sl-justify-center"
+}, es = { class: "sl-flex-1 sl-min-w-0" }, ss = {
+  key: 0,
+  class: "sl-flex sl-items-center sl-gap-2"
+}, ts = { class: "sl-text-base sl-font-semibold sl-text-gray-900 dark:sl-text-white sl-truncate" }, ls = {
+  key: 0,
+  class: "sl-flex-shrink-0"
+}, os = {
+  key: 1,
+  class: "sl-mt-0.5 sl-text-sm sl-text-gray-500 dark:sl-text-gray-300 sl-truncate"
+}, as = {
+  key: 1,
+  class: "sl-flex sl-items-center sl-gap-2 sl-flex-shrink-0"
+}, rs = ["aria-expanded"], ns = {
+  key: 1,
+  class: "sl-border-t sl-border-gray-200 dark:sl-border-gray-700"
+}, is = { class: "sl-overflow-hidden" }, ds = {
+  key: 0,
+  class: "sl-border-t sl-border-gray-200 dark:sl-border-gray-700"
+}, us = { class: "sl-flex sl-items-center sl-justify-between sl-gap-4" }, cs = {
+  key: 0,
+  class: "sl-flex-1 sl-min-w-0"
+}, fs = {
+  key: 1,
+  class: "sl-flex-1"
+}, ps = {
+  key: 2,
+  class: "sl-flex sl-items-center sl-gap-3 sl-flex-shrink-0"
+}, ms = {
+  key: 0,
+  class: "sl-border-t sl-border-gray-200 dark:sl-border-gray-700"
+}, gs = { class: "sl-flex sl-items-center sl-justify-between sl-gap-4" }, hs = {
+  key: 0,
+  class: "sl-flex-1 sl-min-w-0"
+}, xs = {
+  key: 1,
+  class: "sl-flex-1"
+}, ys = {
+  key: 2,
+  class: "sl-flex sl-items-center sl-gap-3 sl-flex-shrink-0"
+}, bs = {
+  key: 0,
+  class: "sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-bg-white/80 dark:sl-bg-gray-900/80 sl-rounded-[inherit] sl-z-20 sl-backdrop-blur-sm"
+}, vs = { class: "sl-flex sl-flex-col sl-items-center sl-gap-3" }, _s = {
+  class: "sl-animate-spin sl-h-8 sl-w-8",
+  style: { color: "var(--sl-color-primary-600, #4f46e5)" },
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, Cs = {
+  key: 0,
+  class: "sl-text-sm sl-font-medium sl-text-gray-600 dark:sl-text-gray-300"
+}, ks = /* @__PURE__ */ S({
+  __name: "CardLayout",
+  props: {
+    variant: { default: "elevated" },
+    size: { default: "default" },
+    rounded: { default: "lg" },
+    shadow: { default: "md" },
+    showHeader: { type: Boolean, default: void 0 },
+    showFooter: { type: Boolean, default: void 0 },
+    divided: { type: Boolean, default: !1 },
+    collapsible: { type: Boolean, default: !1 },
+    collapsed: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    loadingText: {},
+    hoverable: { type: Boolean, default: !1 },
+    scrollable: { type: Boolean, default: !1 },
+    maxHeight: {},
+    headerSticky: { type: Boolean, default: !1 },
+    footerSticky: { type: Boolean, default: !1 },
+    bgClass: {},
+    fullHeight: { type: Boolean, default: !1 },
+    noPadding: { type: Boolean, default: !1 }
+  },
+  emits: ["update:collapsed", "expand", "collapse"],
+  setup(r, { expose: e, emit: a }) {
+    const t = r, n = a, f = X(), l = H(t.collapsed);
+    G(() => t.collapsed, (o) => {
+      l.value = o;
+    });
+    const c = y(() => l.value), j = () => {
+      l.value = !l.value, n("update:collapsed", l.value), l.value ? n("collapse") : n("expand");
+    }, C = y(() => t.showHeader !== void 0 ? t.showHeader : !!(f.header || f["header-icon"] || f["header-title"] || f["header-subtitle"] || f["header-badge"] || f["header-actions"] || t.collapsible)), k = y(() => t.showFooter !== void 0 ? t.showFooter : !!(f.footer || f["footer-left"] || f["footer-actions"])), L = y(() => {
+      const o = [
+        "sl-relative",
+        "sl-flex",
+        "sl-flex-col"
+      ];
+      switch (t.fullHeight && o.push("sl-h-full"), t.variant) {
+        case "elevated":
+          o.push("sl-bg-white", "dark:sl-bg-gray-800");
+          break;
+        case "outlined":
+          o.push("sl-bg-white", "dark:sl-bg-gray-800", "sl-border", "sl-border-gray-200", "dark:sl-border-gray-700");
+          break;
+        case "flat":
+          o.push("sl-bg-transparent");
+          break;
+        case "filled":
+          o.push("sl-bg-gray-50", "dark:sl-bg-gray-800/50");
+          break;
+      }
+      if (t.variant === "elevated") {
+        const P = {
+          none: "",
+          sm: "sl-shadow-sm",
+          md: "sl-shadow",
+          lg: "sl-shadow-lg",
+          xl: "sl-shadow-xl"
+        };
+        P[t.shadow] && o.push(P[t.shadow]);
+      }
+      const I = {
+        none: "",
+        sm: "sl-rounded-sm",
+        md: "sl-rounded-md",
+        lg: "sl-rounded-lg",
+        xl: "sl-rounded-xl",
+        "2xl": "sl-rounded-2xl",
+        full: "sl-rounded-3xl"
+      };
+      return I[t.rounded] && o.push(I[t.rounded]), t.hoverable && o.push(
+        "sl-transition-shadow",
+        "sl-duration-200",
+        "hover:sl-shadow-lg",
+        "dark:hover:sl-shadow-gray-900/30"
+      ), t.bgClass && o.push(t.bgClass), t.scrollable && o.push("sl-overflow-hidden"), o;
+    }), T = y(() => {
+      const o = {};
+      return t.scrollable && t.maxHeight && (o.maxHeight = t.maxHeight), o;
+    }), u = y(() => ({
+      compact: { x: "sl-px-3", y: "sl-py-2" },
+      default: { x: "sl-px-4 sm:sl-px-6", y: "sl-py-4" },
+      spacious: { x: "sl-px-6 sm:sl-px-8", y: "sl-py-5 sm:sl-py-6" }
+    })[t.size]), x = y(() => [u.value.x, u.value.y]), E = y(() => {
+      if (t.noPadding)
+        return [];
+      const o = [u.value.x, u.value.y];
+      return t.scrollable && o.push("sl-flex-1", "sl-min-h-0"), o;
+    }), z = y(() => {
+      const o = {
+        compact: "sl-py-2",
+        default: "sl-py-3",
+        spacious: "sl-py-4"
+      };
+      return [u.value.x, o[t.size], "sl-bg-gray-50/50 dark:sl-bg-gray-800/50"];
+    });
+    return e({
+      toggleCollapse: j,
+      isCollapsed: c
+    }), (o, I) => (i(), d("div", {
+      class: v([
+        "sl-card-layout",
+        L.value,
+        { "sl-cursor-pointer": o.hoverable }
+      ]),
+      style: _(T.value)
+    }, [
+      C.value ? (i(), d("div", {
+        key: 0,
+        class: v([
+          "sl-card-header",
+          x.value,
+          { "sl-sticky sl-top-0 sl-z-10 sl-bg-inherit": o.headerSticky && o.scrollable }
+        ])
+      }, [
+        m(o.$slots, "header", {}, () => [
+          s("div", Qe, [
+            o.$slots["header-icon"] ? (i(), d("div", Xe, [
+              m(o.$slots, "header-icon", {}, void 0, !0)
+            ])) : g("", !0),
+            s("div", es, [
+              o.$slots["header-title"] ? (i(), d("div", ss, [
+                s("h3", ts, [
+                  m(o.$slots, "header-title", {}, void 0, !0)
+                ]),
+                o.$slots["header-badge"] ? (i(), d("div", ls, [
+                  m(o.$slots, "header-badge", {}, void 0, !0)
+                ])) : g("", !0)
+              ])) : g("", !0),
+              o.$slots["header-subtitle"] ? (i(), d("p", os, [
+                m(o.$slots, "header-subtitle", {}, void 0, !0)
+              ])) : g("", !0)
+            ]),
+            o.$slots["header-actions"] || o.collapsible ? (i(), d("div", as, [
+              m(o.$slots, "header-actions", {}, void 0, !0),
+              o.collapsible ? (i(), d("button", {
+                key: 0,
+                type: "button",
+                onClick: j,
+                class: "sl-p-1.5 sl-rounded-md sl-text-gray-400 hover:sl-text-gray-600 hover:sl-bg-gray-100 dark:hover:sl-bg-gray-700 dark:hover:sl-text-gray-300 sl-transition-colors",
+                "aria-expanded": !c.value,
+                "aria-label": "Toggle content"
+              }, [
+                (i(), d("svg", {
+                  class: v(["sl-h-5 sl-w-5 sl-transition-transform sl-duration-200", { "sl-rotate-180": !c.value }]),
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  "stroke-width": "2"
+                }, I[0] || (I[0] = [
+                  s("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M19 9l-7 7-7-7"
+                  }, null, -1)
+                ]), 2))
+              ], 8, rs)) : g("", !0)
+            ])) : g("", !0)
+          ])
+        ], !0)
+      ], 2)) : g("", !0),
+      C.value && o.divided && !c.value ? (i(), d("div", ns)) : g("", !0),
+      o.collapsible ? (i(), W(U, {
+        key: 2,
+        "enter-active-class": "sl-transition-all sl-duration-200 sl-ease-out",
+        "enter-from-class": "sl-opacity-0 sl-max-h-0",
+        "enter-to-class": "sl-opacity-100",
+        "leave-active-class": "sl-transition-all sl-duration-200 sl-ease-in",
+        "leave-from-class": "sl-opacity-100",
+        "leave-to-class": "sl-opacity-0 sl-max-h-0"
+      }, {
+        default: b(() => [
+          D(s("div", is, [
+            s("div", {
+              class: v([
+                "sl-card-body",
+                E.value,
+                { "sl-overflow-y-auto": o.scrollable }
+              ]),
+              style: _(o.scrollable && o.maxHeight ? { maxHeight: o.maxHeight } : {})
+            }, [
+              m(o.$slots, "body", {}, () => [
+                m(o.$slots, "default", {}, void 0, !0)
+              ], !0)
+            ], 6),
+            k.value && o.divided ? (i(), d("div", ds)) : g("", !0),
+            k.value ? (i(), d("div", {
+              key: 1,
+              class: v([
+                "sl-card-footer",
+                z.value,
+                { "sl-sticky sl-bottom-0 sl-z-10 sl-bg-inherit": o.footerSticky && o.scrollable }
+              ])
+            }, [
+              m(o.$slots, "footer", {}, () => [
+                s("div", us, [
+                  o.$slots["footer-left"] ? (i(), d("div", cs, [
+                    m(o.$slots, "footer-left", {}, void 0, !0)
+                  ])) : (i(), d("div", fs)),
+                  o.$slots["footer-actions"] ? (i(), d("div", ps, [
+                    m(o.$slots, "footer-actions", {}, void 0, !0)
+                  ])) : g("", !0)
+                ])
+              ], !0)
+            ], 2)) : g("", !0)
+          ], 512), [
+            [ee, !c.value]
+          ])
+        ]),
+        _: 3
+      })) : (i(), d(V, { key: 3 }, [
+        s("div", {
+          class: v([
+            "sl-card-body",
+            E.value,
+            { "sl-overflow-y-auto": o.scrollable }
+          ]),
+          style: _(o.scrollable && o.maxHeight ? { maxHeight: o.maxHeight } : {})
+        }, [
+          m(o.$slots, "body", {}, () => [
+            m(o.$slots, "default", {}, void 0, !0)
+          ], !0)
+        ], 6),
+        k.value && o.divided ? (i(), d("div", ms)) : g("", !0),
+        k.value ? (i(), d("div", {
+          key: 1,
+          class: v([
+            "sl-card-footer",
+            z.value,
+            { "sl-sticky sl-bottom-0 sl-z-10 sl-bg-inherit": o.footerSticky && o.scrollable }
+          ])
+        }, [
+          m(o.$slots, "footer", {}, () => [
+            s("div", gs, [
+              o.$slots["footer-left"] ? (i(), d("div", hs, [
+                m(o.$slots, "footer-left", {}, void 0, !0)
+              ])) : (i(), d("div", xs)),
+              o.$slots["footer-actions"] ? (i(), d("div", ys, [
+                m(o.$slots, "footer-actions", {}, void 0, !0)
+              ])) : g("", !0)
+            ])
+          ], !0)
+        ], 2)) : g("", !0)
+      ], 64)),
+      p(U, {
+        "enter-active-class": "sl-transition-opacity sl-duration-200",
+        "enter-from-class": "sl-opacity-0",
+        "enter-to-class": "sl-opacity-100",
+        "leave-active-class": "sl-transition-opacity sl-duration-200",
+        "leave-from-class": "sl-opacity-100",
+        "leave-to-class": "sl-opacity-0"
+      }, {
+        default: b(() => [
+          o.loading ? (i(), d("div", bs, [
+            m(o.$slots, "loading", {}, () => [
+              s("div", vs, [
+                (i(), d("svg", _s, I[1] || (I[1] = [
+                  s("circle", {
+                    class: "sl-opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    "stroke-width": "4"
+                  }, null, -1),
+                  s("path", {
+                    class: "sl-opacity-75",
+                    fill: "currentColor",
+                    d: "m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }, null, -1)
+                ]))),
+                o.loadingText ? (i(), d("span", Cs, h(o.loadingText), 1)) : g("", !0)
+              ])
+            ], !0)
+          ])) : g("", !0)
+        ]),
+        _: 3
+      })
+    ], 6));
+  }
+}), bt = /* @__PURE__ */ J(ks, [["__scopeId", "data-v-a1ea2aac"]]), ws = "sl-text-sm", vt = /* @__PURE__ */ S({
+  __name: "InfoCard",
+  props: {
+    title: { default: "" },
+    variant: { default: "info" }
+  },
+  setup(r) {
+    const e = r, a = y(() => ({
+      info: { bg: "var(--info-bg, #eff6ff)", border: "var(--info-border, #bfdbfe)" },
+      warning: { bg: "var(--warning-bg, #fffbeb)", border: "var(--warning-border, #fcd34d)" },
+      success: { bg: "var(--success-bg, #f0fdf4)", border: "var(--success-border, #86efac)" },
+      error: { bg: "var(--error-bg, #fef2f2)", border: "var(--error-border, #fca5a5)" }
+    })[e.variant]), t = y(() => ({ color: {
+      info: "var(--info-title)",
+      warning: "var(--warning-title)",
+      success: "var(--success-title)",
+      error: "var(--error-title)"
+    }[e.variant] })), n = y(() => ({ color: {
+      info: "var(--info-text)",
+      warning: "var(--warning-text)",
+      success: "var(--success-text)",
+      error: "var(--error-text)"
+    }[e.variant] }));
+    return (f, l) => (i(), d("div", {
+      class: "sl-rounded-xl sl-border sl-p-4",
+      style: _({ backgroundColor: a.value.bg, borderColor: a.value.border })
+    }, [
+      f.title ? (i(), d("h3", {
+        key: 0,
+        class: "sl-font-medium sl-mb-2",
+        style: _(t.value)
+      }, h(f.title), 5)) : g("", !0),
+      s("div", {
+        class: v(ws),
+        style: _(n.value)
+      }, [
+        m(f.$slots, "default")
+      ], 4)
+    ], 4));
+  }
+}), $s = { class: "sl-space-y-4" }, Ss = { class: "sl-text-xl sl-font-semibold sl-text-slate-900 dark:sl-text-white" }, Ts = { class: "sl-overflow-x-auto" }, Is = { class: "sl-min-w-full sl-divide-y sl-divide-slate-200 dark:sl-divide-slate-700" }, Ms = { class: "sl-bg-slate-50 dark:sl-bg-slate-900" }, js = { class: "sl-divide-y sl-divide-slate-200 dark:sl-divide-slate-700" }, Vs = { class: "sl-px-6 sl-py-4 sl-text-sm sl-font-mono sl-text-slate-900 dark:sl-text-slate-100" }, As = { class: "sl-px-6 sl-py-4 sl-text-sm sl-text-slate-600 dark:sl-text-slate-300" }, Bs = { class: "sl-px-6 sl-py-4 sl-text-sm sl-font-mono sl-text-slate-500 dark:sl-text-slate-300" }, Ls = { class: "sl-px-6 sl-py-4 sl-text-sm sl-text-slate-600 dark:sl-text-slate-300" }, _t = /* @__PURE__ */ S({
+  __name: "PropsTable",
+  props: {
+    title: { default: "Props" },
+    props: {}
+  },
+  setup(r) {
+    const e = ["Prop", "Type", "Default", "Description"];
+    return (a, t) => (i(), d("section", $s, [
+      s("h2", Ss, h(a.title), 1),
+      s("div", {
+        class: v(["sl-rounded-xl sl-shadow-sm sl-border sl-overflow-hidden", [
+          "sl-bg-white dark:sl-bg-slate-800",
+          "sl-border-slate-200 dark:sl-border-slate-700"
+        ]])
+      }, [
+        s("div", Ts, [
+          s("table", Is, [
+            s("thead", Ms, [
+              s("tr", null, [
+                (i(), d(V, null, B(e, (n) => s("th", {
+                  key: n,
+                  class: v(["sl-px-6 sl-py-3 sl-text-left sl-text-xs sl-font-medium sl-uppercase sl-tracking-wider", "sl-text-slate-500 dark:sl-text-slate-300"])
+                }, h(n), 1)), 64))
+              ])
+            ]),
+            s("tbody", js, [
+              (i(!0), d(V, null, B(a.props, (n) => (i(), d("tr", {
+                key: n.name
+              }, [
+                s("td", Vs, h(n.name), 1),
+                s("td", As, h(n.type), 1),
+                s("td", Bs, h(n.default), 1),
+                s("td", Ls, h(n.description), 1)
+              ]))), 128))
+            ])
+          ])
+        ])
+      ])
+    ]));
+  }
+}), Es = {
+  class: "sl-rounded-xl sl-shadow-sm sl-border sl-overflow-hidden",
+  style: { backgroundColor: "var(--sl-surface-elevated)", borderColor: "var(--sl-border-default)" }
+}, Fs = {
+  key: 0,
+  class: "sl-px-6 sl-py-4 sl-border-b",
+  style: { backgroundColor: "var(--sl-surface-sunken)", borderColor: "var(--sl-border-default)" }
+}, Ds = {
+  class: "sl-text-lg sl-font-semibold",
+  style: { color: "var(--sl-text-primary)" }
+}, zs = {
+  key: 0,
+  class: "sl-text-sm sl-mt-1",
+  style: { color: "var(--sl-text-muted)" }
+}, Ct = /* @__PURE__ */ S({
+  __name: "ShowcaseCard",
+  props: {
+    title: { default: "" },
+    description: { default: "" },
+    contentClass: { default: "" },
+    padded: { type: Boolean, default: !0 }
+  },
+  setup(r) {
+    const e = r, a = y(() => {
+      const t = [];
+      return e.padded && t.push("sl-p-6"), e.contentClass && t.push(e.contentClass), t.join(" ");
+    });
+    return (t, n) => (i(), d("div", Es, [
+      t.title || t.$slots.header ? (i(), d("div", Fs, [
+        m(t.$slots, "header", {}, () => [
+          s("h2", Ds, h(t.title), 1),
+          t.description ? (i(), d("p", zs, h(t.description), 1)) : g("", !0)
+        ])
+      ])) : g("", !0),
+      s("div", {
+        class: v(a.value)
+      }, [
+        m(t.$slots, "default")
+      ], 2)
+    ]));
+  }
+}), Ps = { class: "sl-space-y-8" }, Ns = { class: "sl-space-y-2" }, Us = {
+  class: "sl-text-3xl sl-font-bold",
+  style: { color: "var(--sl-text-primary)" }
+}, Os = {
+  class: "sl-text-lg",
+  style: { color: "var(--sl-text-muted)" }
+}, Rs = {
+  key: 0,
+  class: "sl-flex sl-flex-wrap sl-gap-2 sl-pb-4",
+  style: { borderBottom: "1px solid var(--sl-border-default)" }
+}, Hs = ["onClick"], Gs = { class: "sl-space-y-8" }, kt = /* @__PURE__ */ S({
+  __name: "ShowcaseLayout",
+  props: {
+    title: {},
+    description: {},
+    variants: { default: () => [] },
+    modelValue: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(r, { emit: e }) {
+    const a = r, t = e, { isDark: n } = Y(), f = (c) => {
+      t("update:modelValue", c);
+    }, l = (c) => a.modelValue === c ? {
+      backgroundColor: n.value ? "#ffffff" : "#0f172a",
+      color: n.value ? "#0f172a" : "#ffffff",
+      boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+    } : {
+      backgroundColor: "transparent",
+      color: "var(--sl-text-muted)"
+    };
+    return (c, j) => (i(), d("div", Ps, [
+      s("header", Ns, [
+        s("h1", Us, h(c.title), 1),
+        s("p", Os, h(c.description), 1),
+        m(c.$slots, "header-extra")
+      ]),
+      c.variants && c.variants.length > 0 ? (i(), d("nav", Rs, [
+        (i(!0), d(V, null, B(c.variants, (C) => (i(), d("button", {
+          key: C.id,
+          onClick: (k) => f(C.id),
+          class: "sl-px-4 sl-py-2 sl-text-sm sl-font-medium sl-rounded-lg sl-transition-all sl-duration-150",
+          style: _(l(C.id))
+        }, h(C.label || C.name), 13, Hs))), 128))
+      ])) : g("", !0),
+      s("div", Gs, [
+        m(c.$slots, "content", {}, () => [
+          m(c.$slots, "default")
+        ])
+      ]),
+      m(c.$slots, "footer")
+    ]));
+  }
+}), Ws = { class: "sl-space-y-4" }, Ys = {
+  class: "sl-text-xl sl-font-semibold",
+  style: { color: "var(--sl-text-primary)" }
+}, Js = { class: "sl-rounded-xl sl-p-4 sl-overflow-auto sl-bg-slate-800 dark:sl-bg-slate-900" }, qs = { class: "sl-text-sm sl-text-slate-300 sl-font-mono" }, wt = /* @__PURE__ */ S({
+  __name: "StateDisplay",
+  props: {
+    title: { default: "Current State" },
+    state: {}
+  },
+  setup(r) {
+    const e = r, a = y(() => JSON.stringify(e.state, null, 2));
+    return (t, n) => (i(), d("section", Ws, [
+      s("h2", Ys, h(t.title), 1),
+      s("div", Js, [
+        s("pre", qs, h(a.value), 1)
+      ])
+    ]));
+  }
 });
-class B {
+class Zs {
   designTokens;
   prefix = "sl-";
   injectCSS = !0;
+  cloudinaryConfig;
+  googleMapsConfig;
+  lottieConfig;
+  richTextConfig;
+  phoneInputConfig;
+  datepickerConfig;
   constructor() {
-    this.designTokens = h;
+    this.designTokens = Z;
   }
-  install(e, t = {}) {
-    (t.designTokens || t.prefix !== void 0 || t.injectCSS !== void 0) && this.configure(t), this.injectCSS && this.injectCSSVariables(), e.config.globalProperties.$stachelockUI = this, e.provide("stachelockUI", this);
+  install(e, a = {}) {
+    Object.keys(a).length > 0 && this.configure(a), this.injectCSS && this.injectCSSVariables(), e.config.globalProperties.$stachelockUI = this, e.provide("stachelockUI", this), this.cloudinaryConfig && e.provide("cloudinary", this.cloudinaryConfig), this.googleMapsConfig && e.provide("googleMaps", this.googleMapsConfig), this.lottieConfig && e.provide("lottie", this.lottieConfig), this.richTextConfig && e.provide("richText", this.richTextConfig), this.phoneInputConfig && e.provide("phoneInput", this.phoneInputConfig), this.datepickerConfig && e.provide("datepicker", this.datepickerConfig);
   }
   configure(e) {
-    e.designTokens && (this.designTokens = _(this.designTokens, e.designTokens)), e.prefix !== void 0 && (this.prefix = e.prefix), e.injectCSS !== void 0 && (this.injectCSS = e.injectCSS);
+    e.designTokens && (this.designTokens = ge(e.designTokens, this.designTokens)), e.prefix !== void 0 && (this.prefix = e.prefix), e.injectCSS !== void 0 && (this.injectCSS = e.injectCSS), e.cloudinary && (this.cloudinaryConfig = e.cloudinary), e.googleMaps && (this.googleMapsConfig = e.googleMaps), e.lottie && (this.lottieConfig = e.lottie), e.richText && (this.richTextConfig = e.richText), e.phoneInput && (this.phoneInputConfig = e.phoneInput), e.datepicker && (this.datepickerConfig = e.datepicker);
   }
   getDesignTokens() {
     return this.designTokens;
   }
+  getCloudinaryConfig() {
+    return this.cloudinaryConfig;
+  }
+  getGoogleMapsConfig() {
+    return this.googleMapsConfig;
+  }
+  getLottieConfig() {
+    return this.lottieConfig;
+  }
+  getRichTextConfig() {
+    return this.richTextConfig;
+  }
+  getPhoneInputConfig() {
+    return this.phoneInputConfig;
+  }
+  getDatepickerConfig() {
+    return this.datepickerConfig;
+  }
   generateCSS() {
-    return k(this.designTokens);
+    return he(this.designTokens);
   }
   injectCSSVariables() {
     const e = document.createElement("style");
     e.textContent = this.generateCSS(), e.setAttribute("data-stachelock-ui", "true");
-    const t = document.querySelector('style[data-stachelock-ui="true"]');
-    t && t.remove(), document.head.appendChild(e);
+    const a = document.querySelector('style[data-stachelock-ui="true"]');
+    a && a.remove(), document.head.appendChild(e);
   }
 }
-const se = new B();
+const $t = new Zs();
 export {
-  me as Avatar,
-  ot as Badge,
-  pe as Breadcrumb,
-  lt as Button,
-  mt as CalendarDashboard,
-  Te as CalendarHeader,
-  T as CheckboxInput,
-  I as ComboboxInput,
-  A as ComponentRegistry,
-  Ge as DashboardLayout,
-  Fe as DayCalendar,
-  Ye as DefaultLayout,
-  Me as DynamicForm,
-  je as EventCard,
-  _e as EventsList,
-  Re as FormField,
-  pt as FormFieldWrapper,
-  Je as HeaderLayout,
-  te as InputsShowcase,
-  fe as Loading,
-  nt as LoadingDots,
-  xe as Modal,
-  Ne as MonthCalendar,
-  be as NavLink,
-  Qe as NavigationGroup,
-  Ze as NavigationItem,
-  ye as ProgressBar,
-  ee as RadialProgressBar,
-  x as SelectInput,
-  tt as SidebarLayout,
-  se as StachelockUI,
-  E as SwitchInput,
-  Se as Table,
-  Be as TagifyInput,
-  F as TextAreaInput,
-  d as TextInput,
-  $e as Transition,
-  De as WeekCalendar,
-  Ue as YearCalendar,
-  b as componentRegistry,
-  se as default,
-  j as defaultComponentMap,
-  h as defaultDesignTokens,
-  k as generateCSSVariables,
-  le as generateDeterministicId,
-  ae as generateId,
-  Z as generateTailwindConfig,
-  X as getComponent,
-  _ as mergeDesignTokens,
-  Q as registerComponent,
-  ne as sanitizeId
+  ao as AddDeleteButtonGroup,
+  Oo as AlertModal,
+  te as Avatar,
+  oa as BackgroundGradientWrapper,
+  F as Badge,
+  ma as Banner,
+  Pl as BarChart,
+  wa as BaseChart,
+  Ho as BaseModal,
+  ha as Breadcrumb,
+  A as Button,
+  cl as ButtonGroup,
+  va as CalendarDashboard,
+  Tl as CalendarHeader,
+  bt as CardLayout,
+  ra as CardWrapper,
+  pl as Checkbox,
+  oe as CheckboxInput,
+  fa as CloudinaryImage,
+  ae as ComboboxInput,
+  Kl as ComingSoon,
+  me as ComponentRegistry,
+  Ja as ContentSkeleton,
+  wo as DashboardLayout,
+  no as DatepickerInput,
+  Ml as DayCalendar,
+  So as DefaultLayout,
+  ia as DisclosureWrapper,
+  so as DynamicForm,
+  uo as EmailInput,
+  fo as EmptyInput,
+  Xl as EmptyState,
+  Vl as EventCard,
+  Bl as EventsList,
+  mo as FileDropzoneInput,
+  ua as FormErrorWrapper,
+  lo as FormField,
+  Oa as FormFieldWrapper,
+  Ul as FunnelChart,
+  Qa as GoogleMap,
+  Io as HeaderLayout,
+  ho as HiddenInput,
+  rr as ImageCropperModal,
+  vt as InfoCard,
+  er as InfoWindow,
+  Zo as InlineTabs,
+  yt as InputsShowcase,
+  Rl as LineChart,
+  le as Loading,
+  ya as LoadingDots,
+  dl as LottieAnimation,
+  tr as Map,
+  No as MapAll,
+  or as MapMarker,
+  gl as Menu,
+  xl as Modal,
+  El as MonthCalendar,
+  bl as NavLink,
+  jo as NavigationGroup,
+  Ao as NavigationItem,
+  ir as NotificationContainer,
+  Wo as NotificationToast,
+  Ha as PhoneInput,
+  Gl as PieChart,
+  Lo as ProfileHeaderAvatar,
+  _l as ProgressBar,
+  Fo as ProjectLogo,
+  _t as PropsTable,
+  xt as RadialProgressBar,
+  Wa as RichTextInput,
+  O as SelectInput,
+  yo as SelectTextInput,
+  Ct as ShowcaseCard,
+  kt as ShowcaseLayout,
+  zo as SidebarLayout,
+  Za as SmartLoadingIndicator,
+  Yl as SparklineChart,
+  $t as StachelockUI,
+  ql as StatCard,
+  wt as StateDisplay,
+  Jo as StepperPanels,
+  ne as SwitchInput,
+  vo as SwitchInputGroup,
+  Qo as TabGroup,
+  ea as TabGroupUnderline,
+  kl as Table,
+  ta as TabsInPills,
+  Co as TagifyInput,
+  re as TextAreaInput,
+  M as TextInput,
+  ht as ThemeDebugModal,
+  $l as Transition,
+  Pt as US_CENTER,
+  Nt as WORLD_CENTER,
+  Ca as WeekCalendar,
+  Dl as YearCalendar,
+  Sa as areaChartConfig,
+  Ta as barChartConfig,
+  Ia as baseTheme,
+  Lt as calculateEventLanes,
+  Ma as chartColors,
+  ja as chartTypography,
+  q as componentRegistry,
+  $t as default,
+  pe as defaultComponentMap,
+  Ut as defaultCoordinateExtractor,
+  Z as defaultDesignTokens,
+  Va as formatDuration,
+  Aa as formatNumber,
+  Ba as formatPercentage,
+  Qt as formatUid,
+  La as funnelChartConfig,
+  he as generateCSSVariables,
+  It as generateDeterministicId,
+  Mt as generateId,
+  gt as generateTailwindConfig,
+  Ea as getAreaGradient,
+  mt as getComponent,
+  qt as getTabBadgeClasses,
+  Fa as hexToRgb,
+  Xt as isUidLike,
+  Ot as isValidCoordinate,
+  Da as lineChartConfig,
+  ge as mergeDesignTokens,
+  za as pieChartConfig,
+  se as presetThemes,
+  pt as registerComponent,
+  jt as sanitizeId,
+  el as slugToReadable,
+  Pa as stachelockColors,
+  Na as toRgba,
+  sl as toSentenceCase,
+  tl as toTitleCase,
+  ll as transformString,
+  ol as truncateString,
+  At as useCalendar,
+  Et as useEventSegments,
+  Dt as useFormValidation,
+  Rt as useMap,
+  Gt as useModal,
+  Yt as useNotifications,
+  Zt as useSimpleTabs,
+  al as useStringTransform,
+  nl as useTabs,
+  Y as useTheme
 };
 //# sourceMappingURL=index.js.map