@solostylist/ui-kit 1.0.229 → 2.0.0

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

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