@solostylist/ui-kit 2.0.5 → 2.0.7

package/dist/components-DWGB2MCO.js

@@ -0,0 +1,148 @@
+import { MuiYearCalendar as e } from "./theme/components/year-calendar.js";
+import { MuiTooltip as t } from "./theme/components/tooltip.js";
+import { MuiToggleButton as n } from "./theme/components/toggle-button.js";
+import { MuiToggleButtonGroup as r } from "./theme/components/toggle-button-group.js";
+import { MuiTabs as i } from "./theme/components/tabs.js";
+import { MuiTablePagination as ee } from "./theme/components/table-pagination.js";
+import { MuiTableCell as a } from "./theme/components/table-cell.js";
+import { MuiTab as o } from "./theme/components/tab.js";
+import { MuiSwitch as s } from "./theme/components/switch.js";
+import { MuiSvgIcon as c } from "./theme/components/svg-icon.js";
+import { MuiStepLabel as l } from "./theme/components/step-label.js";
+import { MuiStepIcon as u } from "./theme/components/step-icon.js";
+import { MuiStepConnector as d } from "./theme/components/step-connector.js";
+import { MuiSlider as f } from "./theme/components/slider.js";
+import { MuiSkeleton as p } from "./theme/components/skeleton.js";
+import { MuiSelect as m } from "./theme/components/select.js";
+import { MuiRating as h } from "./theme/components/rating.js";
+import { MuiPopover as g } from "./theme/components/popover.js";
+import { MuiPickersCalendarHeader as _ } from "./theme/components/pickers-calendar-header.js";
+import { MuiPickersArrowSwitcher as v } from "./theme/components/pickers-arrow-switcher.js";
+import { MuiPickerDay as y } from "./theme/components/picker-day.js";
+import { MuiPaper as b } from "./theme/components/paper.js";
+import { MuiPagination as x } from "./theme/components/pagination.js";
+import { MuiPaginationItem as S } from "./theme/components/pagination-item.js";
+import { MuiOutlinedInput as C } from "./theme/components/outlined-input.js";
+import { MuiMultiSectionDigitalClockSection as w } from "./theme/components/multi-section-digital-clock-section.js";
+import { MuiMonthCalendar as T } from "./theme/components/month-calendar.js";
+import { MuiMenu as E } from "./theme/components/menu.js";
+import { MuiMenuItem as D } from "./theme/components/menu-item.js";
+import { MuiList as O } from "./theme/components/list.js";
+import { MuiListSubheader as k } from "./theme/components/list-subheader.js";
+import { MuiListItemButton as A } from "./theme/components/list-item-button.js";
+import { MuiListItem as j } from "./theme/components/list-item.js";
+import { MuiListItemText as M } from "./theme/components/list-item-text.js";
+import { MuiListItemIcon as N } from "./theme/components/list-item-icon.js";
+import { MuiLink as P } from "./theme/components/link.js";
+import { MuiLinearProgress as F } from "./theme/components/linear-progress.js";
+import { MuiInputBase as I } from "./theme/components/input-base.js";
+import { MuiInputAdornment as L } from "./theme/components/input-adornment.js";
+import { MuiIcon as R } from "./theme/components/icon.js";
+import { MuiIconButton as z } from "./theme/components/icon-button.js";
+import { MuiFormLabel as B } from "./theme/components/form-label.js";
+import { MuiFormControl as te } from "./theme/components/form-control.js";
+import { MuiDrawer as V } from "./theme/components/drawer.js";
+import { MuiDialog as H } from "./theme/components/dialog.js";
+import { MuiDialogTitle as U } from "./theme/components/dialog-title.js";
+import { MuiDialogContent as W } from "./theme/components/dialog-content.js";
+import { MuiDialogActions as G } from "./theme/components/dialog-actions.js";
+import { MuiDayCalendar as K } from "./theme/components/day-calendar.js";
+import { MuiDateCalendar as q } from "./theme/components/date-calendar.js";
+import { MuiCssBaseline as J } from "./theme/components/css-baseline.js";
+import { MuiContainer as Y } from "./theme/components/container.js";
+import { MuiAccordion as X } from "./theme/components/accordion.js";
+import { MuiAccordionDetails as Z } from "./theme/components/accordion-details.js";
+import { MuiAccordionSummary as Q } from "./theme/components/accordion-summary.js";
+import { MuiAlert as ne } from "./theme/components/alert.js";
+import { MuiAppBar as re } from "./theme/components/app-bar.js";
+import { MuiAutocomplete as ie } from "./theme/components/autocomplete.js";
+import { MuiAvatar as ae } from "./theme/components/avatar.js";
+import { MuiBackdrop as oe } from "./theme/components/backdrop.js";
+import { MuiButton as se } from "./theme/components/button.js";
+import { MuiButtonBase as ce } from "./theme/components/button-base.js";
+import { MuiCard as le } from "./theme/components/card.js";
+import { MuiCardActions as ue } from "./theme/components/card-actions.js";
+import { MuiCardContent as de } from "./theme/components/card-content.js";
+import { MuiCardHeader as fe } from "./theme/components/card-header.js";
+import { MuiCheckbox as pe } from "./theme/components/checkbox.js";
+import { MuiChip as me } from "./theme/components/chip.js";
+//#region \0rolldown/runtime.js
+var $ = Object.defineProperty, he = /* @__PURE__ */ ((e, t) => {
+	let n = {};
+	for (var r in e) $(n, r, {
+		get: e[r],
+		enumerable: !0
+	});
+	return t || $(n, Symbol.toStringTag, { value: "Module" }), n;
+})({
+	MuiAccordion: () => X,
+	MuiAccordionDetails: () => Z,
+	MuiAccordionSummary: () => Q,
+	MuiAlert: () => ne,
+	MuiAppBar: () => re,
+	MuiAutocomplete: () => ie,
+	MuiAvatar: () => ae,
+	MuiBackdrop: () => oe,
+	MuiButton: () => se,
+	MuiButtonBase: () => ce,
+	MuiCard: () => le,
+	MuiCardActions: () => ue,
+	MuiCardContent: () => de,
+	MuiCardHeader: () => fe,
+	MuiCheckbox: () => pe,
+	MuiChip: () => me,
+	MuiContainer: () => Y,
+	MuiCssBaseline: () => J,
+	MuiDateCalendar: () => q,
+	MuiDayCalendar: () => K,
+	MuiDialog: () => H,
+	MuiDialogActions: () => G,
+	MuiDialogContent: () => W,
+	MuiDialogTitle: () => U,
+	MuiDrawer: () => V,
+	MuiFormControl: () => te,
+	MuiFormLabel: () => B,
+	MuiIcon: () => R,
+	MuiIconButton: () => z,
+	MuiInputAdornment: () => L,
+	MuiInputBase: () => I,
+	MuiLinearProgress: () => F,
+	MuiLink: () => P,
+	MuiList: () => O,
+	MuiListItem: () => j,
+	MuiListItemButton: () => A,
+	MuiListItemIcon: () => N,
+	MuiListItemText: () => M,
+	MuiListSubheader: () => k,
+	MuiMenu: () => E,
+	MuiMenuItem: () => D,
+	MuiMonthCalendar: () => T,
+	MuiMultiSectionDigitalClockSection: () => w,
+	MuiOutlinedInput: () => C,
+	MuiPagination: () => x,
+	MuiPaginationItem: () => S,
+	MuiPaper: () => b,
+	MuiPickerDay: () => y,
+	MuiPickersArrowSwitcher: () => v,
+	MuiPickersCalendarHeader: () => _,
+	MuiPopover: () => g,
+	MuiRating: () => h,
+	MuiSelect: () => m,
+	MuiSkeleton: () => p,
+	MuiSlider: () => f,
+	MuiStepConnector: () => d,
+	MuiStepIcon: () => u,
+	MuiStepLabel: () => l,
+	MuiSvgIcon: () => c,
+	MuiSwitch: () => s,
+	MuiTab: () => o,
+	MuiTableCell: () => a,
+	MuiTablePagination: () => ee,
+	MuiTabs: () => i,
+	MuiToggleButton: () => n,
+	MuiToggleButtonGroup: () => r,
+	MuiTooltip: () => t,
+	MuiYearCalendar: () => e
+});
+//#endregion
+export { he as t };

package/dist/{gradients-DSnBONEQ.js → gradients-CUC4WH9i.js}

@@ -1,4 +1,4 @@
-import { n as e, o as t, r as n, s as r } from "./colors-CNjL5fhq.js";
+import { n as e, o as t, r as n, s as r } from "./colors-DscJqo7m.js";
 //#region ../core/dist/alpha.js
 var i = {
 	0: "rgba(0,0,0,0)",

package/dist/main.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./palettes-CJLuEy1m.js";
+import { n as e, r as t, t as n } from "./palettes-B1trNROL.js";
 export { e as PALETTE_OPTIONS, t as VARIANTS, n as paletteThemeOptions };

package/dist/palettes/index.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../palettes-CJLuEy1m.js";
+import { n as e, r as t, t as n } from "../palettes-B1trNROL.js";
 export { e as PALETTE_OPTIONS, t as VARIANTS, n as paletteThemeOptions };

package/dist/{palettes-CJLuEy1m.js → palettes-B1trNROL.js}

@@ -1,5 +1,5 @@
-import { g as e, h as t } from "./colors-CNjL5fhq.js";
-import { t as n } from "./gradients-DSnBONEQ.js";
+import { g as e, h as t } from "./colors-DscJqo7m.js";
+import { t as n } from "./gradients-CUC4WH9i.js";
 import { alpha as r } from "@mui/material/styles";
 //#region ../core/dist/palettes/aurora.js
 var i = {

package/dist/s-brand-logo/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-brand-logo-CErW9Slg.js";
+import { t as e } from "../s-brand-logo-Gi1MKnv9.js";
 export { e as SBrandLogo, e as default };

package/dist/s-brand-logo/s-brand-logo.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-brand-logo-CErW9Slg.js";
+import { t as e } from "../s-brand-logo-Gi1MKnv9.js";
 export { e as SBrandLogo, e as default };

package/dist/s-chat-message/s-chat-message.js

@@ -1,4 +1,4 @@
-import { n as e, r as t } from "../utils-CMeAWSRO.js";
+import { n as e, r as t } from "../utils-CXRJYVCd.js";
 import { toSxArray as n } from "../utils/sx.js";
 import { SLazyImage as r } from "../s-lazy-image/s-lazy-image.js";
 import { SIconButton as i } from "../s-icon-button/s-icon-button.js";

package/dist/s-comment-message/s-comment-message.js

@@ -1,4 +1,4 @@
-import { i as e } from "../utils-CMeAWSRO.js";
+import { i as e } from "../utils-CXRJYVCd.js";
 import { toSxArray as t } from "../utils/sx.js";
 import { SSkeleton as n } from "../s-skeleton/s-skeleton.js";
 import { SAvatar as r } from "../s-avatar/s-avatar.js";

package/dist/s-file-dropzone/s-file-dropzone.js

@@ -1,4 +1,4 @@
-import { t as e } from "../utils-CMeAWSRO.js";
+import { t as e } from "../utils-CXRJYVCd.js";
 import { toSxArray as t } from "../utils/sx.js";
 import { SForm as n } from "../s-form/s-form.js";
 import { SFileIcon as ee } from "../s-file-icon/s-file-icon.js";

package/dist/s-icon-button/index.d.ts

@@ -1,3 +1,3 @@
 export { default, default as SIconButton } from './s-icon-button';
-export type { SIconButtonOwnerState, SIconButtonProps, SIconButtonSlotProps, SIconButtonSlots, SIconButtonVariant, } from './s-icon-button';
+export type { SIconButtonAccessibleNameProps, SIconButtonBaseProps, SIconButtonOwnerState, SIconButtonProps, SIconButtonSlotProps, SIconButtonSlots, SIconButtonVariant, } from './s-icon-button';
 export type {} from '../theme/component-augmentation';

package/dist/s-icon-button/s-icon-button.d.ts

@@ -17,20 +17,48 @@ export interface SIconButtonSlotProps {
     /** Props or an owner-state callback for the tooltip slot. */
     tooltip?: OwnerStateSlotProps<Omit<TooltipProps, 'children' | 'title'>>;
 }
+/**
+ * An icon carries no text, so every button needs a name: either an explicit
+ * `aria-label` / `aria-labelledby`, or a string `tooltip` the button falls back to.
+ */
+export type SIconButtonAccessibleNameProps = {
+    'aria-label': string;
+    'aria-labelledby'?: string;
+    tooltip?: React.ReactNode;
+} | {
+    'aria-label'?: string;
+    'aria-labelledby': string;
+    tooltip?: React.ReactNode;
+} | {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    tooltip: string;
+};
 /**
  * MUI IconButton with an optional tooltip slot. Setting `href` makes the
  * underlying ButtonBase render an anchor, so icon-only links keep the button
  * hit target and hover state.
  */
-export interface SIconButtonProps extends Omit<IconButtonProps, 'component'>, Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'> {
+export interface SIconButtonBaseProps extends Omit<IconButtonProps, 'aria-label' | 'aria-labelledby' | 'component'>, Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'> {
     /** Components used for internal slots. */
     slots?: SIconButtonSlots;
     /** Props or owner-state callbacks for internal slots. */
     slotProps?: SIconButtonSlotProps;
-    /** Optional tooltip title. */
-    tooltip?: React.ReactNode;
     /** Visual treatment for icon buttons displayed over another surface. */
     variant?: SIconButtonVariant;
 }
-export declare const SIconButton: React.ForwardRefExoticComponent<Omit<SIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type SIconButtonProps = SIconButtonBaseProps & SIconButtonAccessibleNameProps;
+export declare const SIconButton: React.ForwardRefExoticComponent<(Omit<SIconButtonBaseProps & {
+    'aria-label': string;
+    'aria-labelledby'?: string;
+    tooltip?: React.ReactNode;
+}, "ref"> | Omit<SIconButtonBaseProps & {
+    'aria-label'?: string;
+    'aria-labelledby': string;
+    tooltip?: React.ReactNode;
+}, "ref"> | Omit<SIconButtonBaseProps & {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    tooltip: string;
+}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
 export default SIconButton;

package/dist/s-icon-button/s-icon-button.js

@@ -1,11 +1,12 @@
-import { styled as e, useThemeProps as t } from "@mui/material/styles";
-import n from "@mui/material/IconButton";
-import * as r from "react";
-import { jsx as i } from "react/jsx-runtime";
-import a from "@mui/utils/appendOwnerState";
-import o from "@mui/material/Tooltip";
+import { resolveOwnerStateSlotProps as e } from "../utils/slots.js";
+import { styled as t, useThemeProps as n } from "@mui/material/styles";
+import r from "@mui/material/IconButton";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+import o from "@mui/utils/appendOwnerState";
+import s from "@mui/material/Tooltip";
 //#region lib/s-icon-button/s-icon-button.tsx
-var s = e(n, {
+var c = t(r, {
 	name: "SIconButton",
 	slot: "Root"
 })(({ theme: e, ownerState: t }) => {
@@ -16,32 +17,30 @@ var s = e(n, {
 		backgroundColor: n.blackAlpha.medium,
 		boxShadow: e.shadows[1],
 		color: n.common.white,
+		"&:active": { backgroundColor: n.blackAlpha.dark },
 		"@media (hover: hover) and (pointer: fine)": { "&:hover": { backgroundColor: n.blackAlpha.dark } }
 	};
-});
-function c(e, t) {
-	return typeof e == "function" ? e(t) : e;
-}
-var l = r.forwardRef(function(e, n) {
-	let r = t({
-		props: e,
+}), l = i.forwardRef(function(t, r) {
+	let i = n({
+		props: t,
 		name: "SIconButton"
-	}), { disabled: l = !1, slotProps: u, slots: d, tooltip: f, variant: p, ...m } = r, h = {
-		...r,
-		disabled: l,
-		hasTooltip: f != null,
-		variant: p
-	}, g = d?.tooltip ?? o, _ = a(d?.tooltip, c(u?.tooltip, h) ?? {}, h), v = m["aria-label"] ?? (typeof f == "string" ? f : void 0), y = /* @__PURE__ */ i(s, {
-		...m,
-		"aria-label": v,
+	}), { disabled: l = !1, loading: u, slotProps: d, slots: f, tooltip: p, variant: m, ...h } = i, g = l || u === !0, _ = {
+		...i,
+		disabled: g,
+		hasTooltip: p != null,
+		variant: m
+	}, v = f?.tooltip ?? s, y = o(f?.tooltip, e(d?.tooltip, _) ?? {}, _), b = h["aria-label"] ?? (typeof p == "string" ? p : void 0), x = /* @__PURE__ */ a(c, {
+		...h,
+		"aria-label": b,
 		disabled: l,
-		ownerState: h,
-		ref: n
+		loading: u,
+		ownerState: _,
+		ref: r
 	});
-	return f == null ? y : /* @__PURE__ */ i(g, {
-		..._,
-		title: f,
-		children: l ? /* @__PURE__ */ i("span", { children: y }) : y
+	return p == null ? x : /* @__PURE__ */ a(v, {
+		...y,
+		title: p,
+		children: g ? /* @__PURE__ */ a("span", { children: x }) : x
 	});
 });
 l.displayName = "SIconButton";

package/dist/s-image-viewer/image-viewer-thumbnail-dock.js

@@ -1,4 +1,4 @@
-import { r as e } from "../theme-primitives-CRfnMsNy.js";
+import { r as e } from "../theme-primitives-DXekeATD.js";
 import { DefaultMediaItem as t } from "./default-media-item.js";
 import "react";
 import { jsx as n } from "react/jsx-runtime";

package/dist/s-list-action-item/s-list-action-item.js

@@ -70,7 +70,8 @@ var g = 44, _ = 36, v = d(l, {
 	display: "block",
 	minWidth: 0,
 	overflow: "hidden",
-	textOverflow: "ellipsis"
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
 }), S = d(u, {
 	name: "SListActionItem",
 	slot: "Description",
@@ -80,7 +81,8 @@ var g = 44, _ = 36, v = d(l, {
 	display: "block",
 	minWidth: 0,
 	overflow: "hidden",
-	textOverflow: "ellipsis"
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
 })), C = d(c, {
 	name: "SListActionItem",
 	slot: "Trailing",

package/dist/s-number-range/s-number-range.js

@@ -40,6 +40,7 @@ var p = (e, t, n) => Math.min(Math.max(e, t), n), m = (e, t, n) => {
 	color: (e.vars ?? e).palette.text.primary,
 	fontWeight: 600,
 	margin: 0,
+	marginBlockEnd: e.spacing(1),
 	padding: 0
 })), oe = c(s, {
 	name: "SNumberRange",
@@ -58,7 +59,7 @@ var p = (e, t, n) => Math.min(Math.max(e, t), n), m = (e, t, n) => {
 		[`& .${f.track}`]: { border: 0 },
 		[`& .${f.thumb}`]: {
 			border: `2px solid ${(e.vars ?? e).palette.background.paper}`,
-			boxShadow: `0 0 0 1px ${(e.vars ?? e).palette[t.color].main}`,
+			boxShadow: "0 0 0 1px currentColor",
 			height: n ? 14 : 18,
 			width: n ? 14 : 18,
 			[`&:hover, &.${f.focusVisible}`]: { boxShadow: `0 0 0 6px ${(e.vars ?? e).palette.action.selected}` }

package/dist/s-product-gallery/index.d.ts

@@ -1,3 +1,3 @@
 export { default, default as SProductGallery } from './s-product-gallery';
-export type { SProductGalleryCarouselSlotProps, SProductGalleryImageItem, SProductGalleryItem, SProductGalleryOwnerState, SProductGalleryProps, SProductGallerySlotProps, SProductGallerySlots, SProductGalleryThumbnailOwnerState, SProductGalleryVideoItem, } from './s-product-gallery';
+export type { SProductGalleryImageItem, SProductGalleryItem, SProductGalleryOwnerState, SProductGalleryProps, SProductGallerySlotProps, SProductGallerySlots, SProductGalleryThumbnailOwnerState, SProductGalleryThumbnailsPosition, SProductGalleryVariant, SProductGalleryVideoItem, } from './s-product-gallery';
 export type {} from '../theme/component-augmentation';

package/dist/s-product-gallery/s-product-gallery.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps, ButtonBaseProps } from '@mui/material';
-import { SCarouselProps } from '../s-carousel';
+import { SIconButtonProps } from '../s-icon-button';
 import { SLazyImageProps } from '../s-lazy-image';
 import { OwnerStateSlotProps } from '../utils/slots';
 import * as React from 'react';
@@ -35,6 +35,10 @@ export type SProductGalleryVideoItem = SProductGalleryVideoItemBase & ({
 });
 /** A single image or video in the product gallery. */
 export type SProductGalleryItem = SProductGalleryImageItem | SProductGalleryVideoItem;
+/** Visual density preset for the product gallery. */
+export type SProductGalleryVariant = 'standard' | 'compact';
+/** Placement of the thumbnail rail relative to the stage. */
+export type SProductGalleryThumbnailsPosition = 'bottom' | 'start' | 'end';
 /** Props for <SProductGallery>. */
 export interface SProductGalleryProps extends Omit<BoxProps, 'children' | 'component' | 'defaultValue' | 'onChange'> {
     /**
@@ -44,6 +48,8 @@ export interface SProductGalleryProps extends Omit<BoxProps, 'children' | 'compo
     aspectRatio?: number | string;
     /** Initially selected item id, for uncontrolled usage. Defaults to the first item. */
     defaultValue?: string;
+    /** Accessible text shown when there are no items to display. */
+    emptyText?: string;
     /** Returns the accessible name for a thumbnail button. */
     getThumbnailAriaLabel?: (item: SProductGalleryItem, index: number, total: number) => string;
     /** Media shown in the stage and the thumbnail rail. */
@@ -56,10 +62,12 @@ export interface SProductGalleryProps extends Omit<BoxProps, 'children' | 'compo
     slotProps?: SProductGallerySlotProps;
     /** Accessible name for the thumbnail rail. */
     thumbnailsLabel?: string;
-    /** Thumbnails visible at once on wide viewports. Halves below the `sm` breakpoint. */
-    thumbnailsToShow?: number;
+    /** Placement of the thumbnail rail. When set to 'start' or 'end', collapses to bottom on mobile. */
+    thumbnailsPosition?: SProductGalleryThumbnailsPosition;
     /** Selected item id, for controlled usage. */
     value?: string;
+    /** Visual preset for density. */
+    variant?: SProductGalleryVariant;
 }
 export interface SProductGalleryOwnerState extends SProductGalleryProps {
     /** Resolved fixed stage aspect ratio. */
@@ -68,9 +76,11 @@ export interface SProductGalleryOwnerState extends SProductGalleryProps {
     activeItem: SProductGalleryItem | null;
     /** Index of the active item, or `-1` when there is nothing to show. */
     activeIndex: number;
+    emptyText: string;
     thumbnailsLabel: string;
-    thumbnailsToShow: number;
+    thumbnailsPosition: SProductGalleryThumbnailsPosition;
     value: string;
+    variant: SProductGalleryVariant;
 }
 /** Owner state handed to the `thumbnail` slot. */
 export interface SProductGalleryThumbnailOwnerState extends SProductGalleryOwnerState {
@@ -79,12 +89,12 @@ export interface SProductGalleryThumbnailOwnerState extends SProductGalleryOwner
     selected: boolean;
 }
 export interface SProductGallerySlots {
-    /** The embla-backed thumbnail carousel. */
-    carousel?: React.ElementType;
-    /** Shared media wrapper inside the stage. */
-    media?: React.ElementType;
+    /** Placeholder surface when items list is empty. */
+    empty?: React.ElementType;
     /** Stage image renderer. */
     image?: React.ElementType;
+    /** Shared media wrapper inside the stage. */
+    media?: React.ElementType;
     root?: React.ElementType;
     /** Aspect-ratio box holding the active media. */
     stage?: React.ElementType;
@@ -94,18 +104,25 @@ export interface SProductGallerySlots {
     thumbnails?: React.ElementType;
     /** Stage video renderer. */
     video?: React.ElementType;
+    /** Wrapper around video element and play button. */
+    videoFrame?: React.ElementType;
+    /** Overlay play/pause indicator badge on video thumbnails. */
+    videoIndicator?: React.ElementType;
+    /** Center play button for stage video. */
+    videoPlayButton?: React.ElementType;
 }
-export type SProductGalleryCarouselSlotProps = Omit<SCarouselProps, 'apiRef' | 'autoplay' | 'autoplaySpeed' | 'centerMode' | 'centerPadding' | 'children' | 'infinite' | 'responsive' | 'slidesToShow' | 'spaceBetween'>;
 export interface SProductGallerySlotProps {
-    carousel?: OwnerStateSlotProps<SProductGalleryCarouselSlotProps, SProductGalleryOwnerState>;
+    empty?: OwnerStateSlotProps<Omit<BoxProps, 'children'>, SProductGalleryOwnerState>;
     image?: OwnerStateSlotProps<Omit<SLazyImageProps, 'alt' | 'src'>, SProductGalleryOwnerState>;
     media?: OwnerStateSlotProps<Omit<BoxProps, 'children'>, SProductGalleryOwnerState>;
     root?: OwnerStateSlotProps<Omit<BoxProps, 'children' | 'component'>, SProductGalleryOwnerState>;
     stage?: OwnerStateSlotProps<Omit<BoxProps, 'children'>, SProductGalleryOwnerState>;
     thumbnail?: OwnerStateSlotProps<Omit<ButtonBaseProps, 'children'>, SProductGalleryThumbnailOwnerState>;
     thumbnails?: OwnerStateSlotProps<Omit<BoxProps, 'children'>, SProductGalleryOwnerState>;
-    /** Native video props. `children` can provide caption or subtitle `<track>` elements. */
     video?: OwnerStateSlotProps<Omit<React.ComponentPropsWithRef<'video'>, 'poster' | 'src'>, SProductGalleryOwnerState>;
+    videoFrame?: OwnerStateSlotProps<Omit<BoxProps, 'children'>, SProductGalleryOwnerState>;
+    videoIndicator?: OwnerStateSlotProps<Omit<BoxProps, 'children'>, SProductGalleryOwnerState>;
+    videoPlayButton?: OwnerStateSlotProps<Omit<SIconButtonProps, 'children'>, SProductGalleryOwnerState>;
 }
 /**
  * Product media viewer: one stage plus a scrollable thumbnail rail, with both