@videojs/react 10.0.0-rc.2 → 10.0.0-rc.3

package/dist/dev/internal/skins/minimal-audio/components/menus/volume-popover.js

@@ -0,0 +1,103 @@
+import { VolumePopoverPopup } from "../../../../../ui/volume-popover/popup.js";
+import { VolumePopoverRoot } from "../../../../../ui/volume-popover/root.js";
+import { VolumePopoverTrigger } from "../../../../../ui/volume-popover/trigger.js";
+import { ButtonTooltip } from "../../../shared/components/buttons/button-tooltip.js";
+import { VolumeSlider } from "../../../shared/components/sliders/volume-slider.js";
+import { MuteButton } from "../buttons/mute-button.js";
+import { c } from "react-compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@videojs/utils/style";
+//#region src/internal/skins/minimal-audio/components/menus/volume-popover.tsx
+function VolumePopover(t0) {
+	const $ = c(23);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	let t2;
+	let t3;
+	let t4;
+	if ($[2] !== t1) {
+		({className, showTooltip: t2, side: t3, orientation: t4, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		className = $[3];
+		props = $[4];
+		t2 = $[5];
+		t3 = $[6];
+		t4 = $[7];
+	}
+	const showTooltip = t2 === void 0 ? false : t2;
+	const side = t3 === void 0 ? "top" : t3;
+	const orientation = t4 === void 0 ? "vertical" : t4;
+	const t5 = !showTooltip;
+	let t6;
+	if ($[8] !== className) {
+		t6 = cn(className);
+		$[8] = className;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== t6) {
+		t7 = /* @__PURE__ */ jsx(VolumePopoverTrigger, { render: /* @__PURE__ */ jsx(MuteButton, { className: t6 }) });
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t5 || $[13] !== t7) {
+		t8 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			delay: 0,
+			disabled: t5,
+			sticky: true,
+			side: "top",
+			children: t7
+		});
+		$[12] = t5;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = cn("media-popup", "media-popup-safe-area", "media-popup-transition", "media-popup-surface", "media-volume-popover");
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== orientation) {
+		t10 = /* @__PURE__ */ jsx(VolumePopoverPopup, {
+			className: t9,
+			children: /* @__PURE__ */ jsx(VolumeSlider, { orientation })
+		});
+		$[16] = orientation;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== props || $[19] !== side || $[20] !== t10 || $[21] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(VolumePopoverRoot, {
+			openOnHover: true,
+			delay: 200,
+			closeDelay: 100,
+			side,
+			...props,
+			children: [t8, t10]
+		});
+		$[18] = props;
+		$[19] = side;
+		$[20] = t10;
+		$[21] = t8;
+		$[22] = t11;
+	} else t11 = $[22];
+	return t11;
+}
+//#endregion
+export { VolumePopover };
+
+//# sourceMappingURL=volume-popover.js.map

package/dist/dev/internal/skins/minimal-audio/components/menus/volume-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-popover.js","names":["{\n  className,\n  showTooltip = false,\n  side = 'top',\n  orientation = 'vertical',\n  ...props\n}: VolumePopoverProps = {}","showTooltip = false","side = 'top'","orientation = 'vertical'","cn(className)","<VolumePopoverPrimitive.Trigger render={<MuteButton className={cn(className)} />} />","VolumePopoverPrimitive.Trigger","<ButtonTooltip delay={0} disabled={!showTooltip} sticky side=\"top\">\n        <VolumePopoverPrimitive.Trigger render={<MuteButton className={cn(className)} />} />\n      </ButtonTooltip>","!showTooltip","cn(\n          'media-popup',\n          'media-popup-safe-area',\n          'media-popup-transition',\n          'media-popup-surface',\n          'media-volume-popover'\n        )","<VolumePopoverPrimitive.Popup\n        className={cn(\n          'media-popup',\n          'media-popup-safe-area',\n          'media-popup-transition',\n          'media-popup-surface',\n          'media-volume-popover'\n        )}\n      >\n        <VolumeSlider orientation={orientation} />\n      </VolumePopoverPrimitive.Popup>","VolumePopoverPrimitive.Popup","<VolumePopoverPrimitive.Root openOnHover delay={200} closeDelay={100} side={side} {...props}>\n      <ButtonTooltip delay={0} disabled={!showTooltip} sticky side=\"top\">\n        <VolumePopoverPrimitive.Trigger render={<MuteButton className={cn(className)} />} />\n      </ButtonTooltip>\n      <VolumePopoverPrimitive.Popup\n        className={cn(\n          'media-popup',\n          'media-popup-safe-area',\n          'media-popup-transition',\n          'media-popup-surface',\n          'media-volume-popover'\n        )}\n      >\n        <VolumeSlider orientation={orientation} />\n      </VolumePopoverPrimitive.Popup>\n    </VolumePopoverPrimitive.Root>","VolumePopoverPrimitive.Root"],"sources":["../../../../../../../src/internal/skins/minimal-audio/components/menus/volume-popover.tsx"],"sourcesContent":["/** @jsxImportSource react */\nimport type { VolumeSliderProps as CoreVolumeSliderProps } from '@videojs/core';\nimport { cn } from '@videojs/utils/style';\n\nimport { VolumePopover as VolumePopoverPrimitive } from '../../../../skin-primitives';\nimport type { ClassValue } from '../../../../skin-primitives';\nimport { ButtonTooltip } from '../../../shared/components/buttons/button-tooltip';\nimport { VolumeSlider } from '../../../shared/components/sliders/volume-slider';\nimport { MuteButton } from '../buttons/mute-button';\n\nexport interface VolumePopoverProps extends Omit<VolumePopoverPrimitive.RootProps, 'children'> {\n  className?: ClassValue;\n  orientation?: CoreVolumeSliderProps['orientation'];\n  showTooltip?: boolean;\n}\n\nexport function VolumePopover({\n  className,\n  showTooltip = false,\n  side = 'top',\n  orientation = 'vertical',\n  ...props\n}: VolumePopoverProps = {}) {\n  return (\n    <VolumePopoverPrimitive.Root openOnHover delay={200} closeDelay={100} side={side} {...props}>\n      <ButtonTooltip delay={0} disabled={!showTooltip} sticky side=\"top\">\n        <VolumePopoverPrimitive.Trigger render={<MuteButton className={cn(className)} />} />\n      </ButtonTooltip>\n      <VolumePopoverPrimitive.Popup\n        className={cn(\n          'media-popup',\n          'media-popup-safe-area',\n          'media-popup-transition',\n          'media-popup-surface',\n          'media-volume-popover'\n        )}\n      >\n        <VolumeSlider orientation={orientation} />\n      </VolumePopoverPrimitive.Popup>\n    </VolumePopoverPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,cAAA,IAMY;;CANEA,IAAAA;;EAMN,KAAA,OAAA,KAAA,IAAA,CAAC,IANKA;;;;CAC5B,IAAA;CAIG,IAAA;CAHHC,IAAAA;CACAC,IAAAA;CACAC,IAAAA;CAJ4BH,IAAAA,EAAAA,OAAAA,IAAAA;EAC5B,CAAA,CAAA,WACA,aAAA,IACA,MAAA,IACA,aAAA,OACA,SAL4BA;;;;;;;;;;;;;;CAE5B,MAAA,cAAA,OAAA,KAAA,IAAc,QAAdC;CACA,MAAA,OAAA,OAAA,KAAA,IAAO,QAAPC;CACA,MAAA,cAAA,OAAA,KAAA,IAAc,aAAdC;CAKuC,MAAA,KAAA,CAAC;CAC6BC,IAAAA;CAAG,IAAA,EAAA,OAAA,WAAA;EAAH,KAAA,GAAG,SAAS;EAAT,EAAA,KAAA;;;CAAlEC,IAAAA;CAA+DD,IAAAA,EAAAA,QAAAA,IAAAA;EAA/D,KAAA,oBAACE,sBAAD,EAAgC,QAAQ,oBAAC,YAAD,EAAY,WAAWF,GAAgB,CAAA,EAAI,CAAA;EAApBA,EAAAA,MAAAA;;;CADjEG,IAAAA;CAAmCC,IAAAA,EAAAA,QAAAA,MAAAA,EAAAA,QACjCH,IAAAA;EADF,KAAA,oBAAC,eAAD;GAAe,OAAO;GAAG,UAAUG;GAAc,QAAA;GAAO,MAAK;GAC3DH,UAAAA;EACa,CAAA;EAFoBG,EAAAA,MAAAA;EACjCH,EAAAA,MAAAA;;;CAGWI,IAAAA;;EACT,KAAA,GAAA,eACA,yBACA,0BACA,uBACA,sBACF;;;CAPFC,IAAAA;CAS6B,IAAA,EAAA,QAAA,aAAA;EAT7B,MAAA,oBAACC,oBAAD;GACE,WAAWF;GAQX,UAAA,oBAAC,cAAD,EAA2B,YAAc,CAAA;EACb,CAAA;EADD,EAAA,MAAA;;;CAb/BG,IAAAA;CAAsF,IAAA,EAAA,QAAA,SAAA,EAAA,QAAV,QAAA,EAAA,QAI1EF,OAAAA,EAAAA,QAHAH,IAAAA;EADF,MAAA,qBAACM,mBAAD;GAA6B,aAAA;GAAY,OAAO;GAAK,YAAY;GAAW;GAAM,GAAI;GAAtF,UAAA,CACEN,IAGAG,GAW2B;;EAfyD,EAAA,MAAA;EAAV,EAAA,MAAA;EAI1EA,EAAAA,MAAAA;EAHAH,EAAAA,MAAAA;;;CAFJ,OACEK;AAiBJ"}

package/dist/dev/internal/skins/minimal-audio/layout/controls.js

@@ -0,0 +1,106 @@
+import { ControlsContent } from "../../../../ui/controls/content.js";
+import { ControlsGroup } from "../../../../ui/controls/group.js";
+import { ControlsRoot } from "../../../../ui/controls/root.js";
+import { Group } from "../../../../ui/time/group.js";
+import { Separator } from "../../../../ui/time/separator.js";
+import { Value } from "../../../../ui/time/value.js";
+import { TooltipProvider } from "../../../../ui/tooltip/provider.js";
+import { ButtonTooltip } from "../../shared/components/buttons/button-tooltip.js";
+import { AudioTimeSlider } from "../../shared/skins/shared/audio/sliders/time-slider.js";
+import { SeekButton } from "../components/buttons/seek-button.js";
+import { VolumePopover } from "../components/menus/volume-popover.js";
+import { AudioPlayButton } from "../skins/shared/audio/buttons/play-button.js";
+import { AudioSettingsMenu } from "../skins/shared/audio/menus/settings-menu.js";
+import { c } from "react-compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@videojs/utils/style";
+//#region src/internal/skins/minimal-audio/layout/controls.tsx
+/** @jsxImportSource react */
+function MinimalAudioControls() {
+	const $ = c(6);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = cn("audio-controls", "audio-controls-content");
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(AudioPlayButton, {});
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			boundary: "viewport",
+			side: "top",
+			children: /* @__PURE__ */ jsx(SeekButton, { seconds: -10 })
+		});
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsxs(ControlsGroup, {
+			className: "audio-controls-start",
+			children: [
+				t1,
+				t2,
+				/* @__PURE__ */ jsx(ButtonTooltip, {
+					boundary: "viewport",
+					side: "top",
+					children: /* @__PURE__ */ jsx(SeekButton, { seconds: 10 })
+				})
+			]
+		});
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs(ControlsGroup, {
+			className: "audio-time-slider-group",
+			children: [/* @__PURE__ */ jsxs(Group, {
+				className: "media-time-group",
+				children: [
+					/* @__PURE__ */ jsx(Value, {
+						className: cn("media-time-toggle", "media-time-current-value"),
+						type: "current",
+						toggle: true
+					}),
+					/* @__PURE__ */ jsx(Separator, { className: "media-time-separator" }),
+					/* @__PURE__ */ jsx(Value, {
+						className: "media-time-duration-value",
+						type: "duration"
+					})
+				]
+			}), /* @__PURE__ */ jsx(AudioTimeSlider, {})]
+		});
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(ControlsRoot, {
+			visibility: "always",
+			children: /* @__PURE__ */ jsx(ControlsContent, {
+				className: t0,
+				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+					t3,
+					t4,
+					/* @__PURE__ */ jsxs(ControlsGroup, {
+						className: "audio-controls-end",
+						children: [/* @__PURE__ */ jsx(VolumePopover, {
+							boundary: "viewport",
+							showTooltip: true,
+							side: "left",
+							orientation: "horizontal"
+						}), /* @__PURE__ */ jsx(AudioSettingsMenu, {})]
+					})
+				] })
+			})
+		});
+		$[5] = t5;
+	} else t5 = $[5];
+	return t5;
+}
+//#endregion
+export { MinimalAudioControls };
+
+//# sourceMappingURL=controls.js.map

package/dist/dev/internal/skins/minimal-audio/layout/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","names":["cn('audio-controls', 'audio-controls-content')","<AudioPlayButton />","<ButtonTooltip boundary=\"viewport\" side=\"top\">\n              <SeekButton seconds={-10} />\n            </ButtonTooltip>","<Controls.Group className={'audio-controls-start'}>\n            <AudioPlayButton />\n            <ButtonTooltip boundary=\"viewport\" side=\"top\">\n              <SeekButton seconds={-10} />\n            </ButtonTooltip>\n            <ButtonTooltip boundary=\"viewport\" side=\"top\">\n              <SeekButton seconds={10} />\n            </ButtonTooltip>\n          </Controls.Group>","Controls.Group","<Controls.Group className={'audio-time-slider-group'}>\n            <Time.Group className={'media-time-group'}>\n              <Time.Value className={cn('media-time-toggle', 'media-time-current-value')} type=\"current\" toggle />\n              <Time.Separator className={'media-time-separator'} />\n              <Time.Value className={'media-time-duration-value'} type=\"duration\" />\n            </Time.Group>\n            <AudioTimeSlider />\n          </Controls.Group>","Time.Group","Time.Value","Time.Separator","<Controls.Root visibility=\"always\">\n      <Controls.Content className={cn('audio-controls', 'audio-controls-content')}>\n        <Tooltip.Provider>\n          <Controls.Group className={'audio-controls-start'}>\n            <AudioPlayButton />\n            <ButtonTooltip boundary=\"viewport\" side=\"top\">\n              <SeekButton seconds={-10} />\n            </ButtonTooltip>\n            <ButtonTooltip boundary=\"viewport\" side=\"top\">\n              <SeekButton seconds={10} />\n            </ButtonTooltip>\n          </Controls.Group>\n\n          <Controls.Group className={'audio-time-slider-group'}>\n            <Time.Group className={'media-time-group'}>\n              <Time.Value className={cn('media-time-toggle', 'media-time-current-value')} type=\"current\" toggle />\n              <Time.Separator className={'media-time-separator'} />\n              <Time.Value className={'media-time-duration-value'} type=\"duration\" />\n            </Time.Group>\n            <AudioTimeSlider />\n          </Controls.Group>\n\n          <Controls.Group className={'audio-controls-end'}>\n            <VolumePopover boundary=\"viewport\" showTooltip side=\"left\" orientation=\"horizontal\" />\n            <AudioSettingsMenu />\n          </Controls.Group>\n        </Tooltip.Provider>\n      </Controls.Content>\n    </Controls.Root>","Controls.Root","Controls.Content","Tooltip.Provider"],"sources":["../../../../../../src/internal/skins/minimal-audio/layout/controls.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\n\nimport { Controls, Time, Tooltip } from '../../../skin-primitives';\nimport { ButtonTooltip } from '../../shared/components/buttons/button-tooltip';\nimport { AudioTimeSlider } from '../../shared/skins/shared/audio/sliders/time-slider';\nimport { SeekButton } from '../components/buttons/seek-button';\nimport { VolumePopover } from '../components/menus/volume-popover';\nimport { AudioPlayButton } from '../skins/shared/audio/buttons/play-button';\nimport { AudioSettingsMenu } from '../skins/shared/audio/menus/settings-menu';\n\nexport function MinimalAudioControls() {\n  return (\n    <Controls.Root visibility=\"always\">\n      <Controls.Content className={cn('audio-controls', 'audio-controls-content')}>\n        <Tooltip.Provider>\n          <Controls.Group className={'audio-controls-start'}>\n            <AudioPlayButton />\n            <ButtonTooltip boundary=\"viewport\" side=\"top\">\n              <SeekButton seconds={-10} />\n            </ButtonTooltip>\n            <ButtonTooltip boundary=\"viewport\" side=\"top\">\n              <SeekButton seconds={10} />\n            </ButtonTooltip>\n          </Controls.Group>\n\n          <Controls.Group className={'audio-time-slider-group'}>\n            <Time.Group className={'media-time-group'}>\n              <Time.Value className={cn('media-time-toggle', 'media-time-current-value')} type=\"current\" toggle />\n              <Time.Separator className={'media-time-separator'} />\n              <Time.Value className={'media-time-duration-value'} type=\"duration\" />\n            </Time.Group>\n            <AudioTimeSlider />\n          </Controls.Group>\n\n          <Controls.Group className={'audio-controls-end'}>\n            <VolumePopover boundary=\"viewport\" showTooltip side=\"left\" orientation=\"horizontal\" />\n            <AudioSettingsMenu />\n          </Controls.Group>\n        </Tooltip.Provider>\n      </Controls.Content>\n    </Controls.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAYA,SAAgB,uBAAuB;;CAGJA,IAAAA;;EAAG,KAAA,GAAA,kBAAkB,wBAAwB;;;CAGpEC,IAAAA;;EAAC,KAAA,oBAAA,iBAAD,CAAkB,CAAA;;;CAClBC,IAAAA;;EAAC,KAAA,oBAAA,eAAD;GAAe,UAAS;GAAW,MAAK;GACtC,UAAA,oBAAC,YAAD,EAAY,SAAS,IAAM,CAAA;EACd,CAAA;;;CAJjBC,IAAAA;;EAACC,KAAAA,qBAAAA,eAAD;GAAgB,WAAW;GAA3B,UAAA;IACEH;IACAC;IAGA,oBAAC,eAAD;KAAe,UAAS;KAAW,MAAK;KACtC,UAAA,oBAAC,YAAD,EAAY,SAAS,GAAK,CAAA;IACb,CAAA;GACD;;;;CAEhBG,IAAAA;;EAACD,KAAAA,qBAAAA,eAAD;GAAgB,WAAW;GAA3B,UAAA,CACE,qBAACE,OAAD;IAAY,WAAW;IAAvB,UAAA;KACE,oBAACC,OAAD;MAAY,WAAW,GAAG,qBAAqB,0BAA0B;MAAG,MAAK;MAAU,QAAA;KAAQ,CAAA;KACnG,oBAACC,WAAD,EAAgB,WAAW,uBAAyB,CAAA;KACpD,oBAACD,OAAD;MAAY,WAAW;MAA6B,MAAK;KAAY,CAAA;IAC3D;GACZ,CAAA,GAAA,oBAAC,iBAAD,CAAkB,CAAA,CACJ;;;;CApBtBE,IAAAA;;EAACC,KAAAA,oBAAAA,cAAD;GAAe,YAAW;GACxB,UAAA,oBAACC,iBAAD;IAAkB,WAAWX;IAC3B,UAAA,qBAACY,iBAAD,EAAA,UAAA;KACET;KAUAE;KASA,qBAACD,eAAD;MAAgB,WAAW;MAA3B,UAAA,CACE,oBAAC,eAAD;OAAe,UAAS;OAAW,aAAA;OAAY,MAAK;OAAO,aAAY;MAAc,CAAA,GACrF,oBAAC,mBAAD,CAAoB,CAAA,CACN;;IACA,EAAA,CAAA;GACF,CAAA;EACL,CAAA;;;CA7BjB,OACEK;AA8BJ"}

package/dist/dev/internal/skins/minimal-audio/skin.js

@@ -1,28 +1,83 @@
-import { StatusAnnouncer } from "../shared/components/feedback/status-announcer.js";
+import { StatusAnnouncer } from "../shared/components/behaviors/status-announcer.js";
 import { Container } from "../shared/components/layout/container.js";
-import { AudioErrorDialog } from "../shared/skins/shared/audio/error-dialog.js";
-import { PlaybackHotkeys } from "../shared/skins/shared/playback-hotkeys.js";
-import { MinimalAudioControls } from "./controls.js";
+import { AudioErrorDialog } from "../shared/skins/shared/audio/dialogs/error-dialog.js";
+import { PlaybackHotkeys } from "../shared/skins/shared/behaviors/playback-hotkeys.js";
+import { MinimalAudioControls } from "./layout/controls.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
 //#region src/internal/skins/minimal-audio/skin.tsx
 /** @jsxImportSource react */
-function MinimalAudioSkin({ children, className, ...props } = {}) {
-	return /* @__PURE__ */ jsxs(Container, {
-		className: cn("audio-skin", className),
-		"data-theme": "minimal",
-		"data-preset": "audio",
-		...props,
-		children: [
-			children,
-			/* @__PURE__ */ jsx(AudioErrorDialog, {}),
-			/* @__PURE__ */ jsx(MinimalAudioControls, {}),
-			/* @__PURE__ */ jsx(PlaybackHotkeys, {}),
-			/* @__PURE__ */ jsx(StatusAnnouncer, {})
-		]
-	});
+function AudioSkin(t0) {
+	const $ = c(16);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let children;
+	let className;
+	let props;
+	if ($[2] !== t1) {
+		({children, className, ...props} = t1);
+		$[2] = t1;
+		$[3] = children;
+		$[4] = className;
+		$[5] = props;
+	} else {
+		children = $[3];
+		className = $[4];
+		props = $[5];
+	}
+	let t2;
+	if ($[6] !== className) {
+		t2 = cn("audio-skin", className);
+		$[6] = className;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(AudioErrorDialog, {});
+		t4 = /* @__PURE__ */ jsx(MinimalAudioControls, {});
+		t5 = /* @__PURE__ */ jsx(PlaybackHotkeys, {});
+		t6 = /* @__PURE__ */ jsx(StatusAnnouncer, {});
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+	} else {
+		t3 = $[8];
+		t4 = $[9];
+		t5 = $[10];
+		t6 = $[11];
+	}
+	let t7;
+	if ($[12] !== children || $[13] !== props || $[14] !== t2) {
+		t7 = /* @__PURE__ */ jsxs(Container, {
+			className: t2,
+			"data-theme": "minimal",
+			"data-preset": "audio",
+			...props,
+			children: [
+				children,
+				t3,
+				t4,
+				t5,
+				t6
+			]
+		});
+		$[12] = children;
+		$[13] = props;
+		$[14] = t2;
+		$[15] = t7;
+	} else t7 = $[15];
+	return t7;
 }
 //#endregion
-export { MinimalAudioSkin };
+export { AudioSkin };
 
 //# sourceMappingURL=skin.js.map

package/dist/dev/internal/skins/minimal-audio/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":[],"sources":["../../../../../src/internal/skins/minimal-audio/skin.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { StatusAnnouncer } from '../shared/components/feedback/status-announcer';\nimport { Container } from '../shared/components/layout/container';\nimport { AudioErrorDialog } from '../shared/skins/shared/audio/error-dialog';\nimport { PlaybackHotkeys } from '../shared/skins/shared/playback-hotkeys';\nimport { MinimalAudioControls } from './controls';\n\nexport interface MinimalAudioSkinProps extends Omit<NonNullable<ComponentProps<typeof Container>>, 'children'> {\n  children?: ReactNode;\n}\n\nexport function MinimalAudioSkin({ children, className, ...props }: MinimalAudioSkinProps = {}) {\n  return (\n    <Container className={cn('audio-skin', className)} data-theme=\"minimal\" data-preset=\"audio\" {...props}>\n      {children}\n      <AudioErrorDialog />\n      <MinimalAudioControls />\n      <PlaybackHotkeys />\n      <StatusAnnouncer />\n    </Container>\n  );\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,iBAAiB,EAAE,UAAU,WAAW,GAAG,UAAiC,CAAC,GAAG;CAC9F,OACE,qBAAC,WAAD;EAAW,WAAW,GAAG,cAAc,SAAS;EAAG,cAAW;EAAU,eAAY;EAAQ,GAAI;EAAhG,UAAA;GACG;GACD,oBAAC,kBAAD,CAAmB,CAAA;GACnB,oBAAC,sBAAD,CAAuB,CAAA;GACvB,oBAAC,iBAAD,CAAkB,CAAA;GAClB,oBAAC,iBAAD,CAAkB,CAAA;EACT;;AAEf"}
+{"version":3,"file":"skin.js","names":["{ children, className, ...props }: AudioSkinProps = {}","cn('audio-skin', className)","<AudioErrorDialog />","<MinimalAudioControls />","<PlaybackHotkeys />","<StatusAnnouncer />","<Container className={cn('audio-skin', className)} data-theme=\"minimal\" data-preset=\"audio\" {...props}>\n      {children}\n      <AudioErrorDialog />\n      <MinimalAudioControls />\n      <PlaybackHotkeys />\n      <StatusAnnouncer />\n    </Container>"],"sources":["../../../../../src/internal/skins/minimal-audio/skin.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { StatusAnnouncer } from '../shared/components/behaviors/status-announcer';\nimport { Container } from '../shared/components/layout/container';\nimport { AudioErrorDialog } from '../shared/skins/shared/audio/dialogs/error-dialog';\nimport { PlaybackHotkeys } from '../shared/skins/shared/behaviors/playback-hotkeys';\nimport { MinimalAudioControls } from './layout/controls';\n\nexport interface AudioSkinProps extends Omit<NonNullable<ComponentProps<typeof Container>>, 'children'> {\n  children?: ReactNode;\n}\n\nexport function AudioSkin({ children, className, ...props }: AudioSkinProps = {}) {\n  return (\n    <Container className={cn('audio-skin', className)} data-theme=\"minimal\" data-preset=\"audio\" {...props}>\n      {children}\n      <AudioErrorDialog />\n      <MinimalAudioControls />\n      <PlaybackHotkeys />\n      <StatusAnnouncer />\n    </Container>\n  );\n}\n"],"mappings":";;;;;;;;;;AAeA,SAAgB,UAAA,IAAkE;;CAAxDA,IAAAA;;EAAoD,KAAA,OAAA,KAAA,IAAA,CAAC,IAArDA;;;;CAAE,IAAA;CAAU,IAAA;CAAc,IAAA;CAA1BA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,UAAU,cAAW,SAAvBA;;;;;;;;;;CAEAC,IAAAA;CAAiB,IAAA,EAAA,OAAA,WAAA;EAAjB,KAAA,GAAG,cAAc,SAAS;EAAT,EAAA,KAAA;;;CAErCC,IAAAA;CACAC,IAAAA;CACAC,IAAAA;CACAC,IAAAA;;EAHA,KAAA,oBAAC,kBAAD,CAAmB,CAAA;EACnB,KAAA,oBAAC,sBAAD,CAAuB,CAAA;EACvB,KAAA,oBAAC,iBAAD,CAAkB,CAAA;EAClB,KAAA,oBAAC,iBAAD,CAAkB,CAAA;;;;;;;;;;;CALpBC,IAAAA;CACG,IAAA,EAAA,QAAA,YAAA,EAAA,QAD6F,SAAA,EAAA,QAA1EL,IAAAA;EAAtB,KAAA,qBAAC,WAAD;GAAW,WAAWA;GAA6B,cAAW;GAAU,eAAY;GAAQ,GAAI;GAAhG,UAAA;IACG;IACDC;IACAC;IACAC;IACAC;GACS;;EALR,EAAA,MAAA;EAD6F,EAAA,MAAA;EAA1EJ,EAAAA,MAAAA;;;CADxB,OACEK;AAQJ"}

package/dist/dev/internal/skins/minimal-audio/skins/shared/audio/buttons/play-button.js

@@ -0,0 +1,64 @@
+import { ButtonTooltip } from "../../../../../shared/components/buttons/button-tooltip.js";
+import { PlayButton } from "../../../../components/buttons/play-button.js";
+import { BufferingIndicator } from "../../../../components/display/buffering-indicator.js";
+import { c } from "react-compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@videojs/utils/style";
+//#region src/internal/skins/minimal-audio/skins/shared/audio/buttons/play-button.tsx
+/** @jsxImportSource react */
+function AudioPlayButton(t0) {
+	const $ = c(12);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	if ($[2] !== t1) {
+		({className, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+	} else {
+		className = $[3];
+		props = $[4];
+	}
+	let t2;
+	if ($[5] !== className) {
+		t2 = cn("audio-play-button", className);
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(BufferingIndicator, { className: "audio-play-button-buffering-indicator" });
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			boundary: "viewport",
+			side: "top",
+			children: /* @__PURE__ */ jsx(PlayButton, {})
+		});
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== props || $[10] !== t2) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: t2,
+			...props,
+			children: [t3, t4]
+		});
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+//#endregion
+export { AudioPlayButton };
+
+//# sourceMappingURL=play-button.js.map

package/dist/dev/internal/skins/minimal-audio/skins/shared/audio/buttons/play-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"play-button.js","names":["{ className, ...props }: AudioPlayButtonProps = {}","cn('audio-play-button', className)","<BufferingIndicator className={'audio-play-button-buffering-indicator'} />","<ButtonTooltip boundary=\"viewport\" side=\"top\">\n        <PlayButton />\n      </ButtonTooltip>","<div className={cn('audio-play-button', className)} {...props}>\n      <BufferingIndicator className={'audio-play-button-buffering-indicator'} />\n      <ButtonTooltip boundary=\"viewport\" side=\"top\">\n        <PlayButton />\n      </ButtonTooltip>\n    </div>"],"sources":["../../../../../../../../../src/internal/skins/minimal-audio/skins/shared/audio/buttons/play-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport type { ComponentProps } from 'react';\n\nimport { ButtonTooltip } from '../../../../../shared/components/buttons/button-tooltip';\nimport { PlayButton } from '../../../../components/buttons/play-button';\nimport { BufferingIndicator } from '../../../../components/display/buffering-indicator';\n\nexport type AudioPlayButtonProps = Omit<ComponentProps<'div'>, 'children'>;\n\nexport function AudioPlayButton({ className, ...props }: AudioPlayButtonProps = {}) {\n  return (\n    <div className={cn('audio-play-button', className)} {...props}>\n      <BufferingIndicator className={'audio-play-button-buffering-indicator'} />\n      <ButtonTooltip boundary=\"viewport\" side=\"top\">\n        <PlayButton />\n      </ButtonTooltip>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,gBAAA,IAAoE;;CAApDA,IAAAA;;EAAgD,KAAA,OAAA,KAAA,IAAA,CAAC,IAAjDA;;;;CAAE,IAAA;CAAc,IAAA;CAAhBA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,cAAW,SAAbA;;;;;;;;CAEZC,IAAAA;CAAwB,IAAA,EAAA,OAAA,WAAA;EAAxB,KAAA,GAAG,qBAAqB,SAAS;EAAT,EAAA,KAAA;;;CACtCC,IAAAA;;EAAC,KAAA,oBAAA,oBAAD,EAAoB,WAAW,wCAA0C,CAAA;;;CACzEC,IAAAA;;EAAC,KAAA,oBAAA,eAAD;GAAe,UAAS;GAAW,MAAK;GACtC,UAAA,oBAAC,YAAD,CAAa,CAAA;EACA,CAAA;;;CAJjBC,IAAAA;CAAwD,IAAA,EAAA,OAAA,SAAA,EAAA,QAAxCH,IAAAA;EAAhB,KAAA,qBAAC,OAAD;GAAK,WAAWA;GAAoC,GAAI;GAAxD,UAAA,CACEC,IACAC,EAGG;;EALmD,EAAA,KAAA;EAAxCF,EAAAA,MAAAA;;;CADlB,OACEG;AAOJ"}

package/dist/dev/internal/skins/minimal-audio/skins/shared/audio/menus/settings-menu.js

@@ -0,0 +1,100 @@
+import { MenuContent } from "../../../../../../../ui/menu/content.js";
+import { MenuPopup } from "../../../../../../../ui/menu/popup.js";
+import { MenuRoot } from "../../../../../../../ui/menu/root.js";
+import { MenuTrigger } from "../../../../../../../ui/menu/trigger.js";
+import { PlaybackRateRadioGroupOptions, PlaybackRateRadioGroupRoot } from "../../../../../../../ui/playback-rate-radio-group/component.js";
+import { ButtonTooltip } from "../../../../../shared/components/buttons/button-tooltip.js";
+import { PlaybackRateButton } from "../../../../../shared/components/buttons/playback-rate-button.js";
+import { RadioItem } from "../../../../components/menus/radio-item.js";
+import { c } from "react-compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@videojs/utils/style";
+//#region src/internal/skins/minimal-audio/skins/shared/audio/menus/settings-menu.tsx
+/** @jsxImportSource react */
+function AudioSettingsMenu(t0) {
+	const $ = c(15);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	if ($[2] !== t1) {
+		({className, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+	} else {
+		className = $[3];
+		props = $[4];
+	}
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(PlaybackRateButton, {});
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== className) {
+		t3 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			boundary: "viewport",
+			side: "top",
+			children: /* @__PURE__ */ jsx(MenuTrigger, {
+				render: t2,
+				className
+			})
+		});
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = cn("media-popup", "media-popup-surface", "media-menu-popup", "audio-settings-menu-popup");
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(MenuPopup, {
+			className: t4,
+			children: /* @__PURE__ */ jsx(MenuContent, {
+				className: "media-menu-content",
+				children: /* @__PURE__ */ jsx(PlaybackRateRadioGroupOptions, {
+					className: "media-menu-radio-group",
+					renderItem: _temp
+				})
+			})
+		});
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t3) {
+		t6 = /* @__PURE__ */ jsxs(PlaybackRateRadioGroupRoot, { children: [t3, t5] });
+		$[10] = t3;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== props || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(MenuRoot, {
+			side: "top",
+			align: "center",
+			boundary: "viewport",
+			...props,
+			children: t6
+		});
+		$[12] = props;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	return t7;
+}
+function _temp(props_0, item) {
+	return /* @__PURE__ */ jsx(RadioItem, {
+		...props_0,
+		children: /* @__PURE__ */ jsx("span", { children: item.label })
+	});
+}
+//#endregion
+export { AudioSettingsMenu };
+
+//# sourceMappingURL=settings-menu.js.map

package/dist/dev/internal/skins/minimal-audio/skins/shared/audio/menus/settings-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-menu.js","names":["{ className, ...props }: AudioSettingsMenuProps = {}","<PlaybackRateButton />","<ButtonTooltip boundary=\"viewport\" side=\"top\">\n          <MenuPrimitive.Trigger render={<PlaybackRateButton />} className={className} />\n        </ButtonTooltip>","MenuPrimitive.Trigger","cn('media-popup', 'media-popup-surface', 'media-menu-popup', 'audio-settings-menu-popup')","<MenuPrimitive.Popup\n          className={cn('media-popup', 'media-popup-surface', 'media-menu-popup', 'audio-settings-menu-popup')}\n        >\n          <MenuPrimitive.Content className={'media-menu-content'}>\n            <PlaybackRateRadioGroup.Options\n              className={'media-menu-radio-group'}\n              renderItem={(props, item) => (\n                <RadioItem {...props}>\n                  <span>{item.label}</span>\n                </RadioItem>\n              )}\n            ></PlaybackRateRadioGroup.Options>\n          </MenuPrimitive.Content>\n        </MenuPrimitive.Popup>","MenuPrimitive.Popup","MenuPrimitive.Content","PlaybackRateRadioGroup.Options","(props, item) => (\n                <RadioItem {...props}>\n                  <span>{item.label}</span>\n                </RadioItem>\n              )","<PlaybackRateRadioGroup.Root>\n        <ButtonTooltip boundary=\"viewport\" side=\"top\">\n          <MenuPrimitive.Trigger render={<PlaybackRateButton />} className={className} />\n        </ButtonTooltip>\n        <MenuPrimitive.Popup\n          className={cn('media-popup', 'media-popup-surface', 'media-menu-popup', 'audio-settings-menu-popup')}\n        >\n          <MenuPrimitive.Content className={'media-menu-content'}>\n            <PlaybackRateRadioGroup.Options\n              className={'media-menu-radio-group'}\n              renderItem={(props, item) => (\n                <RadioItem {...props}>\n                  <span>{item.label}</span>\n                </RadioItem>\n              )}\n            ></PlaybackRateRadioGroup.Options>\n          </MenuPrimitive.Content>\n        </MenuPrimitive.Popup>\n      </PlaybackRateRadioGroup.Root>","PlaybackRateRadioGroup.Root","<MenuPrimitive.Root side=\"top\" align=\"center\" boundary=\"viewport\" {...props}>\n      <PlaybackRateRadioGroup.Root>\n        <ButtonTooltip boundary=\"viewport\" side=\"top\">\n          <MenuPrimitive.Trigger render={<PlaybackRateButton />} className={className} />\n        </ButtonTooltip>\n        <MenuPrimitive.Popup\n          className={cn('media-popup', 'media-popup-surface', 'media-menu-popup', 'audio-settings-menu-popup')}\n        >\n          <MenuPrimitive.Content className={'media-menu-content'}>\n            <PlaybackRateRadioGroup.Options\n              className={'media-menu-radio-group'}\n              renderItem={(props, item) => (\n                <RadioItem {...props}>\n                  <span>{item.label}</span>\n                </RadioItem>\n              )}\n            ></PlaybackRateRadioGroup.Options>\n          </MenuPrimitive.Content>\n        </MenuPrimitive.Popup>\n      </PlaybackRateRadioGroup.Root>\n    </MenuPrimitive.Root>","MenuPrimitive.Root","props"],"sources":["../../../../../../../../../src/internal/skins/minimal-audio/skins/shared/audio/menus/settings-menu.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\n\nimport { Menu as MenuPrimitive } from '../../../../../../skin-primitives';\nimport { PlaybackRateRadioGroup } from '../../../../../../skin-primitives';\nimport { ButtonTooltip } from '../../../../../shared/components/buttons/button-tooltip';\nimport { PlaybackRateButton } from '../../../../../shared/components/buttons/playback-rate-button';\nimport { RadioItem } from '../../../../components/menus/radio-item';\n\nexport interface AudioSettingsMenuProps extends Omit<MenuPrimitive.RootProps, 'children'> {\n  className?: MenuPrimitive.TriggerProps['className'];\n}\n\nexport function AudioSettingsMenu({ className, ...props }: AudioSettingsMenuProps = {}) {\n  return (\n    <MenuPrimitive.Root side=\"top\" align=\"center\" boundary=\"viewport\" {...props}>\n      <PlaybackRateRadioGroup.Root>\n        <ButtonTooltip boundary=\"viewport\" side=\"top\">\n          <MenuPrimitive.Trigger render={<PlaybackRateButton />} className={className} />\n        </ButtonTooltip>\n        <MenuPrimitive.Popup\n          className={cn('media-popup', 'media-popup-surface', 'media-menu-popup', 'audio-settings-menu-popup')}\n        >\n          <MenuPrimitive.Content className={'media-menu-content'}>\n            <PlaybackRateRadioGroup.Options\n              className={'media-menu-radio-group'}\n              renderItem={(props, item) => (\n                <RadioItem {...props}>\n                  <span>{item.label}</span>\n                </RadioItem>\n              )}\n            ></PlaybackRateRadioGroup.Options>\n          </MenuPrimitive.Content>\n        </MenuPrimitive.Popup>\n      </PlaybackRateRadioGroup.Root>\n    </MenuPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,kBAAA,IAAwE;;CAAtDA,IAAAA;;EAAkD,KAAA,OAAA,KAAA,IAAA,CAAC,IAAnDA;;;;CAAE,IAAA;CAAc,IAAA;CAAhBA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,cAAW,SAAbA;;;;;;;;CAKOC,IAAAA;;EAAC,KAAA,oBAAA,oBAAD,CAAqB,CAAA;;;CADtDC,IAAAA;CACoE,IAAA,EAAA,OAAA,WAAA;EADpE,KAAA,oBAAC,eAAD;GAAe,UAAS;GAAW,MAAK;GACtC,UAAA,oBAACC,aAAD;IAAuB,QAAQF;IAAmC;GAAY,CAAA;EACjE,CAAA;EADqD,EAAA,KAAA;;;CAGvDG,IAAAA;;EAAG,KAAA,GAAA,eAAe,uBAAuB,oBAAoB,2BAA2B;;;CADrGC,IAAAA;;EAACC,KAAAA,oBAAAA,WAAD;GACE,WAAWF;GAEX,UAAA,oBAACG,aAAD;IAAuB,WAAW;IAChC,UAAA,oBAACC,+BAAD;KACE,WAAW;KACX,YAAYC;IAKmB,CAAA;GACZ,CAAA;EACJ,CAAA;;;CAjBvBC,IAAAA;CACER,IAAAA,EAAAA,QAAAA,IAAAA;EADF,KAAA,qBAACS,4BAAD,EAAA,UAAA,CACET,IAGAG,EAc2B,EAAA,CAAA;EAjB3BH,EAAAA,MAAAA;;;CAFJU,IAAAA;CAAsE,IAAA,EAAA,QAAA,SAAA,EAAA,QACpEF,IAAAA;EADF,KAAA,oBAACG,UAAD;GAAoB,MAAK;GAAM,OAAM;GAAS,UAAS;GAAW,GAAI;GACpEH,UAAAA;EAmBkB,CAAA;EApBkD,EAAA,MAAA;EACpEA,EAAAA,MAAAA;;;CAFJ,OACEE;AAsBJ;AAX0B,SAAA,MAAC,SAAO,MAAA;CAClB,OAAA,oBAAC,WAAD;EAAW,GAAIE;EACb,UAAA,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;CACf,CAAA"}

package/dist/dev/internal/skins/minimal-live-audio/components/buttons/mute-button.js

@@ -3,21 +3,73 @@ import ForwardRef from "../../../../../icons/dist/react/minimal/volume-high.js";
 import ForwardRef$1 from "../../../../../icons/dist/react/minimal/volume-low.js";
 import ForwardRef$2 from "../../../../../icons/dist/react/minimal/volume-off.js";
 import { Button } from "../../../shared/components/buttons/button.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn, resolveClassName } from "@videojs/utils/style";
 //#region src/internal/skins/minimal-live-audio/components/buttons/mute-button.tsx
 /** @jsxImportSource react */
-function MuteButton({ className, ...props } = {}) {
-	return /* @__PURE__ */ jsxs(MuteButton$1, {
-		render: /* @__PURE__ */ jsx(Button, {}),
-		className: (state) => cn("media-mute-button", resolveClassName(className, state)),
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(ForwardRef$2, { className: cn("media-button-icon", "media-mute-button-off-icon") }),
-			/* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-mute-button-low-icon") }),
-			/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-mute-button-high-icon") })
-		]
-	});
+function MuteButton(t0) {
+	const $ = c(14);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	if ($[2] !== t1) {
+		({className, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+	} else {
+		className = $[3];
+		props = $[4];
+	}
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Button, {});
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== className) {
+		t3 = (state) => cn("media-mute-button", resolveClassName(className, state));
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ForwardRef$2, { className: cn("media-button-icon", "media-mute-button-off-icon") });
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-mute-button-low-icon") });
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-mute-button-high-icon") });
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== props || $[12] !== t3) {
+		t7 = /* @__PURE__ */ jsxs(MuteButton$1, {
+			render: t2,
+			className: t3,
+			...props,
+			children: [
+				t4,
+				t5,
+				t6
+			]
+		});
+		$[11] = props;
+		$[12] = t3;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
 }
 //#endregion
 export { MuteButton };

package/dist/dev/internal/skins/minimal-live-audio/components/buttons/mute-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"mute-button.js","names":["MuteButtonPrimitive","VolumeOffIconPrimitive","VolumeLowIconPrimitive","VolumeHighIconPrimitive"],"sources":["../../../../../../../src/internal/skins/minimal-live-audio/components/buttons/mute-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport {\n  VolumeOffIcon as VolumeOffIconPrimitive,\n  VolumeLowIcon as VolumeLowIconPrimitive,\n  VolumeHighIcon as VolumeHighIconPrimitive,\n} from '../../../../../icons/minimal/index';\nimport { MuteButton as MuteButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type MuteButtonProps = Omit<MuteButtonPrimitive.Props, 'children'>;\n\nexport function MuteButton({ className, ...props }: MuteButtonProps = {}) {\n  return (\n    <MuteButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-mute-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <VolumeOffIconPrimitive className={cn('media-button-icon', 'media-mute-button-off-icon')} />\n      <VolumeLowIconPrimitive className={cn('media-button-icon', 'media-mute-button-low-icon')} />\n      <VolumeHighIconPrimitive className={cn('media-button-icon', 'media-mute-button-high-icon')} />\n    </MuteButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,WAAW,EAAE,WAAW,GAAG,UAA2B,CAAC,GAAG;CACxE,OACE,qBAACA,cAAD;EACE,QAAQ,oBAAC,QAAD,CAAS,CAAA;EACjB,YAAY,UAAU,GAAG,qBAAqB,iBAAiB,WAAW,KAAK,CAAC;EAChF,GAAI;EAHN,UAAA;GAKE,oBAACC,cAAD,EAAwB,WAAW,GAAG,qBAAqB,4BAA4B,EAAI,CAAA;GAC3F,oBAACC,cAAD,EAAwB,WAAW,GAAG,qBAAqB,4BAA4B,EAAI,CAAA;GAC3F,oBAACC,YAAD,EAAyB,WAAW,GAAG,qBAAqB,6BAA6B,EAAI,CAAA;EAC1E;;AAEzB"}
+{"version":3,"file":"mute-button.js","names":["{ className, ...props }: MuteButtonProps = {}","<Button />","(state) => cn('media-mute-button', resolveClassName(className, state))","<VolumeOffIconPrimitive className={cn('media-button-icon', 'media-mute-button-off-icon')} />","<VolumeLowIconPrimitive className={cn('media-button-icon', 'media-mute-button-low-icon')} />","<VolumeHighIconPrimitive className={cn('media-button-icon', 'media-mute-button-high-icon')} />","<MuteButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-mute-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <VolumeOffIconPrimitive className={cn('media-button-icon', 'media-mute-button-off-icon')} />\n      <VolumeLowIconPrimitive className={cn('media-button-icon', 'media-mute-button-low-icon')} />\n      <VolumeHighIconPrimitive className={cn('media-button-icon', 'media-mute-button-high-icon')} />\n    </MuteButtonPrimitive>"],"sources":["../../../../../../../src/internal/skins/minimal-live-audio/components/buttons/mute-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport { resolveClassName } from '@videojs/utils/style';\n\nimport {\n  VolumeOffIcon as VolumeOffIconPrimitive,\n  VolumeLowIcon as VolumeLowIconPrimitive,\n  VolumeHighIcon as VolumeHighIconPrimitive,\n} from '../../../../../icons/minimal/index';\nimport { MuteButton as MuteButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type MuteButtonProps = Omit<MuteButtonPrimitive.Props, 'children'>;\n\nexport function MuteButton({ className, ...props }: MuteButtonProps = {}) {\n  return (\n    <MuteButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-mute-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <VolumeOffIconPrimitive className={cn('media-button-icon', 'media-mute-button-off-icon')} />\n      <VolumeLowIconPrimitive className={cn('media-button-icon', 'media-mute-button-low-icon')} />\n      <VolumeHighIconPrimitive className={cn('media-button-icon', 'media-mute-button-high-icon')} />\n    </MuteButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;;;AAeA,SAAgB,WAAA,IAA0D;;CAA/CA,IAAAA;;EAA2C,KAAA,OAAA,KAAA,IAAA,CAAC,IAA5CA;;;;CAAE,IAAA;CAAc,IAAA;CAAhBA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,cAAW,SAAbA;;;;;;;;CAGbC,IAAAA;;EAAC,KAAA,oBAAA,QAAD,CAAS,CAAA;;;CACNC,IAAAA;CAAoD,IAAA,EAAA,OAAA,WAAA;EAApD,MAAC,UAAU,GAAG,qBAAqB,iBAAiB,WAAW,KAAK,CAAC;EAAjB,EAAA,KAAA;;;CAG/DC,IAAAA;;EAAC,KAAA,oBAAA,cAAD,EAAwB,WAAW,GAAG,qBAAqB,4BAA4B,EAAI,CAAA;;;CAC3FC,IAAAA;;EAAC,KAAA,oBAAA,cAAD,EAAwB,WAAW,GAAG,qBAAqB,4BAA4B,EAAI,CAAA;;;CAC3FC,IAAAA;;EAAC,KAAA,oBAAA,YAAD,EAAyB,WAAW,GAAG,qBAAqB,6BAA6B,EAAI,CAAA;;;CAP/FC,IAAAA;CAGM,IAAA,EAAA,QAAA,SAAA,EAAA,QADOJ,IAAAA;EAFb,KAAA,qBAAC,cAAD;GACE,QAAQD;GACR,WAAWC;GACX,GAAI;GAHN,UAAA;IAKEC;IACAC;IACAC;GACmB;;EALf,EAAA,MAAA;EADOH,EAAAA,MAAAA;;;CAHf,OACEI;AAUJ"}