@solostylist/ui-kit 1.0.204 → 1.0.205

package/dist/{s-theme-demo-ChEG6wog.js → s-theme-demo-B4pz6fse.js}

@@ -1,23 +1,23 @@
-import { t as e } from "./jsx-runtime-V-UOMaX1.js";
-import { t } from "./createSvgIcon-Bs2KOQvq.js";
-import { t as n } from "./s-theme-switch-uXRVJIf_.js";
-import { t as r } from "./Favorite-gVQqn0Cm.js";
-import { t as i } from "./s-text-field-C2WdBxNO.js";
-import { SForm as a } from "./s-form/s-form.js";
-import { SButton as o } from "./s-button/s-button.js";
-import * as s from "react";
-import { Alert as c, Box as l, Card as u, CardContent as d, Chip as f, Divider as p, Paper as m, Stack as h, Typography as g } from "@mui/material";
+import { t as e } from "./createSvgIcon-KjKEsKNV.js";
+import { t } from "./s-theme-switch-CCEdponC.js";
+import { t as n } from "./Favorite-mcH9KX-m.js";
+import { t as r } from "./s-text-field-ni42E-1x.js";
+import { SForm as i } from "./s-form/s-form.js";
+import { SButton as a } from "./s-button/s-button.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Alert as l, Box as u, Card as d, CardContent as f, Chip as p, Divider as m, Paper as h, Stack as g, Typography as _ } from "@mui/material";
 //#region ../../node_modules/@mui/icons-material/esm/Add.js
-var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" }), "Add"), y = t(/* @__PURE__ */ (0, _.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"), b = t(/* @__PURE__ */ (0, _.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"), x = () => /* @__PURE__ */ (0, _.jsx)(u, {
+var v = e(/* @__PURE__ */ s("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" }), "Add"), y = e(/* @__PURE__ */ s("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"), b = e(/* @__PURE__ */ s("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"), x = () => /* @__PURE__ */ s(d, {
 	elevation: 2,
 	sx: { borderRadius: 2 },
-	children: /* @__PURE__ */ (0, _.jsxs)(d, { children: [
-		/* @__PURE__ */ (0, _.jsx)(g, {
+	children: /* @__PURE__ */ c(f, { children: [
+		/* @__PURE__ */ s(_, {
 			variant: "h5",
 			gutterBottom: !0,
 			children: "Color Palette"
 		}),
-		/* @__PURE__ */ (0, _.jsx)(h, {
+		/* @__PURE__ */ s(g, {
 			direction: "row",
 			flexWrap: "wrap",
 			gap: 2,
@@ -46,22 +46,22 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 					name: "Info",
 					color: "info.main"
 				}
-			].map((e) => /* @__PURE__ */ (0, _.jsxs)(l, {
+			].map((e) => /* @__PURE__ */ c(u, {
 				sx: { textAlign: "center" },
-				children: [/* @__PURE__ */ (0, _.jsx)(l, { sx: {
+				children: [/* @__PURE__ */ s(u, { sx: {
 					width: 60,
 					height: 60,
 					bgcolor: e.color,
 					borderRadius: 1,
 					mb: 1,
 					boxShadow: 1
-				} }), /* @__PURE__ */ (0, _.jsx)(g, {
+				} }), /* @__PURE__ */ s(_, {
 					variant: "caption",
 					children: e.name
 				})]
 			}, e.name))
 		}),
-		/* @__PURE__ */ (0, _.jsx)(g, {
+		/* @__PURE__ */ s(_, {
 			variant: "h6",
 			sx: {
 				mt: 3,
@@ -69,11 +69,11 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 			},
 			children: "Background Colors"
 		}),
-		/* @__PURE__ */ (0, _.jsxs)(h, {
+		/* @__PURE__ */ c(g, {
 			direction: "row",
 			gap: 2,
 			flexWrap: "wrap",
-			children: [/* @__PURE__ */ (0, _.jsx)(l, {
+			children: [/* @__PURE__ */ s(u, {
 				sx: {
 					p: 2,
 					bgcolor: "background.default",
@@ -81,11 +81,11 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 					borderColor: "divider",
 					borderRadius: 1
 				},
-				children: /* @__PURE__ */ (0, _.jsx)(g, {
+				children: /* @__PURE__ */ s(_, {
 					variant: "caption",
 					children: "Default Background"
 				})
-			}), /* @__PURE__ */ (0, _.jsx)(l, {
+			}), /* @__PURE__ */ s(u, {
 				sx: {
 					p: 2,
 					bgcolor: "background.paper",
@@ -93,199 +93,199 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 					borderColor: "divider",
 					borderRadius: 1
 				},
-				children: /* @__PURE__ */ (0, _.jsx)(g, {
+				children: /* @__PURE__ */ s(_, {
 					variant: "caption",
 					children: "Paper Background"
 				})
 			})]
 		})
 	] })
-}), S = () => /* @__PURE__ */ (0, _.jsx)(u, {
+}), S = () => /* @__PURE__ */ s(d, {
 	elevation: 2,
 	sx: { borderRadius: 2 },
-	children: /* @__PURE__ */ (0, _.jsxs)(d, { children: [
-		/* @__PURE__ */ (0, _.jsx)(g, {
+	children: /* @__PURE__ */ c(f, { children: [
+		/* @__PURE__ */ s(_, {
 			variant: "h5",
 			gutterBottom: !0,
 			children: "Typography System"
 		}),
-		/* @__PURE__ */ (0, _.jsx)(g, {
+		/* @__PURE__ */ s(_, {
 			variant: "body2",
 			color: "text.secondary",
 			gutterBottom: !0,
 			sx: { mb: 3 },
 			children: "Complete typography scale using Outfit font family with Material-UI variants"
 		}),
-		/* @__PURE__ */ (0, _.jsxs)(h, {
+		/* @__PURE__ */ c(g, {
 			spacing: 3,
 			children: [
-				/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+				/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 					variant: "h6",
 					color: "primary",
 					gutterBottom: !0,
 					children: "Headings"
-				}), /* @__PURE__ */ (0, _.jsxs)(h, {
+				}), /* @__PURE__ */ c(g, {
 					spacing: 2,
 					children: [
-						/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 							variant: "h1",
 							gutterBottom: !0,
 							children: "Display Large"
-						}), /* @__PURE__ */ (0, _.jsx)(g, {
+						}), /* @__PURE__ */ s(_, {
 							variant: "caption",
 							children: "h1 - 3.5rem (56px), Weight 600 - Used for hero sections and primary headings"
 						})] }),
-						/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 							variant: "h2",
 							gutterBottom: !0,
 							children: "Display Medium"
-						}), /* @__PURE__ */ (0, _.jsx)(g, {
+						}), /* @__PURE__ */ s(_, {
 							variant: "caption",
 							children: "h2 - 2.75rem (44px), Weight 600 - Used for page titles and major sections"
 						})] }),
-						/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 							variant: "h3",
 							gutterBottom: !0,
 							children: "Display Small"
-						}), /* @__PURE__ */ (0, _.jsx)(g, {
+						}), /* @__PURE__ */ s(_, {
 							variant: "caption",
 							children: "h3 - 2.25rem (36px), Weight 600 - Used for large section headings"
 						})] }),
-						/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 							variant: "h4",
 							gutterBottom: !0,
 							children: "Headline Large"
-						}), /* @__PURE__ */ (0, _.jsx)(g, {
+						}), /* @__PURE__ */ s(_, {
 							variant: "caption",
 							children: "h4 - 2rem (32px), Weight 600 - Used for card titles and content headings"
 						})] }),
-						/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 							variant: "h5",
 							gutterBottom: !0,
 							children: "Headline Medium"
-						}), /* @__PURE__ */ (0, _.jsx)(g, {
+						}), /* @__PURE__ */ s(_, {
 							variant: "caption",
 							children: "h5 - 1.5rem (24px), Weight 600 - Used for subsection headings"
 						})] }),
-						/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 							variant: "h6",
 							gutterBottom: !0,
 							children: "Headline Small"
-						}), /* @__PURE__ */ (0, _.jsx)(g, {
+						}), /* @__PURE__ */ s(_, {
 							variant: "caption",
 							children: "h6 - 1.25rem (20px), Weight 600 - Used for component titles and labels"
 						})] })
 					]
 				})] }),
-				/* @__PURE__ */ (0, _.jsx)(p, {}),
-				/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+				/* @__PURE__ */ s(m, {}),
+				/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 					variant: "h6",
 					color: "primary",
 					gutterBottom: !0,
 					children: "Body Text"
-				}), /* @__PURE__ */ (0, _.jsxs)(h, {
+				}), /* @__PURE__ */ c(g, {
 					spacing: 2,
-					children: [/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+					children: [/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 						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__ */ (0, _.jsx)(g, {
+					}), /* @__PURE__ */ s(_, {
 						variant: "caption",
 						children: "body1 - 1rem (16px), Weight 400, Line height 1.5"
-					})] }), /* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+					})] }), /* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 						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__ */ (0, _.jsx)(g, {
+					}), /* @__PURE__ */ s(_, {
 						variant: "caption",
 						children: "body2 - 0.875rem (14px), Weight 400, Line height 1.43"
 					})] })]
 				})] }),
-				/* @__PURE__ */ (0, _.jsx)(p, {}),
-				/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+				/* @__PURE__ */ s(m, {}),
+				/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 					variant: "h6",
 					color: "primary",
 					gutterBottom: !0,
 					children: "Labels & Supporting Text"
-				}), /* @__PURE__ */ (0, _.jsxs)(h, {
+				}), /* @__PURE__ */ c(g, {
 					spacing: 2,
 					children: [
-						/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 							variant: "subtitle1",
 							gutterBottom: !0,
 							children: "Subtitle Large - Used for prominent secondary text"
-						}), /* @__PURE__ */ (0, _.jsx)(g, {
+						}), /* @__PURE__ */ s(_, {
 							variant: "caption",
 							children: "subtitle1 - 1rem (16px), Weight 500"
 						})] }),
-						/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 							variant: "subtitle2",
 							gutterBottom: !0,
 							children: "Subtitle Small - Used for form labels and secondary headings"
-						}), /* @__PURE__ */ (0, _.jsx)(g, {
+						}), /* @__PURE__ */ s(_, {
 							variant: "caption",
 							children: "subtitle2 - 0.875rem (14px), Weight 500"
 						})] }),
-						/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 							variant: "caption",
 							component: "div",
 							gutterBottom: !0,
 							children: "Caption Text - Used for annotations, helper text, and fine print"
-						}), /* @__PURE__ */ (0, _.jsx)(g, {
+						}), /* @__PURE__ */ s(_, {
 							variant: "caption",
 							children: "caption - 0.75rem (12px), Weight 400"
 						})] }),
-						/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 							variant: "overline",
 							component: "div",
 							gutterBottom: !0,
 							children: "OVERLINE TEXT - USED FOR LABELS AND CATEGORIES"
-						}), /* @__PURE__ */ (0, _.jsx)(g, {
+						}), /* @__PURE__ */ s(_, {
 							variant: "caption",
 							children: "overline - 0.75rem (12px), Weight 400, Uppercase, Letter spacing 0.5px"
 						})] })
 					]
 				})] }),
-				/* @__PURE__ */ (0, _.jsx)(p, {}),
-				/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+				/* @__PURE__ */ s(m, {}),
+				/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 					variant: "h6",
 					color: "primary",
 					gutterBottom: !0,
 					children: "Text Color Variants"
-				}), /* @__PURE__ */ (0, _.jsxs)(h, {
+				}), /* @__PURE__ */ c(g, {
 					spacing: 1,
 					children: [
-						/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ s(_, {
 							variant: "body1",
 							color: "text.primary",
 							children: "Primary Text - Main content color"
 						}),
-						/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ s(_, {
 							variant: "body1",
 							color: "text.secondary",
 							children: "Secondary Text - Supporting content color"
 						}),
-						/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ s(_, {
 							variant: "body1",
 							color: "text.disabled",
 							children: "Disabled Text - Inactive content color"
 						}),
-						/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ s(_, {
 							variant: "body1",
 							color: "primary.main",
 							children: "Primary Brand - Brand color text"
 						}),
-						/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ s(_, {
 							variant: "body1",
 							color: "success.main",
 							children: "Success Text - Positive feedback"
 						}),
-						/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ s(_, {
 							variant: "body1",
 							color: "warning.main",
 							children: "Warning Text - Caution indicators"
 						}),
-						/* @__PURE__ */ (0, _.jsx)(g, {
+						/* @__PURE__ */ s(_, {
 							variant: "body1",
 							color: "error.main",
 							children: "Error Text - Error messages"
@@ -296,168 +296,168 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 		})
 	] })
 }), C = () => {
-	let [e, t] = s.useState("");
-	return /* @__PURE__ */ (0, _.jsx)(u, {
+	let [e, l] = o.useState("");
+	return /* @__PURE__ */ s(d, {
 		elevation: 2,
 		sx: { borderRadius: 2 },
-		children: /* @__PURE__ */ (0, _.jsxs)(d, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+		children: /* @__PURE__ */ c(f, { children: [/* @__PURE__ */ s(_, {
 			variant: "h5",
 			gutterBottom: !0,
 			children: "SoloStylist Components"
-		}), /* @__PURE__ */ (0, _.jsxs)(h, {
+		}), /* @__PURE__ */ c(g, {
 			spacing: 4,
 			children: [
-				/* @__PURE__ */ (0, _.jsxs)(l, { children: [
-					/* @__PURE__ */ (0, _.jsx)(g, {
+				/* @__PURE__ */ c(u, { children: [
+					/* @__PURE__ */ s(_, {
 						variant: "h6",
 						gutterBottom: !0,
 						children: "Enhanced Buttons"
 					}),
-					/* @__PURE__ */ (0, _.jsx)(g, {
+					/* @__PURE__ */ s(_, {
 						variant: "body2",
 						color: "text.secondary",
 						gutterBottom: !0,
 						sx: { mb: 3 },
 						children: "Comprehensive button system with all variants, colors, and sizes"
 					}),
-					/* @__PURE__ */ (0, _.jsxs)(h, {
+					/* @__PURE__ */ c(g, {
 						spacing: 3,
 						children: [
-							/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+							/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 								variant: "subtitle2",
 								gutterBottom: !0,
 								children: "Button Variants"
-							}), /* @__PURE__ */ (0, _.jsxs)(h, {
+							}), /* @__PURE__ */ c(g, {
 								direction: "row",
 								spacing: 2,
 								flexWrap: "wrap",
 								gap: 1,
 								children: [
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "primary",
 										children: "Contained"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "outlined",
 										color: "primary",
 										children: "Outlined"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "text",
 										color: "primary",
 										children: "Text"
 									})
 								]
 							})] }),
-							/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+							/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 								variant: "subtitle2",
 								gutterBottom: !0,
 								children: "Color Variants (Contained)"
-							}), /* @__PURE__ */ (0, _.jsxs)(h, {
+							}), /* @__PURE__ */ c(g, {
 								direction: "row",
 								spacing: 2,
 								flexWrap: "wrap",
 								gap: 1,
 								children: [
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "primary",
 										children: "Primary"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "secondary",
 										children: "Secondary"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "success",
 										children: "Success"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "warning",
 										children: "Warning"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "error",
 										children: "Error"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "info",
 										children: "Info"
 									})
 								]
 							})] }),
-							/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+							/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 								variant: "subtitle2",
 								gutterBottom: !0,
 								children: "Color Variants (Outlined)"
-							}), /* @__PURE__ */ (0, _.jsxs)(h, {
+							}), /* @__PURE__ */ c(g, {
 								direction: "row",
 								spacing: 2,
 								flexWrap: "wrap",
 								gap: 1,
 								children: [
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "outlined",
 										color: "primary",
 										children: "Primary"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "outlined",
 										color: "secondary",
 										children: "Secondary"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "outlined",
 										color: "success",
 										children: "Success"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "outlined",
 										color: "warning",
 										children: "Warning"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "outlined",
 										color: "error",
 										children: "Error"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "outlined",
 										color: "info",
 										children: "Info"
 									})
 								]
 							})] }),
-							/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+							/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 								variant: "subtitle2",
 								gutterBottom: !0,
 								children: "Button Sizes"
-							}), /* @__PURE__ */ (0, _.jsxs)(h, {
+							}), /* @__PURE__ */ c(g, {
 								direction: "row",
 								spacing: 2,
 								alignItems: "center",
 								flexWrap: "wrap",
 								gap: 1,
 								children: [
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "primary",
 										size: "small",
 										children: "Small"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "primary",
 										size: "medium",
 										children: "Medium"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "primary",
 										size: "large",
@@ -465,34 +465,34 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 									})
 								]
 							})] }),
-							/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+							/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 								variant: "subtitle2",
 								gutterBottom: !0,
 								children: "Button States"
-							}), /* @__PURE__ */ (0, _.jsxs)(h, {
+							}), /* @__PURE__ */ c(g, {
 								direction: "row",
 								spacing: 2,
 								flexWrap: "wrap",
 								gap: 1,
 								children: [
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "primary",
 										children: "Default"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "primary",
 										disabled: !0,
 										children: "Disabled"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "outlined",
 										color: "primary",
 										disabled: !0,
 										children: "Disabled Outlined"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "text",
 										color: "primary",
 										disabled: !0,
@@ -500,38 +500,38 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 									})
 								]
 							})] }),
-							/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+							/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 								variant: "subtitle2",
 								gutterBottom: !0,
 								children: "Buttons with Icons"
-							}), /* @__PURE__ */ (0, _.jsxs)(h, {
+							}), /* @__PURE__ */ c(g, {
 								direction: "row",
 								spacing: 2,
 								flexWrap: "wrap",
 								gap: 1,
 								children: [
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "primary",
-										startIcon: /* @__PURE__ */ (0, _.jsx)(v, {}),
+										startIcon: /* @__PURE__ */ s(v, {}),
 										children: "Start Icon"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "contained",
 										color: "secondary",
-										endIcon: /* @__PURE__ */ (0, _.jsx)(y, {}),
+										endIcon: /* @__PURE__ */ s(y, {}),
 										children: "End Icon"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "outlined",
 										color: "success",
-										startIcon: /* @__PURE__ */ (0, _.jsx)(b, {}),
+										startIcon: /* @__PURE__ */ s(b, {}),
 										children: "Outlined + Icon"
 									}),
-									/* @__PURE__ */ (0, _.jsx)(o, {
+									/* @__PURE__ */ s(a, {
 										variant: "text",
 										color: "error",
-										endIcon: /* @__PURE__ */ (0, _.jsx)(r, {}),
+										endIcon: /* @__PURE__ */ s(n, {}),
 										children: "Text + Icon"
 									})
 								]
@@ -539,32 +539,32 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 						]
 					})
 				] }),
-				/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+				/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 					variant: "h6",
 					gutterBottom: !0,
 					children: "Form Components with SForm"
-				}), /* @__PURE__ */ (0, _.jsx)(a, {
+				}), /* @__PURE__ */ s(i, {
 					label: "Sample Form",
 					required: !0,
-					children: /* @__PURE__ */ (0, _.jsxs)(h, {
+					children: /* @__PURE__ */ c(g, {
 						spacing: 3,
 						children: [
-							/* @__PURE__ */ (0, _.jsx)(i, {
+							/* @__PURE__ */ s(r, {
 								label: "Enhanced Text Field",
 								value: e,
-								onChange: (e) => t(e.target.value),
+								onChange: (e) => l(e.target.value),
 								placeholder: "Enter text here...",
 								helperText: "This is an enhanced STextField component",
 								fullWidth: !0
 							}),
-							/* @__PURE__ */ (0, _.jsx)(i, {
+							/* @__PURE__ */ s(r, {
 								label: "Password Field",
 								type: "password",
 								placeholder: "Enter password...",
 								helperText: "Password input with custom styling",
 								fullWidth: !0
 							}),
-							/* @__PURE__ */ (0, _.jsx)(i, {
+							/* @__PURE__ */ s(r, {
 								label: "Multiline Text",
 								multiline: !0,
 								rows: 3,
@@ -575,120 +575,120 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 						]
 					})
 				})] }),
-				/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+				/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 					variant: "h6",
 					gutterBottom: !0,
 					children: "Theme Controls"
-				}), /* @__PURE__ */ (0, _.jsx)(h, {
+				}), /* @__PURE__ */ s(g, {
 					spacing: 2,
-					children: /* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+					children: /* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 						variant: "subtitle2",
 						gutterBottom: !0,
 						children: "Theme Switch Component"
-					}), /* @__PURE__ */ (0, _.jsx)(n, {})] })
+					}), /* @__PURE__ */ s(t, {})] })
 				})] })
 			]
 		})] })
 	});
-}, w = () => /* @__PURE__ */ (0, _.jsx)(u, {
+}, w = () => /* @__PURE__ */ s(d, {
 	elevation: 2,
 	sx: { borderRadius: 2 },
-	children: /* @__PURE__ */ (0, _.jsxs)(d, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+	children: /* @__PURE__ */ c(f, { children: [/* @__PURE__ */ s(_, {
 		variant: "h5",
 		gutterBottom: !0,
 		children: "Interactive Components"
-	}), /* @__PURE__ */ (0, _.jsxs)(h, {
+	}), /* @__PURE__ */ c(g, {
 		spacing: 3,
-		children: [/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+		children: [/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 			variant: "h6",
 			gutterBottom: !0,
 			children: "Alerts"
-		}), /* @__PURE__ */ (0, _.jsxs)(h, {
+		}), /* @__PURE__ */ c(g, {
 			spacing: 2,
 			children: [
-				/* @__PURE__ */ (0, _.jsx)(c, {
+				/* @__PURE__ */ s(l, {
 					severity: "success",
 					children: "Success alert - Operation completed successfully!"
 				}),
-				/* @__PURE__ */ (0, _.jsx)(c, {
+				/* @__PURE__ */ s(l, {
 					severity: "warning",
 					children: "Warning alert - Please review your input."
 				}),
-				/* @__PURE__ */ (0, _.jsx)(c, {
+				/* @__PURE__ */ s(l, {
 					severity: "error",
 					children: "Error alert - Something went wrong."
 				}),
-				/* @__PURE__ */ (0, _.jsx)(c, {
+				/* @__PURE__ */ s(l, {
 					severity: "info",
 					children: "Info alert - Here's some useful information."
 				})
 			]
-		})] }), /* @__PURE__ */ (0, _.jsxs)(l, { children: [
-			/* @__PURE__ */ (0, _.jsx)(g, {
+		})] }), /* @__PURE__ */ c(u, { children: [
+			/* @__PURE__ */ s(_, {
 				variant: "h6",
 				gutterBottom: !0,
 				children: "Chips & Tags"
 			}),
-			/* @__PURE__ */ (0, _.jsx)(g, {
+			/* @__PURE__ */ s(_, {
 				variant: "body2",
 				color: "text.secondary",
 				gutterBottom: !0,
 				sx: { mb: 3 },
 				children: "Comprehensive chip system with all colors, variants, and interactive states"
 			}),
-			/* @__PURE__ */ (0, _.jsxs)(h, {
+			/* @__PURE__ */ c(g, {
 				spacing: 3,
-				children: [/* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+				children: [/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 					variant: "subtitle2",
 					gutterBottom: !0,
 					children: "Color Variants"
-				}), /* @__PURE__ */ (0, _.jsxs)(h, {
+				}), /* @__PURE__ */ c(g, {
 					direction: "row",
 					spacing: 1,
 					flexWrap: "wrap",
 					gap: 1,
 					children: [
-						/* @__PURE__ */ (0, _.jsx)(f, { label: "Default" }),
-						/* @__PURE__ */ (0, _.jsx)(f, {
+						/* @__PURE__ */ s(p, { label: "Default" }),
+						/* @__PURE__ */ s(p, {
 							label: "Primary",
 							color: "primary"
 						}),
-						/* @__PURE__ */ (0, _.jsx)(f, {
+						/* @__PURE__ */ s(p, {
 							label: "Secondary",
 							color: "secondary"
 						}),
-						/* @__PURE__ */ (0, _.jsx)(f, {
+						/* @__PURE__ */ s(p, {
 							label: "Success",
 							color: "success"
 						}),
-						/* @__PURE__ */ (0, _.jsx)(f, {
+						/* @__PURE__ */ s(p, {
 							label: "Warning",
 							color: "warning"
 						}),
-						/* @__PURE__ */ (0, _.jsx)(f, {
+						/* @__PURE__ */ s(p, {
 							label: "Error",
 							color: "error"
 						}),
-						/* @__PURE__ */ (0, _.jsx)(f, {
+						/* @__PURE__ */ s(p, {
 							label: "Info",
 							color: "info"
 						})
 					]
-				})] }), /* @__PURE__ */ (0, _.jsxs)(l, { children: [/* @__PURE__ */ (0, _.jsx)(g, {
+				})] }), /* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
 					variant: "subtitle2",
 					gutterBottom: !0,
 					children: "Chip Sizes"
-				}), /* @__PURE__ */ (0, _.jsxs)(h, {
+				}), /* @__PURE__ */ c(g, {
 					direction: "row",
 					spacing: 1,
 					alignItems: "center",
 					flexWrap: "wrap",
 					gap: 1,
-					children: [/* @__PURE__ */ (0, _.jsx)(f, {
+					children: [/* @__PURE__ */ s(p, {
 						label: "Small",
 						color: "primary",
 						size: "small"
-					}), /* @__PURE__ */ (0, _.jsx)(f, {
+					}), /* @__PURE__ */ s(p, {
 						label: "Medium",
 						color: "primary",
 						size: "medium"
@@ -697,22 +697,22 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 			})
 		] })]
 	})] })
-}), T = () => /* @__PURE__ */ (0, _.jsx)(u, {
+}), T = () => /* @__PURE__ */ s(d, {
 	elevation: 2,
 	sx: { borderRadius: 2 },
-	children: /* @__PURE__ */ (0, _.jsxs)(d, { children: [
-		/* @__PURE__ */ (0, _.jsx)(g, {
+	children: /* @__PURE__ */ c(f, { children: [
+		/* @__PURE__ */ s(_, {
 			variant: "h5",
 			gutterBottom: !0,
 			children: "Shadow System"
 		}),
-		/* @__PURE__ */ (0, _.jsx)(g, {
+		/* @__PURE__ */ s(_, {
 			variant: "body2",
 			color: "text.secondary",
 			gutterBottom: !0,
 			children: "Material-UI elevation system with custom shadows"
 		}),
-		/* @__PURE__ */ (0, _.jsx)(h, {
+		/* @__PURE__ */ s(g, {
 			direction: "row",
 			flexWrap: "wrap",
 			gap: 3,
@@ -727,9 +727,9 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 				12,
 				16,
 				24
-			].map((e) => /* @__PURE__ */ (0, _.jsxs)(l, {
+			].map((e) => /* @__PURE__ */ c(u, {
 				sx: { textAlign: "center" },
-				children: [/* @__PURE__ */ (0, _.jsx)(m, {
+				children: [/* @__PURE__ */ s(h, {
 					elevation: e,
 					sx: {
 						width: 80,
@@ -740,34 +740,34 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 						mb: 1,
 						borderRadius: 2
 					},
-					children: /* @__PURE__ */ (0, _.jsx)(g, {
+					children: /* @__PURE__ */ s(_, {
 						variant: "h6",
 						children: e
 					})
-				}), /* @__PURE__ */ (0, _.jsxs)(g, {
+				}), /* @__PURE__ */ c(_, {
 					variant: "caption",
 					children: ["Elevation ", e]
 				})]
 			}, e))
 		}),
-		/* @__PURE__ */ (0, _.jsx)(p, { sx: { my: 3 } }),
-		/* @__PURE__ */ (0, _.jsx)(g, {
+		/* @__PURE__ */ s(m, { sx: { my: 3 } }),
+		/* @__PURE__ */ s(_, {
 			variant: "h6",
 			gutterBottom: !0,
 			children: "Custom Shadow Effects"
 		}),
-		/* @__PURE__ */ (0, _.jsx)(h, {
+		/* @__PURE__ */ s(g, {
 			direction: "row",
 			spacing: 3,
 			flexWrap: "wrap",
 			gap: 2,
-			children: /* @__PURE__ */ (0, _.jsx)(m, {
+			children: /* @__PURE__ */ s(h, {
 				sx: {
 					p: 3,
 					borderRadius: 2,
 					boxShadow: "var(--s-palette-baseShadow)"
 				},
-				children: /* @__PURE__ */ (0, _.jsx)(g, {
+				children: /* @__PURE__ */ s(_, {
 					variant: "body2",
 					children: "Custom Base Shadow"
 				})
@@ -782,7 +782,7 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 	"interactive",
 	"shadows"
 ] }) => {
-	let r = s.useMemo(() => ({
+	let r = o.useMemo(() => ({
 		colors: n.includes("colors"),
 		typography: n.includes("typography"),
 		components: n.includes("components"),
@@ -790,36 +790,36 @@ var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v
 		shadows: n.includes("shadows"),
 		interactive: n.includes("interactive")
 	}), [n]);
-	return /* @__PURE__ */ (0, _.jsxs)(l, {
+	return /* @__PURE__ */ c(u, {
 		sx: {
 			p: t ? 2 : 3,
 			maxWidth: 1200,
 			mx: "auto"
 		},
-		children: [/* @__PURE__ */ (0, _.jsxs)(l, {
+		children: [/* @__PURE__ */ c(u, {
 			sx: {
 				mb: 4,
 				textAlign: "center"
 			},
-			children: [/* @__PURE__ */ (0, _.jsx)(g, {
+			children: [/* @__PURE__ */ s(_, {
 				variant: "h3",
 				component: "h1",
 				gutterBottom: !0,
 				children: e
-			}), /* @__PURE__ */ (0, _.jsx)(g, {
+			}), /* @__PURE__ */ s(_, {
 				variant: "h6",
 				color: "text.secondary",
 				sx: { mb: 3 },
 				children: "Showcase of the SoloStylist UI Kit with modern theming capabilities"
 			})]
-		}), /* @__PURE__ */ (0, _.jsxs)(h, {
+		}), /* @__PURE__ */ c(g, {
 			spacing: t ? 2 : 4,
 			children: [
-				r.colors && /* @__PURE__ */ (0, _.jsx)(x, {}),
-				r.typography && /* @__PURE__ */ (0, _.jsx)(S, {}),
-				(r.components || r.forms) && /* @__PURE__ */ (0, _.jsx)(C, {}),
-				r.interactive && /* @__PURE__ */ (0, _.jsx)(w, {}),
-				r.shadows && /* @__PURE__ */ (0, _.jsx)(T, {})
+				r.colors && /* @__PURE__ */ s(x, {}),
+				r.typography && /* @__PURE__ */ s(S, {}),
+				(r.components || r.forms) && /* @__PURE__ */ s(C, {}),
+				r.interactive && /* @__PURE__ */ s(w, {}),
+				r.shadows && /* @__PURE__ */ s(T, {})
 			]
 		})]
 	});