@solostylist/ui-kit 1.0.175 → 1.0.176

package/dist/s-theme-demo/s-theme-demo.js

@@ -1,17 +1,17 @@
-import { j as e } from "../jsx-runtime-OVHDjVDe.js";
+import { j as r } from "../jsx-runtime-tc70JA_2.js";
 import * as g from "react";
-import { Box as t, Typography as r, Stack as i, Card as d, CardContent as h, Divider as m, Alert as x, Chip as s, Paper as j } from "@mui/material";
-import { SButton as n } from "../s-button/s-button.js";
-import { SForm as v } from "../s-form/s-form.js";
-import { STextField as p } from "../s-text-field/s-text-field.js";
-import y from "../s-theme-switch/s-theme-switch.js";
-import { c as u } from "../createSvgIcon-DxwgGAVe.js";
-import { F as b } from "../Favorite-DS5Gpq2s.js";
-const f = u(/* @__PURE__ */ e.jsx("path", {
+import { Box as t, Typography as e, Stack as n, Card as d, CardContent as h, Divider as u, Alert as x, Chip as s, Paper as j } from "@mui/material";
+import { SButton as i } from "../s-button/s-button.js";
+import { c as p } from "../createSvgIcon-BKymXuBG.js";
+import { F as v } from "../Favorite-wp65zwWq.js";
+import { SForm as y } from "../s-form/s-form.js";
+import { STextField as m } from "../s-text-field/s-text-field.js";
+import b from "../s-theme-switch/s-theme-switch.js";
+const f = p(/* @__PURE__ */ r.jsx("path", {
   d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
-}), "Add"), S = u(/* @__PURE__ */ e.jsx("path", {
+}), "Add"), S = p(/* @__PURE__ */ r.jsx("path", {
   d: "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92"
-}), "Share"), w = u(/* @__PURE__ */ e.jsx("path", {
+}), "Share"), w = p(/* @__PURE__ */ r.jsx("path", {
   d: "M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
 }), "Star"), B = () => {
   const l = [
@@ -22,27 +22,27 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
     { name: "Error", color: "error.main" },
     { name: "Info", color: "info.main" }
   ];
-  return /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
-    /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Color Palette" }),
-    /* @__PURE__ */ e.jsx(i, { direction: "row", flexWrap: "wrap", gap: 2, children: l.map((o) => /* @__PURE__ */ e.jsxs(t, { sx: { textAlign: "center" }, children: [
-      /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ r.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ r.jsxs(h, { children: [
+    /* @__PURE__ */ r.jsx(e, { variant: "h5", gutterBottom: !0, children: "Color Palette" }),
+    /* @__PURE__ */ r.jsx(n, { direction: "row", flexWrap: "wrap", gap: 2, children: l.map((a) => /* @__PURE__ */ r.jsxs(t, { sx: { textAlign: "center" }, children: [
+      /* @__PURE__ */ r.jsx(
         t,
         {
           sx: {
             width: 60,
             height: 60,
-            bgcolor: o.color,
+            bgcolor: a.color,
             borderRadius: 1,
             mb: 1,
             boxShadow: 1
           }
         }
       ),
-      /* @__PURE__ */ e.jsx(r, { variant: "caption", children: o.name })
-    ] }, o.name)) }),
-    /* @__PURE__ */ e.jsx(r, { variant: "h6", sx: { mt: 3, mb: 2 }, children: "Background Colors" }),
-    /* @__PURE__ */ e.jsxs(i, { direction: "row", gap: 2, flexWrap: "wrap", children: [
-      /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ r.jsx(e, { variant: "caption", children: a.name })
+    ] }, a.name)) }),
+    /* @__PURE__ */ r.jsx(e, { variant: "h6", sx: { mt: 3, mb: 2 }, children: "Background Colors" }),
+    /* @__PURE__ */ r.jsxs(n, { direction: "row", gap: 2, flexWrap: "wrap", children: [
+      /* @__PURE__ */ r.jsx(
         t,
         {
           sx: {
@@ -52,10 +52,10 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
             borderColor: "divider",
             borderRadius: 1
           },
-          children: /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "Default Background" })
+          children: /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "Default Background" })
         }
       ),
-      /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ r.jsx(
         t,
         {
           sx: {
@@ -65,177 +65,177 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
             borderColor: "divider",
             borderRadius: 1
           },
-          children: /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "Paper Background" })
+          children: /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "Paper Background" })
         }
       )
     ] })
   ] }) });
-}, T = () => /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
-  /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Typography System" }),
-  /* @__PURE__ */ e.jsx(r, { variant: "body2", color: "text.secondary", gutterBottom: !0, sx: { mb: 3 }, children: "Complete typography scale using Outfit font family with Material-UI variants" }),
-  /* @__PURE__ */ e.jsxs(i, { spacing: 3, children: [
-    /* @__PURE__ */ e.jsxs(t, { children: [
-      /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Headings" }),
-      /* @__PURE__ */ e.jsxs(i, { spacing: 2, children: [
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h1", gutterBottom: !0, children: "Display Large" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "h1 - 3.5rem (56px), Weight 600 - Used for hero sections and primary headings" })
+}, T = () => /* @__PURE__ */ r.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ r.jsxs(h, { children: [
+  /* @__PURE__ */ r.jsx(e, { variant: "h5", gutterBottom: !0, children: "Typography System" }),
+  /* @__PURE__ */ r.jsx(e, { variant: "body2", color: "text.secondary", gutterBottom: !0, sx: { mb: 3 }, children: "Complete typography scale using Outfit font family with Material-UI variants" }),
+  /* @__PURE__ */ r.jsxs(n, { spacing: 3, children: [
+    /* @__PURE__ */ r.jsxs(t, { children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Headings" }),
+      /* @__PURE__ */ r.jsxs(n, { spacing: 2, children: [
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "h1", gutterBottom: !0, children: "Display Large" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "h1 - 3.5rem (56px), Weight 600 - Used for hero sections and primary headings" })
         ] }),
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h2", gutterBottom: !0, children: "Display Medium" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "h2 - 2.75rem (44px), Weight 600 - Used for page titles and major sections" })
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "h2", gutterBottom: !0, children: "Display Medium" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "h2 - 2.75rem (44px), Weight 600 - Used for page titles and major sections" })
         ] }),
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h3", gutterBottom: !0, children: "Display Small" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "h3 - 2.25rem (36px), Weight 600 - Used for large section headings" })
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "h3", gutterBottom: !0, children: "Display Small" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "h3 - 2.25rem (36px), Weight 600 - Used for large section headings" })
         ] }),
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h4", gutterBottom: !0, children: "Headline Large" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "h4 - 2rem (32px), Weight 600 - Used for card titles and content headings" })
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "h4", gutterBottom: !0, children: "Headline Large" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "h4 - 2rem (32px), Weight 600 - Used for card titles and content headings" })
         ] }),
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Headline Medium" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "h5 - 1.5rem (24px), Weight 600 - Used for subsection headings" })
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "h5", gutterBottom: !0, children: "Headline Medium" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "h5 - 1.5rem (24px), Weight 600 - Used for subsection headings" })
         ] }),
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Headline Small" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "h6 - 1.25rem (20px), Weight 600 - Used for component titles and labels" })
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Headline Small" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "h6 - 1.25rem (20px), Weight 600 - Used for component titles and labels" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e.jsx(m, {}),
-    /* @__PURE__ */ e.jsxs(t, { children: [
-      /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Body Text" }),
-      /* @__PURE__ */ e.jsxs(i, { spacing: 2, children: [
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "body1", gutterBottom: !0, children: "Body Large - The primary text style used for most content. It provides excellent readability and is suitable for paragraphs, descriptions, and general text content. This is the main body text variant." }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "body1 - 1rem (16px), Weight 400, Line height 1.5" })
+    /* @__PURE__ */ r.jsx(u, {}),
+    /* @__PURE__ */ r.jsxs(t, { children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Body Text" }),
+      /* @__PURE__ */ r.jsxs(n, { spacing: 2, children: [
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "body1", gutterBottom: !0, children: "Body Large - The primary text style used for most content. It provides excellent readability and is suitable for paragraphs, descriptions, and general text content. This is the main body text variant." }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "body1 - 1rem (16px), Weight 400, Line height 1.5" })
         ] }),
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "body2", gutterBottom: !0, children: "Body Medium - Secondary text style, often used for supporting information, captions, and less prominent content elements. Slightly smaller than body1 for hierarchy." }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "body2 - 0.875rem (14px), Weight 400, Line height 1.43" })
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "body2", gutterBottom: !0, children: "Body Medium - Secondary text style, often used for supporting information, captions, and less prominent content elements. Slightly smaller than body1 for hierarchy." }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "body2 - 0.875rem (14px), Weight 400, Line height 1.43" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e.jsx(m, {}),
-    /* @__PURE__ */ e.jsxs(t, { children: [
-      /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Labels & Supporting Text" }),
-      /* @__PURE__ */ e.jsxs(i, { spacing: 2, children: [
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "subtitle1", gutterBottom: !0, children: "Subtitle Large - Used for prominent secondary text" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "subtitle1 - 1rem (16px), Weight 500" })
+    /* @__PURE__ */ r.jsx(u, {}),
+    /* @__PURE__ */ r.jsxs(t, { children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Labels & Supporting Text" }),
+      /* @__PURE__ */ r.jsxs(n, { spacing: 2, children: [
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "subtitle1", gutterBottom: !0, children: "Subtitle Large - Used for prominent secondary text" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "subtitle1 - 1rem (16px), Weight 500" })
         ] }),
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Subtitle Small - Used for form labels and secondary headings" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "subtitle2 - 0.875rem (14px), Weight 500" })
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Subtitle Small - Used for form labels and secondary headings" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "subtitle2 - 0.875rem (14px), Weight 500" })
         ] }),
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", component: "div", gutterBottom: !0, children: "Caption Text - Used for annotations, helper text, and fine print" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "caption - 0.75rem (12px), Weight 400" })
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", component: "div", gutterBottom: !0, children: "Caption Text - Used for annotations, helper text, and fine print" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "caption - 0.75rem (12px), Weight 400" })
         ] }),
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "overline", component: "div", gutterBottom: !0, children: "OVERLINE TEXT - USED FOR LABELS AND CATEGORIES" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "overline - 0.75rem (12px), Weight 400, Uppercase, Letter spacing 0.5px" })
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "overline", component: "div", gutterBottom: !0, children: "OVERLINE TEXT - USED FOR LABELS AND CATEGORIES" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "overline - 0.75rem (12px), Weight 400, Uppercase, Letter spacing 0.5px" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e.jsx(m, {}),
-    /* @__PURE__ */ e.jsxs(t, { children: [
-      /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Text Color Variants" }),
-      /* @__PURE__ */ e.jsxs(i, { spacing: 1, children: [
-        /* @__PURE__ */ e.jsx(r, { variant: "body1", color: "text.primary", children: "Primary Text - Main content color" }),
-        /* @__PURE__ */ e.jsx(r, { variant: "body1", color: "text.secondary", children: "Secondary Text - Supporting content color" }),
-        /* @__PURE__ */ e.jsx(r, { variant: "body1", color: "text.disabled", children: "Disabled Text - Inactive content color" }),
-        /* @__PURE__ */ e.jsx(r, { variant: "body1", color: "primary.main", children: "Primary Brand - Brand color text" }),
-        /* @__PURE__ */ e.jsx(r, { variant: "body1", color: "success.main", children: "Success Text - Positive feedback" }),
-        /* @__PURE__ */ e.jsx(r, { variant: "body1", color: "warning.main", children: "Warning Text - Caution indicators" }),
-        /* @__PURE__ */ e.jsx(r, { variant: "body1", color: "error.main", children: "Error Text - Error messages" })
+    /* @__PURE__ */ r.jsx(u, {}),
+    /* @__PURE__ */ r.jsxs(t, { children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Text Color Variants" }),
+      /* @__PURE__ */ r.jsxs(n, { spacing: 1, children: [
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "text.primary", children: "Primary Text - Main content color" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "text.secondary", children: "Secondary Text - Supporting content color" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "text.disabled", children: "Disabled Text - Inactive content color" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "primary.main", children: "Primary Brand - Brand color text" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "success.main", children: "Success Text - Positive feedback" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "warning.main", children: "Warning Text - Caution indicators" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "error.main", children: "Error Text - Error messages" })
       ] })
     ] })
   ] })
-] }) }), C = () => {
-  const [l, o] = g.useState("");
-  return /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
-    /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "SoloStylist Components" }),
-    /* @__PURE__ */ e.jsxs(i, { spacing: 4, children: [
-      /* @__PURE__ */ e.jsxs(t, { children: [
-        /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Enhanced Buttons" }),
-        /* @__PURE__ */ e.jsx(r, { variant: "body2", color: "text.secondary", gutterBottom: !0, sx: { mb: 3 }, children: "Comprehensive button system with all variants, colors, and sizes" }),
-        /* @__PURE__ */ e.jsxs(i, { spacing: 3, children: [
-          /* @__PURE__ */ e.jsxs(t, { children: [
-            /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Button Variants" }),
-            /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", children: "Contained" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "primary", children: "Outlined" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "text", color: "primary", children: "Text" })
+] }) }), W = () => {
+  const [l, a] = g.useState("");
+  return /* @__PURE__ */ r.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ r.jsxs(h, { children: [
+    /* @__PURE__ */ r.jsx(e, { variant: "h5", gutterBottom: !0, children: "SoloStylist Components" }),
+    /* @__PURE__ */ r.jsxs(n, { spacing: 4, children: [
+      /* @__PURE__ */ r.jsxs(t, { children: [
+        /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Enhanced Buttons" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body2", color: "text.secondary", gutterBottom: !0, sx: { mb: 3 }, children: "Comprehensive button system with all variants, colors, and sizes" }),
+        /* @__PURE__ */ r.jsxs(n, { spacing: 3, children: [
+          /* @__PURE__ */ r.jsxs(t, { children: [
+            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Button Variants" }),
+            /* @__PURE__ */ r.jsxs(n, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "primary", children: "Contained" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "outlined", color: "primary", children: "Outlined" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "text", color: "primary", children: "Text" })
             ] })
           ] }),
-          /* @__PURE__ */ e.jsxs(t, { children: [
-            /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants (Contained)" }),
-            /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", children: "Primary" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "secondary", children: "Secondary" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "success", children: "Success" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "warning", children: "Warning" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "error", children: "Error" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "info", children: "Info" })
+          /* @__PURE__ */ r.jsxs(t, { children: [
+            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants (Contained)" }),
+            /* @__PURE__ */ r.jsxs(n, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "primary", children: "Primary" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "secondary", children: "Secondary" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "success", children: "Success" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "warning", children: "Warning" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "error", children: "Error" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "info", children: "Info" })
             ] })
           ] }),
-          /* @__PURE__ */ e.jsxs(t, { children: [
-            /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants (Outlined)" }),
-            /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
-              /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "primary", children: "Primary" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "secondary", children: "Secondary" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "success", children: "Success" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "warning", children: "Warning" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "error", children: "Error" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "info", children: "Info" })
+          /* @__PURE__ */ r.jsxs(t, { children: [
+            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants (Outlined)" }),
+            /* @__PURE__ */ r.jsxs(n, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+              /* @__PURE__ */ r.jsx(i, { variant: "outlined", color: "primary", children: "Primary" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "outlined", color: "secondary", children: "Secondary" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "outlined", color: "success", children: "Success" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "outlined", color: "warning", children: "Warning" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "outlined", color: "error", children: "Error" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "outlined", color: "info", children: "Info" })
             ] })
           ] }),
-          /* @__PURE__ */ e.jsxs(t, { children: [
-            /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Button Sizes" }),
-            /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 2, alignItems: "center", flexWrap: "wrap", gap: 1, children: [
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", size: "small", children: "Small" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", size: "medium", children: "Medium" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", size: "large", children: "Large" })
+          /* @__PURE__ */ r.jsxs(t, { children: [
+            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Button Sizes" }),
+            /* @__PURE__ */ r.jsxs(n, { direction: "row", spacing: 2, alignItems: "center", flexWrap: "wrap", gap: 1, children: [
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "primary", size: "small", children: "Small" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "primary", size: "medium", children: "Medium" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "primary", size: "large", children: "Large" })
             ] })
           ] }),
-          /* @__PURE__ */ e.jsxs(t, { children: [
-            /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Button States" }),
-            /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", children: "Default" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", disabled: !0, children: "Disabled" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "primary", disabled: !0, children: "Disabled Outlined" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "text", color: "primary", disabled: !0, children: "Disabled Text" })
+          /* @__PURE__ */ r.jsxs(t, { children: [
+            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Button States" }),
+            /* @__PURE__ */ r.jsxs(n, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "primary", children: "Default" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "primary", disabled: !0, children: "Disabled" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "outlined", color: "primary", disabled: !0, children: "Disabled Outlined" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "text", color: "primary", disabled: !0, children: "Disabled Text" })
             ] })
           ] }),
-          /* @__PURE__ */ e.jsxs(t, { children: [
-            /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Buttons with Icons" }),
-            /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", startIcon: /* @__PURE__ */ e.jsx(f, {}), children: "Start Icon" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "secondary", endIcon: /* @__PURE__ */ e.jsx(S, {}), children: "End Icon" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "success", startIcon: /* @__PURE__ */ e.jsx(w, {}), children: "Outlined + Icon" }),
-              /* @__PURE__ */ e.jsx(n, { variant: "text", color: "error", endIcon: /* @__PURE__ */ e.jsx(b, {}), children: "Text + Icon" })
+          /* @__PURE__ */ r.jsxs(t, { children: [
+            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Buttons with Icons" }),
+            /* @__PURE__ */ r.jsxs(n, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "primary", startIcon: /* @__PURE__ */ r.jsx(f, {}), children: "Start Icon" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "contained", color: "secondary", endIcon: /* @__PURE__ */ r.jsx(S, {}), children: "End Icon" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "outlined", color: "success", startIcon: /* @__PURE__ */ r.jsx(w, {}), children: "Outlined + Icon" }),
+              /* @__PURE__ */ r.jsx(i, { variant: "text", color: "error", endIcon: /* @__PURE__ */ r.jsx(v, {}), children: "Text + Icon" })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ e.jsxs(t, { children: [
-        /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Form Components with SForm" }),
-        /* @__PURE__ */ e.jsx(v, { label: "Sample Form", required: !0, children: /* @__PURE__ */ e.jsxs(i, { spacing: 3, children: [
-          /* @__PURE__ */ e.jsx(
-            p,
+      /* @__PURE__ */ r.jsxs(t, { children: [
+        /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Form Components with SForm" }),
+        /* @__PURE__ */ r.jsx(y, { label: "Sample Form", required: !0, children: /* @__PURE__ */ r.jsxs(n, { spacing: 3, children: [
+          /* @__PURE__ */ r.jsx(
+            m,
             {
               label: "Enhanced Text Field",
               value: l,
-              onChange: (a) => o(a.target.value),
+              onChange: (o) => a(o.target.value),
               placeholder: "Enter text here...",
               helperText: "This is an enhanced STextField component",
               fullWidth: !0
             }
           ),
-          /* @__PURE__ */ e.jsx(
-            p,
+          /* @__PURE__ */ r.jsx(
+            m,
             {
               label: "Password Field",
               type: "password",
@@ -244,8 +244,8 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
               fullWidth: !0
             }
           ),
-          /* @__PURE__ */ e.jsx(
-            p,
+          /* @__PURE__ */ r.jsx(
+            m,
             {
               label: "Multiline Text",
               multiline: !0,
@@ -257,63 +257,63 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ e.jsxs(t, { children: [
-        /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Theme Controls" }),
-        /* @__PURE__ */ e.jsx(i, { spacing: 2, children: /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Theme Switch Component" }),
-          /* @__PURE__ */ e.jsx(y, {})
+      /* @__PURE__ */ r.jsxs(t, { children: [
+        /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Theme Controls" }),
+        /* @__PURE__ */ r.jsx(n, { spacing: 2, children: /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Theme Switch Component" }),
+          /* @__PURE__ */ r.jsx(b, {})
         ] }) })
       ] })
     ] })
   ] }) });
-}, I = () => /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
-  /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Interactive Components" }),
-  /* @__PURE__ */ e.jsxs(i, { spacing: 3, children: [
-    /* @__PURE__ */ e.jsxs(t, { children: [
-      /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Alerts" }),
-      /* @__PURE__ */ e.jsxs(i, { spacing: 2, children: [
-        /* @__PURE__ */ e.jsx(x, { severity: "success", children: "Success alert - Operation completed successfully!" }),
-        /* @__PURE__ */ e.jsx(x, { severity: "warning", children: "Warning alert - Please review your input." }),
-        /* @__PURE__ */ e.jsx(x, { severity: "error", children: "Error alert - Something went wrong." }),
-        /* @__PURE__ */ e.jsx(x, { severity: "info", children: "Info alert - Here's some useful information." })
+}, C = () => /* @__PURE__ */ r.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ r.jsxs(h, { children: [
+  /* @__PURE__ */ r.jsx(e, { variant: "h5", gutterBottom: !0, children: "Interactive Components" }),
+  /* @__PURE__ */ r.jsxs(n, { spacing: 3, children: [
+    /* @__PURE__ */ r.jsxs(t, { children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Alerts" }),
+      /* @__PURE__ */ r.jsxs(n, { spacing: 2, children: [
+        /* @__PURE__ */ r.jsx(x, { severity: "success", children: "Success alert - Operation completed successfully!" }),
+        /* @__PURE__ */ r.jsx(x, { severity: "warning", children: "Warning alert - Please review your input." }),
+        /* @__PURE__ */ r.jsx(x, { severity: "error", children: "Error alert - Something went wrong." }),
+        /* @__PURE__ */ r.jsx(x, { severity: "info", children: "Info alert - Here's some useful information." })
       ] })
     ] }),
-    /* @__PURE__ */ e.jsxs(t, { children: [
-      /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Chips & Tags" }),
-      /* @__PURE__ */ e.jsx(r, { variant: "body2", color: "text.secondary", gutterBottom: !0, sx: { mb: 3 }, children: "Comprehensive chip system with all colors, variants, and interactive states" }),
-      /* @__PURE__ */ e.jsxs(i, { spacing: 3, children: [
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants" }),
-          /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 1, flexWrap: "wrap", gap: 1, children: [
-            /* @__PURE__ */ e.jsx(s, { label: "Default" }),
-            /* @__PURE__ */ e.jsx(s, { label: "Primary", color: "primary" }),
-            /* @__PURE__ */ e.jsx(s, { label: "Secondary", color: "secondary" }),
-            /* @__PURE__ */ e.jsx(s, { label: "Success", color: "success" }),
-            /* @__PURE__ */ e.jsx(s, { label: "Warning", color: "warning" }),
-            /* @__PURE__ */ e.jsx(s, { label: "Error", color: "error" }),
-            /* @__PURE__ */ e.jsx(s, { label: "Info", color: "info" })
+    /* @__PURE__ */ r.jsxs(t, { children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Chips & Tags" }),
+      /* @__PURE__ */ r.jsx(e, { variant: "body2", color: "text.secondary", gutterBottom: !0, sx: { mb: 3 }, children: "Comprehensive chip system with all colors, variants, and interactive states" }),
+      /* @__PURE__ */ r.jsxs(n, { spacing: 3, children: [
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants" }),
+          /* @__PURE__ */ r.jsxs(n, { direction: "row", spacing: 1, flexWrap: "wrap", gap: 1, children: [
+            /* @__PURE__ */ r.jsx(s, { label: "Default" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Primary", color: "primary" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Secondary", color: "secondary" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Success", color: "success" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Warning", color: "warning" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Error", color: "error" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Info", color: "info" })
           ] })
         ] }),
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Chip Sizes" }),
-          /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", gap: 1, children: [
-            /* @__PURE__ */ e.jsx(s, { label: "Small", color: "primary", size: "small" }),
-            /* @__PURE__ */ e.jsx(s, { label: "Medium", color: "primary", size: "medium" })
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Chip Sizes" }),
+          /* @__PURE__ */ r.jsxs(n, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", gap: 1, children: [
+            /* @__PURE__ */ r.jsx(s, { label: "Small", color: "primary", size: "small" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Medium", color: "primary", size: "medium" })
           ] })
         ] })
       ] })
     ] })
   ] })
-] }) }), W = () => {
+] }) }), I = () => {
   const l = [0, 1, 2, 4, 6, 8, 12, 16, 24];
-  return /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
-    /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Shadow System" }),
-    /* @__PURE__ */ e.jsx(r, { variant: "body2", color: "text.secondary", gutterBottom: !0, children: "Material-UI elevation system with custom shadows" }),
-    /* @__PURE__ */ e.jsx(i, { direction: "row", flexWrap: "wrap", gap: 3, sx: { mt: 2 }, children: l.map((o) => /* @__PURE__ */ e.jsxs(t, { sx: { textAlign: "center" }, children: [
-      /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ r.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ r.jsxs(h, { children: [
+    /* @__PURE__ */ r.jsx(e, { variant: "h5", gutterBottom: !0, children: "Shadow System" }),
+    /* @__PURE__ */ r.jsx(e, { variant: "body2", color: "text.secondary", gutterBottom: !0, children: "Material-UI elevation system with custom shadows" }),
+    /* @__PURE__ */ r.jsx(n, { direction: "row", flexWrap: "wrap", gap: 3, sx: { mt: 2 }, children: l.map((a) => /* @__PURE__ */ r.jsxs(t, { sx: { textAlign: "center" }, children: [
+      /* @__PURE__ */ r.jsx(
         j,
         {
-          elevation: o,
+          elevation: a,
           sx: {
             width: 80,
             height: 80,
@@ -323,17 +323,17 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
             mb: 1,
             borderRadius: 2
           },
-          children: /* @__PURE__ */ e.jsx(r, { variant: "h6", children: o })
+          children: /* @__PURE__ */ r.jsx(e, { variant: "h6", children: a })
         }
       ),
-      /* @__PURE__ */ e.jsxs(r, { variant: "caption", children: [
+      /* @__PURE__ */ r.jsxs(e, { variant: "caption", children: [
         "Elevation ",
-        o
+        a
       ] })
-    ] }, o)) }),
-    /* @__PURE__ */ e.jsx(m, { sx: { my: 3 } }),
-    /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Custom Shadow Effects" }),
-    /* @__PURE__ */ e.jsx(i, { direction: "row", spacing: 3, flexWrap: "wrap", gap: 2, children: /* @__PURE__ */ e.jsx(
+    ] }, a)) }),
+    /* @__PURE__ */ r.jsx(u, { sx: { my: 3 } }),
+    /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Custom Shadow Effects" }),
+    /* @__PURE__ */ r.jsx(n, { direction: "row", spacing: 3, flexWrap: "wrap", gap: 2, children: /* @__PURE__ */ r.jsx(
       j,
       {
         sx: {
@@ -341,55 +341,40 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
           borderRadius: 2,
           boxShadow: "var(--s-palette-baseShadow)"
         },
-        children: /* @__PURE__ */ e.jsx(r, { variant: "body2", children: "Custom Base Shadow" })
+        children: /* @__PURE__ */ r.jsx(e, { variant: "body2", children: "Custom Base Shadow" })
       }
     ) })
   ] }) });
-}, V = ({
+}, z = ({
   title: l = "SoloStylist UI Kit Theme Demo",
-  compact: o = !1,
-  sections: a = ["colors", "typography", "components", "forms", "interactive", "shadows"]
+  compact: a = !1,
+  sections: o = ["colors", "typography", "components", "forms", "interactive", "shadows"]
 }) => {
   const c = g.useMemo(
     () => ({
-      colors: a.includes("colors"),
-      typography: a.includes("typography"),
-      components: a.includes("components"),
-      forms: a.includes("forms"),
-      shadows: a.includes("shadows"),
-      interactive: a.includes("interactive")
+      colors: o.includes("colors"),
+      typography: o.includes("typography"),
+      components: o.includes("components"),
+      forms: o.includes("forms"),
+      shadows: o.includes("shadows"),
+      interactive: o.includes("interactive")
     }),
-    [a]
+    [o]
   );
-  return /* @__PURE__ */ e.jsxs(t, { sx: { p: o ? 2 : 3, maxWidth: 1200, mx: "auto" }, children: [
-    /* @__PURE__ */ e.jsxs(t, { sx: { mb: 4, textAlign: "center" }, children: [
-      /* @__PURE__ */ e.jsx(r, { variant: "h3", component: "h1", gutterBottom: !0, children: l }),
-      /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "text.secondary", sx: { mb: 3 }, children: "Showcase of the SoloStylist UI Kit with modern theming capabilities" })
+  return /* @__PURE__ */ r.jsxs(t, { sx: { p: a ? 2 : 3, maxWidth: 1200, mx: "auto" }, children: [
+    /* @__PURE__ */ r.jsxs(t, { sx: { mb: 4, textAlign: "center" }, children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h3", component: "h1", gutterBottom: !0, children: l }),
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "text.secondary", sx: { mb: 3 }, children: "Showcase of the SoloStylist UI Kit with modern theming capabilities" })
     ] }),
-    /* @__PURE__ */ e.jsxs(i, { spacing: o ? 2 : 4, children: [
-      c.colors && /* @__PURE__ */ e.jsx(B, {}),
-      c.typography && /* @__PURE__ */ e.jsx(T, {}),
-      (c.components || c.forms) && /* @__PURE__ */ e.jsx(C, {}),
-      c.interactive && /* @__PURE__ */ e.jsx(I, {}),
-      c.shadows && /* @__PURE__ */ e.jsx(W, {})
+    /* @__PURE__ */ r.jsxs(n, { spacing: a ? 2 : 4, children: [
+      c.colors && /* @__PURE__ */ r.jsx(B, {}),
+      c.typography && /* @__PURE__ */ r.jsx(T, {}),
+      (c.components || c.forms) && /* @__PURE__ */ r.jsx(W, {}),
+      c.interactive && /* @__PURE__ */ r.jsx(C, {}),
+      c.shadows && /* @__PURE__ */ r.jsx(I, {})
     ] })
   ] });
 };
-try {
-  sthemedemo.displayName = "sthemedemo", sthemedemo.__docgenInfo = { description: `SThemeDemo - Comprehensive theme demonstration component
-
-Features:
-- Theme mode switching (light/dark/system)
-- Color palette showcase
-- Typography system demonstration
-- Core SoloStylist component showcase
-- Form components with SForm integration
-- Interactive Material-UI components
-- Shadow system visualization
-- Responsive layout
-- Professional styling`, displayName: "sthemedemo", props: { title: { defaultValue: { value: "SoloStylist UI Kit Theme Demo" }, description: "Optional title for the demo", name: "title", required: !1, type: { name: "string" } }, compact: { defaultValue: { value: "false" }, description: "Compact layout mode", name: "compact", required: !1, type: { name: "boolean" } }, sections: { defaultValue: { value: "['colors', 'typography', 'components', 'forms', 'interactive', 'shadows']" }, description: "Additional sections to show", name: "sections", required: !1, type: { name: '("typography" | "components" | "shadows" | "colors" | "forms" | "interactive")[]' } } } };
-} catch {
-}
 export {
-  V as default
+  z as default
 };