@solostylist/ui-kit 1.0.202 → 1.0.204

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

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