@solostylist/ui-kit 1.0.230 → 2.0.0

package/dist/s-text-field/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as STextField } from './s-text-field';
-export type { STextFieldProps } from './s-text-field';
+export type { STextFieldOwnerState, STextFieldProps } from './s-text-field';
+export type {} from '../theme/component-augmentation';

package/dist/s-text-field/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-text-field-DD6nnwwU.js";
+import { t as e } from "../s-text-field-BM4qk0mf.js";
 export { e as STextField, e as default };

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

@@ -3,19 +3,14 @@ import { TextField } from '@mui/material';
 /**
  * Props interface for STextField component
  */
-export type STextFieldProps = Omit<React.ComponentProps<typeof TextField>, 'error'> & {
-    /** Field label displayed above the input */
-    label?: string | React.ReactNode;
-    /** Whether the field is required (shows asterisk in label) */
-    required?: boolean;
-    /** Error message to display (string instead of boolean for better UX) */
-    error?: string;
-    /** HTML id attribute for the input element */
-    htmlFor?: string;
-    /** Help text shown in tooltip next to the label */
-    hint?: string;
+export type STextFieldProps = React.ComponentProps<typeof TextField> & {
     /** Accessible text for the password visibility toggle button */
     togglePasswordText?: string;
 };
+export interface STextFieldOwnerState {
+    fullWidth: boolean;
+    password: boolean;
+    passwordVisible: boolean;
+}
 export declare const STextField: React.ForwardRefExoticComponent<Omit<STextFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default STextField;

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

@@ -1,2 +1,2 @@
-import { t as e } from "../s-text-field-DD6nnwwU.js";
+import { t as e } from "../s-text-field-BM4qk0mf.js";
 export { e as STextField, e as default };

package/dist/s-text-field-BM4qk0mf.js

@@ -0,0 +1,51 @@
+import { t as e } from "./createSvgIcon-B0SZlJF1.js";
+import { t } from "./mergeSlotProps-xl1-PgWL.js";
+import { n } from "./inputBaseClasses-DuWQGq8Z.js";
+import { a as r, t as i } from "./field-label-styles-BOyhp6gw.js";
+import { forwardRef as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { IconButton as c, InputAdornment as l, TextField as u, styled as d, useThemeProps as f } from "@mui/material";
+//#region ../../node_modules/@mui/icons-material/Visibility.mjs
+var p = e(/* @__PURE__ */ s("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3" }), "Visibility"), m = e(/* @__PURE__ */ s("path", { d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7M2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2m4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3z" }), "VisibilityOff"), h = d(u, {
+	name: "STextField",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	...i,
+	[`& .${r.root}[data-shrink='false'] + .${n.formControl} .${n.input}`]: { "&::placeholder": { opacity: "1 !important" } }
+}), g = a((e, n) => {
+	let r = f({
+		props: e,
+		name: "STextField"
+	}), { fullWidth: i = !0, type: a = "text", slotProps: u, togglePasswordText: d = "toggle password visibility", ...g } = r, [_, v] = o(!1), y = a === "password", b = {
+		...r,
+		fullWidth: i,
+		password: y,
+		passwordVisible: _
+	}, x = () => {
+		v((e) => !e);
+	}, S = y && _ ? "text" : a, C = y ? /* @__PURE__ */ s(l, {
+		position: "end",
+		children: /* @__PURE__ */ s(c, {
+			"aria-label": d,
+			onClick: x,
+			edge: "end",
+			size: "small",
+			children: s(_ ? m : p, {})
+		})
+	}) : void 0;
+	return /* @__PURE__ */ s(h, {
+		...g,
+		fullWidth: i,
+		ownerState: b,
+		ref: n,
+		type: S,
+		slotProps: {
+			...u,
+			input: y ? t(u?.input, { endAdornment: C }) : u?.input
+		}
+	});
+});
+g.displayName = "STextField";
+//#endregion
+export { g as t };

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

@@ -1,2 +1,3 @@
 export { default, default as STextShimmer } from './s-text-shimmer';
-export type { STextShimmerProps } from './s-text-shimmer';
+export type { STextShimmerComponent, STextShimmerOwnerState, STextShimmerProps } from './s-text-shimmer';
+export type {} from '../theme/component-augmentation';

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

@@ -1,14 +1,28 @@
 import { TypographyProps } from '@mui/material';
+import * as React from 'react';
 /**
  * Props interface for STextShimmer component
  */
-export interface STextShimmerProps extends Omit<TypographyProps, 'children'> {
+export type STextShimmerProps<RootComponent extends React.ElementType = 'span'> = Omit<TypographyProps<RootComponent>, 'children'> & {
     /** The text content to display with the shimmer effect */
     children: string;
     /** Duration of the shimmer animation in seconds */
     duration?: number;
     /** Multiplier for the shimmer spread width */
     spread?: number;
+    /** Root element or component rendered by MUI Typography. */
+    component?: RootComponent;
+};
+export interface STextShimmerOwnerState {
+    duration: number;
+    dynamicSpread: number;
+    spread: number;
 }
-export declare const STextShimmer: import('react').ForwardRefExoticComponent<Omit<STextShimmerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export interface STextShimmerComponent {
+    <RootComponent extends React.ElementType = 'span'>(props: STextShimmerProps<RootComponent> & {
+        ref?: React.ComponentPropsWithRef<RootComponent>['ref'];
+    }): React.JSX.Element;
+    displayName?: string;
+}
+export declare const STextShimmer: STextShimmerComponent;
 export default STextShimmer;

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

@@ -1,6 +1,7 @@
-import { a as e } from "../styled-engine-DOxAQ3qw.js";
-import { t } from "../styled-BTDmdi4c.js";
-import { forwardRef as n, useMemo as r } from "react";
+import { s as e } from "../defaultTheme-BaGcIzCh.js";
+import { t } from "../styled-Bog8QCl3.js";
+import { t as n } from "../useThemeProps-Cr28OQu3.js";
+import * as r from "react";
 import { jsx as i } from "react/jsx-runtime";
 import { Typography as a } from "@mui/material";
 //#region lib/s-text-shimmer/s-text-shimmer.tsx
@@ -11,26 +12,50 @@ var o = e`
   100% {
     background-position: 0% center;
   }
-`, s = t(a, { shouldForwardProp: (e) => e !== "duration" && e !== "dynamicSpread" })(({ theme: e, duration: t, dynamicSpread: n }) => ({
-	display: "inline-block",
-	position: "relative",
-	backgroundClip: "text",
-	WebkitBackgroundClip: "text",
-	color: "transparent",
-	backgroundSize: "250% 100%, auto",
-	backgroundRepeat: "no-repeat, padding-box",
-	animation: `${o} ${t}s linear infinite`,
-	"--spread": `${n}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))"
-})), c = n(({ children: e, duration: t = 2, spread: n = 2, ...a }, o) => /* @__PURE__ */ i(s, {
-	ref: o,
-	duration: t,
-	dynamicSpread: r(() => e.length * n, [e, n]),
-	...a,
-	children: e
-}));
-c.displayName = "STextShimmer";
+`, s = t(a, {
+	name: "STextShimmer",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e, ownerState: t }) => {
+	let n = (e.vars ?? e).palette;
+	return {
+		animation: `${o} ${t.duration}s linear infinite`,
+		backgroundClip: "text",
+		WebkitBackgroundClip: "text",
+		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))",
+		backgroundRepeat: "no-repeat, padding-box",
+		backgroundSize: "250% 100%, auto",
+		color: "transparent",
+		display: "inline-block",
+		position: "relative",
+		"--spread": `${t.dynamicSpread}px`,
+		"--base-color": n.text.secondary,
+		"--base-gradient-color": n.primary.main,
+		"@media (prefers-reduced-motion: reduce)": {
+			animation: "none",
+			backgroundImage: "none",
+			color: n.text.secondary
+		}
+	};
+});
+function c(e, t) {
+	let a = n({
+		props: e,
+		name: "STextShimmer"
+	}), { children: o, duration: c = 2, spread: l = 2, ...u } = a, d = r.useMemo(() => o.length * l, [o, l]), f = {
+		...a,
+		duration: c,
+		dynamicSpread: d,
+		spread: l
+	};
+	return /* @__PURE__ */ i(s, {
+		...u,
+		ownerState: f,
+		ref: t,
+		children: o
+	});
+}
+var l = r.forwardRef(c);
+l.displayName = "STextShimmer";
 //#endregion
-export { c as STextShimmer, c as default };
+export { l as STextShimmer, l as default };

package/dist/s-text-truncation/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as STextTruncation } from './s-text-truncation';
-export type { STextTruncationProps } from './s-text-truncation';
+export type { STextTruncationOwnerState, STextTruncationProps, STextTruncationSlotProps, STextTruncationSlots, STextTruncationToggleProps, STextTruncationVariant, } from './s-text-truncation';
+export type {} from '../theme/component-augmentation';

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

@@ -1,17 +1,41 @@
-import { default as React } from 'react';
-/**
- * Props interface for STextTruncation component
- */
-export interface STextTruncationProps {
-    /** The text content to display and potentially truncate */
-    text?: string;
-    /** Display variant: 'expandable' shows See more/less link, 'tooltip' shows ellipsis with hover */
-    variant?: 'expandable' | 'tooltip';
-    /** Number of lines to display before truncation */
-    lines?: number;
+import { BoxProps, LinkProps, TooltipProps, TypographyProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export type STextTruncationVariant = 'expandable' | 'tooltip';
+export type STextTruncationOwnerState = STextTruncationProps & {
+    expanded: boolean;
+    truncated: boolean;
+    variant: STextTruncationVariant;
+};
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, STextTruncationOwnerState>;
+export interface STextTruncationSlots {
+    text?: React.ElementType;
+    toggle?: React.ElementType;
+    tooltip?: React.ElementType;
 }
-export declare const STextTruncation: {
-    ({ text, variant, lines, }: STextTruncationProps): React.JSX.Element;
-    displayName: string;
+export type STextTruncationToggleProps = Omit<LinkProps, 'onClick'> & {
+    onClick?: React.MouseEventHandler<HTMLElement>;
 };
+export interface STextTruncationSlotProps {
+    text?: OwnerStateSlotProps<TypographyProps>;
+    toggle?: OwnerStateSlotProps<STextTruncationToggleProps>;
+    tooltip?: OwnerStateSlotProps<Omit<TooltipProps, 'children'>>;
+}
+export interface STextTruncationProps extends Omit<BoxProps, 'children' | 'component'> {
+    /** Text content to display. */
+    children: string;
+    /** Label used to collapse expanded text. */
+    collapseText?: string | number;
+    /** Label used to expand truncated text. */
+    expandText?: string | number;
+    /** Maximum number of visible lines before truncation. */
+    lines?: number;
+    /** Components used for internal slots. */
+    slots?: STextTruncationSlots;
+    /** Props or owner-state callbacks for internal slots. */
+    slotProps?: STextTruncationSlotProps;
+    /** Interaction used to reveal truncated content. */
+    variant?: STextTruncationVariant;
+}
+export declare const STextTruncation: React.ForwardRefExoticComponent<Omit<STextTruncationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default STextTruncation;

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

@@ -1,73 +1,120 @@
-import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Box as s, Link as c, Tooltip as l, Typography as u } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { t } from "../appendOwnerState-CELpvdMz.js";
+import * as n from "react";
+import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Box as u, Link as d, Tooltip as f, Typography as p, styled as m, useThemeProps as h } from "@mui/material";
 //#region lib/s-text-truncation/s-text-truncation.tsx
-var d = ({ text: d = "", variant: f = "expandable", lines: p = 3 }) => {
-	let [m, h] = r(!1), [g, _] = r(!1), [v, y] = r(d), b = n(null), x = n(null), S = e(() => {
-		let e = b.current;
-		if (!e || !d) {
-			_(!1), y(d);
+var g = m(u, {
+	name: "STextTruncation",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({});
+function _(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+function v(e) {
+	return e ? Object.fromEntries(Object.entries(e).filter(([e]) => e === "children" || e === "component" || e === "id" || e === "ref" || e === "role" || e === "tabIndex" || e === "title" || e.startsWith("aria-") || e.startsWith("data-") ? !1 : !/^on[A-Z]/.test(e))) : {};
+}
+var y = n.forwardRef(function(u, m) {
+	let y = h({
+		props: u,
+		name: "STextTruncation"
+	}), { children: b, collapseText: x = "See less", expandText: S = "See more", lines: C = 3, slotProps: w, slots: T, sx: E, variant: D = "expandable", ...O } = y, [k, A] = o(!1), [j, M] = o(!1), [N, P] = o(b), F = a(null), I = a(null), L = n.useCallback((e) => {
+		I.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
+	}, [m]), R = r(() => {
+		let e = F.current;
+		if (!e || !b) {
+			M(!1), P(b);
 			return;
 		}
 		e.textContent = "A";
-		let t = e.scrollHeight * p;
-		if (e.textContent = d, e.scrollHeight <= t + 1) {
-			_(!1), y(d);
+		let t = e.scrollHeight * C;
+		if (e.textContent = b, e.scrollHeight <= t + 1) {
+			M(!1), P(b);
 			return;
 		}
-		_(!0);
-		let n = 0, r = d.length;
-		for (; n < r;) {
-			let i = Math.ceil((n + r) / 2);
-			e.textContent = d.slice(0, i) + "… See more", e.scrollHeight > t + 1 ? r = i - 1 : n = i;
+		M(!0);
+		let n = `… ${String(S)}`, r = 0, i = b.length;
+		for (; r < i;) {
+			let a = Math.ceil((r + i) / 2);
+			e.textContent = b.slice(0, a) + n, e.scrollHeight > t + 1 ? i = a - 1 : r = a;
 		}
-		e.textContent = "", y(d.slice(0, n).trimEnd());
-	}, [d, p]);
-	return t(() => {
-		S();
-		let e = new ResizeObserver(S);
-		return x.current && e.observe(x.current), () => e.disconnect();
-	}, [S]), f === "tooltip" ? /* @__PURE__ */ a(l, {
-		title: d,
-		arrow: !0,
-		children: /* @__PURE__ */ a(u, {
-			sx: {
-				display: "-webkit-box",
-				WebkitBoxOrient: "vertical",
-				overflow: "hidden",
-				textOverflow: "ellipsis",
-				WebkitLineClamp: p,
-				lineClamp: p
-			},
-			children: d
-		})
-	}) : /* @__PURE__ */ o(s, {
-		ref: x,
-		sx: { position: "relative" },
-		children: [/* @__PURE__ */ a(u, {
-			ref: b,
+		e.textContent = "", P(b.slice(0, r).trimEnd());
+	}, [
+		S,
+		C,
+		b
+	]);
+	i(() => {
+		R();
+		let e = new ResizeObserver(R);
+		return I.current && e.observe(I.current), () => e.disconnect();
+	}, [R]);
+	let z = {
+		...y,
+		expanded: k,
+		truncated: j,
+		variant: D
+	}, B = T?.text ?? p, V = T?.toggle ?? d, H = T?.tooltip ?? f, U = _(w?.text, z), W = _(w?.toggle, z), G = _(w?.tooltip, z), { onClick: K, sx: q, ...J } = W ?? {}, Y = t(T?.text, U ?? {}, z), X = t(T?.text, v(U), z), Z = t(T?.toggle, J, z), Q = t(T?.tooltip, G ?? {}, z);
+	return /* @__PURE__ */ c(g, {
+		...O,
+		ownerState: z,
+		ref: L,
+		sx: [{ position: "relative" }, ...e(E)],
+		children: D === "tooltip" ? /* @__PURE__ */ c(H, {
+			arrow: !0,
+			title: b,
+			...Q,
+			children: /* @__PURE__ */ c(B, {
+				...Y,
+				sx: [{
+					display: "-webkit-box",
+					WebkitBoxOrient: "vertical",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					WebkitLineClamp: C,
+					lineClamp: C
+				}, ...e(U?.sx)],
+				children: b
+			})
+		}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(B, {
+			ref: F,
 			"aria-hidden": !0,
-			sx: {
+			component: "span",
+			...X,
+			sx: [{
 				position: "absolute",
 				top: 0,
-				left: 0,
 				right: 0,
+				left: 0,
+				height: "auto",
 				visibility: "hidden",
 				pointerEvents: "none"
-			}
-		}), /* @__PURE__ */ o(u, { children: [m ? d : v, g && /* @__PURE__ */ o(i, { children: [m ? " " : "… ", /* @__PURE__ */ a(c, {
-			component: "span",
-			onClick: () => {
-				h(!m);
-			},
-			sx: {
-				cursor: "pointer",
-				fontSize: "inherit"
-			},
-			children: m ? "See less" : "See more"
-		})] })] })]
+			}, ...e(U?.sx)]
+		}), /* @__PURE__ */ l(B, {
+			...Y,
+			children: [k ? b : N, j && /* @__PURE__ */ l(s, { children: [k ? " " : "… ", /* @__PURE__ */ c(V, {
+				component: "button",
+				type: "button",
+				...Z,
+				onClick: (e) => {
+					K?.(e), e.defaultPrevented || A((e) => !e);
+				},
+				sx: [{
+					bgcolor: "transparent",
+					border: 0,
+					cursor: "pointer",
+					display: "inline",
+					fontSize: "inherit",
+					p: 0,
+					verticalAlign: "baseline"
+				}, ...e(q)],
+				children: k ? x : S
+			})] })]
+		})] })
 	});
-};
-d.displayName = "STextTruncation";
+});
+y.displayName = "STextTruncation";
 //#endregion
-export { d as STextTruncation, d as default };
+export { y as STextTruncation, y as default };

package/dist/s-theme-demo/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SThemeDemo } from './s-theme-demo';
-export type { SThemeDemoProps } from './s-theme-demo';
+export type { SThemeDemoOwnerState, SThemeDemoProps, SThemeDemoSection } from './types';
+export type {} from '../theme/component-augmentation';

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

@@ -1,2 +1,2 @@
-import { t as e } from "../s-theme-demo-Bnv7lPIh.js";
+import { SThemeDemo as e } from "./s-theme-demo.js";
 export { e as SThemeDemo, e as default };

package/dist/s-theme-demo/s-theme-demo.d.ts

@@ -1,15 +1,5 @@
+import { SThemeDemoProps } from './types';
 import * as React from 'react';
-/**
- * Props interface for SThemeDemo component
- */
-export interface SThemeDemoProps {
-    /** Optional title for the demo */
-    title?: string;
-    /** Compact layout mode */
-    compact?: boolean;
-    /** Additional sections to show */
-    sections?: ('colors' | 'typography' | 'components' | 'forms' | 'shadows' | 'interactive')[];
-}
 /**
  * SThemeDemo - Comprehensive theme demonstration component
  *
@@ -27,5 +17,5 @@ export interface SThemeDemoProps {
  * @param props - SThemeDemoProps configuration
  * @returns JSX.Element - Complete theme demonstration
  */
-declare const SThemeDemo: React.FC<SThemeDemoProps>;
+export declare const SThemeDemo: React.ForwardRefExoticComponent<Omit<SThemeDemoProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SThemeDemo;

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

@@ -1,2 +1,77 @@
-import { t as e } from "../s-theme-demo-Bnv7lPIh.js";
-export { e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { t } from "../theme-demo-components-section-gtIYRngY.js";
+import { TypographySection as n } from "./theme-demo-typography-section.js";
+import { ShadowSection as r } from "./theme-demo-shadow-section.js";
+import { InteractiveSection as i } from "./theme-demo-interactive-section.js";
+import { ColorRampsSection as a } from "./theme-demo-color-ramps-section.js";
+import { ColorPaletteSection as o } from "./theme-demo-color-palette-section.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Box as u, Stack as d, Typography as f, styled as p, useThemeProps as m } from "@mui/material";
+//#region lib/s-theme-demo/s-theme-demo.tsx
+var h = [
+	"colors",
+	"ramps",
+	"typography",
+	"components",
+	"forms",
+	"interactive",
+	"shadows"
+], g = p(u, {
+	name: "SThemeDemo",
+	slot: "Root"
+})({}), _ = s.forwardRef(function(p, _) {
+	let v = m({
+		props: p,
+		name: "SThemeDemo"
+	}), { title: y = "SoloStylist UI Kit Theme Demo", compact: b = !1, sections: x = h, sx: S, ...C } = v, w = {
+		...v,
+		compact: b
+	}, T = s.useMemo(() => ({
+		colors: x.includes("colors"),
+		ramps: x.includes("ramps"),
+		typography: x.includes("typography"),
+		components: x.includes("components"),
+		forms: x.includes("forms"),
+		shadows: x.includes("shadows"),
+		interactive: x.includes("interactive")
+	}), [x]);
+	return /* @__PURE__ */ l(g, {
+		...C,
+		ownerState: w,
+		ref: _,
+		sx: [{
+			p: b ? 2 : 3,
+			maxWidth: 1200,
+			mx: "auto"
+		}, ...e(S)],
+		children: [/* @__PURE__ */ l(u, {
+			sx: {
+				mb: 4,
+				textAlign: "center"
+			},
+			children: [/* @__PURE__ */ c(f, {
+				variant: "h3",
+				gutterBottom: !0,
+				children: y
+			}), /* @__PURE__ */ c(f, {
+				variant: "h6",
+				sx: { color: "text.secondary" },
+				children: "Showcase of the SoloStylist UI Kit with modern theming capabilities"
+			})]
+		}), /* @__PURE__ */ l(d, {
+			spacing: b ? 2 : 4,
+			children: [
+				T.colors && /* @__PURE__ */ c(o, {}),
+				T.ramps && /* @__PURE__ */ c(a, {}),
+				T.typography && /* @__PURE__ */ c(n, {}),
+				(T.components || T.forms) && /* @__PURE__ */ c(t, {}),
+				T.interactive && /* @__PURE__ */ c(i, {}),
+				T.shadows && /* @__PURE__ */ c(r, {})
+			]
+		})]
+	});
+});
+_.displayName = "SThemeDemo";
+//#endregion
+export { _ as SThemeDemo, _ as default };

package/dist/s-theme-demo/theme-demo-color-palette-section.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Color palette demonstration
+ */
+export declare const ColorPaletteSection: React.FC;