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

package/dist/default/internal/skins/minimal-video/components/menus/captions-submenu.js

@@ -8,27 +8,57 @@ import { MenuTrigger } from "../../../../../ui/menu/trigger.js";
 import ForwardRef from "../../../../../icons/dist/react/minimal/captions-off.js";
 import { MenuChevron } from "./menu-chevron.js";
 import { RadioItem } from "./radio-item.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { captionsText } from "@videojs/core/i18n/text/menu";
 //#region src/internal/skins/minimal-video/components/menus/captions-submenu.tsx
 /** @jsxImportSource react */
-function CaptionsSubmenu({ ...props } = {}) {
-	return /* @__PURE__ */ jsx(MenuRoot, {
-		...props,
-		children: /* @__PURE__ */ jsxs(CaptionsRadioGroupRoot, { children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+function CaptionsSubmenu(t0) {
+	const $ = c(10);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let props;
+	if ($[2] !== t1) {
+		({...props} = t1);
+		$[2] = t1;
+		$[3] = props;
+	} else props = $[3];
+	let t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(ForwardRef, { className: "media-menu-trigger-item-icon" });
+		t3 = /* @__PURE__ */ jsx(Text, {
+			token: captionsText.key,
+			children: captionsText.text
+		});
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs(MenuTrigger, {
 			className: "media-menu-trigger-item",
 			children: [
-				/* @__PURE__ */ jsx(ForwardRef, { className: "media-menu-trigger-item-icon" }),
-				/* @__PURE__ */ jsx(Text, {
-					token: captionsText.key,
-					children: captionsText.text
-				}),
+				t2,
+				t3,
 				/* @__PURE__ */ jsxs("span", {
 					className: "media-menu-hint",
 					children: [/* @__PURE__ */ jsx(CaptionsRadioGroupValue, { className: "media-menu-hint-label" }), /* @__PURE__ */ jsx(MenuChevron, {})]
 				})
 			]
-		}), /* @__PURE__ */ jsxs(MenuContent, {
+		});
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsxs(CaptionsRadioGroupRoot, { children: [t4, /* @__PURE__ */ jsxs(MenuContent, {
 			className: "media-menu-content",
 			children: [
 				/* @__PURE__ */ jsxs(MenuItem, {
@@ -41,16 +71,28 @@ function CaptionsSubmenu({ ...props } = {}) {
 				/* @__PURE__ */ jsx(MenuSeparator, { className: "media-menu-separator" }),
 				/* @__PURE__ */ jsx(CaptionsRadioGroupOptions, {
 					className: "media-menu-radio-group",
-					renderItem: (props, item) => /* @__PURE__ */ jsx(RadioItem, {
-						...props,
-						children: /* @__PURE__ */ jsx("span", { children: item.label })
-					})
+					renderItem: _temp
 				})
 			]
-		})] })
+		})] });
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== props) {
+		t6 = /* @__PURE__ */ jsx(MenuRoot, {
+			...props,
+			children: t5
+		});
+		$[8] = props;
+		$[9] = t6;
+	} else t6 = $[9];
+	return t6;
+}
+function _temp(props_0, item) {
+	return /* @__PURE__ */ jsx(RadioItem, {
+		...props_0,
+		children: /* @__PURE__ */ jsx("span", { children: item.label })
 	});
 }
 //#endregion
 export { CaptionsSubmenu };
-
-//# sourceMappingURL=captions-submenu.js.map

package/dist/default/internal/skins/minimal-video/components/menus/menu-chevron.js

@@ -1,12 +1,33 @@
 import ForwardRef from "../../../../../icons/dist/react/minimal/chevron.js";
+import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
 //#region src/internal/skins/minimal-video/components/menus/menu-chevron.tsx
 /** @jsxImportSource react */
-function MenuChevron({ back = false, className } = {}) {
-	return /* @__PURE__ */ jsx(ForwardRef, { className: cn(back ? "media-menu-back-chevron" : "media-menu-forward-chevron", className) });
+function MenuChevron(t0) {
+	const $ = c(7);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { back: t2, className } = t1;
+	const t3 = (t2 === void 0 ? false : t2) ? "media-menu-back-chevron" : "media-menu-forward-chevron";
+	let t4;
+	if ($[2] !== className || $[3] !== t3) {
+		t4 = cn(t3, className);
+		$[2] = className;
+		$[3] = t3;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ForwardRef, { className: t4 });
+		$[5] = t4;
+		$[6] = t5;
+	} else t5 = $[6];
+	return t5;
 }
 //#endregion
 export { MenuChevron };
-
-//# sourceMappingURL=menu-chevron.js.map

package/dist/default/internal/skins/minimal-video/components/menus/playback-rate-submenu.js

@@ -8,27 +8,57 @@ import { PlaybackRateRadioGroupOptions, PlaybackRateRadioGroupRoot, PlaybackRate
 import ForwardRef from "../../../../../icons/dist/react/minimal/speed.js";
 import { MenuChevron } from "./menu-chevron.js";
 import { RadioItem } from "./radio-item.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { speedText } from "@videojs/core/i18n/text/menu";
 //#region src/internal/skins/minimal-video/components/menus/playback-rate-submenu.tsx
 /** @jsxImportSource react */
-function PlaybackRateSubmenu({ ...props } = {}) {
-	return /* @__PURE__ */ jsx(MenuRoot, {
-		...props,
-		children: /* @__PURE__ */ jsxs(PlaybackRateRadioGroupRoot, { children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+function PlaybackRateSubmenu(t0) {
+	const $ = c(10);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let props;
+	if ($[2] !== t1) {
+		({...props} = t1);
+		$[2] = t1;
+		$[3] = props;
+	} else props = $[3];
+	let t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(ForwardRef, { className: "media-menu-trigger-item-icon" });
+		t3 = /* @__PURE__ */ jsx(Text, {
+			token: speedText.key,
+			children: speedText.text
+		});
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs(MenuTrigger, {
 			className: "media-menu-trigger-item",
 			children: [
-				/* @__PURE__ */ jsx(ForwardRef, { className: "media-menu-trigger-item-icon" }),
-				/* @__PURE__ */ jsx(Text, {
-					token: speedText.key,
-					children: speedText.text
-				}),
+				t2,
+				t3,
 				/* @__PURE__ */ jsxs("span", {
 					className: "media-menu-hint",
 					children: [/* @__PURE__ */ jsx(PlaybackRateRadioGroupValue, { className: "media-menu-hint-label" }), /* @__PURE__ */ jsx(MenuChevron, {})]
 				})
 			]
-		}), /* @__PURE__ */ jsxs(MenuContent, {
+		});
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsxs(PlaybackRateRadioGroupRoot, { children: [t4, /* @__PURE__ */ jsxs(MenuContent, {
 			className: "media-menu-content",
 			children: [
 				/* @__PURE__ */ jsxs(MenuItem, {
@@ -41,16 +71,28 @@ function PlaybackRateSubmenu({ ...props } = {}) {
 				/* @__PURE__ */ jsx(MenuSeparator, { className: "media-menu-separator" }),
 				/* @__PURE__ */ jsx(PlaybackRateRadioGroupOptions, {
 					className: "media-menu-radio-group",
-					renderItem: (props, item) => /* @__PURE__ */ jsx(RadioItem, {
-						...props,
-						children: /* @__PURE__ */ jsx("span", { children: item.label })
-					})
+					renderItem: _temp
 				})
 			]
-		})] })
+		})] });
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== props) {
+		t6 = /* @__PURE__ */ jsx(MenuRoot, {
+			...props,
+			children: t5
+		});
+		$[8] = props;
+		$[9] = t6;
+	} else t6 = $[9];
+	return t6;
+}
+function _temp(props_0, item) {
+	return /* @__PURE__ */ jsx(RadioItem, {
+		...props_0,
+		children: /* @__PURE__ */ jsx("span", { children: item.label })
 	});
 }
 //#endregion
 export { PlaybackRateSubmenu };
-
-//# sourceMappingURL=playback-rate-submenu.js.map

package/dist/default/internal/skins/minimal-video/components/menus/quality-menu.js

@@ -8,27 +8,57 @@ import { QualityRadioGroupOptions, QualityRadioGroupRoot, QualityRadioGroupValue
 import ForwardRef from "../../../../../icons/dist/react/minimal/switches.js";
 import { MenuChevron } from "./menu-chevron.js";
 import { RadioItem } from "./radio-item.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { qualityText } from "@videojs/core/i18n/text/menu";
 //#region src/internal/skins/minimal-video/components/menus/quality-menu.tsx
 /** @jsxImportSource react */
-function QualityMenu({ ...props } = {}) {
-	return /* @__PURE__ */ jsx(MenuRoot, {
-		...props,
-		children: /* @__PURE__ */ jsxs(QualityRadioGroupRoot, { children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+function QualityMenu(t0) {
+	const $ = c(10);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let props;
+	if ($[2] !== t1) {
+		({...props} = t1);
+		$[2] = t1;
+		$[3] = props;
+	} else props = $[3];
+	let t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(ForwardRef, { className: "media-menu-trigger-item-icon" });
+		t3 = /* @__PURE__ */ jsx(Text, {
+			token: qualityText.key,
+			children: qualityText.text
+		});
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs(MenuTrigger, {
 			className: "media-menu-trigger-item",
 			children: [
-				/* @__PURE__ */ jsx(ForwardRef, { className: "media-menu-trigger-item-icon" }),
-				/* @__PURE__ */ jsx(Text, {
-					token: qualityText.key,
-					children: qualityText.text
-				}),
+				t2,
+				t3,
 				/* @__PURE__ */ jsxs("span", {
 					className: "media-menu-hint",
 					children: [/* @__PURE__ */ jsx(QualityRadioGroupValue, { className: "media-menu-hint-label" }), /* @__PURE__ */ jsx(MenuChevron, {})]
 				})
 			]
-		}), /* @__PURE__ */ jsxs(MenuContent, {
+		});
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsxs(QualityRadioGroupRoot, { children: [t4, /* @__PURE__ */ jsxs(MenuContent, {
 			className: "media-menu-content",
 			children: [
 				/* @__PURE__ */ jsxs(MenuItem, {
@@ -41,22 +71,34 @@ function QualityMenu({ ...props } = {}) {
 				/* @__PURE__ */ jsx(MenuSeparator, { className: "media-menu-separator" }),
 				/* @__PURE__ */ jsx(QualityRadioGroupOptions, {
 					className: "media-menu-radio-group",
-					renderItem: (props, item) => /* @__PURE__ */ jsxs(RadioItem, {
-						...props,
-						children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.tier ? /* @__PURE__ */ jsx("sup", {
-							className: "media-menu-tier",
-							children: item.tier
-						}) : null] }), item.badge ? /* @__PURE__ */ jsx("span", {
-							className: "media-menu-badge",
-							children: item.badge
-						}) : null]
-					})
+					renderItem: _temp
 				})
 			]
-		})] })
+		})] });
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== props) {
+		t6 = /* @__PURE__ */ jsx(MenuRoot, {
+			...props,
+			children: t5
+		});
+		$[8] = props;
+		$[9] = t6;
+	} else t6 = $[9];
+	return t6;
+}
+function _temp(props_0, item) {
+	return /* @__PURE__ */ jsxs(RadioItem, {
+		...props_0,
+		children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.tier ? /* @__PURE__ */ jsx("sup", {
+			className: "media-menu-tier",
+			children: item.tier
+		}) : null] }), item.badge ? /* @__PURE__ */ jsx("span", {
+			className: "media-menu-badge",
+			children: item.badge
+		}) : null]
 	});
 }
 //#endregion
 export { QualityMenu };
-
-//# sourceMappingURL=quality-menu.js.map

package/dist/default/internal/skins/minimal-video/components/menus/radio-item.js

@@ -1,22 +1,55 @@
 import { MenuItemIndicator } from "../../../../../ui/menu/item-indicator.js";
 import { MenuRadioItem } from "../../../../../ui/menu/radio-item.js";
 import ForwardRef from "../../../../../icons/dist/react/minimal/check.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-video/components/menus/radio-item.tsx
 /** @jsxImportSource react */
-function RadioItem({ children, className, ...props }) {
-	return /* @__PURE__ */ jsxs(MenuRadioItem, {
-		className: (state) => cn("media-menu-radio-item", resolveClassName(className, state)),
-		...props,
-		children: [children, /* @__PURE__ */ jsx(MenuItemIndicator, {
+function RadioItem(t0) {
+	const $ = c(11);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({children, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = (state) => cn("media-menu-radio-item", resolveClassName(className, state));
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(MenuItemIndicator, {
 			forceMount: true,
 			className: "media-menu-item-indicator",
 			children: /* @__PURE__ */ jsx(ForwardRef, { className: "media-menu-radio-item-icon" })
-		})]
-	});
+		});
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== children || $[8] !== props || $[9] !== t1) {
+		t3 = /* @__PURE__ */ jsxs(MenuRadioItem, {
+			className: t1,
+			...props,
+			children: [children, t2]
+		});
+		$[7] = children;
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
 }
 //#endregion
 export { RadioItem };
-
-//# sourceMappingURL=radio-item.js.map

package/dist/default/internal/skins/minimal-video/components/menus/settings-menu.js

@@ -3,45 +3,111 @@ 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 ForwardRef from "../../../../../icons/dist/react/minimal/gear.js";
 import { Button } from "../../../shared/components/buttons/button.js";
 import { ButtonTooltip } from "../../../shared/components/buttons/button-tooltip.js";
+import ForwardRef from "../../../../../icons/dist/react/minimal/gear.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn, resolveClassName } from "@videojs/utils/style";
 import { settingsText } from "@videojs/core/i18n/text/menu";
 //#region src/internal/skins/minimal-video/components/menus/settings-menu.tsx
 /** @jsxImportSource react */
-function SettingsMenu({ children, className, ...props }) {
-	return /* @__PURE__ */ jsxs(MenuRoot, {
-		side: "top",
-		align: "center",
-		...props,
-		children: [/* @__PURE__ */ jsx(ButtonTooltip, {
-			label: /* @__PURE__ */ jsx(Text, {
-				token: settingsText.key,
-				children: settingsText.text
-			}),
+function SettingsMenu(t0) {
+	const $ = c(19);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({children, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Text, {
+			token: settingsText.key,
+			children: settingsText.text
+		});
+		$[4] = t1;
+	} else t1 = $[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-settings-menu-trigger", resolveClassName(className, state));
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	let t5;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon-base", "media-settings-menu-trigger-icon") });
+		t5 = /* @__PURE__ */ jsx(Text, {
+			className: "media-settings-menu-trigger-label",
+			token: settingsText.key,
+			children: settingsText.text
+		});
+		$[8] = t4;
+		$[9] = t5;
+	} else {
+		t4 = $[8];
+		t5 = $[9];
+	}
+	let t6;
+	if ($[10] !== t3) {
+		t6 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			label: t1,
 			side: "top",
 			children: /* @__PURE__ */ jsxs(MenuTrigger, {
-				render: /* @__PURE__ */ jsx(Button, {}),
-				className: (state) => cn("media-settings-menu-trigger", resolveClassName(className, state)),
-				children: [/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-settings-menu-trigger-icon") }), /* @__PURE__ */ jsx(Text, {
-					className: "media-settings-menu-trigger-label",
-					token: settingsText.key,
-					children: settingsText.text
-				})]
+				render: t2,
+				className: t3,
+				children: [t4, t5]
 			})
-		}), /* @__PURE__ */ jsx(MenuPopup, {
+		});
+		$[10] = t3;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = cn("media-popup", "media-popup-surface", "media-menu-popup", "media-menu-resizable-popup");
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== children) {
+		t8 = /* @__PURE__ */ jsx(MenuPopup, {
 			keepMounted: true,
-			className: cn("media-popup", "media-popup-surface", "media-menu-popup", "media-menu-resizable-popup"),
+			className: t7,
 			children: /* @__PURE__ */ jsx(MenuContent, {
 				className: "media-menu-content",
 				children
 			})
-		})]
-	});
+		});
+		$[13] = children;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== props || $[16] !== t6 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(MenuRoot, {
+			side: "top",
+			align: "center",
+			...props,
+			children: [t6, t8]
+		});
+		$[15] = props;
+		$[16] = t6;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	return t9;
 }
 //#endregion
 export { SettingsMenu };
-
-//# sourceMappingURL=settings-menu.js.map

package/dist/default/internal/skins/minimal-video/components/menus/volume-popover.js

@@ -0,0 +1,101 @@
+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-video/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 };