@solostylist/ui-kit 1.0.227 → 1.0.229

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

@@ -1,857 +0,0 @@
-import { t as e } from "./createSvgIcon-HW-tbFcL.js";
-import { t } from "./s-theme-switch-DzXoVmQH.js";
-import { t as n } from "./Favorite-CbvuQfe4.js";
-import { t as r } from "./s-text-field-DD6nnwwU.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/Add.mjs
-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",
-			sx: {
-				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",
-			sx: {
-				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",
-			gutterBottom: !0,
-			sx: {
-				color: "text.secondary",
-				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",
-							sx: { color: "text.primary" },
-							children: "Primary Text - Main content color"
-						}),
-						/* @__PURE__ */ s(_, {
-							variant: "body1",
-							sx: { color: "text.secondary" },
-							children: "Secondary Text - Supporting content color"
-						}),
-						/* @__PURE__ */ s(_, {
-							variant: "body1",
-							sx: { color: "text.disabled" },
-							children: "Disabled Text - Inactive content color"
-						}),
-						/* @__PURE__ */ s(_, {
-							variant: "body1",
-							sx: { color: "primary.main" },
-							children: "Primary Brand - Brand color text"
-						}),
-						/* @__PURE__ */ s(_, {
-							variant: "body1",
-							sx: { color: "success.main" },
-							children: "Success Text - Positive feedback"
-						}),
-						/* @__PURE__ */ s(_, {
-							variant: "body1",
-							sx: { color: "warning.main" },
-							children: "Warning Text - Caution indicators"
-						}),
-						/* @__PURE__ */ s(_, {
-							variant: "body1",
-							sx: { 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",
-						gutterBottom: !0,
-						sx: {
-							color: "text.secondary",
-							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,
-								sx: {
-									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,
-								sx: {
-									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,
-								sx: {
-									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,
-								sx: {
-									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,
-								sx: {
-									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,
-								sx: {
-									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"
-							}),
-							/* @__PURE__ */ s(r, {
-								label: "Password Field",
-								type: "password",
-								placeholder: "Enter password...",
-								helperText: "Password input with custom styling"
-							}),
-							/* @__PURE__ */ s(r, {
-								label: "Multiline Text",
-								multiline: !0,
-								rows: 3,
-								placeholder: "Enter multiple lines...",
-								helperText: "Multiline text input"
-							})
-						]
-					})
-				})] }),
-				/* @__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",
-				gutterBottom: !0,
-				sx: {
-					color: "text.secondary",
-					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,
-					sx: {
-						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,
-					sx: {
-						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",
-			gutterBottom: !0,
-			sx: { color: "text.secondary" },
-			children: "Material-UI elevation system with custom shadows"
-		}),
-		/* @__PURE__ */ s(g, {
-			direction: "row",
-			sx: {
-				flexWrap: "wrap",
-				gap: 3,
-				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,
-			sx: {
-				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",
-				sx: {
-					color: "text.secondary",
-					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 };