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

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

@@ -1,34 +1,64 @@
 import { Text } from "../../../../../i18n/text.js";
-import { MenuContent } from "../../../../../ui/menu/menu-content.js";
-import { MenuItem } from "../../../../../ui/menu/menu-item.js";
-import { MenuRoot } from "../../../../../ui/menu/menu-root.js";
-import { MenuSeparator } from "../../../../../ui/menu/menu-separator.js";
-import { MenuTrigger } from "../../../../../ui/menu/menu-trigger.js";
-import { QualityRadioGroupOptions, QualityRadioGroupRoot, QualityRadioGroupValue } from "../../../../../ui/quality-radio-group/quality-radio-group.js";
+import { MenuContent } from "../../../../../ui/menu/content.js";
+import { MenuItem } from "../../../../../ui/menu/item.js";
+import { MenuRoot } from "../../../../../ui/menu/root.js";
+import { MenuSeparator } from "../../../../../ui/menu/separator.js";
+import { MenuTrigger } from "../../../../../ui/menu/trigger.js";
+import { QualityRadioGroupOptions, QualityRadioGroupRoot, QualityRadioGroupValue } from "../../../../../ui/quality-radio-group/component.js";
 import ForwardRef from "../../../../../icons/dist/react/default/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/default-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,19 +71,33 @@ 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

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

@@ -1 +1 @@
-{"version":3,"file":"quality-menu.js","names":["Menu.Root","QualityRadioGroup.Root","Menu.Trigger","SwitchesIconPrimitive","TextPrimitive","QualityRadioGroup.Value","Menu.Content","Menu.Item","Menu.Separator","QualityRadioGroup.Options"],"sources":["../../../../../../../src/internal/skins/default-video/components/menus/quality-menu.tsx"],"sourcesContent":["/** @jsxImportSource react */\nimport { qualityText } from '@videojs/core/i18n/text/menu';\n\nimport { SwitchesIcon as SwitchesIconPrimitive } from '../../../../../icons/index';\nimport { Menu } from '../../../../skin-primitives';\nimport { Text as TextPrimitive } from '../../../../skin-primitives';\nimport { QualityRadioGroup } from '../../../../skin-primitives';\nimport { MenuChevron } from './menu-chevron';\nimport { RadioItem } from './radio-item';\n\nexport type QualityMenuProps = Omit<Menu.RootProps, 'children'>;\n\nexport function QualityMenu({ ...props }: QualityMenuProps = {}) {\n  return (\n    <Menu.Root {...props}>\n      <QualityRadioGroup.Root>\n        <Menu.Trigger className={'media-menu-trigger-item'}>\n          <SwitchesIconPrimitive className={'media-menu-trigger-item-icon'} />\n          <TextPrimitive token={qualityText.key}>{qualityText.text}</TextPrimitive>\n          <span className={'media-menu-hint'}>\n            <QualityRadioGroup.Value className={'media-menu-hint-label'} />\n            <MenuChevron />\n          </span>\n        </Menu.Trigger>\n        <Menu.Content className={'media-menu-content'}>\n          <Menu.Item className={'media-menu-back-item'}>\n            <MenuChevron back />\n            <TextPrimitive token={qualityText.key}>{qualityText.text}</TextPrimitive>\n          </Menu.Item>\n          <Menu.Separator className={'media-menu-separator'} />\n          <QualityRadioGroup.Options\n            className={'media-menu-radio-group'}\n            renderItem={(props, item) => (\n              <RadioItem {...props}>\n                <span>\n                  <span>{item.label}</span>\n                  {item.tier ? <sup className={'media-menu-tier'}>{item.tier}</sup> : null}\n                </span>\n                {item.badge ? <span className={'media-menu-badge'}>{item.badge}</span> : null}\n              </RadioItem>\n            )}\n          ></QualityRadioGroup.Options>\n        </Menu.Content>\n      </QualityRadioGroup.Root>\n    </Menu.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAYA,SAAgB,YAAY,EAAE,GAAG,UAA4B,CAAC,GAAG;CAC/D,OACE,oBAACA,UAAD;EAAW,GAAI;EACb,UAAA,qBAACC,uBAAD,EAAA,UAAA,CACE,qBAACC,aAAD;GAAc,WAAW;GAAzB,UAAA;IACE,oBAACC,YAAD,EAAuB,WAAW,+BAAiC,CAAA;IACnE,oBAACC,MAAD;KAAe,OAAO,YAAY;KAAM,UAAA,YAAY;IAAoB,CAAA;IACxE,qBAAC,QAAD;KAAM,WAAW;KAAjB,UAAA,CACE,oBAACC,wBAAD,EAAyB,WAAW,wBAA0B,CAAA,GAC9D,oBAAC,aAAD,CAAc,CAAA,CACV;;GACM;EACd,CAAA,GAAA,qBAACC,aAAD;GAAc,WAAW;GAAzB,UAAA;IACE,qBAACC,UAAD;KAAW,WAAW;KAAtB,UAAA,CACE,oBAAC,aAAD,EAAa,MAAA,KAAM,CAAA,GACnB,oBAACH,MAAD;MAAe,OAAO,YAAY;MAAM,UAAA,YAAY;KAAoB,CAAA,CAC/D;;IACX,oBAACI,eAAD,EAAgB,WAAW,uBAAyB,CAAA;IACpD,oBAACC,0BAAD;KACE,WAAW;KACX,aAAa,OAAO,SAClB,qBAAC,WAAD;MAAW,GAAI;MAAf,UAAA,CACE,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA,GACvB,KAAK,OAAO,oBAAC,OAAD;OAAK,WAAW;OAAoB,UAAA,KAAK;MAAU,CAAA,IAAI,IAChE,EAAA,CAAA,GACL,KAAK,QAAQ,oBAAC,QAAD;OAAM,WAAW;OAAqB,UAAA,KAAK;MAAY,CAAA,IAAI,IAChE;;IAEa,CAAA;GAChB;EACQ,CAAA,CAAA,EAAA,CAAA;CACf,CAAA;AAEf"}
+{"version":3,"file":"quality-menu.js","names":["{ ...props }: QualityMenuProps = {}","<SwitchesIconPrimitive className={'media-menu-trigger-item-icon'} />","<TextPrimitive token={qualityText.key}>{qualityText.text}</TextPrimitive>","<Menu.Trigger className={'media-menu-trigger-item'}>\n          <SwitchesIconPrimitive className={'media-menu-trigger-item-icon'} />\n          <TextPrimitive token={qualityText.key}>{qualityText.text}</TextPrimitive>\n          <span className={'media-menu-hint'}>\n            <QualityRadioGroup.Value className={'media-menu-hint-label'} />\n            <MenuChevron />\n          </span>\n        </Menu.Trigger>","Menu.Trigger","QualityRadioGroup.Value","<QualityRadioGroup.Root>\n        <Menu.Trigger className={'media-menu-trigger-item'}>\n          <SwitchesIconPrimitive className={'media-menu-trigger-item-icon'} />\n          <TextPrimitive token={qualityText.key}>{qualityText.text}</TextPrimitive>\n          <span className={'media-menu-hint'}>\n            <QualityRadioGroup.Value className={'media-menu-hint-label'} />\n            <MenuChevron />\n          </span>\n        </Menu.Trigger>\n        <Menu.Content className={'media-menu-content'}>\n          <Menu.Item className={'media-menu-back-item'}>\n            <MenuChevron back />\n            <TextPrimitive token={qualityText.key}>{qualityText.text}</TextPrimitive>\n          </Menu.Item>\n          <Menu.Separator className={'media-menu-separator'} />\n          <QualityRadioGroup.Options\n            className={'media-menu-radio-group'}\n            renderItem={(props, item) => (\n              <RadioItem {...props}>\n                <span>\n                  <span>{item.label}</span>\n                  {item.tier ? <sup className={'media-menu-tier'}>{item.tier}</sup> : null}\n                </span>\n                {item.badge ? <span className={'media-menu-badge'}>{item.badge}</span> : null}\n              </RadioItem>\n            )}\n          ></QualityRadioGroup.Options>\n        </Menu.Content>\n      </QualityRadioGroup.Root>","QualityRadioGroup.Root","Menu.Content","Menu.Item","Menu.Separator","QualityRadioGroup.Options","(props, item) => (\n              <RadioItem {...props}>\n                <span>\n                  <span>{item.label}</span>\n                  {item.tier ? <sup className={'media-menu-tier'}>{item.tier}</sup> : null}\n                </span>\n                {item.badge ? <span className={'media-menu-badge'}>{item.badge}</span> : null}\n              </RadioItem>\n            )","<Menu.Root {...props}>\n      <QualityRadioGroup.Root>\n        <Menu.Trigger className={'media-menu-trigger-item'}>\n          <SwitchesIconPrimitive className={'media-menu-trigger-item-icon'} />\n          <TextPrimitive token={qualityText.key}>{qualityText.text}</TextPrimitive>\n          <span className={'media-menu-hint'}>\n            <QualityRadioGroup.Value className={'media-menu-hint-label'} />\n            <MenuChevron />\n          </span>\n        </Menu.Trigger>\n        <Menu.Content className={'media-menu-content'}>\n          <Menu.Item className={'media-menu-back-item'}>\n            <MenuChevron back />\n            <TextPrimitive token={qualityText.key}>{qualityText.text}</TextPrimitive>\n          </Menu.Item>\n          <Menu.Separator className={'media-menu-separator'} />\n          <QualityRadioGroup.Options\n            className={'media-menu-radio-group'}\n            renderItem={(props, item) => (\n              <RadioItem {...props}>\n                <span>\n                  <span>{item.label}</span>\n                  {item.tier ? <sup className={'media-menu-tier'}>{item.tier}</sup> : null}\n                </span>\n                {item.badge ? <span className={'media-menu-badge'}>{item.badge}</span> : null}\n              </RadioItem>\n            )}\n          ></QualityRadioGroup.Options>\n        </Menu.Content>\n      </QualityRadioGroup.Root>\n    </Menu.Root>","Menu.Root","props"],"sources":["../../../../../../../src/internal/skins/default-video/components/menus/quality-menu.tsx"],"sourcesContent":["/** @jsxImportSource react */\nimport { qualityText } from '@videojs/core/i18n/text/menu';\n\nimport { SwitchesIcon as SwitchesIconPrimitive } from '../../../../../icons/index';\nimport { Menu } from '../../../../skin-primitives';\nimport { Text as TextPrimitive } from '../../../../skin-primitives';\nimport { QualityRadioGroup } from '../../../../skin-primitives';\nimport { MenuChevron } from './menu-chevron';\nimport { RadioItem } from './radio-item';\n\nexport type QualityMenuProps = Omit<Menu.RootProps, 'children'>;\n\nexport function QualityMenu({ ...props }: QualityMenuProps = {}) {\n  return (\n    <Menu.Root {...props}>\n      <QualityRadioGroup.Root>\n        <Menu.Trigger className={'media-menu-trigger-item'}>\n          <SwitchesIconPrimitive className={'media-menu-trigger-item-icon'} />\n          <TextPrimitive token={qualityText.key}>{qualityText.text}</TextPrimitive>\n          <span className={'media-menu-hint'}>\n            <QualityRadioGroup.Value className={'media-menu-hint-label'} />\n            <MenuChevron />\n          </span>\n        </Menu.Trigger>\n        <Menu.Content className={'media-menu-content'}>\n          <Menu.Item className={'media-menu-back-item'}>\n            <MenuChevron back />\n            <TextPrimitive token={qualityText.key}>{qualityText.text}</TextPrimitive>\n          </Menu.Item>\n          <Menu.Separator className={'media-menu-separator'} />\n          <QualityRadioGroup.Options\n            className={'media-menu-radio-group'}\n            renderItem={(props, item) => (\n              <RadioItem {...props}>\n                <span>\n                  <span>{item.label}</span>\n                  {item.tier ? <sup className={'media-menu-tier'}>{item.tier}</sup> : null}\n                </span>\n                {item.badge ? <span className={'media-menu-badge'}>{item.badge}</span> : null}\n              </RadioItem>\n            )}\n          ></QualityRadioGroup.Options>\n        </Menu.Content>\n      </QualityRadioGroup.Root>\n    </Menu.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAYA,SAAgB,YAAA,IAAiD;;CAArCA,IAAAA;;EAAiC,KAAA,OAAA,KAAA,IAAA,CAAC,IAAlCA;;;;CAAK,IAAA;CAALA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,IAAA,SAAFA;;;;CAKlBC,IAAAA;CACAC,IAAAA;;EADA,KAAA,oBAAC,YAAD,EAAuB,WAAW,+BAAiC,CAAA;EACnE,KAAA,oBAAC,MAAD;GAAe,OAAO,YAAY;GAAM,UAAA,YAAY;EAAoB,CAAA;;;;;;;CAF1EC,IAAAA;;EAACC,KAAAA,qBAAAA,aAAD;GAAc,WAAW;GAAzB,UAAA;IACEH;IACAC;IACA,qBAAC,QAAD;KAAM,WAAW;KAAjB,UAAA,CACE,oBAACG,wBAAD,EAAyB,WAAW,wBAA0B,CAAA,GAC9D,oBAAC,aAAD,CAAc,CAAA,CACV;;GACM;;;;CARhBC,IAAAA;;EAACC,KAAAA,qBAAAA,uBAAD,EAAA,UAAA,CACEJ,IAQA,qBAACK,aAAD;GAAc,WAAW;GAAzB,UAAA;IACE,qBAACC,UAAD;KAAW,WAAW;KAAtB,UAAA,CACE,oBAAC,aAAD,EAAa,MAAA,KAAM,CAAA,GACnB,oBAAC,MAAD;MAAe,OAAO,YAAY;MAAM,UAAA,YAAY;KAAoB,CAAA,CAC/D;;IACX,oBAACC,eAAD,EAAgB,WAAW,uBAAyB,CAAA;IACpD,oBAACC,0BAAD;KACE,WAAW;KACX,YAAYC;IASc,CAAA;GAChB;EACQ,CAAA,CAAA,EAAA,CAAA;;;CA7B1BC,IAAAA;CAAe,IAAA,EAAA,OAAA,OAAA;EAAf,KAAA,oBAACC,UAAD;GAAW,GAAI;GACbR,UAAAA;EA6BS,CAAA;EA9BI,EAAA,KAAA;;;CADjB,OACEO;AAgCJ;AAdwB,SAAA,MAAC,SAAO,MAAA;CAClB,OAAA,qBAAC,WAAD;EAAW,GAAIE;EAAf,UAAA,CACE,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA,GACvB,KAAK,OAAO,oBAAC,OAAD;GAAK,WAAW;GAAoB,UAAA,KAAK;EAAU,CAAA,IAAI,IAChE,EAAA,CAAA,GACL,KAAK,QAAQ,oBAAC,QAAD;GAAM,WAAW;GAAqB,UAAA,KAAK;EAAY,CAAA,IAAI,IAChE"}

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

@@ -1,20 +1,55 @@
-import { MenuItemIndicator } from "../../../../../ui/menu/menu-item-indicator.js";
-import { MenuRadioItem } from "../../../../../ui/menu/menu-radio-item.js";
+import { MenuItemIndicator } from "../../../../../ui/menu/item-indicator.js";
+import { MenuRadioItem } from "../../../../../ui/menu/radio-item.js";
 import ForwardRef from "../../../../../icons/dist/react/default/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/default-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 };

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

@@ -1 +1 @@
-{"version":3,"file":"radio-item.js","names":["Menu.RadioItem","Menu.ItemIndicator","CheckIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/menus/radio-item.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport { CheckIcon as CheckIconPrimitive } from '../../../../../icons/index';\nimport { Menu } from '../../../../skin-primitives';\n\nexport type RadioItemProps = Menu.RadioItemProps;\n\nexport function RadioItem({ children, className, ...props }: RadioItemProps) {\n  return (\n    <Menu.RadioItem className={(state) => cn('media-menu-radio-item', resolveClassName(className, state))} {...props}>\n      {children}\n      <Menu.ItemIndicator forceMount className={'media-menu-item-indicator'}>\n        <CheckIconPrimitive className={'media-menu-radio-item-icon'} />\n      </Menu.ItemIndicator>\n    </Menu.RadioItem>\n  );\n}\n"],"mappings":";;;;;;;AASA,SAAgB,UAAU,EAAE,UAAU,WAAW,GAAG,SAAyB;CAC3E,OACE,qBAACA,eAAD;EAAgB,YAAY,UAAU,GAAG,yBAAyB,iBAAiB,WAAW,KAAK,CAAC;EAAG,GAAI;EAA3G,UAAA,CACG,UACD,oBAACC,mBAAD;GAAoB,YAAA;GAAW,WAAW;GACxC,UAAA,oBAACC,YAAD,EAAoB,WAAW,6BAA+B,CAAA;EAC5C,CAAA,CACN;;AAEpB"}
+{"version":3,"file":"radio-item.js","names":["{ children, className, ...props }: RadioItemProps","(state) => cn('media-menu-radio-item', resolveClassName(className, state))","<Menu.ItemIndicator forceMount className={'media-menu-item-indicator'}>\n        <CheckIconPrimitive className={'media-menu-radio-item-icon'} />\n      </Menu.ItemIndicator>","Menu.ItemIndicator","<Menu.RadioItem className={(state) => cn('media-menu-radio-item', resolveClassName(className, state))} {...props}>\n      {children}\n      <Menu.ItemIndicator forceMount className={'media-menu-item-indicator'}>\n        <CheckIconPrimitive className={'media-menu-radio-item-icon'} />\n      </Menu.ItemIndicator>\n    </Menu.RadioItem>","Menu.RadioItem"],"sources":["../../../../../../../src/internal/skins/default-video/components/menus/radio-item.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport { resolveClassName } from '@videojs/utils/style';\n\nimport { CheckIcon as CheckIconPrimitive } from '../../../../../icons/index';\nimport { Menu } from '../../../../skin-primitives';\n\nexport interface RadioItemProps extends Omit<Menu.RadioItemProps, 'children'> {\n  children?: Menu.RadioItemProps['children'];\n}\n\nexport function RadioItem({ children, className, ...props }: RadioItemProps) {\n  return (\n    <Menu.RadioItem className={(state) => cn('media-menu-radio-item', resolveClassName(className, state))} {...props}>\n      {children}\n      <Menu.ItemIndicator forceMount className={'media-menu-item-indicator'}>\n        <CheckIconPrimitive className={'media-menu-radio-item-icon'} />\n      </Menu.ItemIndicator>\n    </Menu.RadioItem>\n  );\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,UAAA,IAA6D;;CAAjD,IAAA;CAAU,IAAA;CAAc,IAAA;CAA1BA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,UAAU,cAAW,SAAvBA;;;;;;;;;;CAEKC,IAAAA;CAAwD,IAAA,EAAA,OAAA,WAAA;EAAxD,MAAC,UAAU,GAAG,yBAAyB,iBAAiB,WAAW,KAAK,CAAC;EAAjB,EAAA,KAAA;;;CAEjFC,IAAAA;;EAACC,KAAAA,oBAAAA,mBAAD;GAAoB,YAAA;GAAW,WAAW;GACxC,UAAA,oBAAC,YAAD,EAAoB,WAAW,6BAA+B,CAAA;EAC5C,CAAA;;;CAJtBC,IAAAA;CACG,IAAA,EAAA,OAAA,YAAA,EAAA,OADwG,SAAA,EAAA,OAAhFH,IAAAA;EAA3B,KAAA,qBAACI,eAAD;GAAgB,WAAWJ;GAA4E,GAAI;GAA3G,UAAA,CACG,UACDC,EAGc;;EAJb,EAAA,KAAA;EADwG,EAAA,KAAA;EAAhFD,EAAAA,KAAAA;;;CAD7B,OACEG;AAOJ"}

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

@@ -1,45 +1,113 @@
 import { Text } from "../../../../../i18n/text.js";
-import { MenuContent } from "../../../../../ui/menu/menu-content.js";
-import { MenuPopup } from "../../../../../ui/menu/menu-popup.js";
-import { MenuRoot } from "../../../../../ui/menu/menu-root.js";
-import { MenuTrigger } from "../../../../../ui/menu/menu-trigger.js";
+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/default/gear.js";
 import { Button } from "../../../shared/components/buttons/button.js";
 import { ButtonTooltip } from "../../../shared/components/buttons/button-tooltip.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/default-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 };

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

@@ -1 +1 @@
-{"version":3,"file":"settings-menu.js","names":["Menu.Root","TextPrimitive","Menu.Trigger","GearIconPrimitive","Menu.Popup","Menu.Content"],"sources":["../../../../../../../src/internal/skins/default-video/components/menus/settings-menu.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { settingsText } from '@videojs/core/i18n/text/menu';\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport { GearIcon as GearIconPrimitive } from '../../../../../icons/index';\nimport { Menu } from '../../../../skin-primitives';\nimport type { ClassValue } from '../../../../skin-primitives';\nimport { Text as TextPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\nimport { ButtonTooltip } from '../../../shared/components/buttons/button-tooltip';\n\nexport interface SettingsMenuProps extends Menu.RootProps {\n  className?: ClassValue;\n}\n\nexport function SettingsMenu({ children, className, ...props }: SettingsMenuProps) {\n  return (\n    <Menu.Root side=\"top\" align=\"center\" {...props}>\n      <ButtonTooltip label={<TextPrimitive token={settingsText.key}>{settingsText.text}</TextPrimitive>} side=\"top\">\n        <Menu.Trigger\n          render={<Button />}\n          className={(state) => cn('media-settings-menu-trigger', resolveClassName(className, state))}\n        >\n          <GearIconPrimitive className={cn('media-button-icon', 'media-settings-menu-trigger-icon')} />\n          <TextPrimitive className={'media-settings-menu-trigger-label'} token={settingsText.key}>\n            {settingsText.text}\n          </TextPrimitive>\n        </Menu.Trigger>\n      </ButtonTooltip>\n      <Menu.Popup\n        keepMounted\n        className={cn('media-popup', 'media-popup-surface', 'media-menu-popup', 'media-menu-resizable-popup')}\n      >\n        <Menu.Content className={'media-menu-content'}>{children}</Menu.Content>\n      </Menu.Popup>\n    </Menu.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,SAAgB,aAAa,EAAE,UAAU,WAAW,GAAG,SAA4B;CACjF,OACE,qBAACA,UAAD;EAAW,MAAK;EAAM,OAAM;EAAS,GAAI;EAAzC,UAAA,CACE,oBAAC,eAAD;GAAe,OAAO,oBAACC,MAAD;IAAe,OAAO,aAAa;IAAM,UAAA,aAAa;GAAoB,CAAA;GAAG,MAAK;GACtG,UAAA,qBAACC,aAAD;IACE,QAAQ,oBAAC,QAAD,CAAS,CAAA;IACjB,YAAY,UAAU,GAAG,+BAA+B,iBAAiB,WAAW,KAAK,CAAC;IAF5F,UAAA,CAIE,oBAACC,YAAD,EAAmB,WAAW,GAAG,qBAAqB,kCAAkC,EAAI,CAAA,GAC5F,oBAACF,MAAD;KAAe,WAAW;KAAqC,OAAO,aAAa;KAChF,UAAA,aAAa;IACD,CAAA,CACH;;EACD,CAAA,GACf,oBAACG,WAAD;GACE,aAAA;GACA,WAAW,GAAG,eAAe,uBAAuB,oBAAoB,4BAA4B;GAEpG,UAAA,oBAACC,aAAD;IAAc,WAAW;IAAuB;GAAuB,CAAA;EAC7D,CAAA,CACH;;AAEf"}
+{"version":3,"file":"settings-menu.js","names":["{ children, className, ...props }: SettingsMenuProps","<TextPrimitive token={settingsText.key}>{settingsText.text}</TextPrimitive>","<Button />","(state) => cn('media-settings-menu-trigger', resolveClassName(className, state))","<GearIconPrimitive className={cn('media-button-icon-base', 'media-settings-menu-trigger-icon')} />","<TextPrimitive className={'media-settings-menu-trigger-label'} token={settingsText.key}>\n            {settingsText.text}\n          </TextPrimitive>","<ButtonTooltip label={<TextPrimitive token={settingsText.key}>{settingsText.text}</TextPrimitive>} side=\"top\">\n        <Menu.Trigger\n          render={<Button />}\n          className={(state) => cn('media-settings-menu-trigger', resolveClassName(className, state))}\n        >\n          <GearIconPrimitive className={cn('media-button-icon-base', 'media-settings-menu-trigger-icon')} />\n          <TextPrimitive className={'media-settings-menu-trigger-label'} token={settingsText.key}>\n            {settingsText.text}\n          </TextPrimitive>\n        </Menu.Trigger>\n      </ButtonTooltip>","Menu.Trigger","cn('media-popup', 'media-popup-surface', 'media-menu-popup', 'media-menu-resizable-popup')","<Menu.Popup\n        keepMounted\n        className={cn('media-popup', 'media-popup-surface', 'media-menu-popup', 'media-menu-resizable-popup')}\n      >\n        <Menu.Content className={'media-menu-content'}>{children}</Menu.Content>\n      </Menu.Popup>","Menu.Popup","Menu.Content","<Menu.Root side=\"top\" align=\"center\" {...props}>\n      <ButtonTooltip label={<TextPrimitive token={settingsText.key}>{settingsText.text}</TextPrimitive>} side=\"top\">\n        <Menu.Trigger\n          render={<Button />}\n          className={(state) => cn('media-settings-menu-trigger', resolveClassName(className, state))}\n        >\n          <GearIconPrimitive className={cn('media-button-icon-base', 'media-settings-menu-trigger-icon')} />\n          <TextPrimitive className={'media-settings-menu-trigger-label'} token={settingsText.key}>\n            {settingsText.text}\n          </TextPrimitive>\n        </Menu.Trigger>\n      </ButtonTooltip>\n      <Menu.Popup\n        keepMounted\n        className={cn('media-popup', 'media-popup-surface', 'media-menu-popup', 'media-menu-resizable-popup')}\n      >\n        <Menu.Content className={'media-menu-content'}>{children}</Menu.Content>\n      </Menu.Popup>\n    </Menu.Root>","Menu.Root"],"sources":["../../../../../../../src/internal/skins/default-video/components/menus/settings-menu.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { settingsText } from '@videojs/core/i18n/text/menu';\nimport { cn } from '@videojs/utils/style';\nimport { resolveClassName } from '@videojs/utils/style';\n\nimport { GearIcon as GearIconPrimitive } from '../../../../../icons/index';\nimport { Menu } from '../../../../skin-primitives';\nimport type { ClassValue } from '../../../../skin-primitives';\nimport { Text as TextPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\nimport { ButtonTooltip } from '../../../shared/components/buttons/button-tooltip';\n\nexport interface SettingsMenuProps extends Omit<Menu.RootProps, 'children'> {\n  className?: ClassValue;\n\n  children?: Menu.ContentProps['children'];\n}\n\nexport function SettingsMenu({ children, className, ...props }: SettingsMenuProps) {\n  return (\n    <Menu.Root side=\"top\" align=\"center\" {...props}>\n      <ButtonTooltip label={<TextPrimitive token={settingsText.key}>{settingsText.text}</TextPrimitive>} side=\"top\">\n        <Menu.Trigger\n          render={<Button />}\n          className={(state) => cn('media-settings-menu-trigger', resolveClassName(className, state))}\n        >\n          <GearIconPrimitive className={cn('media-button-icon-base', 'media-settings-menu-trigger-icon')} />\n          <TextPrimitive className={'media-settings-menu-trigger-label'} token={settingsText.key}>\n            {settingsText.text}\n          </TextPrimitive>\n        </Menu.Trigger>\n      </ButtonTooltip>\n      <Menu.Popup\n        keepMounted\n        className={cn('media-popup', 'media-popup-surface', 'media-menu-popup', 'media-menu-resizable-popup')}\n      >\n        <Menu.Content className={'media-menu-content'}>{children}</Menu.Content>\n      </Menu.Popup>\n    </Menu.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAmBA,SAAgB,aAAA,IAAmE;;CAApD,IAAA;CAAU,IAAA;CAAc,IAAA;CAA1BA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,UAAU,cAAW,SAAvBA;;;;;;;;;;CAGDC,IAAAA;;EAAC,KAAA,oBAAA,MAAD;GAAe,OAAO,aAAa;GAAM,UAAA,aAAa;EAAoB,CAAA;;;CAEpFC,IAAAA;;EAAC,KAAA,oBAAA,QAAD,CAAS,CAAA;;;CACNC,IAAAA;CAA8D,IAAA,EAAA,OAAA,WAAA;EAA9D,MAAC,UAAU,GAAG,+BAA+B,iBAAiB,WAAW,KAAK,CAAC;EAAjB,EAAA,KAAA;;;CAEzEC,IAAAA;CACAC,IAAAA;;EADA,KAAA,oBAAC,YAAD,EAAmB,WAAW,GAAG,0BAA0B,kCAAkC,EAAI,CAAA;EACjG,KAAA,oBAAC,MAAD;GAAe,WAAW;GAAqC,OAAO,aAAa;GAChF,UAAA,aAAa;EACD,CAAA;;;;;;;CARnBC,IAAAA;CAGeH,IAAAA,EAAAA,QAAAA,IAAAA;EAHf,KAAA,oBAAC,eAAD;GAAe,OAAOF;GAA6E,MAAK;GACtG,UAAA,qBAACM,aAAD;IACE,QAAQL;IACR,WAAWC;IAFb,UAAA,CAIEC,IACAC,EAGY;;EACD,CAAA;EAPAF,EAAAA,MAAAA;;;CAUFK,IAAAA;;EAAG,KAAA,GAAA,eAAe,uBAAuB,oBAAoB,4BAA4B;;;CAFtGC,IAAAA;CAIkD,IAAA,EAAA,QAAA,UAAA;EAJlD,KAAA,oBAACC,WAAD;GACE,aAAA;GACA,WAAWF;GAEX,UAAA,oBAACG,aAAD;IAAc,WAAW;IAAuB;GAAuB,CAAA;EAC7D,CAAA;EADsC,EAAA,MAAA;;;CAhBpDC,IAAAA;CAAyC,IAAA,EAAA,QAAA,SAAA,EAAA,QACvCN,MAAAA,EAAAA,QAWAG,IAAAA;EAZF,KAAA,qBAACI,UAAD;GAAW,MAAK;GAAM,OAAM;GAAS,GAAI;GAAzC,UAAA,CACEP,IAWAG,EAMS;;EAlB8B,EAAA,MAAA;EACvCH,EAAAA,MAAAA;EAWAG,EAAAA,MAAAA;;;CAbJ,OACEG;AAoBJ"}

package/dist/dev/internal/skins/default-video/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/default-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 };
+
+//# sourceMappingURL=volume-popover.js.map

package/dist/dev/internal/skins/default-video/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/default-video/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"}