@solostylist/ui-kit 1.0.203 → 1.0.205

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

@@ -0,0 +1,828 @@
+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 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__ */ c(f, { children: [
+		/* @__PURE__ */ s(_, {
+			variant: "h5",
+			gutterBottom: !0,
+			children: "Color Palette"
+		}),
+		/* @__PURE__ */ s(g, {
+			direction: "row",
+			flexWrap: "wrap",
+			gap: 2,
+			children: [
+				{
+					name: "Primary",
+					color: "primary.main"
+				},
+				{
+					name: "Secondary",
+					color: "secondary.main"
+				},
+				{
+					name: "Success",
+					color: "success.main"
+				},
+				{
+					name: "Warning",
+					color: "warning.main"
+				},
+				{
+					name: "Error",
+					color: "error.main"
+				},
+				{
+					name: "Info",
+					color: "info.main"
+				}
+			].map((e) => /* @__PURE__ */ c(u, {
+				sx: { textAlign: "center" },
+				children: [/* @__PURE__ */ s(u, { sx: {
+					width: 60,
+					height: 60,
+					bgcolor: e.color,
+					borderRadius: 1,
+					mb: 1,
+					boxShadow: 1
+				} }), /* @__PURE__ */ s(_, {
+					variant: "caption",
+					children: e.name
+				})]
+			}, e.name))
+		}),
+		/* @__PURE__ */ s(_, {
+			variant: "h6",
+			sx: {
+				mt: 3,
+				mb: 2
+			},
+			children: "Background Colors"
+		}),
+		/* @__PURE__ */ c(g, {
+			direction: "row",
+			gap: 2,
+			flexWrap: "wrap",
+			children: [/* @__PURE__ */ s(u, {
+				sx: {
+					p: 2,
+					bgcolor: "background.default",
+					border: 1,
+					borderColor: "divider",
+					borderRadius: 1
+				},
+				children: /* @__PURE__ */ s(_, {
+					variant: "caption",
+					children: "Default Background"
+				})
+			}), /* @__PURE__ */ s(u, {
+				sx: {
+					p: 2,
+					bgcolor: "background.paper",
+					border: 1,
+					borderColor: "divider",
+					borderRadius: 1
+				},
+				children: /* @__PURE__ */ s(_, {
+					variant: "caption",
+					children: "Paper Background"
+				})
+			})]
+		})
+	] })
+}), S = () => /* @__PURE__ */ s(d, {
+	elevation: 2,
+	sx: { borderRadius: 2 },
+	children: /* @__PURE__ */ c(f, { children: [
+		/* @__PURE__ */ s(_, {
+			variant: "h5",
+			gutterBottom: !0,
+			children: "Typography System"
+		}),
+		/* @__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__ */ c(g, {
+			spacing: 3,
+			children: [
+				/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+					variant: "h6",
+					color: "primary",
+					gutterBottom: !0,
+					children: "Headings"
+				}), /* @__PURE__ */ c(g, {
+					spacing: 2,
+					children: [
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+							variant: "h1",
+							gutterBottom: !0,
+							children: "Display Large"
+						}), /* @__PURE__ */ s(_, {
+							variant: "caption",
+							children: "h1 - 3.5rem (56px), Weight 600 - Used for hero sections and primary headings"
+						})] }),
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+							variant: "h2",
+							gutterBottom: !0,
+							children: "Display Medium"
+						}), /* @__PURE__ */ s(_, {
+							variant: "caption",
+							children: "h2 - 2.75rem (44px), Weight 600 - Used for page titles and major sections"
+						})] }),
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+							variant: "h3",
+							gutterBottom: !0,
+							children: "Display Small"
+						}), /* @__PURE__ */ s(_, {
+							variant: "caption",
+							children: "h3 - 2.25rem (36px), Weight 600 - Used for large section headings"
+						})] }),
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+							variant: "h4",
+							gutterBottom: !0,
+							children: "Headline Large"
+						}), /* @__PURE__ */ s(_, {
+							variant: "caption",
+							children: "h4 - 2rem (32px), Weight 600 - Used for card titles and content headings"
+						})] }),
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+							variant: "h5",
+							gutterBottom: !0,
+							children: "Headline Medium"
+						}), /* @__PURE__ */ s(_, {
+							variant: "caption",
+							children: "h5 - 1.5rem (24px), Weight 600 - Used for subsection headings"
+						})] }),
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+							variant: "h6",
+							gutterBottom: !0,
+							children: "Headline Small"
+						}), /* @__PURE__ */ s(_, {
+							variant: "caption",
+							children: "h6 - 1.25rem (20px), Weight 600 - Used for component titles and labels"
+						})] })
+					]
+				})] }),
+				/* @__PURE__ */ s(m, {}),
+				/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+					variant: "h6",
+					color: "primary",
+					gutterBottom: !0,
+					children: "Body Text"
+				}), /* @__PURE__ */ c(g, {
+					spacing: 2,
+					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__ */ s(_, {
+						variant: "caption",
+						children: "body1 - 1rem (16px), Weight 400, Line height 1.5"
+					})] }), /* @__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__ */ s(_, {
+						variant: "caption",
+						children: "body2 - 0.875rem (14px), Weight 400, Line height 1.43"
+					})] })]
+				})] }),
+				/* @__PURE__ */ s(m, {}),
+				/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+					variant: "h6",
+					color: "primary",
+					gutterBottom: !0,
+					children: "Labels & Supporting Text"
+				}), /* @__PURE__ */ c(g, {
+					spacing: 2,
+					children: [
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+							variant: "subtitle1",
+							gutterBottom: !0,
+							children: "Subtitle Large - Used for prominent secondary text"
+						}), /* @__PURE__ */ s(_, {
+							variant: "caption",
+							children: "subtitle1 - 1rem (16px), Weight 500"
+						})] }),
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+							variant: "subtitle2",
+							gutterBottom: !0,
+							children: "Subtitle Small - Used for form labels and secondary headings"
+						}), /* @__PURE__ */ s(_, {
+							variant: "caption",
+							children: "subtitle2 - 0.875rem (14px), Weight 500"
+						})] }),
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+							variant: "caption",
+							component: "div",
+							gutterBottom: !0,
+							children: "Caption Text - Used for annotations, helper text, and fine print"
+						}), /* @__PURE__ */ s(_, {
+							variant: "caption",
+							children: "caption - 0.75rem (12px), Weight 400"
+						})] }),
+						/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+							variant: "overline",
+							component: "div",
+							gutterBottom: !0,
+							children: "OVERLINE TEXT - USED FOR LABELS AND CATEGORIES"
+						}), /* @__PURE__ */ s(_, {
+							variant: "caption",
+							children: "overline - 0.75rem (12px), Weight 400, Uppercase, Letter spacing 0.5px"
+						})] })
+					]
+				})] }),
+				/* @__PURE__ */ s(m, {}),
+				/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+					variant: "h6",
+					color: "primary",
+					gutterBottom: !0,
+					children: "Text Color Variants"
+				}), /* @__PURE__ */ c(g, {
+					spacing: 1,
+					children: [
+						/* @__PURE__ */ s(_, {
+							variant: "body1",
+							color: "text.primary",
+							children: "Primary Text - Main content color"
+						}),
+						/* @__PURE__ */ s(_, {
+							variant: "body1",
+							color: "text.secondary",
+							children: "Secondary Text - Supporting content color"
+						}),
+						/* @__PURE__ */ s(_, {
+							variant: "body1",
+							color: "text.disabled",
+							children: "Disabled Text - Inactive content color"
+						}),
+						/* @__PURE__ */ s(_, {
+							variant: "body1",
+							color: "primary.main",
+							children: "Primary Brand - Brand color text"
+						}),
+						/* @__PURE__ */ s(_, {
+							variant: "body1",
+							color: "success.main",
+							children: "Success Text - Positive feedback"
+						}),
+						/* @__PURE__ */ s(_, {
+							variant: "body1",
+							color: "warning.main",
+							children: "Warning Text - Caution indicators"
+						}),
+						/* @__PURE__ */ s(_, {
+							variant: "body1",
+							color: "error.main",
+							children: "Error Text - Error messages"
+						})
+					]
+				})] })
+			]
+		})
+	] })
+}), C = () => {
+	let [e, l] = o.useState("");
+	return /* @__PURE__ */ s(d, {
+		elevation: 2,
+		sx: { borderRadius: 2 },
+		children: /* @__PURE__ */ c(f, { children: [/* @__PURE__ */ s(_, {
+			variant: "h5",
+			gutterBottom: !0,
+			children: "SoloStylist Components"
+		}), /* @__PURE__ */ c(g, {
+			spacing: 4,
+			children: [
+				/* @__PURE__ */ c(u, { children: [
+					/* @__PURE__ */ s(_, {
+						variant: "h6",
+						gutterBottom: !0,
+						children: "Enhanced Buttons"
+					}),
+					/* @__PURE__ */ s(_, {
+						variant: "body2",
+						color: "text.secondary",
+						gutterBottom: !0,
+						sx: { mb: 3 },
+						children: "Comprehensive button system with all variants, colors, and sizes"
+					}),
+					/* @__PURE__ */ c(g, {
+						spacing: 3,
+						children: [
+							/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+								variant: "subtitle2",
+								gutterBottom: !0,
+								children: "Button Variants"
+							}), /* @__PURE__ */ c(g, {
+								direction: "row",
+								spacing: 2,
+								flexWrap: "wrap",
+								gap: 1,
+								children: [
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "primary",
+										children: "Contained"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "outlined",
+										color: "primary",
+										children: "Outlined"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "text",
+										color: "primary",
+										children: "Text"
+									})
+								]
+							})] }),
+							/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+								variant: "subtitle2",
+								gutterBottom: !0,
+								children: "Color Variants (Contained)"
+							}), /* @__PURE__ */ c(g, {
+								direction: "row",
+								spacing: 2,
+								flexWrap: "wrap",
+								gap: 1,
+								children: [
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "primary",
+										children: "Primary"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "secondary",
+										children: "Secondary"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "success",
+										children: "Success"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "warning",
+										children: "Warning"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "error",
+										children: "Error"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "info",
+										children: "Info"
+									})
+								]
+							})] }),
+							/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+								variant: "subtitle2",
+								gutterBottom: !0,
+								children: "Color Variants (Outlined)"
+							}), /* @__PURE__ */ c(g, {
+								direction: "row",
+								spacing: 2,
+								flexWrap: "wrap",
+								gap: 1,
+								children: [
+									/* @__PURE__ */ s(a, {
+										variant: "outlined",
+										color: "primary",
+										children: "Primary"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "outlined",
+										color: "secondary",
+										children: "Secondary"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "outlined",
+										color: "success",
+										children: "Success"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "outlined",
+										color: "warning",
+										children: "Warning"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "outlined",
+										color: "error",
+										children: "Error"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "outlined",
+										color: "info",
+										children: "Info"
+									})
+								]
+							})] }),
+							/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+								variant: "subtitle2",
+								gutterBottom: !0,
+								children: "Button Sizes"
+							}), /* @__PURE__ */ c(g, {
+								direction: "row",
+								spacing: 2,
+								alignItems: "center",
+								flexWrap: "wrap",
+								gap: 1,
+								children: [
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "primary",
+										size: "small",
+										children: "Small"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "primary",
+										size: "medium",
+										children: "Medium"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "primary",
+										size: "large",
+										children: "Large"
+									})
+								]
+							})] }),
+							/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+								variant: "subtitle2",
+								gutterBottom: !0,
+								children: "Button States"
+							}), /* @__PURE__ */ c(g, {
+								direction: "row",
+								spacing: 2,
+								flexWrap: "wrap",
+								gap: 1,
+								children: [
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "primary",
+										children: "Default"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "primary",
+										disabled: !0,
+										children: "Disabled"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "outlined",
+										color: "primary",
+										disabled: !0,
+										children: "Disabled Outlined"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "text",
+										color: "primary",
+										disabled: !0,
+										children: "Disabled Text"
+									})
+								]
+							})] }),
+							/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+								variant: "subtitle2",
+								gutterBottom: !0,
+								children: "Buttons with Icons"
+							}), /* @__PURE__ */ c(g, {
+								direction: "row",
+								spacing: 2,
+								flexWrap: "wrap",
+								gap: 1,
+								children: [
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "primary",
+										startIcon: /* @__PURE__ */ s(v, {}),
+										children: "Start Icon"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "contained",
+										color: "secondary",
+										endIcon: /* @__PURE__ */ s(y, {}),
+										children: "End Icon"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "outlined",
+										color: "success",
+										startIcon: /* @__PURE__ */ s(b, {}),
+										children: "Outlined + Icon"
+									}),
+									/* @__PURE__ */ s(a, {
+										variant: "text",
+										color: "error",
+										endIcon: /* @__PURE__ */ s(n, {}),
+										children: "Text + Icon"
+									})
+								]
+							})] })
+						]
+					})
+				] }),
+				/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+					variant: "h6",
+					gutterBottom: !0,
+					children: "Form Components with SForm"
+				}), /* @__PURE__ */ s(i, {
+					label: "Sample Form",
+					required: !0,
+					children: /* @__PURE__ */ c(g, {
+						spacing: 3,
+						children: [
+							/* @__PURE__ */ s(r, {
+								label: "Enhanced Text Field",
+								value: e,
+								onChange: (e) => l(e.target.value),
+								placeholder: "Enter text here...",
+								helperText: "This is an enhanced STextField component",
+								fullWidth: !0
+							}),
+							/* @__PURE__ */ s(r, {
+								label: "Password Field",
+								type: "password",
+								placeholder: "Enter password...",
+								helperText: "Password input with custom styling",
+								fullWidth: !0
+							}),
+							/* @__PURE__ */ s(r, {
+								label: "Multiline Text",
+								multiline: !0,
+								rows: 3,
+								placeholder: "Enter multiple lines...",
+								helperText: "Multiline text input",
+								fullWidth: !0
+							})
+						]
+					})
+				})] }),
+				/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+					variant: "h6",
+					gutterBottom: !0,
+					children: "Theme Controls"
+				}), /* @__PURE__ */ s(g, {
+					spacing: 2,
+					children: /* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+						variant: "subtitle2",
+						gutterBottom: !0,
+						children: "Theme Switch Component"
+					}), /* @__PURE__ */ s(t, {})] })
+				})] })
+			]
+		})] })
+	});
+}, w = () => /* @__PURE__ */ s(d, {
+	elevation: 2,
+	sx: { borderRadius: 2 },
+	children: /* @__PURE__ */ c(f, { children: [/* @__PURE__ */ s(_, {
+		variant: "h5",
+		gutterBottom: !0,
+		children: "Interactive Components"
+	}), /* @__PURE__ */ c(g, {
+		spacing: 3,
+		children: [/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+			variant: "h6",
+			gutterBottom: !0,
+			children: "Alerts"
+		}), /* @__PURE__ */ c(g, {
+			spacing: 2,
+			children: [
+				/* @__PURE__ */ s(l, {
+					severity: "success",
+					children: "Success alert - Operation completed successfully!"
+				}),
+				/* @__PURE__ */ s(l, {
+					severity: "warning",
+					children: "Warning alert - Please review your input."
+				}),
+				/* @__PURE__ */ s(l, {
+					severity: "error",
+					children: "Error alert - Something went wrong."
+				}),
+				/* @__PURE__ */ s(l, {
+					severity: "info",
+					children: "Info alert - Here's some useful information."
+				})
+			]
+		})] }), /* @__PURE__ */ c(u, { children: [
+			/* @__PURE__ */ s(_, {
+				variant: "h6",
+				gutterBottom: !0,
+				children: "Chips & Tags"
+			}),
+			/* @__PURE__ */ s(_, {
+				variant: "body2",
+				color: "text.secondary",
+				gutterBottom: !0,
+				sx: { mb: 3 },
+				children: "Comprehensive chip system with all colors, variants, and interactive states"
+			}),
+			/* @__PURE__ */ c(g, {
+				spacing: 3,
+				children: [/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+					variant: "subtitle2",
+					gutterBottom: !0,
+					children: "Color Variants"
+				}), /* @__PURE__ */ c(g, {
+					direction: "row",
+					spacing: 1,
+					flexWrap: "wrap",
+					gap: 1,
+					children: [
+						/* @__PURE__ */ s(p, { label: "Default" }),
+						/* @__PURE__ */ s(p, {
+							label: "Primary",
+							color: "primary"
+						}),
+						/* @__PURE__ */ s(p, {
+							label: "Secondary",
+							color: "secondary"
+						}),
+						/* @__PURE__ */ s(p, {
+							label: "Success",
+							color: "success"
+						}),
+						/* @__PURE__ */ s(p, {
+							label: "Warning",
+							color: "warning"
+						}),
+						/* @__PURE__ */ s(p, {
+							label: "Error",
+							color: "error"
+						}),
+						/* @__PURE__ */ s(p, {
+							label: "Info",
+							color: "info"
+						})
+					]
+				})] }), /* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(_, {
+					variant: "subtitle2",
+					gutterBottom: !0,
+					children: "Chip Sizes"
+				}), /* @__PURE__ */ c(g, {
+					direction: "row",
+					spacing: 1,
+					alignItems: "center",
+					flexWrap: "wrap",
+					gap: 1,
+					children: [/* @__PURE__ */ s(p, {
+						label: "Small",
+						color: "primary",
+						size: "small"
+					}), /* @__PURE__ */ s(p, {
+						label: "Medium",
+						color: "primary",
+						size: "medium"
+					})]
+				})] })]
+			})
+		] })]
+	})] })
+}), T = () => /* @__PURE__ */ s(d, {
+	elevation: 2,
+	sx: { borderRadius: 2 },
+	children: /* @__PURE__ */ c(f, { children: [
+		/* @__PURE__ */ s(_, {
+			variant: "h5",
+			gutterBottom: !0,
+			children: "Shadow System"
+		}),
+		/* @__PURE__ */ s(_, {
+			variant: "body2",
+			color: "text.secondary",
+			gutterBottom: !0,
+			children: "Material-UI elevation system with custom shadows"
+		}),
+		/* @__PURE__ */ s(g, {
+			direction: "row",
+			flexWrap: "wrap",
+			gap: 3,
+			sx: { mt: 2 },
+			children: [
+				0,
+				1,
+				2,
+				4,
+				6,
+				8,
+				12,
+				16,
+				24
+			].map((e) => /* @__PURE__ */ c(u, {
+				sx: { textAlign: "center" },
+				children: [/* @__PURE__ */ s(h, {
+					elevation: e,
+					sx: {
+						width: 80,
+						height: 80,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						mb: 1,
+						borderRadius: 2
+					},
+					children: /* @__PURE__ */ s(_, {
+						variant: "h6",
+						children: e
+					})
+				}), /* @__PURE__ */ c(_, {
+					variant: "caption",
+					children: ["Elevation ", e]
+				})]
+			}, e))
+		}),
+		/* @__PURE__ */ s(m, { sx: { my: 3 } }),
+		/* @__PURE__ */ s(_, {
+			variant: "h6",
+			gutterBottom: !0,
+			children: "Custom Shadow Effects"
+		}),
+		/* @__PURE__ */ s(g, {
+			direction: "row",
+			spacing: 3,
+			flexWrap: "wrap",
+			gap: 2,
+			children: /* @__PURE__ */ s(h, {
+				sx: {
+					p: 3,
+					borderRadius: 2,
+					boxShadow: "var(--s-palette-baseShadow)"
+				},
+				children: /* @__PURE__ */ s(_, {
+					variant: "body2",
+					children: "Custom Base Shadow"
+				})
+			})
+		})
+	] })
+}), E = ({ title: e = "SoloStylist UI Kit Theme Demo", compact: t = !1, sections: n = [
+	"colors",
+	"typography",
+	"components",
+	"forms",
+	"interactive",
+	"shadows"
+] }) => {
+	let r = o.useMemo(() => ({
+		colors: n.includes("colors"),
+		typography: n.includes("typography"),
+		components: n.includes("components"),
+		forms: n.includes("forms"),
+		shadows: n.includes("shadows"),
+		interactive: n.includes("interactive")
+	}), [n]);
+	return /* @__PURE__ */ c(u, {
+		sx: {
+			p: t ? 2 : 3,
+			maxWidth: 1200,
+			mx: "auto"
+		},
+		children: [/* @__PURE__ */ c(u, {
+			sx: {
+				mb: 4,
+				textAlign: "center"
+			},
+			children: [/* @__PURE__ */ s(_, {
+				variant: "h3",
+				component: "h1",
+				gutterBottom: !0,
+				children: e
+			}), /* @__PURE__ */ s(_, {
+				variant: "h6",
+				color: "text.secondary",
+				sx: { mb: 3 },
+				children: "Showcase of the SoloStylist UI Kit with modern theming capabilities"
+			})]
+		}), /* @__PURE__ */ c(g, {
+			spacing: t ? 2 : 4,
+			children: [
+				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, {})
+			]
+		})]
+	});
+};
+//#endregion
+export { E as t };