@solostylist/ui-kit 1.0.230 → 2.0.1

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

@@ -1,40 +1,63 @@
-import { useEffect as e, useState as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Box as i, Typography as a } from "@mui/material";
+import * as e from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Box as r, Typography as i, styled as a, useMediaQuery as o, useThemeProps as s } from "@mui/material";
 //#region lib/s-typewriter-text/s-typewriter-text.tsx
-var o = ({ text: o, speed: s = 100, cursor: c = "|", cursorBlinking: l = !0, loop: u = !1, deleteSpeed: d = 50, delay: f = 1500, ...p }) => {
-	let [m, h] = t(""), [g, _] = t(0), [v, y] = t(!1), [b, x] = t(0), S = Array.isArray(o) ? o : [o], C = S[b] || "";
-	return e(() => {
-		if (!C) return;
-		let e = setTimeout(() => {
-			v ? m.length > 0 ? h((e) => e.slice(0, -1)) : (y(!1), _(0), x((e) => (e + 1) % S.length)) : g < C.length ? (h((e) => e + C[g]), _((e) => e + 1)) : u && setTimeout(() => y(!0), f);
-		}, v ? d : s);
-		return () => clearTimeout(e);
+var c = a(i, {
+	name: "STypewriterText",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({});
+function l(i, a) {
+	let l = s({
+		props: i,
+		name: "STypewriterText"
+	}), { cursor: u = "|", cursorBlinking: d = !0, delay: f = 1500, deleteSpeed: p = 50, loop: m = !1, speed: h = 100, text: g, ..._ } = l, [v, y] = e.useState(""), [b, x] = e.useState(0), [S, C] = e.useState(!1), [w, T] = e.useState(0), E = o("(prefers-reduced-motion: reduce)"), D = Array.isArray(g) ? g : [g], O = D[w] || "", k = JSON.stringify(g);
+	e.useEffect(() => {
+		y(""), x(0), C(!1), T(0);
+	}, [k]), e.useEffect(() => {
+		if (E || !O) return;
+		let e = !S && b >= O.length;
+		if (e && !m) return;
+		let t = setTimeout(() => {
+			S ? v.length > 0 ? y((e) => e.slice(0, -1)) : (C(!1), x(0), T((e) => (e + 1) % D.length)) : b < O.length ? (y((e) => e + O[b]), x((e) => e + 1)) : m && C(!0);
+		}, e ? f : S ? p : h);
+		return () => clearTimeout(t);
 	}, [
-		g,
-		v,
-		C,
-		u,
-		s,
-		d,
-		f,
+		b,
+		S,
+		O,
 		m,
-		S.length
-	]), /* @__PURE__ */ r(a, {
-		...p,
-		children: [m, /* @__PURE__ */ n(i, {
+		h,
+		p,
+		f,
+		v,
+		E,
+		D.length
+	]);
+	let A = {
+		...l,
+		cursorBlinking: d,
+		deleting: S,
+		loop: m
+	};
+	return /* @__PURE__ */ n(c, {
+		..._,
+		ownerState: A,
+		ref: a,
+		children: [E ? D[0] ?? "" : v, E ? null : /* @__PURE__ */ t(r, {
 			component: "span",
 			sx: {
-				animation: l ? "blink 1s infinite" : "none",
+				animation: d ? "blink 1s infinite" : "none",
 				"@keyframes blink": {
 					"0%, 50%": { opacity: 1 },
 					"51%, 100%": { opacity: 0 }
 				}
 			},
-			children: c
+			children: u
 		})]
 	});
-};
-o.displayName = "STypewriterText";
+}
+var u = e.forwardRef(l);
+u.displayName = "STypewriterText";
 //#endregion
-export { o as STypewriterText, o as default };
+export { u as STypewriterText, u as default };

package/dist/s-zoom-image/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SZoomImage } from './s-zoom-image';
-export type { SZoomImageProps } from './s-zoom-image';
+export type { SZoomImageOwnerState, SZoomImageProps } from './s-zoom-image';
+export type {} from '../theme/component-augmentation';

package/dist/s-zoom-image/s-zoom-image.d.ts

@@ -1,9 +1,10 @@
 import { default as React } from 'react';
 import { BoxProps, SkeletonProps } from '@mui/material';
+import { SLazyImageProps } from '../s-lazy-image';
 /**
  * Props interface for SZoomImage component
  */
-export interface SZoomImageProps extends Omit<BoxProps, 'component'> {
+export interface SZoomImageProps extends Omit<BoxProps, 'children' | 'component'> {
     /** Image source URL */
     src: string;
     /** Alternative text for accessibility */
@@ -14,10 +15,10 @@ export interface SZoomImageProps extends Omit<BoxProps, 'component'> {
     transitionDuration?: number;
     /** Border radius (number uses theme spacing, string accepts any CSS unit) */
     borderRadius?: number | string;
-    /** Custom styles applied to the image element */
-    imgStyle?: React.CSSProperties;
-    /** Custom class name for the image element */
-    imgClassName?: string;
+    /** Components used for the image and skeleton slots. */
+    slots?: SLazyImageProps['slots'];
+    /** Props for the image and skeleton slots. */
+    slotProps?: SLazyImageProps['slotProps'];
     /** Skeleton variant while loading */
     skeletonVariant?: SkeletonProps['variant'];
     /** Image height for lazy loading skeleton */
@@ -25,5 +26,13 @@ export interface SZoomImageProps extends Omit<BoxProps, 'component'> {
     /** Image width for lazy loading skeleton */
     width?: number | string;
 }
+export type SZoomImageOwnerState = SZoomImageProps & {
+    borderRadius: number | string;
+    height: number | string;
+    skeletonVariant: NonNullable<SkeletonProps['variant']>;
+    transitionDuration: number;
+    width: number | string;
+    zoomScale: number;
+};
 export declare const SZoomImage: React.ForwardRefExoticComponent<Omit<SZoomImageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SZoomImage;

package/dist/s-zoom-image/s-zoom-image.js

@@ -1,62 +1,83 @@
-import e from "../s-lazy-image/s-lazy-image.js";
-import t, { useState as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
-import { Box as i } from "@mui/material";
-import { motion as a, useMotionValue as o, useSpring as s, useTransform as c } from "framer-motion";
+import { toSxArray as e } from "../utils/sx.js";
+import { SLazyImage as t } from "../s-lazy-image/s-lazy-image.js";
+import { styled as n, useThemeProps as r } from "@mui/material/styles";
+import i, { useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { Box as s } from "@mui/material";
+import { mergeSlotProps as c } from "@mui/material/utils";
+import { motion as l, useMotionValue as u, useReducedMotion as d, useSpring as f, useTransform as p } from "framer-motion";
 //#region lib/s-zoom-image/s-zoom-image.tsx
-var l = t.forwardRef(({ src: t, alt: l, zoomScale: u = 1.2, transitionDuration: d = .3, borderRadius: f = 1, imgStyle: p, imgClassName: m, skeletonVariant: h = "rounded", height: g = "100%", width: _ = "100%", sx: v, ...y }, b) => {
-	let [x, S] = n(!1), C = o(50), w = o(50), T = {
+var m = n(s, {
+	name: "SZoomImage",
+	slot: "Root"
+})({}), h = i.forwardRef((n, i) => {
+	let h = r({
+		props: n,
+		name: "SZoomImage"
+	}), { src: g, alt: _, zoomScale: v = 1.2, transitionDuration: y = .3, borderRadius: b = 1, skeletonVariant: x = "rounded", height: S = "100%", width: C = "100%", slots: w, slotProps: T, onMouseLeave: E, onMouseMove: D, sx: O, ...k } = h, [A, j] = a(null), M = A === g, N = d(), P = u(50), F = u(50), I = {
 		damping: 20,
 		stiffness: 150,
 		mass: .5
-	}, E = c([s(C, T), s(w, T)], ([e, t]) => `${e}% ${t}%`);
-	return /* @__PURE__ */ r(i, {
-		ref: b,
-		onMouseMove: (e) => {
-			if (!x) return;
-			let { left: t, top: n, width: r, height: i } = e.currentTarget.getBoundingClientRect();
-			C.set((e.clientX - t) / r * 100), w.set((e.clientY - n) / i * 100);
-		},
-		onMouseLeave: () => {
-			C.set(50), w.set(50);
-		},
+	}, L = p([f(P, I), f(F, I)], ([e, t]) => `${e}% ${t}%`), R = (e) => {
+		if (D?.(e), e.defaultPrevented || !M || N) return;
+		let { left: t, top: n, width: r, height: i } = e.currentTarget.getBoundingClientRect();
+		P.set((e.clientX - t) / r * 100), F.set((e.clientY - n) / i * 100);
+	}, z = (e) => {
+		E?.(e), !e.defaultPrevented && (N || (P.set(50), F.set(50)));
+	}, B = {
+		...h,
+		borderRadius: b,
+		height: S,
+		skeletonVariant: x,
+		transitionDuration: y,
+		width: C,
+		zoomScale: v
+	}, V = c(T?.image, {
+		onLoad: () => j(g),
 		sx: {
+			borderRadius: "inherit",
+			display: "block",
+			objectFit: "cover"
+		}
+	});
+	return /* @__PURE__ */ o(m, {
+		ref: i,
+		ownerState: B,
+		onMouseMove: R,
+		onMouseLeave: z,
+		sx: [{
 			position: "relative",
 			width: "100%",
 			height: "auto",
 			overflow: "hidden",
-			borderRadius: f,
-			...v
-		},
-		...y,
-		children: /* @__PURE__ */ r(i, {
-			component: a.div,
-			style: { transformOrigin: E },
+			borderRadius: b
+		}, ...e(O)],
+		...k,
+		children: /* @__PURE__ */ o(s, {
+			component: l.div,
+			style: { transformOrigin: N ? "50% 50%" : L },
 			animate: { scale: 1 },
-			whileHover: x ? { scale: u } : { scale: 1 },
-			transition: {
+			whileHover: !N && M ? { scale: v } : { scale: 1 },
+			transition: N ? { duration: 0 } : {
 				type: "spring",
-				duration: d,
+				duration: y,
 				bounce: 0
 			},
-			children: /* @__PURE__ */ r(e, {
-				src: t,
-				alt: l,
-				variant: h,
-				height: g,
-				width: _,
-				className: m,
-				style: {
-					objectFit: "cover",
-					display: "block",
-					borderRadius: "inherit",
-					...p
-				},
-				onLoad: () => S(!0)
+			children: /* @__PURE__ */ o(t, {
+				src: g,
+				alt: _,
+				variant: x,
+				height: S,
+				width: C,
+				slots: w,
+				slotProps: {
+					...T,
+					image: V
+				}
 			})
 		})
 	});
 });
-l.displayName = "SZoomImage";
+h.displayName = "SZoomImage";
 //#endregion
-export { l as SZoomImage, l as default };
+export { h as SZoomImage, h as default };

package/dist/theme/component-augmentation.d.ts

@@ -0,0 +1,265 @@
+import { ComponentsOverrides, ComponentsVariants } from '@mui/material/styles';
+import { SAccordionProps } from '../s-accordion/s-accordion';
+import { SActionOverlayProps } from '../s-action-overlay/s-action-overlay';
+import { SAutocompleteProps } from '../s-autocomplete/s-autocomplete';
+import { SAvatarProps } from '../s-avatar/s-avatar';
+import { SBlurTextProps } from '../s-blur-text/s-blur-text';
+import { SBrandLogoProps } from '../s-brand-logo/s-brand-logo';
+import { SBreadcrumbsProps } from '../s-breadcrumbs/s-breadcrumbs';
+import { SCategoryCardProps } from '../s-category-card/s-category-card';
+import { SChatInputProps } from '../s-chat-input/s-chat-input';
+import { SChatMessageProps } from '../s-chat-message/s-chat-message';
+import { SCheckboxProps } from '../s-checkbox/s-checkbox';
+import { SChipsProps } from '../s-chips/s-chips';
+import { SCommentMessageProps } from '../s-comment-message/s-comment-message';
+import { SCopyableTextProps } from '../s-copyable-text/s-copyable-text';
+import { SCountBoxProps } from '../s-countdown/s-count-box';
+import { SCountdownProps } from '../s-countdown/s-countdown';
+import { SDataTableProps } from '../s-data-table/s-data-table';
+import { SDialogConfirmProps } from '../s-dialog-confirm/s-dialog-confirm';
+import { SDialogMessageProps } from '../s-dialog-message/s-dialog-message';
+import { SDialogProps } from '../s-dialog/s-dialog';
+import { SEmptyProps } from '../s-empty/s-empty';
+import { SFileIconProps } from '../s-file-icon/s-file-icon';
+import { SFlexBoxProps } from '../s-flex-box/s-flex-box';
+import { SFormProps } from '../s-form/s-form';
+import { SGalleryProps } from '../s-gallery/s-gallery';
+import { SGlowButtonProps } from '../s-glow-button/s-glow-button';
+import { SGradientIconProps } from '../s-gradient-icon/s-gradient-icon';
+import { SIconButtonProps } from '../s-icon-button/s-icon-button';
+import { SImageComparisonProps } from '../s-image-comparison/s-image-comparison';
+import { SImageViewerProps } from '../s-image-viewer/types';
+import { SLabelProps } from '../s-label/s-label';
+import { SLanguagePopoverProps, SLanguageSwitcherProps } from '../s-language-switcher/s-language-switcher';
+import { SLazyImageProps } from '../s-lazy-image/s-lazy-image';
+import { SMovingBorderProps } from '../s-moving-border/s-moving-border';
+import { SNavItemProps } from '../s-nav-item/s-nav-item';
+import { SNavItemsProps } from '../s-nav-items/s-nav-items';
+import { SPaginationProps } from '../s-pagination/s-pagination';
+import { SPixelRevealProps } from '../s-pixel-reveal/s-pixel-reveal';
+import { SQuantityInputProps } from '../s-quantity-input/s-quantity-input';
+import { SRadialPulseAnimateProps } from '../s-radial-pulse-animate/s-radial-pulse-animate';
+import { SReviewProps } from '../s-review/s-review';
+import { SScrollToTopProps } from '../s-scroll-to-top/s-scroll-to-top';
+import { SScrollVelocityProps } from '../s-scroll-velocity/s-scroll-velocity';
+import { SSelectListProps } from '../s-select-list/s-select-list';
+import { SSelectProps } from '../s-select/s-select';
+import { SSkeletonProps } from '../s-skeleton/s-skeleton';
+import { SSnackbarMessageProps } from '../s-snackbar-message/s-snackbar-message';
+import { SSpotlightCursorProps } from '../s-spotlight-cursor/s-spotlight-cursor';
+import { SStatusIllustrationProps } from '../s-status-illustration/s-status-illustration';
+import { SSwitchProps } from '../s-switch/s-switch';
+import { STabPanelProps } from '../s-tabs/s-tab-panel';
+import { STabsProps } from '../s-tabs/s-tabs';
+import { STextFieldProps } from '../s-text-field/s-text-field';
+import { STextShimmerProps } from '../s-text-shimmer/s-text-shimmer';
+import { STextTruncationProps } from '../s-text-truncation/s-text-truncation';
+import { SThemeDemoProps } from '../s-theme-demo/types';
+import { SThemeSwitchProps } from '../s-theme-switch/s-theme-switch';
+import { STipProps } from '../s-tip/s-tip';
+import { SToolBarProps } from '../s-tool-bar/types';
+import { SToolItemProps } from '../s-tool-item/s-tool-item';
+import { STypewriterTextProps } from '../s-typewriter-text/s-typewriter-text';
+import { SZoomImageProps } from '../s-zoom-image/s-zoom-image';
+declare module '@mui/material/styles' {
+    interface ComponentsPropsList {
+        SAccordion: SAccordionProps;
+        SActionOverlay: SActionOverlayProps;
+        SAutocomplete: SAutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined>;
+        SAvatar: SAvatarProps;
+        SBlurText: SBlurTextProps;
+        SBrandLogo: SBrandLogoProps;
+        SBreadcrumbs: SBreadcrumbsProps;
+        SCategoryCard: SCategoryCardProps;
+        SChatInput: SChatInputProps;
+        SChatMessage: SChatMessageProps;
+        SCommentMessage: SCommentMessageProps;
+        SCheckbox: SCheckboxProps;
+        SChips: SChipsProps;
+        SCopyableText: SCopyableTextProps;
+        SCountBox: SCountBoxProps;
+        SCountdown: SCountdownProps;
+        SDialog: SDialogProps;
+        SDataTable: SDataTableProps<unknown>;
+        SDialogConfirm: SDialogConfirmProps;
+        SDialogMessage: SDialogMessageProps;
+        SEmpty: SEmptyProps;
+        SFileIcon: SFileIconProps;
+        SForm: SFormProps;
+        SFlexBox: SFlexBoxProps;
+        SGallery: SGalleryProps;
+        SGlowButton: SGlowButtonProps;
+        SGradientIcon: SGradientIconProps;
+        SIconButton: SIconButtonProps;
+        SImageViewer: SImageViewerProps;
+        SImageComparison: SImageComparisonProps;
+        SLabel: SLabelProps;
+        SLanguagePopover: SLanguagePopoverProps;
+        SLanguageSwitcher: SLanguageSwitcherProps;
+        SLazyImage: SLazyImageProps;
+        SMovingBorder: SMovingBorderProps;
+        SNavItem: SNavItemProps;
+        SNavItems: SNavItemsProps;
+        SPagination: SPaginationProps;
+        SPixelReveal: SPixelRevealProps;
+        SQuantityInput: SQuantityInputProps;
+        SRadialPulseAnimate: SRadialPulseAnimateProps;
+        SReview: SReviewProps;
+        SScrollToTop: SScrollToTopProps;
+        SScrollVelocity: SScrollVelocityProps;
+        SSelect: SSelectProps;
+        SSelectList: SSelectListProps<unknown>;
+        SSkeleton: SSkeletonProps;
+        SSnackbarMessage: SSnackbarMessageProps;
+        SSpotlightCursor: SSpotlightCursorProps;
+        SStatusIllustration: SStatusIllustrationProps;
+        SSwitch: SSwitchProps;
+        STabPanel: STabPanelProps;
+        STabs: STabsProps;
+        STextField: STextFieldProps;
+        STextShimmer: STextShimmerProps;
+        STextTruncation: STextTruncationProps;
+        SThemeDemo: SThemeDemoProps;
+        SThemeSwitch: SThemeSwitchProps;
+        STip: STipProps;
+        SToolBar: SToolBarProps;
+        SToolItem: SToolItemProps;
+        STypewriterText: STypewriterTextProps;
+        SZoomImage: SZoomImageProps;
+    }
+    interface ComponentNameToClassKey {
+        SAccordion: 'root';
+        SActionOverlay: 'root';
+        SAutocomplete: 'root';
+        SAvatar: 'root';
+        SBlurText: 'root';
+        SBrandLogo: 'root';
+        SBreadcrumbs: 'root';
+        SCategoryCard: 'root' | 'title';
+        SChatInput: 'root';
+        SChatMessage: 'root';
+        SCommentMessage: 'root';
+        SCheckbox: 'root';
+        SChips: 'root';
+        SCopyableText: 'root';
+        SCountBox: 'root';
+        SCountdown: 'root';
+        SDialog: 'root';
+        SDataTable: 'root';
+        SDialogConfirm: 'root';
+        SDialogMessage: 'root';
+        SEmpty: 'root';
+        SFileIcon: 'root';
+        SForm: 'root';
+        SFlexBox: 'root';
+        SGallery: 'root';
+        SGlowButton: 'root';
+        SGradientIcon: 'root';
+        SIconButton: 'root';
+        SImageViewer: 'root';
+        SImageComparison: 'root';
+        SLabel: 'root';
+        SLanguagePopover: 'root';
+        SLanguageSwitcher: 'root';
+        SLazyImage: 'image' | 'root' | 'skeleton';
+        SMovingBorder: 'root';
+        SNavItem: 'root';
+        SNavItems: 'root';
+        SPagination: 'root';
+        SPixelReveal: 'root';
+        SQuantityInput: 'root';
+        SRadialPulseAnimate: 'label' | 'root';
+        SReview: 'root';
+        SScrollToTop: 'root';
+        SScrollVelocity: 'root';
+        SSelect: 'root';
+        SSelectList: 'details' | 'item' | 'label' | 'option' | 'radio' | 'root' | 'transition';
+        SSkeleton: 'root';
+        SSnackbarMessage: 'root';
+        SSpotlightCursor: 'root';
+        SStatusIllustration: 'root';
+        SSwitch: 'root';
+        STabPanel: 'root';
+        STabs: 'root';
+        STextField: 'root';
+        STextShimmer: 'root';
+        STextTruncation: 'root';
+        SThemeDemo: 'root';
+        SThemeSwitch: 'root';
+        STip: 'root';
+        SToolBar: 'root' | 'toolbar';
+        SToolItem: 'root';
+        STypewriterText: 'root';
+        SZoomImage: 'root';
+    }
+    interface Components<Theme = unknown> {
+        SAccordion?: CustomComponent<'SAccordion', Theme>;
+        SActionOverlay?: CustomComponent<'SActionOverlay', Theme>;
+        SAutocomplete?: CustomComponent<'SAutocomplete', Theme>;
+        SAvatar?: CustomComponent<'SAvatar', Theme>;
+        SBlurText?: CustomComponent<'SBlurText', Theme>;
+        SBrandLogo?: CustomComponent<'SBrandLogo', Theme>;
+        SBreadcrumbs?: CustomComponent<'SBreadcrumbs', Theme>;
+        SCategoryCard?: CustomComponent<'SCategoryCard', Theme>;
+        SChatInput?: CustomComponent<'SChatInput', Theme>;
+        SChatMessage?: CustomComponent<'SChatMessage', Theme>;
+        SCommentMessage?: CustomComponent<'SCommentMessage', Theme>;
+        SCheckbox?: CustomComponent<'SCheckbox', Theme>;
+        SChips?: CustomComponent<'SChips', Theme>;
+        SCopyableText?: CustomComponent<'SCopyableText', Theme>;
+        SCountBox?: CustomComponent<'SCountBox', Theme>;
+        SCountdown?: CustomComponent<'SCountdown', Theme>;
+        SDialog?: CustomComponent<'SDialog', Theme>;
+        SDataTable?: CustomComponent<'SDataTable', Theme>;
+        SDialogConfirm?: CustomComponent<'SDialogConfirm', Theme>;
+        SDialogMessage?: CustomComponent<'SDialogMessage', Theme>;
+        SEmpty?: CustomComponent<'SEmpty', Theme>;
+        SFileIcon?: CustomComponent<'SFileIcon', Theme>;
+        SForm?: CustomComponent<'SForm', Theme>;
+        SFlexBox?: CustomComponent<'SFlexBox', Theme>;
+        SGallery?: CustomComponent<'SGallery', Theme>;
+        SGlowButton?: CustomComponent<'SGlowButton', Theme>;
+        SGradientIcon?: CustomComponent<'SGradientIcon', Theme>;
+        SIconButton?: CustomComponent<'SIconButton', Theme>;
+        SImageViewer?: CustomComponent<'SImageViewer', Theme>;
+        SImageComparison?: CustomComponent<'SImageComparison', Theme>;
+        SLabel?: CustomComponent<'SLabel', Theme>;
+        SLanguagePopover?: CustomComponent<'SLanguagePopover', Theme>;
+        SLanguageSwitcher?: CustomComponent<'SLanguageSwitcher', Theme>;
+        SLazyImage?: CustomComponent<'SLazyImage', Theme>;
+        SMovingBorder?: CustomComponent<'SMovingBorder', Theme>;
+        SNavItem?: CustomComponent<'SNavItem', Theme>;
+        SNavItems?: CustomComponent<'SNavItems', Theme>;
+        SPagination?: CustomComponent<'SPagination', Theme>;
+        SPixelReveal?: CustomComponent<'SPixelReveal', Theme>;
+        SQuantityInput?: CustomComponent<'SQuantityInput', Theme>;
+        SRadialPulseAnimate?: CustomComponent<'SRadialPulseAnimate', Theme>;
+        SReview?: CustomComponent<'SReview', Theme>;
+        SScrollToTop?: CustomComponent<'SScrollToTop', Theme>;
+        SScrollVelocity?: CustomComponent<'SScrollVelocity', Theme>;
+        SSelect?: CustomComponent<'SSelect', Theme>;
+        SSelectList?: CustomComponent<'SSelectList', Theme>;
+        SSkeleton?: CustomComponent<'SSkeleton', Theme>;
+        SSnackbarMessage?: CustomComponent<'SSnackbarMessage', Theme>;
+        SSpotlightCursor?: CustomComponent<'SSpotlightCursor', Theme>;
+        SStatusIllustration?: CustomComponent<'SStatusIllustration', Theme>;
+        SSwitch?: CustomComponent<'SSwitch', Theme>;
+        STabPanel?: CustomComponent<'STabPanel', Theme>;
+        STabs?: CustomComponent<'STabs', Theme>;
+        STextField?: CustomComponent<'STextField', Theme>;
+        STextShimmer?: CustomComponent<'STextShimmer', Theme>;
+        STextTruncation?: CustomComponent<'STextTruncation', Theme>;
+        SThemeDemo?: CustomComponent<'SThemeDemo', Theme>;
+        SThemeSwitch?: CustomComponent<'SThemeSwitch', Theme>;
+        STip?: CustomComponent<'STip', Theme>;
+        SToolBar?: CustomComponent<'SToolBar', Theme>;
+        SToolItem?: CustomComponent<'SToolItem', Theme>;
+        STypewriterText?: CustomComponent<'STypewriterText', Theme>;
+        SZoomImage?: CustomComponent<'SZoomImage', Theme>;
+    }
+}
+export type CustomComponent<Name extends keyof import('@mui/material/styles').ComponentsPropsList & keyof import('@mui/material/styles').ComponentNameToClassKey, Theme> = {
+    defaultProps?: Partial<import('@mui/material/styles').ComponentsPropsList[Name]>;
+    styleOverrides?: ComponentsOverrides<Theme>[Name];
+    variants?: ComponentsVariants<Theme>[Name];
+};