@solostylist/ui-kit 1.0.166 → 1.0.168

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

@@ -1,17 +1,17 @@
-import { j as r } from "../jsx-runtime-OVHDjVDe.js";
+import { j as e } from "../jsx-runtime-OVHDjVDe.js";
 import * as g from "react";
-import { Box as t, Typography as e, Stack as i, Card as x, CardContent as h, Divider as d, Alert as p, Chip as s, Paper as m } from "@mui/material";
-import n from "../s-button/s-button.js";
-import v from "../s-form/s-form.js";
-import u from "../s-text-field/s-text-field.js";
+import { Box as t, Typography as r, Stack as o, Card as h, CardContent as x, Divider as d, Alert as m, Chip as s, Paper as p } 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 u } from "../s-text-field/s-text-field.js";
 import y from "../s-theme-switch/s-theme-switch.js";
 import { c as j } from "../createSvgIcon-DxwgGAVe.js";
 import { F as b } from "../Favorite-DS5Gpq2s.js";
-const f = j(/* @__PURE__ */ r.jsx("path", {
+const f = j(/* @__PURE__ */ e.jsx("path", {
   d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
-}), "Add"), S = j(/* @__PURE__ */ r.jsx("path", {
+}), "Add"), S = j(/* @__PURE__ */ e.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 = j(/* @__PURE__ */ r.jsx("path", {
+}), "Share"), w = j(/* @__PURE__ */ e.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 c = [
@@ -22,27 +22,27 @@ const f = j(/* @__PURE__ */ r.jsx("path", {
     { name: "Error", color: "error.main" },
     { name: "Info", color: "info.main" }
   ];
-  return /* @__PURE__ */ r.jsx(x, { 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(i, { direction: "row", flexWrap: "wrap", gap: 2, children: c.map((o) => /* @__PURE__ */ r.jsxs(t, { sx: { textAlign: "center" }, children: [
-      /* @__PURE__ */ r.jsx(
+  return /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { children: [
+    /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Color Palette" }),
+    /* @__PURE__ */ e.jsx(o, { direction: "row", flexWrap: "wrap", gap: 2, children: c.map((i) => /* @__PURE__ */ e.jsxs(t, { sx: { textAlign: "center" }, children: [
+      /* @__PURE__ */ e.jsx(
         t,
         {
           sx: {
             width: 60,
             height: 60,
-            bgcolor: o.color,
+            bgcolor: i.color,
             borderRadius: 1,
             mb: 1,
             boxShadow: 1
           }
         }
       ),
-      /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: o.name })
-    ] }, o.name)) }),
-    /* @__PURE__ */ r.jsx(e, { variant: "h6", sx: { mt: 3, mb: 2 }, children: "Background Colors" }),
-    /* @__PURE__ */ r.jsxs(i, { direction: "row", gap: 2, flexWrap: "wrap", children: [
-      /* @__PURE__ */ r.jsx(
+      /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: i.name })
+    ] }, i.name)) }),
+    /* @__PURE__ */ e.jsx(r, { variant: "h6", sx: { mt: 3, mb: 2 }, children: "Background Colors" }),
+    /* @__PURE__ */ e.jsxs(o, { direction: "row", gap: 2, flexWrap: "wrap", children: [
+      /* @__PURE__ */ e.jsx(
         t,
         {
           sx: {
@@ -52,10 +52,10 @@ const f = j(/* @__PURE__ */ r.jsx("path", {
             borderColor: "divider",
             borderRadius: 1
           },
-          children: /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "Default Background" })
+          children: /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "Default Background" })
         }
       ),
-      /* @__PURE__ */ r.jsx(
+      /* @__PURE__ */ e.jsx(
         t,
         {
           sx: {
@@ -65,91 +65,91 @@ const f = j(/* @__PURE__ */ r.jsx("path", {
             borderColor: "divider",
             borderRadius: 1
           },
-          children: /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "Paper Background" })
+          children: /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "Paper Background" })
         }
       )
     ] })
   ] }) });
-}, T = () => /* @__PURE__ */ r.jsx(x, { 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(i, { spacing: 3, children: [
-    /* @__PURE__ */ r.jsxs(t, { children: [
-      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Headings" }),
-      /* @__PURE__ */ r.jsxs(i, { spacing: 2, children: [
-        /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(e, { variant: "h1", component: "div", gutterBottom: !0, children: "Display Large" }),
-          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "h1 - 3.5rem (56px), Weight 600 - Used for hero sections and primary headings" })
+}, T = () => /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { 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(o, { spacing: 3, children: [
+    /* @__PURE__ */ e.jsxs(t, { children: [
+      /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Headings" }),
+      /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "h1", component: "div", gutterBottom: !0, children: "Display Large" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h1 - 3.5rem (56px), Weight 600 - Used for hero sections and primary headings" })
         ] }),
-        /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(e, { variant: "h2", component: "div", gutterBottom: !0, children: "Display Medium" }),
-          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "h2 - 2.75rem (44px), Weight 600 - Used for page titles and major sections" })
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "h2", component: "div", gutterBottom: !0, children: "Display Medium" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h2 - 2.75rem (44px), Weight 600 - Used for page titles and major sections" })
         ] }),
-        /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(e, { variant: "h3", component: "div", gutterBottom: !0, children: "Display Small" }),
-          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "h3 - 2.25rem (36px), Weight 600 - Used for large section headings" })
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "h3", component: "div", gutterBottom: !0, children: "Display Small" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h3 - 2.25rem (36px), Weight 600 - Used for large section headings" })
         ] }),
-        /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(e, { variant: "h4", component: "div", gutterBottom: !0, children: "Headline Large" }),
-          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "h4 - 2rem (32px), Weight 600 - Used for card titles and content headings" })
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "h4", component: "div", gutterBottom: !0, children: "Headline Large" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h4 - 2rem (32px), Weight 600 - Used for card titles and content headings" })
         ] }),
-        /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(e, { variant: "h5", component: "div", gutterBottom: !0, children: "Headline Medium" }),
-          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "h5 - 1.5rem (24px), Weight 600 - Used for subsection headings" })
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "h5", component: "div", gutterBottom: !0, children: "Headline Medium" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h5 - 1.5rem (24px), Weight 600 - Used for subsection headings" })
         ] }),
-        /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(e, { variant: "h6", component: "div", gutterBottom: !0, children: "Headline Small" }),
-          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "h6 - 1.25rem (20px), Weight 600 - Used for component titles and labels" })
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "h6", component: "div", gutterBottom: !0, children: "Headline Small" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h6 - 1.25rem (20px), Weight 600 - Used for component titles and labels" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ r.jsx(d, {}),
-    /* @__PURE__ */ r.jsxs(t, { children: [
-      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Body Text" }),
-      /* @__PURE__ */ r.jsxs(i, { spacing: 2, children: [
-        /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(e, { variant: "body1", component: "div", 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", color: "text.secondary", children: "body1 - 1rem (16px), Weight 400, Line height 1.5" })
+    /* @__PURE__ */ e.jsx(d, {}),
+    /* @__PURE__ */ e.jsxs(t, { children: [
+      /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Body Text" }),
+      /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "body1", component: "div", 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", color: "text.secondary", children: "body1 - 1rem (16px), Weight 400, Line height 1.5" })
         ] }),
-        /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(e, { variant: "body2", component: "div", 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", color: "text.secondary", children: "body2 - 0.875rem (14px), Weight 400, Line height 1.43" })
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "body2", component: "div", 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", color: "text.secondary", children: "body2 - 0.875rem (14px), Weight 400, Line height 1.43" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ r.jsx(d, {}),
-    /* @__PURE__ */ r.jsxs(t, { children: [
-      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Labels & Supporting Text" }),
-      /* @__PURE__ */ r.jsxs(i, { spacing: 2, children: [
-        /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(e, { variant: "subtitle1", component: "div", gutterBottom: !0, children: "Subtitle Large - Used for prominent secondary text" }),
-          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "subtitle1 - 1rem (16px), Weight 500" })
+    /* @__PURE__ */ e.jsx(d, {}),
+    /* @__PURE__ */ e.jsxs(t, { children: [
+      /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Labels & Supporting Text" }),
+      /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "subtitle1", component: "div", gutterBottom: !0, children: "Subtitle Large - Used for prominent secondary text" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "subtitle1 - 1rem (16px), Weight 500" })
         ] }),
-        /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", component: "div", gutterBottom: !0, children: "Subtitle Small - Used for form labels and secondary headings" }),
-          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "subtitle2 - 0.875rem (14px), Weight 500" })
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", component: "div", gutterBottom: !0, children: "Subtitle Small - Used for form labels and secondary headings" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "subtitle2 - 0.875rem (14px), Weight 500" })
         ] }),
-        /* @__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", color: "text.secondary", children: "caption - 0.75rem (12px), Weight 400" })
+        /* @__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", color: "text.secondary", children: "caption - 0.75rem (12px), Weight 400" })
         ] }),
-        /* @__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", color: "text.secondary", children: "overline - 0.75rem (12px), Weight 400, Uppercase, Letter spacing 0.5px" })
+        /* @__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", color: "text.secondary", children: "overline - 0.75rem (12px), Weight 400, Uppercase, Letter spacing 0.5px" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ r.jsx(d, {}),
-    /* @__PURE__ */ r.jsxs(t, { children: [
-      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Interactive & Special Text" }),
-      /* @__PURE__ */ r.jsxs(i, { spacing: 2, children: [
-        /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(e, { variant: "button", component: "div", gutterBottom: !0, children: "Button Text - All Caps Button Labels" }),
-          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "button - 0.875rem (14px), Weight 500, Uppercase" })
+    /* @__PURE__ */ e.jsx(d, {}),
+    /* @__PURE__ */ e.jsxs(t, { children: [
+      /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Interactive & Special Text" }),
+      /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "button", component: "div", gutterBottom: !0, children: "Button Text - All Caps Button Labels" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "button - 0.875rem (14px), Weight 500, Uppercase" })
         ] }),
-        /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(
-            e,
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(
+            r,
             {
               variant: "body2",
               component: "a",
@@ -159,106 +159,106 @@ const f = j(/* @__PURE__ */ r.jsx("path", {
               children: "Link Text - Interactive text elements"
             }
           ),
-          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "Links inherit body variants with primary color and hover effects" })
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "Links inherit body variants with primary color and hover effects" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ r.jsx(d, {}),
-    /* @__PURE__ */ r.jsxs(t, { children: [
-      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Text Color Variants" }),
-      /* @__PURE__ */ r.jsxs(i, { 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" })
+    /* @__PURE__ */ e.jsx(d, {}),
+    /* @__PURE__ */ e.jsxs(t, { children: [
+      /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Text Color Variants" }),
+      /* @__PURE__ */ e.jsxs(o, { 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" })
       ] })
     ] })
   ] })
-] }) }), W = () => {
-  const [c, o] = g.useState("");
-  return /* @__PURE__ */ r.jsx(x, { 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(i, { 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(i, { spacing: 3, children: [
-          /* @__PURE__ */ r.jsxs(t, { children: [
-            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Button Variants" }),
-            /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", children: "Contained" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "primary", children: "Outlined" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "text", color: "primary", children: "Text" })
+] }) }), C = () => {
+  const [c, i] = g.useState("");
+  return /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { children: [
+    /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "SoloStylist Components" }),
+    /* @__PURE__ */ e.jsxs(o, { 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(o, { spacing: 3, children: [
+          /* @__PURE__ */ e.jsxs(t, { children: [
+            /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Button Variants" }),
+            /* @__PURE__ */ e.jsxs(o, { 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" })
             ] })
           ] }),
-          /* @__PURE__ */ r.jsxs(t, { children: [
-            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants (Contained)" }),
-            /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", children: "Primary" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "secondary", children: "Secondary" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "success", children: "Success" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "warning", children: "Warning" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "error", children: "Error" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "info", children: "Info" })
+          /* @__PURE__ */ e.jsxs(t, { children: [
+            /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants (Contained)" }),
+            /* @__PURE__ */ e.jsxs(o, { 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 (Outlined)" }),
-            /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
-              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "primary", children: "Primary" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "secondary", children: "Secondary" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "success", children: "Success" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "warning", children: "Warning" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "error", children: "Error" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "info", children: "Info" })
+          /* @__PURE__ */ e.jsxs(t, { children: [
+            /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants (Outlined)" }),
+            /* @__PURE__ */ e.jsxs(o, { 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: "Button Sizes" }),
-            /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 2, alignItems: "center", flexWrap: "wrap", gap: 1, children: [
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", size: "small", children: "Small" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", size: "medium", children: "Medium" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", size: "large", children: "Large" })
+          /* @__PURE__ */ e.jsxs(t, { children: [
+            /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Button Sizes" }),
+            /* @__PURE__ */ e.jsxs(o, { 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 States" }),
-            /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", children: "Default" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", disabled: !0, children: "Disabled" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "primary", disabled: !0, children: "Disabled Outlined" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "text", color: "primary", disabled: !0, children: "Disabled Text" })
+          /* @__PURE__ */ e.jsxs(t, { children: [
+            /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Button States" }),
+            /* @__PURE__ */ e.jsxs(o, { 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: "Buttons with Icons" }),
-            /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", startIcon: /* @__PURE__ */ r.jsx(f, {}), children: "Start Icon" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "secondary", endIcon: /* @__PURE__ */ r.jsx(S, {}), children: "End Icon" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "success", startIcon: /* @__PURE__ */ r.jsx(w, {}), children: "Outlined + Icon" }),
-              /* @__PURE__ */ r.jsx(n, { variant: "text", color: "error", endIcon: /* @__PURE__ */ r.jsx(b, {}), children: "Text + Icon" })
+          /* @__PURE__ */ e.jsxs(t, { children: [
+            /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Buttons with Icons" }),
+            /* @__PURE__ */ e.jsxs(o, { 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: "h6", gutterBottom: !0, children: "Form Components with SForm" }),
-        /* @__PURE__ */ r.jsx(v, { label: "Sample Form", required: !0, children: /* @__PURE__ */ r.jsxs(i, { spacing: 3, children: [
-          /* @__PURE__ */ r.jsx(
+      /* @__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(o, { spacing: 3, children: [
+          /* @__PURE__ */ e.jsx(
             u,
             {
               label: "Enhanced Text Field",
               value: c,
-              onChange: (a) => o(a.target.value),
+              onChange: (a) => i(a.target.value),
               placeholder: "Enter text here...",
               helperText: "This is an enhanced STextField component",
               fullWidth: !0
             }
           ),
-          /* @__PURE__ */ r.jsx(
+          /* @__PURE__ */ e.jsx(
             u,
             {
               label: "Password Field",
@@ -268,7 +268,7 @@ const f = j(/* @__PURE__ */ r.jsx("path", {
               fullWidth: !0
             }
           ),
-          /* @__PURE__ */ r.jsx(
+          /* @__PURE__ */ e.jsx(
             u,
             {
               label: "Multiline Text",
@@ -281,63 +281,63 @@ const f = j(/* @__PURE__ */ r.jsx("path", {
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ r.jsxs(t, { children: [
-        /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Theme Controls" }),
-        /* @__PURE__ */ r.jsx(i, { spacing: 2, children: /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Theme Switch Component" }),
-          /* @__PURE__ */ r.jsx(y, {})
+      /* @__PURE__ */ e.jsxs(t, { children: [
+        /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Theme Controls" }),
+        /* @__PURE__ */ e.jsx(o, { spacing: 2, children: /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Theme Switch Component" }),
+          /* @__PURE__ */ e.jsx(y, {})
         ] }) })
       ] })
     ] })
   ] }) });
-}, C = () => /* @__PURE__ */ r.jsx(x, { 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(i, { spacing: 3, children: [
-    /* @__PURE__ */ r.jsxs(t, { children: [
-      /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Alerts" }),
-      /* @__PURE__ */ r.jsxs(i, { spacing: 2, children: [
-        /* @__PURE__ */ r.jsx(p, { severity: "success", children: "Success alert - Operation completed successfully!" }),
-        /* @__PURE__ */ r.jsx(p, { severity: "warning", children: "Warning alert - Please review your input." }),
-        /* @__PURE__ */ r.jsx(p, { severity: "error", children: "Error alert - Something went wrong." }),
-        /* @__PURE__ */ r.jsx(p, { severity: "info", children: "Info alert - Here's some useful information." })
+}, I = () => /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { children: [
+  /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Interactive Components" }),
+  /* @__PURE__ */ e.jsxs(o, { spacing: 3, children: [
+    /* @__PURE__ */ e.jsxs(t, { children: [
+      /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Alerts" }),
+      /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
+        /* @__PURE__ */ e.jsx(m, { severity: "success", children: "Success alert - Operation completed successfully!" }),
+        /* @__PURE__ */ e.jsx(m, { severity: "warning", children: "Warning alert - Please review your input." }),
+        /* @__PURE__ */ e.jsx(m, { severity: "error", children: "Error alert - Something went wrong." }),
+        /* @__PURE__ */ e.jsx(m, { severity: "info", children: "Info alert - Here's some useful information." })
       ] })
     ] }),
-    /* @__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(i, { spacing: 3, children: [
-        /* @__PURE__ */ r.jsxs(t, { children: [
-          /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants" }),
-          /* @__PURE__ */ r.jsxs(i, { 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: "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(o, { spacing: 3, children: [
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants" }),
+          /* @__PURE__ */ e.jsxs(o, { 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: "subtitle2", gutterBottom: !0, children: "Chip Sizes" }),
-          /* @__PURE__ */ r.jsxs(i, { 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" })
+        /* @__PURE__ */ e.jsxs(t, { children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Chip Sizes" }),
+          /* @__PURE__ */ e.jsxs(o, { 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" })
           ] })
         ] })
       ] })
     ] })
   ] })
-] }) }), I = () => {
+] }) }), W = () => {
   const c = [0, 1, 2, 4, 6, 8, 12, 16, 24];
-  return /* @__PURE__ */ r.jsx(x, { 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(i, { direction: "row", flexWrap: "wrap", gap: 3, sx: { mt: 2 }, children: c.map((o) => /* @__PURE__ */ r.jsxs(t, { sx: { textAlign: "center" }, children: [
-      /* @__PURE__ */ r.jsx(
-        m,
+  return /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { 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(o, { direction: "row", flexWrap: "wrap", gap: 3, sx: { mt: 2 }, children: c.map((i) => /* @__PURE__ */ e.jsxs(t, { sx: { textAlign: "center" }, children: [
+      /* @__PURE__ */ e.jsx(
+        p,
         {
-          elevation: o,
+          elevation: i,
           sx: {
             width: 80,
             height: 80,
@@ -347,44 +347,44 @@ const f = j(/* @__PURE__ */ r.jsx("path", {
             mb: 1,
             borderRadius: 2
           },
-          children: /* @__PURE__ */ r.jsx(e, { variant: "h6", children: o })
+          children: /* @__PURE__ */ e.jsx(r, { variant: "h6", children: i })
         }
       ),
-      /* @__PURE__ */ r.jsxs(e, { variant: "caption", color: "text.secondary", children: [
+      /* @__PURE__ */ e.jsxs(r, { variant: "caption", color: "text.secondary", children: [
         "Elevation ",
-        o
+        i
       ] })
-    ] }, o)) }),
-    /* @__PURE__ */ r.jsx(d, { sx: { my: 3 } }),
-    /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Custom Shadow Effects" }),
-    /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 3, flexWrap: "wrap", gap: 2, children: [
-      /* @__PURE__ */ r.jsx(
-        m,
+    ] }, i)) }),
+    /* @__PURE__ */ e.jsx(d, { sx: { my: 3 } }),
+    /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Custom Shadow Effects" }),
+    /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 3, flexWrap: "wrap", gap: 2, children: [
+      /* @__PURE__ */ e.jsx(
+        p,
         {
           sx: {
             p: 3,
             borderRadius: 2,
             boxShadow: "var(--s-palette-baseShadow)"
           },
-          children: /* @__PURE__ */ r.jsx(e, { variant: "body2", children: "Custom Base Shadow" })
+          children: /* @__PURE__ */ e.jsx(r, { variant: "body2", children: "Custom Base Shadow" })
         }
       ),
-      /* @__PURE__ */ r.jsx(
-        m,
+      /* @__PURE__ */ e.jsx(
+        p,
         {
           sx: {
             p: 3,
             borderRadius: 2,
-            boxShadow: (o) => o.palette.mode === "light" ? "0 4px 20px rgba(0,0,0,0.1)" : "0 4px 20px rgba(0,0,0,0.5)"
+            boxShadow: (i) => i.palette.mode === "light" ? "0 4px 20px rgba(0,0,0,0.1)" : "0 4px 20px rgba(0,0,0,0.5)"
           },
-          children: /* @__PURE__ */ r.jsx(e, { variant: "body2", children: "Theme-aware Shadow" })
+          children: /* @__PURE__ */ e.jsx(r, { variant: "body2", children: "Theme-aware Shadow" })
         }
       )
     ] })
   ] }) });
-}, F = ({
+}, A = ({
   title: c = "SoloStylist UI Kit Theme Demo",
-  compact: o = !1,
+  compact: i = !1,
   sections: a = ["colors", "typography", "components", "forms", "interactive", "shadows"]
 }) => {
   const l = g.useMemo(
@@ -398,20 +398,35 @@ const f = j(/* @__PURE__ */ r.jsx("path", {
     }),
     [a]
   );
-  return /* @__PURE__ */ r.jsxs(t, { sx: { p: o ? 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: c }),
-      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "text.secondary", sx: { mb: 3 }, children: "Showcase of the SoloStylist UI Kit with modern theming capabilities" })
+  return /* @__PURE__ */ e.jsxs(t, { sx: { p: i ? 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: c }),
+      /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "text.secondary", sx: { mb: 3 }, children: "Showcase of the SoloStylist UI Kit with modern theming capabilities" })
     ] }),
-    /* @__PURE__ */ r.jsxs(i, { spacing: o ? 2 : 4, children: [
-      l.colors && /* @__PURE__ */ r.jsx(B, {}),
-      l.typography && /* @__PURE__ */ r.jsx(T, {}),
-      (l.components || l.forms) && /* @__PURE__ */ r.jsx(W, {}),
-      l.interactive && /* @__PURE__ */ r.jsx(C, {}),
-      l.shadows && /* @__PURE__ */ r.jsx(I, {})
+    /* @__PURE__ */ e.jsxs(o, { spacing: i ? 2 : 4, children: [
+      l.colors && /* @__PURE__ */ e.jsx(B, {}),
+      l.typography && /* @__PURE__ */ e.jsx(T, {}),
+      (l.components || l.forms) && /* @__PURE__ */ e.jsx(C, {}),
+      l.interactive && /* @__PURE__ */ e.jsx(I, {}),
+      l.shadows && /* @__PURE__ */ e.jsx(W, {})
     ] })
   ] });
 };
+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 {
-  F as default
+  A as default
 };