@apple-pie/slice 0.1.60 → 0.2.0

package/dist/esm/chunks/UploadArea-Dq7ST-RG.mjs

@@ -0,0 +1,237 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import React, { useRef, useId, useState, useEffect } from "react";
+
+import { corners } from "../theme/corners.mjs";
+
+import { s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { F as FileList } from "./FileList-DxB0ZORo.mjs";
+
+import { I as Icon } from "./Icon-43T0fkr6.mjs";
+
+import { P as ProgressIndicator } from "./ProgressIndicator-CR3pA1Me.mjs";
+
+var css = {
+    wrapper: "UploadArea-module_wrapper__aircC",
+    trigger: "UploadArea-module_trigger__P-iIw",
+    icon: "UploadArea-module_icon__M7n-m",
+    title: "UploadArea-module_title__VbNGq type-module_body-l-bold__Fh2dt",
+    message: "UploadArea-module_message__U1ZVM",
+    files: "UploadArea-module_files__Q796x",
+    rejection: "UploadArea-module_rejection__gRtQr type-module_body-s-regular__vRHSP",
+    srOnly: "UploadArea-module_srOnly__61M98",
+    xs: "UploadArea-module_xs__-AoM7 type-module_body-xs-regular__ZAFft",
+    s: "UploadArea-module_s__wy1zN type-module_body-s-regular__vRHSP",
+    m: "UploadArea-module_m__bKuFN type-module_body-m-regular__LuQBA",
+    l: "UploadArea-module_l__KG9YN type-module_body-l-regular__lOYbg",
+    xl: "UploadArea-module_xl__xmTtW type-module_body-xl-regular__pF2kC"
+};
+
+const imageTypes = [ "png", "jpg", "jpeg", "gif", "svg", "heic", "heif" ], videoTypes = [ "mp4", "avi", "mov", "wmv", "flv" ], documentTypes = [ "pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx" ], audioTypes = [ "mp3", "wav", "ogg", "aac", "flac" ], textTypes = [ "txt", "rtf", "md", "csv", "json", "xml" ], allTypes = [ ...imageTypes, ...videoTypes, ...documentTypes, ...audioTypes, ...textTypes ];
+
+/** Picker hints and runtime validation share one normalized, deduplicated token list. */
+function normalizeAcceptedTypes(types) {
+    const tokens = types.map(value => {
+        const token = value.trim().toLowerCase();
+        return !token || token.includes("/") || token.startsWith(".") ? token : `.${token}`;
+    });
+    return [ ...new Set(tokens.filter(token => /^\.[a-z0-9][a-z0-9._+-]*$/.test(token) || /^(audio|video|image)\/\*$/.test(token) || /^[a-z0-9!#$&^_.+-]+\/[a-z0-9!#$&^_.+-]+$/.test(token))) ];
+}
+
+/** Shared nonvisual picker/validation contract for UploadArea and composed editors. */
+function useFileSelection({files: files, acceptedTypes: acceptedTypes, multiple: multiple, disabled: disabled, onFilesChange: onFilesChange, onUpload: onUpload, onReject: onReject}) {
+    const inputRef = useRef(null), prefix = useId(), sequence = useRef(0), [rejection, setRejection] = useState(""), selectFiles = selected => {
+        if (disabled || !selected.length) return !1;
+        const {accepted: accepted, rejected: rejected} = function(files, types, multiple) {
+            const tokens = normalizeAcceptedTypes(types), accepted = [], rejected = [];
+            for (const file of files) 0 === types.length || tokens.some(token => {
+                if (token.startsWith(".")) return file.name.toLowerCase().endsWith(token);
+                const mime = file.type.toLowerCase().split(";")[0].trim();
+                return token.endsWith("/*") ? mime.startsWith(token.slice(0, -1)) : mime === token;
+            }) ? !multiple && accepted.length ? rejected.push({
+                file: file,
+                reason: "multiple"
+            }) : accepted.push(file) : rejected.push({
+                file: file,
+                reason: "type"
+            });
+            return {
+                accepted: accepted,
+                rejected: rejected
+            };
+        }(selected, acceptedTypes, multiple);
+        if (setRejection(rejected.map(({file: file, reason: reason}) => "multiple" === reason ? `${file.name}: only one file can be selected.` : `${file.name}: file type is not accepted.`).join(" ")), 
+        accepted.length) {
+            const additions = accepted.map(file => ({
+                id: `${prefix}-${sequence.current++}`,
+                file: file
+            }));
+            null == onFilesChange || onFilesChange(multiple ? [ ...files, ...additions ] : additions), 
+            null == onUpload || onUpload(accepted);
+        }
+        return rejected.length && (null == onReject || onReject(rejected)), accepted.length > 0;
+    }, inputProps = {
+        ref: inputRef,
+        type: "file",
+        hidden: !0,
+        disabled: disabled,
+        multiple: multiple,
+        accept: normalizeAcceptedTypes(acceptedTypes).join(",") || void 0,
+        onClick: event => event.stopPropagation(),
+        onChange: event => {
+            var _a;
+            selectFiles(Array.from(null !== (_a = event.currentTarget.files) && void 0 !== _a ? _a : []));
+        }
+    };
+    return {
+        inputRef: inputRef,
+        inputProps: inputProps,
+        openPicker: () => {
+            !disabled && inputRef.current && (inputRef.current.value = "", inputRef.current.click());
+        },
+        selectFiles: selectFiles,
+        rejection: rejection
+    };
+}
+
+const UploadAreaBase = React.forwardRef((rawProps, ref) => {
+    const _a = resolveColorProps(rawProps), {icon: icon = "documents.file-upload", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-special)", title: title = "Upload Files", actionName: actionName, width: width = "100%", height: height = "auto", message: message = "Drag and drop files here or click to upload", busyMessage: busyMessage = "Uploading in progress", iconSize: iconSize = 24, textSize: textSize = "m", borderWidth: borderWidth = 1, borderStyle: borderStyle = "dashed", borderColor: borderColor = "var(--core-outline-primary)", borderColorHover: borderColorHover = "var(--core-outline-special)", borderRadius: borderRadius = corners["corner-m"], padding: padding = "var(--spacing-xl)", backgroundColor: backgroundColor = "var(--core-surface-secondary)", backgroundColorHover: backgroundColorHover = "var(--core-surface-special)", acceptedTypes: acceptedTypes = allTypes, multiple: multiple = !0, busy: busy = !1, disabled: disabled = !1, canRemove: canRemove = !0, showProgress: showProgress = !0, files: files = [], fileListProps: fileListProps, onUpload: onUpload, onFilesChange: onFilesChange, onReject: onReject, onToolTip: onToolTip, className: className, style: style, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop} = _a, wrapperAttributes = __rest(_a, [ "icon", "iconColor", "iconColorHover", "title", "actionName", "width", "height", "message", "busyMessage", "iconSize", "textSize", "borderWidth", "borderStyle", "borderColor", "borderColorHover", "borderRadius", "padding", "backgroundColor", "backgroundColorHover", "acceptedTypes", "multiple", "busy", "disabled", "canRemove", "showProgress", "files", "fileListProps", "onUpload", "onFilesChange", "onReject", "onToolTip", "className", "style", "onDragEnter", "onDragOver", "onDragLeave", "onDrop" ]);
+    wrapperAttributes.role = void 0, wrapperAttributes["aria-disabled"] = void 0, wrapperAttributes["aria-busy"] = void 0, 
+    wrapperAttributes.children = void 0, wrapperAttributes.dangerouslySetInnerHTML = void 0;
+    const [hovered, setHovered] = useState(!1), triggerRef = useRef(null), dragDepth = useRef(0), messageId = useId(), rejectionId = useId(), enabled = !busy && !disabled, selection = useFileSelection({
+        files: files,
+        acceptedTypes: acceptedTypes,
+        multiple: multiple,
+        disabled: !enabled,
+        onFilesChange: onFilesChange,
+        onUpload: onUpload,
+        onReject: onReject
+    }), {inputRef: inputRef} = selection, dragging = enabled && hovered;
+    useEffect(() => {
+        enabled || (dragDepth.current = 0, setHovered(!1));
+    }, [ enabled ]), useEffect(() => {
+        var _a;
+        const view = null === (_a = inputRef.current) || void 0 === _a ? void 0 : _a.ownerDocument.defaultView;
+        if (!view) return;
+        const reset = () => {
+            dragDepth.current = 0, setHovered(!1);
+        }, handleEscape = event => {
+            "Escape" === event.key && reset();
+        };
+        return view.addEventListener("dragend", reset), view.addEventListener("drop", reset), 
+        view.addEventListener("blur", reset), view.addEventListener("keydown", handleEscape), 
+        () => {
+            view.removeEventListener("dragend", reset), view.removeEventListener("drop", reset), 
+            view.removeEventListener("blur", reset), view.removeEventListener("keydown", handleEscape);
+        };
+    }, [ inputRef ]);
+    const cssVars = {
+        "--ua-border": `${borderWidth}px`,
+        "--ua-border-style": borderStyle,
+        "--ua-border-color": dragging || busy ? borderColorHover : borderColor,
+        "--ua-radius": setStyle(borderRadius),
+        "--ua-padding": setStyle(padding),
+        "--ua-bg-color": dragging ? backgroundColorHover : backgroundColor,
+        "--ua-icon-size": `${iconSize}px`,
+        "--ua-width": setStyle(width),
+        "--ua-height": setStyle(height)
+    };
+    return jsxs("div", Object.assign({}, wrapperAttributes, {
+        className: `${css.wrapper} ${null != className ? className : ""}`,
+        style: Object.assign(Object.assign({}, style), cssVars),
+        ref: ref,
+        onDragEnter: event => {
+            var _a, _b;
+            null == onDragEnter || onDragEnter(event), !event.defaultPrevented && enabled && Array.from(null !== (_b = null === (_a = event.dataTransfer) || void 0 === _a ? void 0 : _a.types) && void 0 !== _b ? _b : []).includes("Files") && (event.preventDefault(), 
+            dragDepth.current += 1, setHovered(!0));
+        },
+        onDragOver: event => {
+            var _a, _b;
+            null == onDragOver || onDragOver(event), !event.defaultPrevented && Array.from(null !== (_b = null === (_a = event.dataTransfer) || void 0 === _a ? void 0 : _a.types) && void 0 !== _b ? _b : []).includes("Files") && (event.preventDefault(), 
+            event.dataTransfer.dropEffect = enabled ? "copy" : "none");
+        },
+        onDragLeave: event => {
+            null == onDragLeave || onDragLeave(event), dragDepth.current = Math.max(0, dragDepth.current - 1), 
+            dragDepth.current || setHovered(!1);
+        },
+        onDrop: event => {
+            var _a, _b;
+            null == onDrop || onDrop(event);
+            const cancelled = event.defaultPrevented;
+            event.preventDefault(), dragDepth.current = 0, setHovered(!1), cancelled || selection.selectFiles(Array.from(null !== (_b = null === (_a = event.dataTransfer) || void 0 === _a ? void 0 : _a.files) && void 0 !== _b ? _b : []));
+        },
+        children: [ jsxs("button", {
+            type: "button",
+            ref: triggerRef,
+            className: css.trigger,
+            disabled: !enabled,
+            "aria-busy": busy || void 0,
+            "aria-label": (null == actionName ? void 0 : actionName.trim()) || title.trim() || "Upload files",
+            "aria-describedby": `${messageId} ${rejectionId}`,
+            onClick: event => {
+                event.defaultPrevented || selection.openPicker();
+            },
+            children: [ jsx("span", {
+                className: css.icon,
+                children: jsx(Icon, {
+                    size: iconSize,
+                    name: icon,
+                    strokeColor: dragging ? iconColorHover : iconColor,
+                    decorative: !0
+                })
+            }), jsx("span", {
+                className: css.title,
+                children: title
+            }), jsxs("span", {
+                id: messageId,
+                className: `${css.message} ${css[textSize]}`,
+                children: [ busy && showProgress && jsx(ProgressIndicator, {
+                    decorative: !0,
+                    show: !0,
+                    size: 20,
+                    inline: !0,
+                    color: iconColor
+                }), busy ? busyMessage : message ]
+            }) ]
+        }), jsx("span", {
+            className: css.srOnly,
+            role: "status",
+            "aria-atomic": "true",
+            children: busy ? busyMessage : ""
+        }), jsx("span", {
+            id: rejectionId,
+            className: css.rejection,
+            role: "alert",
+            "aria-atomic": "true",
+            children: selection.rejection
+        }), files.length > 0 && jsx("div", {
+            className: css.files,
+            children: jsx(FileList, Object.assign({
+                backgroundColor: "var(--core-surface-primary)",
+                textSize: "m",
+                direction: "attachments" === (null == fileListProps ? void 0 : fileListProps.variant) ? "row" : "column",
+                gap: 8
+            }, fileListProps, {
+                files: files,
+                canRemove: canRemove && enabled && Boolean(onFilesChange),
+                onToolTip: onToolTip,
+                onChange: next => {
+                    var _a;
+                    enabled && (null == onFilesChange || onFilesChange(next), 0 === next.length && (null === (_a = triggerRef.current) || void 0 === _a || _a.focus()));
+                }
+            }))
+        }), jsx("input", Object.assign({}, selection.inputProps)) ]
+    }));
+});
+
+UploadAreaBase.displayName = "UploadArea";
+
+const UploadArea = React.memo(UploadAreaBase);
+
+export { UploadArea as U, allTypes as a, audioTypes as b, documentTypes as d, imageTypes as i, textTypes as t, useFileSelection as u, videoTypes as v };

package/dist/esm/chunks/Video-KuG0k3ly.mjs

@@ -0,0 +1,418 @@
+'use client';
+import { a as __rest, _ as __awaiter } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+
+import React, { useRef, useState, useCallback, useMemo, useEffect } from "react";
+
+import { corners } from "../theme/corners.mjs";
+
+import { s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+import { I as IconButton } from "./IconButton-oqYTUJit.mjs";
+
+import { P as ProgressIndicator } from "./ProgressIndicator-CR3pA1Me.mjs";
+
+import { S as Slider } from "./Slider-DaZTE-eD.mjs";
+
+import { T as ToggleButton } from "./ToggleButton-CGHa458C.mjs";
+
+import { g as getVideoControls } from "./getVideoControls-aoqr4T3P.mjs";
+
+var PlayState, css = {
+    wrapper: "Video-module_wrapper__a9iH8",
+    video: "Video-module_video__hxKME",
+    controls: "Video-module_controls__X4yt6",
+    controlsHeader: "Video-module_controlsHeader__dD64-",
+    controlsFooter: "Video-module_controlsFooter__qJNTa",
+    controlsBody: "Video-module_controlsBody__2GbQz",
+    right: "Video-module_right__UMhfW",
+    left: "Video-module_left__XC33m",
+    progress: "Video-module_progress__UTWtq"
+};
+
+!function(PlayState) {
+    PlayState.Playing = "playing", PlayState.Paused = "paused", PlayState.Stopped = "stopped", 
+    PlayState.Ended = "ended";
+}(PlayState || (PlayState = {}));
+
+const BaseVideo = React.forwardRef((rawProps, ref) => {
+    const props = resolveColorProps(rawProps), {children: children, src: src, playing: playing, loop: loop = !1, muted: muted = !0, playsInline: playsInline = !0, controls: controls = "simple", volume: volume = 1, poster: poster, captionsSrc: captionsSrc, captionsLanguage: captionsLanguage = "en", captionsLabel: captionsLabel = "Captions", captionsDefault: captionsDefault = !1, videoName: videoName = "Video", videoAttributes: videoAttributes, onError: onError, playRate: playRate = 1, width: width = "100%", height: height = "auto", borderRadius: borderRadius = "var(--corner-s)", borderWidth: borderWidth, borderColor: borderColor, backgroundColor: backgroundColor, objectFit: objectFit = "contain", customControls: controlOverrides, showProgressIndicator: showProgressIndicator = !0, onPlay: onPlay, onPause: onPause, onEnd: onEnd, onProgress: onProgress, onLoadProgress: onLoadProgress, onPlaybackRateChange: onPlaybackRateChange, onCanPlayThrough: onCanPlayThrough, onCanPlay: onCanPlay, onPlayStateChange: onPlayStateChange, onLoadMetaData: onLoadMetaData, onFullScreenChange: onFullScreenChange, onVolumeChange: onVolumeChange, onLoadedFrameData: onLoadedFrameData, onQuit: onQuit} = props, divAttributes = __rest(props, [ "children", "src", "playing", "loop", "muted", "playsInline", "controls", "volume", "poster", "captionsSrc", "captionsLanguage", "captionsLabel", "captionsDefault", "videoName", "videoAttributes", "onError", "playRate", "width", "height", "borderRadius", "borderWidth", "borderColor", "backgroundColor", "objectFit", "customControls", "showProgressIndicator", "onPlay", "onPause", "onEnd", "onProgress", "onLoadProgress", "onPlaybackRateChange", "onCanPlayThrough", "onCanPlay", "onPlayStateChange", "onLoadMetaData", "onFullScreenChange", "onVolumeChange", "onLoadedFrameData", "onQuit" ]), {id: divId, className: className, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseMove: onMouseMove, onFocus: onFocus, onBlur: onBlur} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style", "onMouseEnter", "onMouseLeave", "onMouseMove", "onFocus", "onBlur" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", customControls = getVideoControls(controlOverrides), controlMode = void 0 === controlOverrides ? controls : "simple", reducedMotion = usePrefersReducedMotion(), videoRef = useRef(null), containerRef = useRef(null), progress = useRef(null), wasPlaying = useRef(null), playState = useRef(PlayState.Stopped), [isPlaying, setIsPlaying] = useState(!1), [isMuted, setIsMuted] = useState(null != muted && muted), [currentVolume, setCurrentVolume] = useState(Number.isFinite(volume) ? Math.min(1, Math.max(0, volume)) : 1), [currentProgress, setCurrentProgress] = useState(0), [hovered, setHovered] = useState(!1), [canPlay, setCanPlay] = useState(!1), [focused, setFocused] = useState(!1), [duration, setDuration] = useState(0), [failed, setFailed] = useState(!1), [fullscreen, setFullscreen] = useState(!1), [captionsOn, setCaptionsOn] = useState(captionsDefault), seekFinished = useRef(!1), timer = useRef(null), handleLoadProgress = useCallback(event => {
+        const target = event.target;
+        if (target.buffered.length > 0) {
+            const bufferedEnd = target.buffered.end(target.buffered.length - 1), duration = target.duration;
+            if (Number.isFinite(duration) && duration > 0) {
+                const percentLoaded = Math.min(1, Math.max(0, bufferedEnd / duration));
+                null == onLoadProgress || onLoadProgress(percentLoaded);
+            }
+        }
+    }, [ onLoadProgress ]), handlePlayProgress = useCallback(event => {
+        var _a, _b, _c;
+        const target = event.target, percentPlayed = Number.isFinite(target.duration) && target.duration > 0 && Number.isFinite(target.currentTime) ? Math.min(1, Math.max(0, target.currentTime / target.duration)) : 0;
+        if (setCurrentProgress(percentPlayed), progress.current !== percentPlayed) {
+            null == onProgress || onProgress(percentPlayed), progress.current = percentPlayed;
+            const isAtZero = 0 === (null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.currentTime), isAtEnd = (null === (_b = videoRef.current) || void 0 === _b ? void 0 : _b.currentTime) === (null === (_c = videoRef.current) || void 0 === _c ? void 0 : _c.duration);
+            isAtZero && target.paused ? (playState.current !== PlayState.Stopped && (null == onPlayStateChange || onPlayStateChange(PlayState.Stopped)), 
+            playState.current = PlayState.Stopped) : isAtEnd ? (playState.current !== PlayState.Ended && (null == onPlayStateChange || onPlayStateChange(PlayState.Ended)), 
+            playState.current = PlayState.Ended) : target.paused && playState.current !== PlayState.Paused ? (null == onPlayStateChange || onPlayStateChange(PlayState.Paused), 
+            playState.current = PlayState.Paused) : target.paused || playState.current === PlayState.Playing || (null == onPlayStateChange || onPlayStateChange(PlayState.Playing), 
+            playState.current = PlayState.Playing);
+        }
+    }, [ onProgress, onPlayStateChange ]), handleCanPlayThrough = useCallback(() => {
+        null == onCanPlayThrough || onCanPlayThrough();
+    }, [ onCanPlayThrough ]), handleCanPlay = useCallback(() => {
+        setCanPlay(!0), setFailed(!1), null == onCanPlay || onCanPlay();
+    }, [ onCanPlay ]), syncPlayingState = useCallback(() => {
+        var _a, _b, _c, _d;
+        if (setIsPlaying(!(null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.paused)), 
+        null === (_b = videoRef.current) || void 0 === _b ? void 0 : _b.paused) return;
+        (null === (_c = videoRef.current) || void 0 === _c ? void 0 : _c.currentTime) === (null === (_d = videoRef.current) || void 0 === _d ? void 0 : _d.duration) ? (playState.current !== PlayState.Ended && (null == onPlayStateChange || onPlayStateChange(PlayState.Ended)), 
+        playState.current = PlayState.Ended) : playState.current !== PlayState.Playing && (null == onPlayStateChange || onPlayStateChange(PlayState.Playing), 
+        playState.current = PlayState.Playing);
+    }, [ onPlayStateChange ]), handlePlay = useCallback(() => {
+        null == onPlay || onPlay(), syncPlayingState();
+    }, [ onPlay, syncPlayingState ]), handlePlaying = useCallback(() => {
+        setCanPlay(!0), syncPlayingState();
+    }, [ syncPlayingState ]), handlePause = useCallback(() => {
+        var _a, _b, _c;
+        null == onPause || onPause(), setIsPlaying(!1);
+        const isAtZero = 0 === (null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.currentTime), isAtEnd = (null === (_b = videoRef.current) || void 0 === _b ? void 0 : _b.currentTime) === (null === (_c = videoRef.current) || void 0 === _c ? void 0 : _c.duration);
+        isAtZero && !isAtEnd ? (playState.current !== PlayState.Stopped && (null == onPlayStateChange || onPlayStateChange(PlayState.Stopped)), 
+        playState.current = PlayState.Stopped) : isAtEnd || playState.current !== PlayState.Paused && (null == onPlayStateChange || onPlayStateChange(PlayState.Paused), 
+        playState.current = PlayState.Paused);
+    }, [ onPause, onPlayStateChange ]), handleEnd = useCallback(() => {
+        setIsPlaying(!1), playState.current !== PlayState.Ended && (null == onPlayStateChange || onPlayStateChange(PlayState.Ended)), 
+        playState.current = PlayState.Ended, null == onEnd || onEnd();
+    }, [ onEnd, onPlayStateChange ]), handleLoadMetadata = useCallback(event => {
+        const target = event.target;
+        setDuration(Number.isFinite(target.duration) ? target.duration : 0), null == onLoadMetaData || onLoadMetaData(target.duration);
+    }, [ onLoadMetaData ]), handlePlaybackRate = useCallback(event => {
+        const playbackRate = event.target.playbackRate;
+        null == onPlaybackRateChange || onPlaybackRateChange(playbackRate);
+    }, [ onPlaybackRateChange ]), requestPlayback = useCallback(play => __awaiter(void 0, void 0, void 0, function*() {
+        const video = videoRef.current;
+        if (!video) return;
+        (null != play ? play : video.paused) ? yield video.play() : (wasPlaying.current = null, 
+        seekFinished.current = !1, video.pause());
+    }), []), handlePlayClick = useCallback(play => {
+        requestPlayback(play).catch(() => {});
+    }, [ requestPlayback ]), handleMouseOver = useCallback(() => {
+        setHovered(!0), timer.current && clearTimeout(timer.current), timer.current = setTimeout(() => {
+            setHovered(!1);
+        }, 2e3);
+    }, []), handleMouseOut = useCallback(() => {
+        timer.current && clearTimeout(timer.current), setHovered(!1);
+    }, []), handleFullScreen = useCallback((...args_1) => __awaiter(void 0, [ ...args_1 ], void 0, function*(state = !0) {
+        const container = containerRef.current;
+        container && (state ? yield container.requestFullscreen() : document.fullscreenElement === container && (yield document.exitFullscreen()));
+    }), []), handleMute = useCallback(state => {
+        if (!videoRef.current) return;
+        let nextMuted = !videoRef.current.muted;
+        void 0 !== state && (nextMuted = state), videoRef.current.muted = nextMuted, setIsMuted(nextMuted);
+    }, []), handleRateChange = useCallback((rate = 1) => {
+        if (!videoRef.current) return;
+        let nextRate = Number.isFinite(rate) ? rate : 1;
+        rate < .5 && (nextRate = .5), rate > 3 && (nextRate = 3), videoRef.current.playbackRate = nextRate;
+    }, []), handleRestart = useCallback(() => __awaiter(void 0, void 0, void 0, function*() {
+        videoRef.current && (videoRef.current.pause(), videoRef.current.currentTime = 0, 
+        yield requestPlayback(!0));
+    }), [ requestPlayback ]), handleVolumeChange = useCallback((volume = 1) => {
+        videoRef.current && (videoRef.current.volume = Number.isFinite(volume) ? Math.min(1, Math.max(0, volume)) : 1);
+    }, []), handleSetProgress = useCallback(position => {
+        const video = videoRef.current;
+        video && Number.isFinite(video.duration) && !(video.duration <= 0) && Number.isFinite(position) && (null === wasPlaying.current && (wasPlaying.current = !video.paused), 
+        seekFinished.current = !1, video.pause(), video.currentTime = Math.min(1, Math.max(0, position)) * video.duration, 
+        setCurrentProgress(Math.min(1, Math.max(0, position))));
+    }, []), handleSeekEnd = useCallback(() => {
+        const video = videoRef.current;
+        if (!seekFinished.current || (null == video ? void 0 : video.seeking)) return;
+        const resume = wasPlaying.current;
+        wasPlaying.current = null, seekFinished.current = !1, resume && video && video.currentTime < video.duration && handlePlayClick(!0);
+    }, [ handlePlayClick ]), handleScrubEnd = () => {
+        seekFinished.current = !0, handleSeekEnd();
+    }, handleFullScreenChange = useCallback(() => {
+        const isFullscreen = document.fullscreenElement === containerRef.current;
+        setFullscreen(isFullscreen), null == onFullScreenChange || onFullScreenChange(isFullscreen);
+    }, [ onFullScreenChange ]), handleLoadedFrame = useCallback(() => {
+        null == onLoadedFrameData || onLoadedFrameData();
+    }, [ onLoadedFrameData ]);
+    React.useImperativeHandle(ref, () => ({
+        play: () => requestPlayback(!0),
+        stop: () => requestPlayback(!1),
+        restart: handleRestart,
+        setVolume: volume => {
+            handleVolumeChange(volume);
+        },
+        mute: mute => {
+            handleMute(mute);
+        },
+        fullscreen: handleFullScreen,
+        playbackRate: rate => {
+            handleRateChange(rate);
+        },
+        get videoElement() {
+            var _a;
+            return null !== (_a = videoRef.current) && void 0 !== _a ? _a : void 0;
+        }
+    }), [ requestPlayback, handleRestart, handleMute, handleFullScreen, handleRateChange, handleVolumeChange ]);
+    const controlsContext = {
+        playing: isPlaying,
+        muted: isMuted,
+        progress: currentProgress,
+        volume: currentVolume,
+        duration: duration,
+        fullscreen: fullscreen,
+        canSeek: duration > 0,
+        play: () => requestPlayback(!0),
+        pause: () => handlePlayClick(!1),
+        togglePlay: () => requestPlayback(),
+        toggleMute: () => handleMute(),
+        setVolume: handleVolumeChange,
+        setProgress: position => {
+            const video = videoRef.current;
+            if (!video || !Number.isFinite(video.duration) || video.duration <= 0 || !Number.isFinite(position)) return;
+            const value = Math.min(1, Math.max(0, position));
+            video.currentTime = value * video.duration, setCurrentProgress(value);
+        },
+        toggleFullscreen: () => handleFullScreen(!fullscreen)
+    }, showCustomControls = "simple" === controlMode || "custom" === controlMode, controlsVisible = hovered || focused, cssVars = useMemo(() => ({
+        "--video-width": setStyle(width, "unset"),
+        "--video-height": setStyle(height, "unset"),
+        "--video-border-radius": setStyle(borderRadius, corners["corner-none"]),
+        "--video-border-size": setStyle(borderWidth, 0),
+        "--video-border-color": setStyle(borderColor, "transparent"),
+        "--video-bg-color": setStyle(backgroundColor, "transparent"),
+        "--video-controls-transition": reducedMotion ? "none" : void 0,
+        "--video-object-fit": null != objectFit ? objectFit : "contain",
+        "--video-controls-pointer-events": controlsVisible ? "auto" : "none",
+        "--video-controls-opacity": controlsVisible ? 1 : 0,
+        "--video-progress-padding-left": customControls.quit ? "var(--spacing-s)" : "var(--spacing-m)"
+    }), [ width, height, borderRadius, borderWidth, borderColor, backgroundColor, objectFit, controlsVisible, reducedMotion, customControls.quit ]), speakerIcon = isMuted || 0 === currentVolume ? "media.volume-slash" : "media.volume-low";
+    useEffect(() => handleRateChange(playRate), [ playRate, handleRateChange ]), useEffect(() => {
+        void 0 !== playing && handlePlayClick(playing);
+    }, [ playing, handlePlayClick ]), useEffect(() => handleMute(muted), [ muted, handleMute ]), 
+    useEffect(() => handleVolumeChange(volume), [ volume, handleVolumeChange ]), useEffect(() => (document.addEventListener("fullscreenchange", handleFullScreenChange), 
+    () => document.removeEventListener("fullscreenchange", handleFullScreenChange)), [ handleFullScreenChange ]), 
+    useEffect(() => () => {
+        timer.current && clearTimeout(timer.current);
+    }, []);
+    const resetMedia = () => {
+        setCanPlay(!1), setFailed(!1), setIsPlaying(!1), setCurrentProgress(0), setDuration(0), 
+        progress.current = null, wasPlaying.current = null, seekFinished.current = !1, playState.current !== PlayState.Stopped && (null == onPlayStateChange || onPlayStateChange(PlayState.Stopped)), 
+        playState.current = PlayState.Stopped;
+    }, syncCaptions = useCallback(() => {
+        var _a;
+        const track = null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.textTracks[0];
+        track && (track.mode = captionsOn ? "showing" : "hidden");
+    }, [ captionsOn ]);
+    useEffect(() => {
+        syncCaptions();
+    }, [ syncCaptions ]), useEffect(() => {
+        var _a;
+        if (!captionsSrc) return;
+        const tracks = null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.textTracks, update = () => {
+            var _a;
+            return setCaptionsOn("showing" === (null === (_a = null == tracks ? void 0 : tracks[0]) || void 0 === _a ? void 0 : _a.mode));
+        };
+        return null == tracks || tracks.addEventListener("change", update), () => null == tracks ? void 0 : tracks.removeEventListener("change", update);
+    }, [ captionsSrc ]);
+    const buttonProps = {
+        backgroundColor: "transparent",
+        backgroundColorHover: "transparent",
+        backgroundColorSelected: "transparent",
+        iconColor: "var(--core-text-light)",
+        iconColorHover: "var(--core-text-light)",
+        iconColorSelected: "var(--core-text-light)",
+        iconSize: 16,
+        buttonSize: "m",
+        borderRadius: "100%",
+        iconStrokeWidth: 1.5
+    };
+    return jsxs("div", Object.assign({
+        id: divId,
+        ref: containerRef,
+        className: `${css.wrapper}${divClass}`,
+        style: Object.assign(Object.assign({}, cssVars), divStyle),
+        onMouseEnter: event => {
+            handleMouseOver(), null == onMouseEnter || onMouseEnter(event);
+        },
+        onMouseLeave: event => {
+            handleMouseOut(), null == onMouseLeave || onMouseLeave(event);
+        },
+        onBlur: event => {
+            event.currentTarget.contains(event.relatedTarget) || setFocused(!1), null == onBlur || onBlur(event);
+        },
+        onFocus: event => {
+            setFocused(!0), null == onFocus || onFocus(event);
+        },
+        onMouseMove: event => {
+            handleMouseOver(), null == onMouseMove || onMouseMove(event);
+        }
+    }, rest, {
+        children: [ showCustomControls && jsxs("div", {
+            className: css.controls,
+            children: [ (void 0 !== controlOverrides || !children) && "simple" === controlMode && jsxs(Fragment, {
+                children: [ jsxs("div", {
+                    className: css.controlsHeader,
+                    children: [ customControls.fullscreen && jsx("div", {
+                        className: css.left,
+                        children: jsx(IconButton, Object.assign({
+                            actionName: fullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                            icon: "arrows.maximize"
+                        }, buttonProps, {
+                            onClick: () => {
+                                handleFullScreen(!fullscreen).catch(() => {});
+                            }
+                        }))
+                    }), captionsSrc && customControls.captions && jsx("button", {
+                        type: "button",
+                        "aria-label": "Captions",
+                        "aria-pressed": captionsOn,
+                        onClick: () => setCaptionsOn(value => !value),
+                        children: "CC"
+                    }), customControls.volume && jsxs("div", {
+                        className: css.right,
+                        children: [ jsx(IconButton, Object.assign({
+                            actionName: isMuted ? "Unmute" : "Mute",
+                            icon: speakerIcon,
+                            iconFill: !0
+                        }, buttonProps, {
+                            onClick: () => handleMute()
+                        })), jsx(Slider, {
+                            "aria-label": "Volume",
+                            trackColor: "rgba(0,0,0,0.5)",
+                            progressColor: "var(--core-text-light)",
+                            trackHeadSize: 0,
+                            trackHeadBorderWidth: 0,
+                            max: 1,
+                            min: 0,
+                            value: currentVolume,
+                            onChange: value => handleVolumeChange(value)
+                        }) ]
+                    }) ]
+                }), jsx("div", {
+                    className: css.controlsBody,
+                    children: customControls.play && jsx(ToggleButton, Object.assign({}, buttonProps, {
+                        actionName: isPlaying ? "Pause" : "Play",
+                        selected: isPlaying,
+                        icon: "media.play-filled",
+                        iconSelected: "media.pause-filled",
+                        iconSize: 32,
+                        backgroundColor: "rgba(0, 0, 0, 0.25)",
+                        backgroundColorHover: "rgba(0, 0, 0, 0.5)",
+                        backgroundColorSelected: "rgba(0, 0, 0, 0.25)",
+                        buttonSize: "xl",
+                        iconStrokeWidth: 0,
+                        onChange: () => handlePlayClick()
+                    }))
+                }), jsx("div", {
+                    className: css.controlsFooter,
+                    children: customControls.progress && jsxs("div", {
+                        className: css.progress,
+                        children: [ jsx(ToggleButton, Object.assign({}, buttonProps, {
+                            actionName: isPlaying ? "Pause" : "Play",
+                            selected: isPlaying,
+                            icon: "media.play-filled",
+                            iconSelected: "media.pause-filled",
+                            iconStrokeWidth: 0,
+                            onChange: () => handlePlayClick()
+                        })), jsx(Slider, {
+                            "aria-label": "Playback position",
+                            trackColor: "rgba(0,0,0,0.5)",
+                            progressColor: "var(--core-text-light)",
+                            trackHeadSize: 0,
+                            trackHeadBorderWidth: 0,
+                            max: 1,
+                            min: 0,
+                            value: currentProgress,
+                            onChange: handleSetProgress,
+                            onChangeEnd: handleScrubEnd,
+                            onPointerCancel: handleScrubEnd,
+                            onLostPointerCapture: handleScrubEnd,
+                            onBlur: handleScrubEnd,
+                            disabled: duration <= 0,
+                            width: "100%"
+                        }), customControls.quit && jsx(IconButton, Object.assign({
+                            actionName: "Close video",
+                            toggle: !1,
+                            icon: "basic.cross"
+                        }, buttonProps, {
+                            onClick: () => null == onQuit ? void 0 : onQuit()
+                        })) ]
+                    })
+                }) ]
+            }), "custom" === controlMode && ("function" == typeof children ? children(controlsContext) : children) ]
+        }), jsx("video", Object.assign({}, videoAttributes, {
+            "aria-label": videoName.trim() || "Video",
+            ref: videoRef,
+            src: src,
+            autoPlay: !1,
+            playsInline: playsInline,
+            loop: loop,
+            muted: isMuted,
+            controls: "default" === controlMode,
+            poster: poster,
+            onLoadStart: resetMedia,
+            onEmptied: resetMedia,
+            onWaiting: () => setCanPlay(!1),
+            onPlaying: handlePlaying,
+            onError: () => {
+                var _a, _b;
+                setFailed(!0), setCanPlay(!1), setIsPlaying(!1), playState.current !== PlayState.Stopped && (null == onPlayStateChange || onPlayStateChange(PlayState.Stopped)), 
+                playState.current = PlayState.Stopped, null == onError || onError(null !== (_b = null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.error) && void 0 !== _b ? _b : null);
+            },
+            onVolumeChange: () => {
+                const video = videoRef.current;
+                video && (setCurrentVolume(video.volume), setIsMuted(video.muted), null == onVolumeChange || onVolumeChange(video.volume));
+            },
+            onDurationChange: () => {
+                var _a;
+                const value = null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.duration;
+                setDuration(value && Number.isFinite(value) ? value : 0);
+            },
+            onCanPlayThrough: handleCanPlayThrough,
+            onCanPlay: handleCanPlay,
+            onPlay: handlePlay,
+            onPause: handlePause,
+            onEnded: handleEnd,
+            onProgress: handleLoadProgress,
+            onTimeUpdate: handlePlayProgress,
+            onRateChange: handlePlaybackRate,
+            onLoadedMetadata: handleLoadMetadata,
+            onLoadedData: handleLoadedFrame,
+            onSeeked: handleSeekEnd,
+            className: [ css.video, null == videoAttributes ? void 0 : videoAttributes.className ].filter(Boolean).join(" "),
+            children: captionsSrc && jsx("track", {
+                kind: "captions",
+                src: captionsSrc,
+                srcLang: captionsLanguage,
+                label: captionsLabel,
+                default: captionsDefault,
+                onLoad: syncCaptions
+            })
+        })), failed && jsx("span", {
+            role: "alert",
+            children: "Unable to load video."
+        }), !failed && !canPlay && showProgressIndicator && jsx(ProgressIndicator, {
+            show: !0,
+            label: "Loading video"
+        }) ]
+    }));
+});
+
+BaseVideo.displayName = "Video";
+
+const Video = React.memo(React.forwardRef((props, ref) => {
+    var _a;
+    return jsx(BaseVideo, Object.assign({}, props, {
+        ref: ref
+    }), null !== (_a = props.src) && void 0 !== _a ? _a : "");
+}));
+
+Video.displayName = "Video";
+
+export { Video as V };