@solostylist/ui-kit 1.0.171 → 1.0.172

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

@@ -1,10 +1,10 @@
 import { j as e } from "../jsx-runtime-OVHDjVDe.js";
 import * as g from "react";
-import { Box as t, Typography as r, Stack as o, Card as d, CardContent as h, Divider as m, Alert as x, Chip as s, Paper as j } from "@mui/material";
+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 y } from "../s-form/s-form.js";
+import { SForm as v } from "../s-form/s-form.js";
 import { STextField as p } from "../s-text-field/s-text-field.js";
-import v from "../s-theme-switch/s-theme-switch.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", {
@@ -14,7 +14,7 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
 }), "Share"), w = u(/* @__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 = [
+  const l = [
     { name: "Primary", color: "primary.main" },
     { name: "Secondary", color: "secondary.main" },
     { name: "Success", color: "success.main" },
@@ -24,24 +24,24 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
   ];
   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(o, { direction: "row", flexWrap: "wrap", gap: 2, children: c.map((i) => /* @__PURE__ */ e.jsxs(t, { sx: { textAlign: "center" }, children: [
+    /* @__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(
         t,
         {
           sx: {
             width: 60,
             height: 60,
-            bgcolor: i.color,
+            bgcolor: o.color,
             borderRadius: 1,
             mb: 1,
             boxShadow: 1
           }
         }
       ),
-      /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: i.name })
-    ] }, i.name)) }),
+      /* @__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(o, { direction: "row", gap: 2, flexWrap: "wrap", children: [
+    /* @__PURE__ */ e.jsxs(i, { direction: "row", gap: 2, flexWrap: "wrap", children: [
       /* @__PURE__ */ e.jsx(
         t,
         {
@@ -73,76 +73,76 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
 }, 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(o, { spacing: 3, children: [
+  /* @__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(o, { spacing: 2, children: [
+      /* @__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", color: "text.secondary", children: "h1 - 3.5rem (56px), Weight 600 - Used for hero sections and primary headings" })
+          /* @__PURE__ */ e.jsx(r, { 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", color: "text.secondary", children: "h2 - 2.75rem (44px), Weight 600 - Used for page titles and major sections" })
+          /* @__PURE__ */ e.jsx(r, { 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", color: "text.secondary", children: "h3 - 2.25rem (36px), Weight 600 - Used for large section headings" })
+          /* @__PURE__ */ e.jsx(r, { 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", color: "text.secondary", children: "h4 - 2rem (32px), Weight 600 - Used for card titles and content headings" })
+          /* @__PURE__ */ e.jsx(r, { 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", color: "text.secondary", children: "h5 - 1.5rem (24px), Weight 600 - Used for subsection headings" })
+          /* @__PURE__ */ e.jsx(r, { 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", color: "text.secondary", children: "h6 - 1.25rem (20px), Weight 600 - Used for component titles and labels" })
+          /* @__PURE__ */ e.jsx(r, { 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(o, { spacing: 2, children: [
+      /* @__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", color: "text.secondary", children: "body1 - 1rem (16px), Weight 400, Line height 1.5" })
+          /* @__PURE__ */ e.jsx(r, { 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", color: "text.secondary", children: "body2 - 0.875rem (14px), Weight 400, Line height 1.43" })
+          /* @__PURE__ */ e.jsx(r, { 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(o, { spacing: 2, children: [
+      /* @__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", color: "text.secondary", children: "subtitle1 - 1rem (16px), Weight 500" })
+          /* @__PURE__ */ e.jsx(r, { 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", color: "text.secondary", children: "subtitle2 - 0.875rem (14px), Weight 500" })
+          /* @__PURE__ */ e.jsx(r, { 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", color: "text.secondary", children: "caption - 0.75rem (12px), Weight 400" })
+          /* @__PURE__ */ e.jsx(r, { 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", color: "text.secondary", children: "overline - 0.75rem (12px), Weight 400, Uppercase, Letter spacing 0.5px" })
+          /* @__PURE__ */ e.jsx(r, { 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(o, { spacing: 1, children: [
+      /* @__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" }),
@@ -154,17 +154,17 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
     ] })
   ] })
 ] }) }), C = () => {
-  const [c, i] = g.useState("");
+  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(o, { spacing: 4, children: [
+    /* @__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(o, { spacing: 3, children: [
+        /* @__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(o, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+            /* @__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" })
@@ -172,7 +172,7 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
           ] }),
           /* @__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.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" }),
@@ -183,7 +183,7 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
           ] }),
           /* @__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.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" }),
@@ -194,7 +194,7 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
           ] }),
           /* @__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.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" })
@@ -202,7 +202,7 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
           ] }),
           /* @__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.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" }),
@@ -211,7 +211,7 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
           ] }),
           /* @__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.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" }),
@@ -222,13 +222,13 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
       ] }),
       /* @__PURE__ */ e.jsxs(t, { children: [
         /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Form Components with SForm" }),
-        /* @__PURE__ */ e.jsx(y, { label: "Sample Form", required: !0, children: /* @__PURE__ */ e.jsxs(o, { spacing: 3, children: [
+        /* @__PURE__ */ e.jsx(v, { label: "Sample Form", required: !0, children: /* @__PURE__ */ e.jsxs(i, { spacing: 3, children: [
           /* @__PURE__ */ e.jsx(
             p,
             {
               label: "Enhanced Text Field",
-              value: c,
-              onChange: (a) => i(a.target.value),
+              value: l,
+              onChange: (a) => o(a.target.value),
               placeholder: "Enter text here...",
               helperText: "This is an enhanced STextField component",
               fullWidth: !0
@@ -259,19 +259,19 @@ 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(o, { spacing: 2, children: /* @__PURE__ */ e.jsxs(t, { children: [
+        /* @__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(v, {})
+          /* @__PURE__ */ e.jsx(y, {})
         ] }) })
       ] })
     ] })
   ] }) });
 }, 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(o, { spacing: 3, children: [
+  /* @__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(o, { spacing: 2, children: [
+      /* @__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." }),
@@ -281,10 +281,10 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
     /* @__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(i, { 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.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" }),
@@ -296,7 +296,7 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
         ] }),
         /* @__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.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" })
           ] })
@@ -305,15 +305,15 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
     ] })
   ] })
 ] }) }), W = () => {
-  const c = [0, 1, 2, 4, 6, 8, 12, 16, 24];
+  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(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(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(
         j,
         {
-          elevation: i,
+          elevation: o,
           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: i })
+          children: /* @__PURE__ */ e.jsx(r, { variant: "h6", children: o })
         }
       ),
-      /* @__PURE__ */ e.jsxs(r, { variant: "caption", color: "text.secondary", children: [
+      /* @__PURE__ */ e.jsxs(r, { variant: "caption", children: [
         "Elevation ",
-        i
+        o
       ] })
-    ] }, i)) }),
+    ] }, o)) }),
     /* @__PURE__ */ e.jsx(m, { sx: { my: 3 } }),
     /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Custom Shadow Effects" }),
-    /* @__PURE__ */ e.jsx(o, { direction: "row", spacing: 3, flexWrap: "wrap", gap: 2, children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(i, { direction: "row", spacing: 3, flexWrap: "wrap", gap: 2, children: /* @__PURE__ */ e.jsx(
       j,
       {
         sx: {
@@ -346,11 +346,11 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
     ) })
   ] }) });
 }, V = ({
-  title: c = "SoloStylist UI Kit Theme Demo",
-  compact: i = !1,
+  title: l = "SoloStylist UI Kit Theme Demo",
+  compact: o = !1,
   sections: a = ["colors", "typography", "components", "forms", "interactive", "shadows"]
 }) => {
-  const l = g.useMemo(
+  const c = g.useMemo(
     () => ({
       colors: a.includes("colors"),
       typography: a.includes("typography"),
@@ -361,17 +361,17 @@ const f = u(/* @__PURE__ */ e.jsx("path", {
     }),
     [a]
   );
-  return /* @__PURE__ */ e.jsxs(t, { sx: { p: i ? 2 : 3, maxWidth: 1200, mx: "auto" }, children: [
+  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: c }),
+      /* @__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" })
     ] }),
-    /* @__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, {})
+    /* @__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, {})
     ] })
   ] });
 };
@@ -387,7 +387,7 @@ Features:
 - 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" | "colors" | "shadows" | "forms" | "interactive")[]' } } } };
+- 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 {

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

@@ -57,11 +57,11 @@ const o = ({
 };
 o.displayName = "SThemeProvider";
 try {
-  o.displayName = "SThemeProvider", o.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "SThemeProvider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"dark"' }, { value: '"light"' }, { value: '"system"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
+  o.displayName = "SThemeProvider", o.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "SThemeProvider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"system"' }, { value: '"light"' }, { value: '"dark"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
 } catch {
 }
 try {
-  sthemeprovider.displayName = "sthemeprovider", sthemeprovider.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "sthemeprovider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"dark"' }, { value: '"light"' }, { value: '"system"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
+  sthemeprovider.displayName = "sthemeprovider", sthemeprovider.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "sthemeprovider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"system"' }, { value: '"light"' }, { value: '"dark"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
 } catch {
 }
 export {

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

@@ -37,7 +37,7 @@ const M = m(/* @__PURE__ */ e.jsx("path", {
   return /* @__PURE__ */ e.jsx(w, { ref: n, onClick: h, sx: d, children: u ? /* @__PURE__ */ e.jsx(v, {}) : /* @__PURE__ */ e.jsx(M, {}) });
 };
 try {
-  sthemeswitch.displayName = "sthemeswitch", sthemeswitch.__docgenInfo = { description: "", displayName: "sthemeswitch", props: { mode: { defaultValue: null, description: "", name: "mode", required: !1, type: { name: "enum", value: [{ value: '"dark"' }, { value: '"light"' }, { value: '"system"' }] } }, setMode: { defaultValue: null, description: "", name: "setMode", required: !1, type: { name: "((mode: SThemeMode) => void)" } }, sx: { defaultValue: null, description: "", name: "sx", required: !1, type: { name: "SxProps<Theme>" } } } };
+  sthemeswitch.displayName = "sthemeswitch", sthemeswitch.__docgenInfo = { description: "", displayName: "sthemeswitch", props: { mode: { defaultValue: null, description: "", name: "mode", required: !1, type: { name: "enum", value: [{ value: '"system"' }, { value: '"light"' }, { value: '"dark"' }] } }, setMode: { defaultValue: null, description: "", name: "setMode", required: !1, type: { name: "((mode: SThemeMode) => void)" } }, sx: { defaultValue: null, description: "", name: "sx", required: !1, type: { name: "SxProps<Theme>" } } } };
 } catch {
 }
 export {

package/dist/theme/theme-primitives.d.ts

@@ -487,6 +487,7 @@ export declare const typography: {
     caption: {
         fontSize: string;
         fontWeight: number;
+        color: string;
     };
 };
 export declare const shape: {

package/dist/theme/theme-primitives.js

@@ -1,6 +1,6 @@
 import { a as m } from "../createTheme-3Wd3hHrj.js";
-import { a as r } from "../colorManipulator-ep5lERxB.js";
-const s = m(), e = {
+import { a as e } from "../colorManipulator-ep5lERxB.js";
+const s = m(), r = {
   50: "hsl(210, 100%, 95%)",
   100: "hsl(210, 100%, 92%)",
   200: "hsl(210, 100%, 80%)",
@@ -22,7 +22,7 @@ const s = m(), e = {
   700: "hsl(220, 95%, 31%)",
   800: "hsl(220, 100%, 24%)",
   900: "hsl(220, 100%, 18%)"
-}, a = {
+}, t = {
   50: "hsl(220, 35%, 97%)",
   100: "hsl(220, 30%, 94%)",
   200: "hsl(220, 20%, 88%)",
@@ -33,7 +33,7 @@ const s = m(), e = {
   700: "hsl(220, 20%, 25%)",
   800: "hsl(220, 30%, 6%)",
   900: "hsl(220, 35%, 3%)"
-}, t = {
+}, a = {
   50: "hsl(210, 20%, 98%)",
   100: "hsl(210, 15%, 95%)",
   200: "hsl(210, 12%, 89%)",
@@ -211,10 +211,10 @@ const s = m(), e = {
       }
     },
     primary: {
-      contrastText: e[50],
-      light: e[400],
-      main: e[500],
-      dark: e[700],
+      contrastText: r[50],
+      light: r[400],
+      main: r[500],
+      dark: r[700],
       white: "#ffffff",
       black: "#000000"
     },
@@ -242,19 +242,19 @@ const s = m(), e = {
       main: n[500],
       dark: n[700]
     },
-    grey: a,
-    divider: r(a[700], 0.6),
+    grey: t,
+    divider: e(t[700], 0.6),
     background: {
-      default: a[900],
-      paper: a[800]
+      default: t[900],
+      paper: t[800]
     },
     text: {
       primary: "rgb(255, 255, 255)",
-      secondary: a[400]
+      secondary: t[400]
     },
     action: {
-      hover: r(a[600], 0.2),
-      selected: r(a[600], 0.3)
+      hover: e(t[600], 0.2),
+      selected: e(t[600], 0.3)
     },
     baseShadow: "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
   }
@@ -322,19 +322,19 @@ const s = m(), e = {
       main: o[500],
       dark: o[700]
     },
-    grey: t,
-    divider: r(t[300], 0.9),
+    grey: a,
+    divider: e(a[300], 0.9),
     background: {
-      default: t[50],
-      paper: t[100]
+      default: a[50],
+      paper: a[100]
     },
     text: {
       primary: "rgb(32, 33, 36)",
-      secondary: t[500]
+      secondary: a[500]
     },
     action: {
-      hover: r(t[300], 0.2),
-      selected: r(t[300], 0.3)
+      hover: e(a[300], 0.2),
+      selected: e(a[300], 0.3)
     },
     baseShadow: "rgba(15, 23, 42, 0.08) 0px 2px 8px 0px, rgba(15, 23, 42, 0.04) 0px 1px 2px -1px"
     // Premium shadows with subtle slate tint
@@ -390,21 +390,22 @@ const s = m(), e = {
   },
   caption: {
     fontSize: s.typography.pxToRem(12),
-    fontWeight: 400
+    fontWeight: 400,
+    color: "var(--s-palette-text-secondary)"
   }
 }, W = {
   borderRadius: 8
-}, u = ["none", "var(--s-palette-baseShadow)", ...s.shadows.slice(2)], A = u;
+}, u = ["none", "var(--s-palette-baseShadow)", ...s.shadows.slice(2)], v = u;
 export {
   h as blackAlpha,
   d as blue,
-  e as brand,
+  r as brand,
   z as colorSchemes,
-  a as gray,
+  t as gray,
   n as green,
   c as lightBlue,
   i as lightBrand,
-  t as lightGray,
+  a as lightGray,
   o as lightGreen,
   p as lightOrange,
   S as lightPurple,
@@ -412,7 +413,7 @@ export {
   g as orange,
   w as purple,
   f as red,
-  A as shadows,
+  v as shadows,
   W as shape,
   R as typography,
   l as whiteAlpha

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.171",
+  "version": "1.0.172",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",