@videojs/react 0.1.0-preview.9 → 10.0.0-alpha.4

package/dist/default/ui/seek-button/seek-button.js

@@ -0,0 +1,62 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useButton } from "../hooks/use-button.js";
+import { selectTime } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/seek-button/seek-button.tsx
+/**
+* A button that seeks forward or backward by a configurable number of seconds.
+*
+* @example
+* ```tsx
+* <SeekButton seconds={-10} />
+*
+* <SeekButton
+*   seconds={30}
+*   render={(props, state) => (
+*     <button {...props}>
+*       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
+*     </button>
+*   )}
+* />
+* ```
+*/
+const SeekButton = forwardRef(function SeekButton(componentProps, forwardedRef) {
+	const { render, className, style, seconds, label, disabled, ...elementProps } = componentProps;
+	const time = usePlayer(selectTime);
+	const [core] = useState(() => new SeekButtonCore());
+	core.setProps({
+		seconds,
+		label,
+		disabled
+	});
+	const { getButtonProps, buttonRef } = useButton({
+		displayName: "SeekButton",
+		onActivate: () => core.seek(time),
+		isDisabled: () => disabled || !time
+	});
+	if (!time) return null;
+	const state = core.getState(time);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: SeekButtonDataAttrs,
+		ref: [forwardedRef, buttonRef],
+		props: [
+			core.getAttrs(state),
+			elementProps,
+			getButtonProps()
+		]
+	});
+});
+
+//#endregion
+export { SeekButton };
+//# sourceMappingURL=seek-button.js.map

package/dist/default/ui/seek-button/seek-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-button.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"sourcesContent":["'use client';\n\nimport { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\n\nexport interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}\n\n/**\n * A button that seeks forward or backward by a configurable number of seconds.\n *\n * @example\n * ```tsx\n * <SeekButton seconds={-10} />\n *\n * <SeekButton\n *   seconds={30}\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const SeekButton = forwardRef(function SeekButton(\n  componentProps: SeekButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, seconds, label, disabled, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n\n  const [core] = useState(() => new SeekButtonCore());\n  core.setProps({ seconds, label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'SeekButton',\n    onActivate: () => core.seek(time!),\n    isDisabled: () => disabled || !time,\n  });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('SeekButton', 'time');\n    return null;\n  }\n\n  const state = core.getState(time);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: SeekButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace SeekButton {\n  export type Props = SeekButtonProps;\n  export type State = SeekButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,OAAO,UAAU,GAAG,iBAAiB;CAEhF,MAAM,OAAO,UAAU,WAAW;CAElC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAS;EAAO;EAAU,CAAC;CAE3C,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,KAAK,KAAM;EAClC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,KAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,KAAK;AAEjC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}

package/dist/default/ui/time/index.js

@@ -0,0 +1,3 @@
+import { index_parts_exports } from "./index.parts.js";
+
+export { index_parts_exports as Time };

package/dist/default/ui/time/index.parts.js

@@ -0,0 +1,15 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { Group } from "./time-group.js";
+import { Separator } from "./time-separator.js";
+import { Value } from "./time-value.js";
+
+//#region src/ui/time/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Group: () => Group,
+	Separator: () => Separator,
+	Value: () => Value
+});
+
+//#endregion
+export { index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/time/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/time/index.parts.ts"],"sourcesContent":["export { Group, type GroupProps } from './time-group';\nexport { Separator, type SeparatorProps } from './time-separator';\nexport { Value, type ValueProps } from './time-value';\n"],"mappings":""}

package/dist/default/ui/time/time-group.js

@@ -0,0 +1,34 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef } from "react";
+
+//#region src/ui/time/time-group.tsx
+/**
+* Container for composed time displays. Renders a `<span>` element.
+*
+* @example
+* ```tsx
+* <Time.Group>
+*   <Time.Value type="current" />
+*   <Time.Separator />
+*   <Time.Value type="duration" />
+* </Time.Group>
+* ```
+*/
+const Group = forwardRef(function Group(componentProps, forwardedRef) {
+	const { render, className, style, children, ...elementProps } = componentProps;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state: {},
+		ref: [forwardedRef],
+		props: [{ children }, elementProps]
+	});
+});
+
+//#endregion
+export { Group };
+//# sourceMappingURL=time-group.js.map

package/dist/default/ui/time/time-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-group.js","names":[],"sources":["../../../../src/ui/time/time-group.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Group (no dynamic state)\ntype GroupState = Record<string, never>;\n\nexport interface GroupProps extends UIComponentProps<'span', GroupState> {\n  /** Time value components to render inside the group. */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Container for composed time displays. Renders a `<span>` element.\n *\n * @example\n * ```tsx\n * <Time.Group>\n *   <Time.Value type=\"current\" />\n *   <Time.Separator />\n *   <Time.Value type=\"duration\" />\n * </Time.Group>\n * ```\n */\nexport const Group = forwardRef(function Group(\n  componentProps: GroupProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const state: GroupState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ children }, elementProps],\n    }\n  );\n});\n\nexport namespace Group {\n  export type Props = GroupProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;AAIhE,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OANsB,EAAE;EAOxB,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa;EACpC,CACF;EACD"}

package/dist/default/ui/time/time-separator.js

@@ -0,0 +1,34 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef } from "react";
+
+//#region src/ui/time/time-separator.tsx
+/**
+* Divider between time values. Hidden from screen readers.
+*
+* @example
+* ```tsx
+* <Time.Separator />
+* <Time.Separator> of </Time.Separator>
+* ```
+*/
+const Separator = forwardRef(function Separator(componentProps, forwardedRef) {
+	const { render, className, style, children = "/", ...elementProps } = componentProps;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state: {},
+		ref: [forwardedRef],
+		props: [{
+			"aria-hidden": "true",
+			children
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { Separator };
+//# sourceMappingURL=time-separator.js.map

package/dist/default/ui/time/time-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-separator.js","names":[],"sources":["../../../../src/ui/time/time-separator.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Separator (no dynamic state)\ntype SeparatorState = Record<string, never>;\n\nexport interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {\n  /** Separator content. Defaults to \"/\". */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Divider between time values. Hidden from screen readers.\n *\n * @example\n * ```tsx\n * <Time.Separator />\n * <Time.Separator> of </Time.Separator>\n * ```\n */\nexport const Separator = forwardRef(function Separator(\n  componentProps: SeparatorProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children = '/', ...elementProps } = componentProps;\n\n  const state: SeparatorState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': 'true', children }, elementProps],\n    }\n  );\n});\n\nexport namespace Separator {\n  export type Props = SeparatorProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,KAAK,GAAG,iBAAiB;AAItE,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAN0B,EAAE;EAO5B,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE,eAAe;GAAQ;GAAU,EAAE,aAAa;EAC3D,CACF;EACD"}

package/dist/default/ui/time/time-value.js

@@ -0,0 +1,54 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { selectTime } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TimeCore, TimeDataAttrs } from "@videojs/core";
+
+//#region src/ui/time/time-value.tsx
+/**
+* Displays a formatted time value (current, duration, or remaining).
+*
+* @example
+* ```tsx
+* <Time.Value />
+* <Time.Value type="duration" />
+* <Time.Value type="remaining" negativeSign="−" />
+* ```
+*/
+const Value = forwardRef(function Value(componentProps, forwardedRef) {
+	const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;
+	const time = usePlayer(selectTime);
+	const [core] = useState(() => new TimeCore());
+	core.setProps({
+		type,
+		negativeSign,
+		label
+	});
+	if (!time) return null;
+	const state = core.getState(time);
+	const content = state.negative ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children: negativeSign ?? TimeCore.defaultProps.negativeSign
+	}), state.text] }) : state.text;
+	return renderElement("time", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: TimeDataAttrs,
+		ref: [forwardedRef],
+		props: [{
+			dateTime: state.datetime,
+			children: content,
+			...core.getAttrs(state)
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { Value };
+//# sourceMappingURL=time-value.js.map

package/dist/default/ui/time/time-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}\n\n/**\n * Displays a formatted time value (current, duration, or remaining).\n *\n * @example\n * ```tsx\n * <Time.Value />\n * <Time.Value type=\"duration\" />\n * <Time.Value type=\"remaining\" negativeSign=\"−\" />\n * ```\n */\nexport const Value = forwardRef(function Value(\n  componentProps: ValueProps,\n  forwardedRef: ForwardedRef<HTMLTimeElement>\n) {\n  const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n\n  const [core] = useState(() => new TimeCore());\n  core.setProps({ type, negativeSign, label });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  const state = core.getState(time);\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...core.getAttrs(state),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,WAAW;CAElC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;AAC7C,MAAK,SAAS;EAAE;EAAM;EAAc;EAAO,CAAC;AAE5C,KAAI,CAAC,KAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,KAAK;CAEjC,MAAM,UAAU,MAAM,WACpB,4CACE,oBAAC;EAAK,eAAY;YAAQ,gBAAgB,SAAS,aAAa;GAAoB,EACnF,MAAM,QACN,GAEH,MAAM;AAGR,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG,KAAK,SAAS,MAAM;GACxB,EACD,aACD;EACF,CACF;EACD"}

package/dist/default/utils/attach-media-element.js

@@ -0,0 +1,12 @@
+//#region src/utils/attach-media-element.ts
+function attachMediaElement(media) {
+	return (element) => {
+		if (element) media.attach(element);
+		else media.detach();
+		return () => media.detach();
+	};
+}
+
+//#endregion
+export { attachMediaElement };
+//# sourceMappingURL=attach-media-element.js.map

package/dist/default/utils/attach-media-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attach-media-element.js","names":[],"sources":["../../../src/utils/attach-media-element.ts"],"sourcesContent":["interface Attachable {\n  attach(target: EventTarget): void;\n  detach(): void;\n}\n\nexport function attachMediaElement<T extends HTMLVideoElement>(media: Attachable): (element: T | null) => void {\n  return (element: T | null) => {\n    if (element) {\n      media.attach(element);\n    } else {\n      media.detach();\n    }\n    // React 19+ accepts a cleanup function as the return value\n    return () => media.detach();\n  };\n}\n"],"mappings":";AAKA,SAAgB,mBAA+C,OAAgD;AAC7G,SAAQ,YAAsB;AAC5B,MAAI,QACF,OAAM,OAAO,QAAQ;MAErB,OAAM,QAAQ;AAGhB,eAAa,MAAM,QAAQ"}

package/dist/default/utils/media-props.js

@@ -0,0 +1,11 @@
+//#region src/utils/media-props.ts
+function mediaProps(media, props) {
+	const { src, ...remainingProps } = props;
+	if (props.preload && media.preload !== props.preload) media.preload = props.preload;
+	if (media.src !== src) media.src = src ?? "";
+	return remainingProps;
+}
+
+//#endregion
+export { mediaProps };
+//# sourceMappingURL=media-props.js.map

package/dist/default/utils/media-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-props.js","names":[],"sources":["../../../src/utils/media-props.ts"],"sourcesContent":["import type { MediaApi } from '@videojs/core/dom';\nimport type { VideoHTMLAttributes } from 'react';\n\ninterface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport function mediaProps(media: MediaApi, props: VideoProps) {\n  const { src, ...remainingProps } = props;\n\n  // Preload can still be passed as a prop to the native media element\n  if (props.preload && media.preload !== props.preload) {\n    media.preload = props.preload as '' | 'none' | 'metadata' | 'auto';\n  }\n\n  if (media.src !== src) {\n    media.src = src ?? '';\n  }\n\n  // The remaining props are passed to the native media element\n  return remainingProps;\n}\n"],"mappings":";AAKA,SAAgB,WAAW,OAAiB,OAAmB;CAC7D,MAAM,EAAE,KAAK,GAAG,mBAAmB;AAGnC,KAAI,MAAM,WAAW,MAAM,YAAY,MAAM,QAC3C,OAAM,UAAU,MAAM;AAGxB,KAAI,MAAM,QAAQ,IAChB,OAAM,MAAM,OAAO;AAIrB,QAAO"}

package/dist/default/utils/merge-props.js

@@ -0,0 +1,85 @@
+'use client';
+
+//#region src/utils/merge-props.ts
+/**
+* Check if a key is an event handler key (on* with capital letter).
+*/
+function isEventHandlerKey(key) {
+	return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90;
+}
+/**
+* Check if a key/value pair is an event handler (includes undefined values).
+*/
+function isEventHandler(key, value) {
+	return isEventHandlerKey(key) && (typeof value === "function" || typeof value === "undefined");
+}
+/**
+* Merge two event handlers - external runs first, ours runs second.
+*/
+function mergeEventHandlers(ours, theirs) {
+	if (!theirs) return ours;
+	if (!ours) return theirs;
+	return (event) => {
+		theirs(event);
+		ours(event);
+	};
+}
+/**
+* Merge two className values - concatenate strings.
+*/
+function mergeClassNames(ours, theirs) {
+	if (theirs && ours) return `${theirs} ${ours}`;
+	return theirs || ours;
+}
+/**
+* Merge two style objects - theirs overwrites conflicts.
+*/
+function mergeStyles(ours, theirs) {
+	if (!theirs) return ours;
+	if (!ours) return theirs;
+	return {
+		...ours,
+		...theirs
+	};
+}
+/**
+* Merge a single props object into accumulated result.
+*/
+function mergeOne(merged, props) {
+	if (!props) return merged;
+	for (const key in props) {
+		const value = props[key];
+		if (key === "className") merged.className = mergeClassNames(merged.className, value);
+		else if (key === "style") merged.style = mergeStyles(merged.style, value);
+		else if (isEventHandler(key, value)) merged[key] = mergeEventHandlers(merged[key], value);
+		else merged[key] = value;
+	}
+	return merged;
+}
+/**
+* Merge multiple props objects.
+*
+* - Event handlers (on*): chained - external first, ours second
+* - className: concatenated
+* - style: merged objects (external wins conflicts)
+* - other: last one wins
+*
+* @public
+* @example
+* ```ts
+* const merged = mergeProps(
+*   { onClick: ourHandler, className: 'base' },
+*   { onClick: theirHandler, className: 'custom' }
+* );
+* // { onClick: chainedHandler, className: 'custom base' }
+* ```
+*/
+function mergeProps(...propSets) {
+	let merged = {};
+	for (const props of propSets) merged = mergeOne(merged, props);
+	return merged;
+}
+
+//#endregion
+export { mergeProps };
+//# sourceMappingURL=merge-props.js.map

package/dist/default/utils/merge-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["'use client';\n\nimport type { ComponentPropsWithRef, CSSProperties, ElementType, SyntheticEvent } from 'react';\n\ntype Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;\n\n/**\n * Check if a key is an event handler key (on* with capital letter).\n */\nfunction isEventHandlerKey(key: string): boolean {\n  return (\n    key.charCodeAt(0) === 111 /* o */ &&\n    key.charCodeAt(1) === 110 /* n */ &&\n    key.charCodeAt(2) >= 65 /* A */ &&\n    key.charCodeAt(2) <= 90 /* Z */\n  );\n}\n\n/**\n * Check if a key/value pair is an event handler (includes undefined values).\n */\nfunction isEventHandler(key: string, value: unknown): boolean {\n  return isEventHandlerKey(key) && (typeof value === 'function' || typeof value === 'undefined');\n}\n\n/**\n * Merge two event handlers - external runs first, ours runs second.\n */\nfunction mergeEventHandlers(\n  ours: ((event: SyntheticEvent) => void) | undefined,\n  theirs: ((event: SyntheticEvent) => void) | undefined\n): ((event: SyntheticEvent) => void) | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n\n  return (event: SyntheticEvent) => {\n    theirs(event);\n    ours(event);\n  };\n}\n\n/**\n * Merge two className values - concatenate strings.\n */\nfunction mergeClassNames(ours: string | undefined, theirs: string | undefined): string | undefined {\n  if (theirs && ours) return `${theirs} ${ours}`;\n  return theirs || ours;\n}\n\n/**\n * Merge two style objects - theirs overwrites conflicts.\n */\nfunction mergeStyles(ours: CSSProperties | undefined, theirs: CSSProperties | undefined): CSSProperties | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n  return { ...ours, ...theirs };\n}\n\n/**\n * Merge a single props object into accumulated result.\n */\nfunction mergeOne<T extends ElementType>(\n  merged: Record<string, unknown>,\n  props: Props<T> | undefined\n): Record<string, unknown> {\n  if (!props) return merged;\n\n  for (const key in props) {\n    const value = props[key as keyof typeof props];\n\n    if (key === 'className') {\n      merged.className = mergeClassNames(merged.className as string | undefined, value as string);\n    } else if (key === 'style') {\n      merged.style = mergeStyles(merged.style as CSSProperties | undefined, value as CSSProperties);\n    } else if (isEventHandler(key, value)) {\n      merged[key] = mergeEventHandlers(\n        merged[key] as ((event: SyntheticEvent) => void) | undefined,\n        value as (event: SyntheticEvent) => void\n      );\n    } else {\n      merged[key] = value;\n    }\n  }\n\n  return merged;\n}\n\n/**\n * Merge multiple props objects.\n *\n * - Event handlers (on*): chained - external first, ours second\n * - className: concatenated\n * - style: merged objects (external wins conflicts)\n * - other: last one wins\n *\n * @public\n * @example\n * ```ts\n * const merged = mergeProps(\n *   { onClick: ourHandler, className: 'base' },\n *   { onClick: theirHandler, className: 'custom' }\n * );\n * // { onClick: chainedHandler, className: 'custom base' }\n * ```\n */\nexport function mergeProps<T extends ElementType>(...propSets: (Props<T> | undefined)[]): Props<T> {\n  let merged: Record<string, unknown> = {};\n\n  for (const props of propSets) {\n    merged = mergeOne(merged, props);\n  }\n\n  return merged as Props<T>;\n}\n"],"mappings":";;;;;;AASA,SAAS,kBAAkB,KAAsB;AAC/C,QACE,IAAI,WAAW,EAAE,KAAK,OACtB,IAAI,WAAW,EAAE,KAAK,OACtB,IAAI,WAAW,EAAE,IAAI,MACrB,IAAI,WAAW,EAAE,IAAI;;;;;AAOzB,SAAS,eAAe,KAAa,OAAyB;AAC5D,QAAO,kBAAkB,IAAI,KAAK,OAAO,UAAU,cAAc,OAAO,UAAU;;;;;AAMpF,SAAS,mBACP,MACA,QAC+C;AAC/C,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;AAElB,SAAQ,UAA0B;AAChC,SAAO,MAAM;AACb,OAAK,MAAM;;;;;;AAOf,SAAS,gBAAgB,MAA0B,QAAgD;AACjG,KAAI,UAAU,KAAM,QAAO,GAAG,OAAO,GAAG;AACxC,QAAO,UAAU;;;;;AAMnB,SAAS,YAAY,MAAiC,QAA8D;AAClH,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;AAClB,QAAO;EAAE,GAAG;EAAM,GAAG;EAAQ;;;;;AAM/B,SAAS,SACP,QACA,OACyB;AACzB,KAAI,CAAC,MAAO,QAAO;AAEnB,MAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;AAEpB,MAAI,QAAQ,YACV,QAAO,YAAY,gBAAgB,OAAO,WAAiC,MAAgB;WAClF,QAAQ,QACjB,QAAO,QAAQ,YAAY,OAAO,OAAoC,MAAuB;WACpF,eAAe,KAAK,MAAM,CACnC,QAAO,OAAO,mBACZ,OAAO,MACP,MACD;MAED,QAAO,OAAO;;AAIlB,QAAO;;;;;;;;;;;;;;;;;;;;AAqBT,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,EAAE;AAExC,MAAK,MAAM,SAAS,SAClB,UAAS,SAAS,QAAQ,MAAM;AAGlC,QAAO"}

package/dist/default/utils/use-composed-refs.js

@@ -0,0 +1,57 @@
+'use client';
+
+import { useCallback } from "react";
+import { isFunction } from "@videojs/utils/predicate";
+
+//#region src/utils/use-composed-refs.ts
+/**
+* Set a given ref to a given value.
+*
+* Handles both callback refs and RefObject(s).
+*
+* @returns Cleanup function if the ref callback returned one (React 19+)
+*/
+function setRef(ref, value) {
+	if (isFunction(ref)) return ref(value);
+	else if (ref !== null && ref !== void 0) ref.current = value;
+}
+/**
+* Compose multiple refs into a single callback ref.
+*
+* @example
+* ```tsx
+* const composedRef = composeRefs(ref1, ref2, ref3);
+* return <div ref={composedRef} />;
+* ```
+*/
+function composeRefs(...refs) {
+	const flatRefs = refs.flat();
+	return (node) => {
+		const cleanups = flatRefs.map((ref) => setRef(ref, node));
+		if (cleanups.some(isFunction)) return () => {
+			for (let i = 0; i < cleanups.length; i++) {
+				const cleanup = cleanups[i];
+				if (isFunction(cleanup)) cleanup();
+				else setRef(flatRefs[i], null);
+			}
+		};
+	};
+}
+/**
+* Hook that composes multiple refs into a single callback ref.
+*
+* Memoized for stable reference.
+*
+* @example
+* ```tsx
+* const composedRef = useComposedRefs(forwardedRef, localRef);
+* return <div ref={composedRef} />;
+* ```
+*/
+function useComposedRefs(...refs) {
+	return useCallback(composeRefs(...refs), [...refs]);
+}
+
+//#endregion
+export { composeRefs, useComposedRefs };
+//# sourceMappingURL=use-composed-refs.js.map

package/dist/default/utils/use-composed-refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["'use client';\n\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { Ref, RefCallback } from 'react';\n\nimport { useCallback } from 'react';\n\ntype OptionalRef<T> = Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value.\n *\n * Handles both callback refs and RefObject(s).\n *\n * @returns Cleanup function if the ref callback returned one (React 19+)\n */\nfunction setRef<T>(ref: OptionalRef<T>, value: T): (() => void) | void | undefined {\n  if (isFunction(ref)) {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * Compose multiple refs into a single callback ref.\n *\n * @example\n * ```tsx\n * const composedRef = composeRefs(ref1, ref2, ref3);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]): RefCallback<T> {\n  const flatRefs = refs.flat();\n\n  return (node): (() => void) | void => {\n    const cleanups = flatRefs.map((ref) => setRef(ref, node));\n\n    // Only return cleanup if any refs returned one (React 19+).\n    // React 18 handles cleanup by calling the ref callback with null.\n    if (cleanups.some(isFunction)) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (isFunction(cleanup)) {\n            cleanup();\n          } else {\n            setRef(flatRefs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * Hook that composes multiple refs into a single callback ref.\n *\n * Memoized for stable reference.\n *\n * @example\n * ```tsx\n * const composedRef = useComposedRefs(forwardedRef, localRef);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T> {\n  return useCallback(composeRefs(...refs), [...refs]);\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,SAAS,OAAU,KAAqB,OAA2C;AACjF,KAAI,WAAW,IAAI,CACjB,QAAO,IAAI,MAAM;UACR,QAAQ,QAAQ,QAAQ,OACjC,KAAI,UAAU;;;;;;;;;;;AAalB,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,MAAM;AAE5B,SAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,KAAK,CAAC;AAIzD,MAAI,SAAS,KAAK,WAAW,CAC3B,cAAa;AACX,QAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;AACzB,QAAI,WAAW,QAAQ,CACrB,UAAS;QAET,QAAO,SAAS,IAAI,KAAK;;;;;;;;;;;;;;;;AAmBrC,SAAgB,gBAAmB,GAAG,MAAwC;AAC5E,QAAO,YAAY,YAAY,GAAG,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC"}

package/dist/default/utils/use-render.js

@@ -0,0 +1,71 @@
+'use client';
+
+import { composeRefs } from "./use-composed-refs.js";
+import { mergeProps } from "./merge-props.js";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { cloneElement, createElement, isValidElement } from "react";
+import { isFunction } from "@videojs/utils/predicate";
+
+//#region src/utils/use-render.tsx
+function resolveClassName(className, state) {
+	return isFunction(className) ? className(state) : className;
+}
+function resolveStyle(style, state) {
+	return isFunction(style) ? style(state) : style;
+}
+function getElementRef(element) {
+	const elementAny = element;
+	return elementAny.ref ?? elementAny.props?.ref;
+}
+/**
+* Render a UI component element.
+*
+* Handles:
+* - Default tag rendering
+* - Render prop (element or function)
+* - Props merging (event handlers chained, className concatenated, style merged)
+* - Ref composition
+* - className/style as functions of state
+*
+* @public
+* @example
+* ```tsx
+* return renderElement('button', componentProps, {
+*   state,
+*   ref: [forwardedRef, buttonRef],
+*   props: [{ type: 'button' }, elementProps, getButtonProps],
+* });
+* ```
+*/
+function renderElement(element, componentProps, params) {
+	const { className: classNameProp, style: styleProp, render } = componentProps;
+	const { state, ref, props, stateAttrMap } = params;
+	const className = resolveClassName(classNameProp, state);
+	const style = resolveStyle(styleProp, state);
+	const mergedProps = mergeProps(getStateDataAttrs(state, stateAttrMap), ...Array.isArray(props) ? props : props ? [props] : []);
+	if (className !== void 0) mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;
+	if (style !== void 0) mergedProps.style = mergedProps.style ? {
+		...mergedProps.style,
+		...style
+	} : style;
+	if (isFunction(render)) {
+		const mergedRef = composeRefs(ref, mergedProps.ref);
+		return render({
+			...mergedProps,
+			ref: mergedRef
+		}, state);
+	}
+	if (isValidElement(render)) {
+		const elementRef = getElementRef(render);
+		const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);
+		const elementProps = mergeProps(mergedProps, render.props);
+		elementProps.ref = mergedRef;
+		return cloneElement(render, elementProps);
+	}
+	mergedProps.ref = composeRefs(ref, mergedProps.ref);
+	return createElement(element, mergedProps);
+}
+
+//#endregion
+export { renderElement };
+//# sourceMappingURL=use-render.js.map

package/dist/default/utils/use-render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["'use client';\n\nimport { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n  className?: string | ((state: State) => string | undefined) | undefined;\n  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;\n  render?: RenderProp<State> | undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n  state: State;\n  ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;\n  props?: object | object[] | undefined;\n  stateAttrMap?: StateAttrMap<State> | undefined;\n}\n\nfunction resolveClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n): string | undefined {\n  return isFunction(className) ? className(state) : className;\n}\n\nfunction resolveStyle<State>(\n  style: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined,\n  state: State\n): CSSProperties | undefined {\n  return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19+ uses element.props.ref, older versions use element.ref\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const elementAny = element as any;\n  return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/**\n * Render a UI component element.\n *\n * Handles:\n * - Default tag rendering\n * - Render prop (element or function)\n * - Props merging (event handlers chained, className concatenated, style merged)\n * - Ref composition\n * - className/style as functions of state\n *\n * @public\n * @example\n * ```tsx\n * return renderElement('button', componentProps, {\n *   state,\n *   ref: [forwardedRef, buttonRef],\n *   props: [{ type: 'button' }, elementProps, getButtonProps],\n * });\n * ```\n */\nexport function renderElement<\n  State extends object,\n  RenderedElementType extends Element,\n  TagName extends IntrinsicTagName,\n>(\n  element: TagName,\n  componentProps: UseRenderComponentProps<State>,\n  params: UseRenderParameters<State, RenderedElementType>\n): ReactElement | null {\n  const { className: classNameProp, style: styleProp, render } = componentProps;\n  const { state, ref, props, stateAttrMap } = params;\n\n  // Resolve className and style if they're functions\n  const className = resolveClassName(classNameProp, state);\n  const style = resolveStyle(styleProp, state);\n\n  // Generate data attributes from state\n  const stateDataAttrs = getStateDataAttrs(state, stateAttrMap);\n\n  // Merge: state data attrs first, then props (so props can override)\n  const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n  const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n  if (className !== undefined) {\n    // Add resolved className and style\n    mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n  }\n\n  if (style !== undefined) {\n    mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n  }\n\n  if (isFunction(render)) {\n    // Render function: call with props and state\n    const mergedRef = composeRefs(ref, mergedProps.ref);\n    return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n  }\n\n  if (isValidElement(render)) {\n    const elementRef = getElementRef(render);\n\n    const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n    const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n    elementProps.ref = mergedRef;\n\n    return cloneElement(render, elementProps);\n  }\n\n  // Default tag\n  const mergedRef = composeRefs(ref, mergedProps.ref);\n  mergedProps.ref = mergedRef;\n\n  return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n  export type ComponentProps<State> = UseRenderComponentProps<State>;\n  export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAS,iBACP,WACA,OACoB;AACpB,QAAO,WAAW,UAAU,GAAG,UAAU,MAAM,GAAG;;AAGpD,SAAS,aACP,OACA,OAC2B;AAC3B,QAAO,WAAW,MAAM,GAAG,MAAM,MAAM,GAAG;;AAG5C,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;AACnB,QAAO,WAAW,OAAO,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;AAuB7C,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,MAAM;CACxD,MAAM,QAAQ,aAAa,WAAW,MAAM;CAO5C,MAAM,cAAc,WAJG,kBAAkB,OAAO,aAAa,EAId,GAD5B,MAAM,QAAQ,MAAM,GAAG,QAAQ,QAAQ,CAAC,MAAM,GAAG,EAAE,CACsB;AAE5F,KAAI,cAAc,OAEhB,aAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;AAG5F,KAAI,UAAU,OACZ,aAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;EAAO,GAAG;AAGlG,KAAI,WAAW,OAAO,EAAE;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,IAAI;AACnD,SAAO,OAAO;GAAE,GAAG;GAAa,KAAK;GAAW,EAAe,MAAM;;AAGvE,KAAI,eAAe,OAAO,EAAE;EAC1B,MAAM,aAAa,cAAc,OAAO;EAExC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,WAAW;EAE/D,MAAM,eAAe,WAAW,aAAa,OAAO,MAAiC;AACrF,eAAa,MAAM;AAEnB,SAAO,aAAa,QAAQ,aAAa;;AAK3C,aAAY,MADM,YAAY,KAAK,YAAY,IAAI;AAGnD,QAAO,cAAc,SAAS,YAAY"}

package/dist/dev/_virtual/_rolldown/runtime.js

@@ -0,0 +1,36 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+
+//#endregion
+export { __exportAll, __reExport };

package/dist/dev/icons/dist/react/default/captions-off.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../icons/dist/react/default/captions-off.js
+const CaptionsOffIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	viewBox: "0 0 18 18",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("rect", {
+			width: 16,
+			height: 12,
+			x: 1,
+			y: 3,
+			stroke: "currentColor",
+			strokeWidth: 2,
+			rx: 3
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: 3,
+			height: 2,
+			x: 3,
+			y: 8,
+			fill: "currentColor",
+			rx: 1
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: 2,
+			height: 2,
+			x: 13,
+			y: 8,
+			fill: "currentColor",
+			rx: 1
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: 4,
+			height: 2,
+			x: 11,
+			y: 11,
+			fill: "currentColor",
+			rx: 1
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: 5,
+			height: 2,
+			x: 7,
+			y: 8,
+			fill: "currentColor",
+			rx: 1
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: 7,
+			height: 2,
+			x: 3,
+			y: 11,
+			fill: "currentColor",
+			rx: 1
+		})
+	]
+});
+
+//#endregion
+export { CaptionsOffIcon as default };
+//# sourceMappingURL=captions-off.js.map

package/dist/dev/icons/dist/react/default/captions-off.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"captions-off.js","names":[],"sources":["../../../../../../../icons/dist/react/default/captions-off.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst CaptionsOffIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"rect\", { width: 16, height: 12, x: 1, y: 3, stroke: \"currentColor\", strokeWidth: 2, rx: 3 }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 3, height: 2, x: 3, y: 8, fill: \"currentColor\", rx: 1 }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 2, height: 2, x: 13, y: 8, fill: \"currentColor\", rx: 1 }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 4, height: 2, x: 11, y: 11, fill: \"currentColor\", rx: 1 }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 5, height: 2, x: 7, y: 8, fill: \"currentColor\", rx: 1 }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 7, height: 2, x: 3, y: 11, fill: \"currentColor\", rx: 1 })\n] });\nexport default CaptionsOffIcon;\n"],"mappings":";;;AACA,MAAM,mBAAmB,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU;EACnK,oBAAI,QAAQ;GAAE,OAAO;GAAI,QAAQ;GAAI,GAAG;GAAG,GAAG;GAAG,QAAQ;GAAgB,aAAa;GAAG,IAAI;GAAG,CAAC;EACjG,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAG,GAAG;GAAG,MAAM;GAAgB,IAAI;GAAG,CAAC;EAC7E,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAI,GAAG;GAAG,MAAM;GAAgB,IAAI;GAAG,CAAC;EAC9E,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAI,GAAG;GAAI,MAAM;GAAgB,IAAI;GAAG,CAAC;EAC/E,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAG,GAAG;GAAG,MAAM;GAAgB,IAAI;GAAG,CAAC;EAC7E,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAG,GAAG;GAAI,MAAM;GAAgB,IAAI;GAAG,CAAC;EAC/F;CAAE,CAAC"}

package/dist/dev/icons/dist/react/default/captions-on.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region ../icons/dist/react/default/captions-on.js
+const CaptionsOnIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	viewBox: "0 0 18 18",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M15 2a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zM4 11a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2zm8 0a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zM4 8a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zm4 0a1 1 0 0 0 0 2h3a1 1 0 1 0 0-2zm6 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2"
+	})
+});
+
+//#endregion
+export { CaptionsOnIcon as default };
+//# sourceMappingURL=captions-on.js.map