@solostylist/ui-kit 1.0.170 → 1.0.172

package/dist/s-skeleton/s-skeleton.js

@@ -31,11 +31,11 @@ const o = ({
 };
 o.displayName = "SSkeleton";
 try {
-  o.displayName = "SSkeleton", o.__docgenInfo = { description: "An enhanced skeleton loading component with pre-defined component presets for consistent loading states.", displayName: "SSkeleton", props: { variant: { defaultValue: { value: "text" }, description: "Visual variant of the skeleton", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } }, height: { defaultValue: { value: "32" }, description: "Height of the skeleton (number for px, string for CSS units)", name: "height", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Width of the skeleton (number for px, string for CSS units)", name: "width", required: !1, type: { name: "string | number" } }, fontSize: { defaultValue: { value: "16px" }, description: "Font size for text variant skeletons", name: "fontSize", required: !1, type: { name: "string | number" } }, component: { defaultValue: null, description: "Pre-defined component preset for common UI elements", name: "component", required: !1, type: { name: "enum", value: [{ value: '"typography"' }, { value: '"button"' }, { value: '"checkbox"' }, { value: '"radio-button"' }, { value: '"avatar"' }, { value: '"rounded-avatar"' }, { value: '"icon-button"' }, { value: '"title-typography"' }] } } } };
+  o.displayName = "SSkeleton", o.__docgenInfo = { description: "An enhanced skeleton loading component with pre-defined component presets for consistent loading states.", displayName: "SSkeleton", props: { variant: { defaultValue: { value: "text" }, description: "Visual variant of the skeleton", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } }, height: { defaultValue: { value: "32" }, description: "Height of the skeleton (number for px, string for CSS units)", name: "height", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Width of the skeleton (number for px, string for CSS units)", name: "width", required: !1, type: { name: "string | number" } }, fontSize: { defaultValue: { value: "16px" }, description: "Font size for text variant skeletons", name: "fontSize", required: !1, type: { name: "string | number" } }, component: { defaultValue: null, description: "Pre-defined component preset for common UI elements", name: "component", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"checkbox"' }, { value: '"typography"' }, { value: '"radio-button"' }, { value: '"avatar"' }, { value: '"rounded-avatar"' }, { value: '"icon-button"' }, { value: '"title-typography"' }] } } } };
 } catch {
 }
 try {
-  sskeleton.displayName = "sskeleton", sskeleton.__docgenInfo = { description: "An enhanced skeleton loading component with pre-defined component presets for consistent loading states.", displayName: "sskeleton", props: { variant: { defaultValue: { value: "text" }, description: "Visual variant of the skeleton", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } }, height: { defaultValue: { value: "32" }, description: "Height of the skeleton (number for px, string for CSS units)", name: "height", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Width of the skeleton (number for px, string for CSS units)", name: "width", required: !1, type: { name: "string | number" } }, fontSize: { defaultValue: { value: "16px" }, description: "Font size for text variant skeletons", name: "fontSize", required: !1, type: { name: "string | number" } }, component: { defaultValue: null, description: "Pre-defined component preset for common UI elements", name: "component", required: !1, type: { name: "enum", value: [{ value: '"typography"' }, { value: '"button"' }, { value: '"checkbox"' }, { value: '"radio-button"' }, { value: '"avatar"' }, { value: '"rounded-avatar"' }, { value: '"icon-button"' }, { value: '"title-typography"' }] } } } };
+  sskeleton.displayName = "sskeleton", sskeleton.__docgenInfo = { description: "An enhanced skeleton loading component with pre-defined component presets for consistent loading states.", displayName: "sskeleton", props: { variant: { defaultValue: { value: "text" }, description: "Visual variant of the skeleton", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } }, height: { defaultValue: { value: "32" }, description: "Height of the skeleton (number for px, string for CSS units)", name: "height", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Width of the skeleton (number for px, string for CSS units)", name: "width", required: !1, type: { name: "string | number" } }, fontSize: { defaultValue: { value: "16px" }, description: "Font size for text variant skeletons", name: "fontSize", required: !1, type: { name: "string | number" } }, component: { defaultValue: null, description: "Pre-defined component preset for common UI elements", name: "component", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"checkbox"' }, { value: '"typography"' }, { value: '"radio-button"' }, { value: '"avatar"' }, { value: '"rounded-avatar"' }, { value: '"icon-button"' }, { value: '"title-typography"' }] } } } };
 } catch {
 }
 export {

package/dist/s-stripe/s-stripe.js

@@ -34,11 +34,11 @@ const r = (t) => {
 };
 r.displayName = "StripeTextField";
 try {
-  r.displayName = "StripeTextField", r.__docgenInfo = { description: "Generic Stripe text field component that integrates Stripe Elements with Material-UI styling.", displayName: "StripeTextField", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardExpiryElementProps | CardCvcElementProps | CardNumberElementProps | AuBankAccountElementProps | FpxBankElementProps | IbanElementProps | IdealBankElementProps" } }, labelErrorMessage: { defaultValue: null, description: "Custom error message to display when validation fails", name: "labelErrorMessage", required: !1, type: { name: "string" } }, onChange: { defaultValue: null, description: "Change handler for Stripe Element events", name: "onChange", required: !1, type: { name: "((event: StripeCardExpiryElementChangeEvent) => any) | ((event: StripeCardCvcElementChangeEvent) => any) | ... 5 more ..." } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "StripeElement" } } } };
+  r.displayName = "StripeTextField", r.__docgenInfo = { description: "Generic Stripe text field component that integrates Stripe Elements with Material-UI styling.", displayName: "StripeTextField", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardNumberElementProps | CardExpiryElementProps | AuBankAccountElementProps | CardCvcElementProps | FpxBankElementProps | IbanElementProps | IdealBankElementProps" } }, labelErrorMessage: { defaultValue: null, description: "Custom error message to display when validation fails", name: "labelErrorMessage", required: !1, type: { name: "string" } }, onChange: { defaultValue: null, description: "Change handler for Stripe Element events", name: "onChange", required: !1, type: { name: "((event: StripeCardNumberElementChangeEvent) => any) | ((event: StripeCardExpiryElementChangeEvent) => any) | ... 5 more ..." } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "StripeElement" } } } };
 } catch {
 }
 try {
-  sstripe.displayName = "sstripe", sstripe.__docgenInfo = { description: "Generic Stripe text field component that integrates Stripe Elements with Material-UI styling.", displayName: "sstripe", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardExpiryElementProps | CardCvcElementProps | CardNumberElementProps | AuBankAccountElementProps | FpxBankElementProps | IbanElementProps | IdealBankElementProps" } }, labelErrorMessage: { defaultValue: null, description: "Custom error message to display when validation fails", name: "labelErrorMessage", required: !1, type: { name: "string" } }, onChange: { defaultValue: null, description: "Change handler for Stripe Element events", name: "onChange", required: !1, type: { name: "((event: StripeCardExpiryElementChangeEvent) => any) | ((event: StripeCardCvcElementChangeEvent) => any) | ... 5 more ..." } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "StripeElement" } } } };
+  sstripe.displayName = "sstripe", sstripe.__docgenInfo = { description: "Generic Stripe text field component that integrates Stripe Elements with Material-UI styling.", displayName: "sstripe", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardNumberElementProps | CardExpiryElementProps | AuBankAccountElementProps | CardCvcElementProps | FpxBankElementProps | IbanElementProps | IdealBankElementProps" } }, labelErrorMessage: { defaultValue: null, description: "Custom error message to display when validation fails", name: "labelErrorMessage", required: !1, type: { name: "string" } }, onChange: { defaultValue: null, description: "Change handler for Stripe Element events", name: "onChange", required: !1, type: { name: "((event: StripeCardNumberElementChangeEvent) => any) | ((event: StripeCardExpiryElementChangeEvent) => any) | ... 5 more ..." } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "StripeElement" } } } };
 } catch {
 }
 export {

package/dist/s-text-shimmer/s-text-shimmer.d.ts

@@ -1,8 +1,8 @@
-import { BoxProps } from '@mui/material';
+import { TypographyProps } from '@mui/material';
 /**
  * Props interface for STextShimmer component
  */
-export interface STextShimmerProps extends Omit<BoxProps, 'children'> {
+export interface STextShimmerProps extends Omit<TypographyProps, 'children'> {
     /** The text content to display with the shimmer effect */
     children: string;
     /** Duration of the shimmer animation in seconds */

package/dist/s-text-shimmer/s-text-shimmer.js

@@ -1,17 +1,17 @@
-import { j as d } from "../jsx-runtime-OVHDjVDe.js";
-import { forwardRef as m, useMemo as p } from "react";
-import { Box as l } from "@mui/material";
-import { s as c } from "../styled-B0Z4EDy9.js";
-import { keyframes as u } from "@emotion/react";
-const h = u`
+import { j as s } from "../jsx-runtime-OVHDjVDe.js";
+import { forwardRef as d, useMemo as m } from "react";
+import { Typography as p } from "@mui/material";
+import { s as l } from "../styled-B0Z4EDy9.js";
+import { keyframes as c } from "@emotion/react";
+const u = c`
   0% {
     background-position: 100% center;
   }
   100% {
     background-position: 0% center;
   }
-`, f = c(l, {
-  shouldForwardProp: (e) => e !== "duration" && e !== "dynamicSpread" && e !== "component"
+`, h = l(p, {
+  shouldForwardProp: (e) => e !== "duration" && e !== "dynamicSpread"
 })(({ theme: e, duration: t, dynamicSpread: r }) => ({
   display: "inline-block",
   position: "relative",
@@ -20,15 +20,15 @@ const h = u`
   color: "transparent",
   backgroundSize: "250% 100%, auto",
   backgroundRepeat: "no-repeat, padding-box",
-  animation: `${h} ${t}s linear infinite`,
+  animation: `${u} ${t}s linear infinite`,
   "--spread": `${r}px`,
   "--base-color": (e.vars || e).palette.text.disabled,
   "--base-gradient-color": (e.vars || e).palette.text.primary,
   backgroundImage: "linear-gradient(90deg, transparent calc(50% - var(--spread)), var(--base-gradient-color), transparent calc(50% + var(--spread))), linear-gradient(var(--base-color), var(--base-color))"
-})), a = m(
-  ({ children: e, duration: t = 2, spread: r = 2, component: i = "p", ...n }, o) => {
-    const s = p(() => e.length * r, [e, r]);
-    return /* @__PURE__ */ d.jsx(f, { ref: o, component: i, duration: t, dynamicSpread: s, ...n, children: e });
+})), a = d(
+  ({ children: e, duration: t = 2, spread: r = 2, ...i }, n) => {
+    const o = m(() => e.length * r, [e, r]);
+    return /* @__PURE__ */ s.jsx(h, { ref: n, duration: t, dynamicSpread: o, ...i, children: e });
   }
 );
 a.displayName = "STextShimmer";

package/dist/s-text-truncation/s-text-truncation.js

@@ -9,7 +9,7 @@ const i = ({
   const [n, r] = p(!1), s = () => {
     r(!n);
   };
-  return o === "tooltip" ? /* @__PURE__ */ t.jsx(u, { title: e || "", arrow: !0, children: /* @__PURE__ */ t.jsx(
+  return o === "tooltip" ? /* @__PURE__ */ t.jsx(u, { title: e, arrow: !0, children: /* @__PURE__ */ t.jsx(
     l,
     {
       variant: "body2",

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

@@ -1,20 +1,20 @@
 import { j as e } from "../jsx-runtime-OVHDjVDe.js";
 import * as g from "react";
-import { Box as t, Typography as r, Stack as o, Card as h, CardContent as x, Divider as d, Alert as m, Chip as s, Paper as p } from "@mui/material";
+import { Box as t, Typography as r, Stack as i, Card as d, CardContent as h, Divider as m, Alert as x, Chip as s, Paper as j } from "@mui/material";
 import { SButton as n } from "../s-button/s-button.js";
 import { SForm as v } from "../s-form/s-form.js";
-import { STextField as u } from "../s-text-field/s-text-field.js";
+import { STextField as p } from "../s-text-field/s-text-field.js";
 import y from "../s-theme-switch/s-theme-switch.js";
-import { c as j } from "../createSvgIcon-DxwgGAVe.js";
+import { c as u } from "../createSvgIcon-DxwgGAVe.js";
 import { F as b } from "../Favorite-DS5Gpq2s.js";
-const f = j(/* @__PURE__ */ e.jsx("path", {
+const f = u(/* @__PURE__ */ e.jsx("path", {
   d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
-}), "Add"), S = j(/* @__PURE__ */ e.jsx("path", {
+}), "Add"), S = u(/* @__PURE__ */ e.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 = j(/* @__PURE__ */ e.jsx("path", {
+}), "Share"), w = u(/* @__PURE__ */ e.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 c = [
+  const l = [
     { name: "Primary", color: "primary.main" },
     { name: "Secondary", color: "secondary.main" },
     { name: "Success", color: "success.main" },
@@ -22,26 +22,26 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
     { name: "Error", color: "error.main" },
     { name: "Info", color: "info.main" }
   ];
-  return /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { children: [
+  return /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
     /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Color Palette" }),
-    /* @__PURE__ */ e.jsx(o, { direction: "row", flexWrap: "wrap", gap: 2, children: c.map((i) => /* @__PURE__ */ e.jsxs(t, { sx: { textAlign: "center" }, children: [
+    /* @__PURE__ */ e.jsx(i, { direction: "row", flexWrap: "wrap", gap: 2, children: l.map((o) => /* @__PURE__ */ e.jsxs(t, { sx: { textAlign: "center" }, children: [
       /* @__PURE__ */ e.jsx(
         t,
         {
           sx: {
             width: 60,
             height: 60,
-            bgcolor: i.color,
+            bgcolor: o.color,
             borderRadius: 1,
             mb: 1,
             boxShadow: 1
           }
         }
       ),
-      /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: i.name })
-    ] }, i.name)) }),
+      /* @__PURE__ */ e.jsx(r, { variant: "caption", children: o.name })
+    ] }, o.name)) }),
     /* @__PURE__ */ e.jsx(r, { variant: "h6", sx: { mt: 3, mb: 2 }, children: "Background Colors" }),
-    /* @__PURE__ */ e.jsxs(o, { direction: "row", gap: 2, flexWrap: "wrap", children: [
+    /* @__PURE__ */ e.jsxs(i, { direction: "row", gap: 2, flexWrap: "wrap", children: [
       /* @__PURE__ */ e.jsx(
         t,
         {
@@ -70,103 +70,79 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
       )
     ] })
   ] }) });
-}, T = () => /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { children: [
+}, T = () => /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
   /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Typography System" }),
   /* @__PURE__ */ e.jsx(r, { variant: "body2", color: "text.secondary", gutterBottom: !0, sx: { mb: 3 }, children: "Complete typography scale using Outfit font family with Material-UI variants" }),
-  /* @__PURE__ */ e.jsxs(o, { spacing: 3, children: [
+  /* @__PURE__ */ e.jsxs(i, { spacing: 3, children: [
     /* @__PURE__ */ e.jsxs(t, { children: [
       /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Headings" }),
-      /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
+      /* @__PURE__ */ e.jsxs(i, { spacing: 2, children: [
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h1", component: "div", gutterBottom: !0, children: "Display Large" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h1 - 3.5rem (56px), Weight 600 - Used for hero sections and primary headings" })
+          /* @__PURE__ */ e.jsx(r, { variant: "h1", gutterBottom: !0, children: "Display Large" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "h1 - 3.5rem (56px), Weight 600 - Used for hero sections and primary headings" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h2", component: "div", gutterBottom: !0, children: "Display Medium" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h2 - 2.75rem (44px), Weight 600 - Used for page titles and major sections" })
+          /* @__PURE__ */ e.jsx(r, { variant: "h2", gutterBottom: !0, children: "Display Medium" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "h2 - 2.75rem (44px), Weight 600 - Used for page titles and major sections" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h3", component: "div", gutterBottom: !0, children: "Display Small" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h3 - 2.25rem (36px), Weight 600 - Used for large section headings" })
+          /* @__PURE__ */ e.jsx(r, { variant: "h3", gutterBottom: !0, children: "Display Small" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "h3 - 2.25rem (36px), Weight 600 - Used for large section headings" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h4", component: "div", gutterBottom: !0, children: "Headline Large" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h4 - 2rem (32px), Weight 600 - Used for card titles and content headings" })
+          /* @__PURE__ */ e.jsx(r, { variant: "h4", gutterBottom: !0, children: "Headline Large" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "h4 - 2rem (32px), Weight 600 - Used for card titles and content headings" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h5", component: "div", gutterBottom: !0, children: "Headline Medium" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h5 - 1.5rem (24px), Weight 600 - Used for subsection headings" })
+          /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Headline Medium" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "h5 - 1.5rem (24px), Weight 600 - Used for subsection headings" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h6", component: "div", gutterBottom: !0, children: "Headline Small" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h6 - 1.25rem (20px), Weight 600 - Used for component titles and labels" })
+          /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Headline Small" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "h6 - 1.25rem (20px), Weight 600 - Used for component titles and labels" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e.jsx(d, {}),
+    /* @__PURE__ */ e.jsx(m, {}),
     /* @__PURE__ */ e.jsxs(t, { children: [
       /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Body Text" }),
-      /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
+      /* @__PURE__ */ e.jsxs(i, { spacing: 2, children: [
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "body1", component: "div", 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__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "body1 - 1rem (16px), Weight 400, Line height 1.5" })
+          /* @__PURE__ */ e.jsx(r, { 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__ */ e.jsx(r, { variant: "caption", children: "body1 - 1rem (16px), Weight 400, Line height 1.5" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "body2", component: "div", 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__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "body2 - 0.875rem (14px), Weight 400, Line height 1.43" })
+          /* @__PURE__ */ e.jsx(r, { 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__ */ e.jsx(r, { variant: "caption", children: "body2 - 0.875rem (14px), Weight 400, Line height 1.43" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e.jsx(d, {}),
+    /* @__PURE__ */ e.jsx(m, {}),
     /* @__PURE__ */ e.jsxs(t, { children: [
       /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Labels & Supporting Text" }),
-      /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
+      /* @__PURE__ */ e.jsxs(i, { spacing: 2, children: [
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "subtitle1", component: "div", gutterBottom: !0, children: "Subtitle Large - Used for prominent secondary text" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "subtitle1 - 1rem (16px), Weight 500" })
+          /* @__PURE__ */ e.jsx(r, { variant: "subtitle1", gutterBottom: !0, children: "Subtitle Large - Used for prominent secondary text" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "subtitle1 - 1rem (16px), Weight 500" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", component: "div", gutterBottom: !0, children: "Subtitle Small - Used for form labels and secondary headings" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "subtitle2 - 0.875rem (14px), Weight 500" })
+          /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Subtitle Small - Used for form labels and secondary headings" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "subtitle2 - 0.875rem (14px), Weight 500" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
           /* @__PURE__ */ e.jsx(r, { variant: "caption", component: "div", gutterBottom: !0, children: "Caption Text - Used for annotations, helper text, and fine print" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "caption - 0.75rem (12px), Weight 400" })
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "caption - 0.75rem (12px), Weight 400" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
           /* @__PURE__ */ e.jsx(r, { variant: "overline", component: "div", gutterBottom: !0, children: "OVERLINE TEXT - USED FOR LABELS AND CATEGORIES" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "overline - 0.75rem (12px), Weight 400, Uppercase, Letter spacing 0.5px" })
+          /* @__PURE__ */ e.jsx(r, { variant: "caption", children: "overline - 0.75rem (12px), Weight 400, Uppercase, Letter spacing 0.5px" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e.jsx(d, {}),
-    /* @__PURE__ */ e.jsxs(t, { children: [
-      /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Interactive & Special Text" }),
-      /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "button", component: "div", gutterBottom: !0, children: "Button Text - All Caps Button Labels" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "button - 0.875rem (14px), Weight 500, Uppercase" })
-        ] }),
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(
-            r,
-            {
-              variant: "body2",
-              component: "a",
-              href: "#",
-              sx: { color: "primary.main", textDecoration: "none", "&:hover": { textDecoration: "underline" } },
-              gutterBottom: !0,
-              children: "Link Text - Interactive text elements"
-            }
-          ),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "Links inherit body variants with primary color and hover effects" })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsx(d, {}),
+    /* @__PURE__ */ e.jsx(m, {}),
     /* @__PURE__ */ e.jsxs(t, { children: [
       /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Text Color Variants" }),
-      /* @__PURE__ */ e.jsxs(o, { spacing: 1, children: [
+      /* @__PURE__ */ e.jsxs(i, { spacing: 1, children: [
         /* @__PURE__ */ e.jsx(r, { variant: "body1", color: "text.primary", children: "Primary Text - Main content color" }),
         /* @__PURE__ */ e.jsx(r, { variant: "body1", color: "text.secondary", children: "Secondary Text - Supporting content color" }),
         /* @__PURE__ */ e.jsx(r, { variant: "body1", color: "text.disabled", children: "Disabled Text - Inactive content color" }),
@@ -178,17 +154,17 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
     ] })
   ] })
 ] }) }), C = () => {
-  const [c, i] = g.useState("");
-  return /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { children: [
+  const [l, o] = g.useState("");
+  return /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
     /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "SoloStylist Components" }),
-    /* @__PURE__ */ e.jsxs(o, { spacing: 4, children: [
+    /* @__PURE__ */ e.jsxs(i, { spacing: 4, children: [
       /* @__PURE__ */ e.jsxs(t, { children: [
         /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Enhanced Buttons" }),
         /* @__PURE__ */ e.jsx(r, { variant: "body2", color: "text.secondary", gutterBottom: !0, sx: { mb: 3 }, children: "Comprehensive button system with all variants, colors, and sizes" }),
-        /* @__PURE__ */ e.jsxs(o, { spacing: 3, children: [
+        /* @__PURE__ */ e.jsxs(i, { spacing: 3, children: [
           /* @__PURE__ */ e.jsxs(t, { children: [
             /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Button Variants" }),
-            /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+            /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
               /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", children: "Contained" }),
               /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "primary", children: "Outlined" }),
               /* @__PURE__ */ e.jsx(n, { variant: "text", color: "primary", children: "Text" })
@@ -196,7 +172,7 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
           ] }),
           /* @__PURE__ */ e.jsxs(t, { children: [
             /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants (Contained)" }),
-            /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+            /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
               /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", children: "Primary" }),
               /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "secondary", children: "Secondary" }),
               /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "success", children: "Success" }),
@@ -207,7 +183,7 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
           ] }),
           /* @__PURE__ */ e.jsxs(t, { children: [
             /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants (Outlined)" }),
-            /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+            /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
               /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "primary", children: "Primary" }),
               /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "secondary", children: "Secondary" }),
               /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "success", children: "Success" }),
@@ -218,7 +194,7 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
           ] }),
           /* @__PURE__ */ e.jsxs(t, { children: [
             /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Button Sizes" }),
-            /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 2, alignItems: "center", flexWrap: "wrap", gap: 1, children: [
+            /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 2, alignItems: "center", flexWrap: "wrap", gap: 1, children: [
               /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", size: "small", children: "Small" }),
               /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", size: "medium", children: "Medium" }),
               /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", size: "large", children: "Large" })
@@ -226,7 +202,7 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
           ] }),
           /* @__PURE__ */ e.jsxs(t, { children: [
             /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Button States" }),
-            /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+            /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
               /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", children: "Default" }),
               /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", disabled: !0, children: "Disabled" }),
               /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "primary", disabled: !0, children: "Disabled Outlined" }),
@@ -235,7 +211,7 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
           ] }),
           /* @__PURE__ */ e.jsxs(t, { children: [
             /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Buttons with Icons" }),
-            /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+            /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
               /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "primary", startIcon: /* @__PURE__ */ e.jsx(f, {}), children: "Start Icon" }),
               /* @__PURE__ */ e.jsx(n, { variant: "contained", color: "secondary", endIcon: /* @__PURE__ */ e.jsx(S, {}), children: "End Icon" }),
               /* @__PURE__ */ e.jsx(n, { variant: "outlined", color: "success", startIcon: /* @__PURE__ */ e.jsx(w, {}), children: "Outlined + Icon" }),
@@ -246,20 +222,20 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
       ] }),
       /* @__PURE__ */ e.jsxs(t, { children: [
         /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Form Components with SForm" }),
-        /* @__PURE__ */ e.jsx(v, { label: "Sample Form", required: !0, children: /* @__PURE__ */ e.jsxs(o, { spacing: 3, children: [
+        /* @__PURE__ */ e.jsx(v, { label: "Sample Form", required: !0, children: /* @__PURE__ */ e.jsxs(i, { spacing: 3, children: [
           /* @__PURE__ */ e.jsx(
-            u,
+            p,
             {
               label: "Enhanced Text Field",
-              value: c,
-              onChange: (a) => i(a.target.value),
+              value: l,
+              onChange: (a) => o(a.target.value),
               placeholder: "Enter text here...",
               helperText: "This is an enhanced STextField component",
               fullWidth: !0
             }
           ),
           /* @__PURE__ */ e.jsx(
-            u,
+            p,
             {
               label: "Password Field",
               type: "password",
@@ -269,7 +245,7 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
             }
           ),
           /* @__PURE__ */ e.jsx(
-            u,
+            p,
             {
               label: "Multiline Text",
               multiline: !0,
@@ -283,32 +259,32 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
       ] }),
       /* @__PURE__ */ e.jsxs(t, { children: [
         /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Theme Controls" }),
-        /* @__PURE__ */ e.jsx(o, { spacing: 2, children: /* @__PURE__ */ e.jsxs(t, { children: [
+        /* @__PURE__ */ e.jsx(i, { spacing: 2, children: /* @__PURE__ */ e.jsxs(t, { children: [
           /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Theme Switch Component" }),
           /* @__PURE__ */ e.jsx(y, {})
         ] }) })
       ] })
     ] })
   ] }) });
-}, I = () => /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { children: [
+}, I = () => /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
   /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Interactive Components" }),
-  /* @__PURE__ */ e.jsxs(o, { spacing: 3, children: [
+  /* @__PURE__ */ e.jsxs(i, { spacing: 3, children: [
     /* @__PURE__ */ e.jsxs(t, { children: [
       /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Alerts" }),
-      /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
-        /* @__PURE__ */ e.jsx(m, { severity: "success", children: "Success alert - Operation completed successfully!" }),
-        /* @__PURE__ */ e.jsx(m, { severity: "warning", children: "Warning alert - Please review your input." }),
-        /* @__PURE__ */ e.jsx(m, { severity: "error", children: "Error alert - Something went wrong." }),
-        /* @__PURE__ */ e.jsx(m, { severity: "info", children: "Info alert - Here's some useful information." })
+      /* @__PURE__ */ e.jsxs(i, { spacing: 2, children: [
+        /* @__PURE__ */ e.jsx(x, { severity: "success", children: "Success alert - Operation completed successfully!" }),
+        /* @__PURE__ */ e.jsx(x, { severity: "warning", children: "Warning alert - Please review your input." }),
+        /* @__PURE__ */ e.jsx(x, { severity: "error", children: "Error alert - Something went wrong." }),
+        /* @__PURE__ */ e.jsx(x, { severity: "info", children: "Info alert - Here's some useful information." })
       ] })
     ] }),
     /* @__PURE__ */ e.jsxs(t, { children: [
       /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Chips & Tags" }),
       /* @__PURE__ */ e.jsx(r, { variant: "body2", color: "text.secondary", gutterBottom: !0, sx: { mb: 3 }, children: "Comprehensive chip system with all colors, variants, and interactive states" }),
-      /* @__PURE__ */ e.jsxs(o, { spacing: 3, children: [
+      /* @__PURE__ */ e.jsxs(i, { spacing: 3, children: [
         /* @__PURE__ */ e.jsxs(t, { children: [
           /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants" }),
-          /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 1, flexWrap: "wrap", gap: 1, children: [
+          /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 1, flexWrap: "wrap", gap: 1, children: [
             /* @__PURE__ */ e.jsx(s, { label: "Default" }),
             /* @__PURE__ */ e.jsx(s, { label: "Primary", color: "primary" }),
             /* @__PURE__ */ e.jsx(s, { label: "Secondary", color: "secondary" }),
@@ -320,7 +296,7 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
           /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Chip Sizes" }),
-          /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", gap: 1, children: [
+          /* @__PURE__ */ e.jsxs(i, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", gap: 1, children: [
             /* @__PURE__ */ e.jsx(s, { label: "Small", color: "primary", size: "small" }),
             /* @__PURE__ */ e.jsx(s, { label: "Medium", color: "primary", size: "medium" })
           ] })
@@ -329,15 +305,15 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
     ] })
   ] })
 ] }) }), W = () => {
-  const c = [0, 1, 2, 4, 6, 8, 12, 16, 24];
-  return /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { children: [
+  const l = [0, 1, 2, 4, 6, 8, 12, 16, 24];
+  return /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
     /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Shadow System" }),
     /* @__PURE__ */ e.jsx(r, { variant: "body2", color: "text.secondary", gutterBottom: !0, children: "Material-UI elevation system with custom shadows" }),
-    /* @__PURE__ */ e.jsx(o, { direction: "row", flexWrap: "wrap", gap: 3, sx: { mt: 2 }, children: c.map((i) => /* @__PURE__ */ e.jsxs(t, { sx: { textAlign: "center" }, children: [
+    /* @__PURE__ */ e.jsx(i, { direction: "row", flexWrap: "wrap", gap: 3, sx: { mt: 2 }, children: l.map((o) => /* @__PURE__ */ e.jsxs(t, { sx: { textAlign: "center" }, children: [
       /* @__PURE__ */ e.jsx(
-        p,
+        j,
         {
-          elevation: i,
+          elevation: o,
           sx: {
             width: 80,
             height: 80,
@@ -347,47 +323,34 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
             mb: 1,
             borderRadius: 2
           },
-          children: /* @__PURE__ */ e.jsx(r, { variant: "h6", children: i })
+          children: /* @__PURE__ */ e.jsx(r, { variant: "h6", children: o })
         }
       ),
-      /* @__PURE__ */ e.jsxs(r, { variant: "caption", color: "text.secondary", children: [
+      /* @__PURE__ */ e.jsxs(r, { variant: "caption", children: [
         "Elevation ",
-        i
+        o
       ] })
-    ] }, i)) }),
-    /* @__PURE__ */ e.jsx(d, { sx: { my: 3 } }),
+    ] }, o)) }),
+    /* @__PURE__ */ e.jsx(m, { sx: { my: 3 } }),
     /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Custom Shadow Effects" }),
-    /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 3, flexWrap: "wrap", gap: 2, children: [
-      /* @__PURE__ */ e.jsx(
-        p,
-        {
-          sx: {
-            p: 3,
-            borderRadius: 2,
-            boxShadow: "var(--s-palette-baseShadow)"
-          },
-          children: /* @__PURE__ */ e.jsx(r, { variant: "body2", children: "Custom Base Shadow" })
-        }
-      ),
-      /* @__PURE__ */ e.jsx(
-        p,
-        {
-          sx: {
-            p: 3,
-            borderRadius: 2,
-            boxShadow: (i) => i.palette.mode === "light" ? "0 4px 20px rgba(0,0,0,0.1)" : "0 4px 20px rgba(0,0,0,0.5)"
-          },
-          children: /* @__PURE__ */ e.jsx(r, { variant: "body2", children: "Theme-aware Shadow" })
-        }
-      )
-    ] })
+    /* @__PURE__ */ e.jsx(i, { direction: "row", spacing: 3, flexWrap: "wrap", gap: 2, children: /* @__PURE__ */ e.jsx(
+      j,
+      {
+        sx: {
+          p: 3,
+          borderRadius: 2,
+          boxShadow: "var(--s-palette-baseShadow)"
+        },
+        children: /* @__PURE__ */ e.jsx(r, { variant: "body2", children: "Custom Base Shadow" })
+      }
+    ) })
   ] }) });
-}, A = ({
-  title: c = "SoloStylist UI Kit Theme Demo",
-  compact: i = !1,
+}, V = ({
+  title: l = "SoloStylist UI Kit Theme Demo",
+  compact: o = !1,
   sections: a = ["colors", "typography", "components", "forms", "interactive", "shadows"]
 }) => {
-  const l = g.useMemo(
+  const c = g.useMemo(
     () => ({
       colors: a.includes("colors"),
       typography: a.includes("typography"),
@@ -398,17 +361,17 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
     }),
     [a]
   );
-  return /* @__PURE__ */ e.jsxs(t, { sx: { p: i ? 2 : 3, maxWidth: 1200, mx: "auto" }, children: [
+  return /* @__PURE__ */ e.jsxs(t, { sx: { p: o ? 2 : 3, maxWidth: 1200, mx: "auto" }, children: [
     /* @__PURE__ */ e.jsxs(t, { sx: { mb: 4, textAlign: "center" }, children: [
-      /* @__PURE__ */ e.jsx(r, { variant: "h3", component: "h1", gutterBottom: !0, children: c }),
+      /* @__PURE__ */ e.jsx(r, { variant: "h3", component: "h1", gutterBottom: !0, children: l }),
       /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "text.secondary", sx: { mb: 3 }, children: "Showcase of the SoloStylist UI Kit with modern theming capabilities" })
     ] }),
-    /* @__PURE__ */ e.jsxs(o, { spacing: i ? 2 : 4, children: [
-      l.colors && /* @__PURE__ */ e.jsx(B, {}),
-      l.typography && /* @__PURE__ */ e.jsx(T, {}),
-      (l.components || l.forms) && /* @__PURE__ */ e.jsx(C, {}),
-      l.interactive && /* @__PURE__ */ e.jsx(I, {}),
-      l.shadows && /* @__PURE__ */ e.jsx(W, {})
+    /* @__PURE__ */ e.jsxs(i, { spacing: o ? 2 : 4, children: [
+      c.colors && /* @__PURE__ */ e.jsx(B, {}),
+      c.typography && /* @__PURE__ */ e.jsx(T, {}),
+      (c.components || c.forms) && /* @__PURE__ */ e.jsx(C, {}),
+      c.interactive && /* @__PURE__ */ e.jsx(I, {}),
+      c.shadows && /* @__PURE__ */ e.jsx(W, {})
     ] })
   ] });
 };
@@ -428,5 +391,5 @@ Features:
 } catch {
 }
 export {
-  A as default
+  V as default
 };