@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/src/components/examples/loading-states-demo.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { SimpleMinimalPlayer } from "../variants/minimal/SimpleMinimalPlayer";
+import { AnimateLoadingWrapper } from "../LoadingState";
+import { cn } from "../../lib/utils";
+export function LoadingStatesDemo() {
+    const [showCustomLoading, setShowCustomLoading] = useState(false);
+    const [loadingVariant, setLoadingVariant] = useState("animate");
+    // Custom loading component example
+    const CustomLoadingComponent = ({ context }) => (_jsxs("div", { className: "flex flex-col items-center gap-4 text-white", children: [_jsx("div", { className: "h-16 w-16 animate-pulse rounded-full bg-gradient-to-r from-cyan-500 to-blue-500" }), _jsxs("p", { className: "font-medium text-sm", children: ["Custom ", context, " loader"] })] }));
+    return (_jsx("div", { className: "min-h-screen bg-gray-950 p-8", children: _jsxs("div", { className: "mx-auto max-w-6xl space-y-8", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "mb-4 font-bold text-3xl text-white", children: "Loading States Demo" }), _jsx("p", { className: "mb-6 text-gray-400", children: "Demonstrating the new AnimateLoading integration with context-aware loading text" })] }), _jsxs("div", { className: "mb-8 grid grid-cols-1 gap-6 md:grid-cols-3", children: [_jsxs("div", { className: "relative h-40 overflow-hidden rounded-lg bg-black", children: [_jsx(AnimateLoadingWrapper, { context: "initial" }), _jsx("p", { className: "absolute bottom-2 left-2 text-white/60 text-xs", children: "Initial Loading" })] }), _jsxs("div", { className: "relative h-40 overflow-hidden rounded-lg bg-black", children: [_jsx(AnimateLoadingWrapper, { context: "seeking" }), _jsx("p", { className: "absolute bottom-2 left-2 text-white/60 text-xs", children: "Seeking" })] }), _jsxs("div", { className: "relative h-40 overflow-hidden rounded-lg bg-black", children: [_jsx(AnimateLoadingWrapper, { context: "buffering" }), _jsx("p", { className: "absolute bottom-2 left-2 text-white/60 text-xs", children: "Buffering" })] })] }), _jsxs("div", { className: "mb-6 flex justify-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-sm text-white", children: "Loading Variant:" }), _jsxs("select", { value: loadingVariant, onChange: (e) => setLoadingVariant(e.target.value), className: "rounded border border-gray-700 bg-gray-800 px-3 py-1 text-white", children: [_jsx("option", { value: "animate", children: "Animate (Default)" }), _jsx("option", { value: "spinner", children: "Spinner" }), _jsx("option", { value: "dots", children: "Dots" }), _jsx("option", { value: "skeleton", children: "Skeleton" })] })] }), _jsxs("button", { onClick: () => setShowCustomLoading(!showCustomLoading), className: cn("rounded-lg px-4 py-2 transition-colors", showCustomLoading
+                                ? "bg-cyan-600 text-white"
+                                : "bg-gray-800 text-gray-300 hover:bg-gray-700"), children: [showCustomLoading ? "Using Custom" : "Use Custom", " Loading"] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h2", { className: "font-semibold text-white text-xl", children: "Live Player Example" }), _jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-black", children: _jsx(SimpleMinimalPlayer, { src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg", crossOrigin: "anonymous", showLoadingState: true, loadingComponent: showCustomLoading ? CustomLoadingComponent : undefined, loadingProps: {
+                                    variant: showCustomLoading ? undefined : loadingVariant,
+                                    size: "sm",
+                                    message: showCustomLoading ? undefined : "Custom message..."
+                                } }) }), _jsxs("div", { className: "rounded-lg bg-gray-900 p-4", children: [_jsx("h3", { className: "mb-2 font-medium text-white", children: "Features:" }), _jsxs("ul", { className: "space-y-1 text-gray-300 text-sm", children: [_jsx("li", { children: "\u2022 AnimateLoading from UI package as default" }), _jsx("li", { children: "\u2022 Context-aware loading messages" }), _jsx("li", { children: "\u2022 No blur backdrop for better performance" }), _jsx("li", { children: "\u2022 Customizable text size based on size prop" }), _jsx("li", { children: "\u2022 Support for custom loading components" }), _jsx("li", { children: "\u2022 Fallback to other variants (spinner, dots, skeleton)" })] })] }), _jsxs("div", { className: "rounded-lg bg-gray-900 p-4", children: [_jsx("h3", { className: "mb-2 font-medium text-white", children: "Usage:" }), _jsx("pre", { className: "overflow-x-auto text-green-400 text-sm", children: _jsx("code", { children: `// Default with AnimateLoading
+<SimpleMinimalPlayer
+  src="video.mp4"
+  showLoadingState={true}
+/>
+
+// Custom loading component
+<SimpleMinimalPlayer
+  src="video.mp4"
+  loadingComponent={CustomLoader}
+  loadingProps={{
+    size: "sm",
+    message: "Please wait..."
+  }}
+/>
+
+// Use different variant
+<SimpleMinimalPlayer
+  src="video.mp4"
+  loadingProps={{
+    variant: "spinner"
+  }}
+/>` }) })] })] })] }) }));
+}

package/src/components/examples/react-19-demo.d.ts

@@ -0,0 +1,10 @@
+interface React19MediaPlayerDemoProps {
+    src: string;
+    poster?: string;
+    className?: string;
+    mediaId?: string;
+}
+export declare function React19MediaPlayerDemo({ src, poster, className, mediaId }: React19MediaPlayerDemoProps): import("react/jsx-runtime").JSX.Element;
+export declare function React19DemoExample(): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=react-19-demo.d.ts.map

package/src/components/examples/react-19-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-19-demo.d.ts","sourceRoot":"","sources":["react-19-demo.tsx"],"names":[],"mappings":"AAiCA,UAAU,2BAA2B;IACpC,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,sBAAsB,CAAC,EACtC,GAAG,EACH,MAAM,EACN,SAAS,EACT,OAAyB,EACzB,EAAE,2BAA2B,2CA2B7B;AAiOD,wBAAgB,kBAAkB,4CAmFjC"}

package/src/components/examples/react-19-demo.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { MediaProvider } from "../../context/media-provider";
+import { MediaPlayerRoot } from "../media-player-root";
+import { MediaPlayerVideo } from "../media-player-video";
+import { MediaPlayerControls } from "../media-player-controls";
+import { MediaPlayerPlay } from "../media-player-play";
+import { MediaPlayerVolume } from "../media-player-volume";
+import { MediaPlayerTime } from "../media-player-time";
+import { MediaPlayerSeek } from "../media-player-seek";
+import { MediaPlayerFullscreen } from "../media-player-fullscreen";
+import { EnhancedMediaWrapper, MediaLoading, useMediaConcurrent, useMediaPerformance } from "../media-suspense";
+import { useEnhancedMediaState } from "../../hooks/use-media-state";
+import { useMediaActions } from "../../hooks/use-media-actions";
+import { useMediaOptimistic } from "../../hooks/use-media-optimistic";
+import { useMediaErrorHandler } from "../../context/error-handling";
+import { useOptimisticMediaSelector } from "../../context/media-context";
+import { cn } from "../../lib/utils";
+export function React19MediaPlayerDemo({ src, poster, className, mediaId = "react-19-demo" }) {
+    return (_jsx(EnhancedMediaWrapper, { className: className, priority: "high", loadingFallback: _jsx(MediaLoading, { variant: "skeleton", size: "lg" }), errorFallback: ErrorFallback, children: _jsx(MediaProvider, { mediaId: mediaId, useEnhancedStore: true, enableOptimisticUpdates: true, enableErrorRecovery: true, persistenceConfig: {
+                userPreferences: true,
+                sessionState: true,
+                debounceMs: 300
+            }, retryConfig: {
+                maxRetries: 3,
+                exponentialBackoff: true
+            }, children: _jsx(MediaPlayerContent, { src: src, poster: poster }) }) }));
+}
+// Internal content component with React 19 hooks
+function MediaPlayerContent({ src, poster }) {
+    // React 19 enhanced state management
+    const mediaState = useEnhancedMediaState();
+    const { isLoading: actionLoading, errorMessage, ...actions } = useMediaActions(mediaState.state // Type assertion for store
+    );
+    // React 19 optimistic updates
+    const optimisticState = useMediaOptimistic(mediaState.state);
+    // React 19 concurrent features
+    const { isPending, updateWithTransition } = useMediaConcurrent();
+    // Performance monitoring
+    const { metrics, recordRenderTime } = useMediaPerformance();
+    // Error handling
+    const { errors, clearError } = useMediaErrorHandler();
+    // Record render performance
+    React.useEffect(() => {
+        const start = performance.now();
+        return () => recordRenderTime(start);
+    }, [recordRenderTime]);
+    // Optimistic selectors for immediate UI feedback
+    const isPlaying = useOptimisticMediaSelector(state => state.isPlaying);
+    const volume = useOptimisticMediaSelector(state => state.volume);
+    const currentTime = useOptimisticMediaSelector(state => state.currentTime);
+    const duration = useOptimisticMediaSelector(state => state.duration);
+    const isFullscreen = useOptimisticMediaSelector(state => state.isFullscreen);
+    // Enhanced action handlers with React 19 features
+    const handlePlayPause = async () => {
+        await updateWithTransition(async () => {
+            await optimisticState.togglePlayPause();
+        });
+    };
+    const handleVolumeChange = async (newVolume) => {
+        await optimisticState.setVolumeOptimistic(newVolume);
+    };
+    const handleSeek = async (time) => {
+        await optimisticState.seekOptimistic(time);
+    };
+    const handleFullscreenToggle = async () => {
+        await optimisticState.toggleFullscreenOptimistic();
+    };
+    return (_jsxs(MediaPlayerRoot, { className: cn("group relative overflow-hidden rounded-lg", "border border-border bg-black shadow-lg", "transition-all duration-200", isPending && "opacity-75", // Visual feedback for pending transitions
+        actionLoading && "pointer-events-none"), enableGestures: true, enableMobileOptimizations: true, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster, className: "aspect-video w-full object-contain" }), (actionLoading || isPending) && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/20", children: _jsx(MediaLoading, { variant: "spinner", size: "lg", children: actionLoading ? "Processing..." : "Updating..." }) })), _jsx(MediaPlayerControls, { className: "absolute right-0 bottom-0 left-0", children: _jsxs("div", { className: "flex items-center gap-4 bg-gradient-to-t from-black/80 to-transparent p-4", children: [_jsx(MediaPlayerPlay, { className: "text-white transition-colors hover:text-white/80" }), _jsx(MediaPlayerVolume, { className: "text-white" }), _jsx(MediaPlayerTime, { className: "min-w-[120px] font-mono text-sm text-white" }), _jsx("div", { className: "flex-1", children: _jsx(MediaPlayerSeek, { className: "w-full" }) }), _jsx(MediaPlayerFullscreen, { className: "text-white transition-colors hover:text-white/80" })] }) }), (errorMessage || errors.length > 0) && (_jsxs("div", { className: "absolute top-4 right-4 rounded-lg bg-destructive/90 px-3 py-2 text-destructive-foreground text-sm", children: [errorMessage || errors[0]?.message, _jsx("button", { onClick: () => clearError(errors[0] ? `${errors[0].action?.type}-${errors[0].timestamp}` : ''), className: "ml-2 underline hover:no-underline", children: "Dismiss" })] })), process.env.NODE_ENV === 'development' && (_jsx(PerformanceDebugPanel, { metrics: metrics, optimisticState: optimisticState, errors: errors }))] }));
+}
+// Error fallback component
+function ErrorFallback({ error, resetError }) {
+    return (_jsxs("div", { className: "flex min-h-[300px] flex-col items-center justify-center rounded-lg border border-destructive/20 bg-destructive/10 p-8", children: [_jsx("div", { className: "mb-2 font-semibold text-destructive text-xl", children: "React 19 Media Player Error" }), _jsx("div", { className: "mb-4 max-w-md text-center text-muted-foreground", children: error.message }), _jsx("button", { onClick: resetError, className: "rounded-lg bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90", children: "Retry Player" })] }));
+}
+// Performance debug panel (development only)
+function PerformanceDebugPanel({ metrics, optimisticState, errors }) {
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    if (!isExpanded) {
+        return (_jsx("button", { onClick: () => setIsExpanded(true), className: "absolute top-4 left-4 rounded bg-blue-600 px-2 py-1 text-white text-xs", children: "Debug" }));
+    }
+    return (_jsxs("div", { className: "absolute top-4 left-4 max-w-sm rounded-lg bg-black/90 p-4 font-mono text-white text-xs", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("span", { className: "font-bold", children: "React 19 Debug" }), _jsx("button", { onClick: () => setIsExpanded(false), className: "text-white/60 hover:text-white", children: "\u00D7" })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { children: ["Render Time: ", metrics.renderTime, "ms"] }), _jsxs("div", { children: ["Suspense Count: ", metrics.suspenseCount] }), _jsxs("div", { children: ["Error Count: ", metrics.errorCount] }), _jsxs("div", { children: ["Transition Count: ", metrics.transitionCount] }), _jsxs("div", { children: ["Has Optimistic: ", optimisticState.hasOptimisticUpdates ? 'Yes' : 'No'] }), _jsxs("div", { children: ["Active Errors: ", errors.length] })] }), optimisticState.differences?.length > 0 && (_jsxs("div", { className: "mt-2 border-white/20 border-t pt-2", children: [_jsx("div", { className: "mb-1 font-bold", children: "Optimistic Diffs:" }), optimisticState.differences.map((diff, i) => (_jsxs("div", { className: "text-yellow-400", children: [diff.key, ": ", JSON.stringify(diff.optimistic), "(was: ", JSON.stringify(diff.actual), ")"] }, i)))] }))] }));
+}
+// Example usage component
+export function React19DemoExample() {
+    const [currentSrc, setCurrentSrc] = React.useState("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");
+    const videoSources = [
+        {
+            src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+            title: "Big Buck Bunny",
+            poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
+        },
+        {
+            src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+            title: "Elephants Dream",
+            poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg"
+        }
+    ];
+    const currentVideo = videoSources.find(v => v.src === currentSrc);
+    return (_jsxs("div", { className: "mx-auto max-w-4xl space-y-6 p-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "mb-2 font-bold text-3xl", children: "React 19 Enhanced Media Player" }), _jsx("p", { className: "text-muted-foreground", children: "Featuring useOptimistic, useActionState, Suspense, concurrent features, error handling, state persistence, and performance optimizations." })] }), _jsx("div", { className: "flex gap-4", children: videoSources.map((video) => (_jsx("button", { onClick: () => setCurrentSrc(video.src), className: cn("rounded-lg border px-4 py-2 transition-colors", currentSrc === video.src
+                        ? "border-primary bg-primary text-primary-foreground"
+                        : "border-border bg-background hover:border-primary/50"), children: video.title }, video.src))) }), _jsx(React19MediaPlayerDemo, { src: currentSrc, poster: currentVideo.poster, mediaId: `demo-${currentSrc}`, className: "w-full" }), _jsxs("div", { className: "grid grid-cols-1 gap-4 text-sm md:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "font-semibold", children: "React 19 Features" }), _jsxs("ul", { className: "space-y-1 text-muted-foreground", children: [_jsx("li", { children: "\u2705 useOptimistic for immediate UI feedback" }), _jsx("li", { children: "\u2705 useActionState for form-like actions" }), _jsx("li", { children: "\u2705 Automatic memoization via React compiler" }), _jsx("li", { children: "\u2705 Concurrent features with Suspense" }), _jsx("li", { children: "\u2705 Enhanced error boundaries" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "font-semibold", children: "Media Features" }), _jsxs("ul", { className: "space-y-1 text-muted-foreground", children: [_jsx("li", { children: "\u2705 Optimistic play/pause/seek/volume" }), _jsx("li", { children: "\u2705 Automatic state persistence" }), _jsx("li", { children: "\u2705 Error recovery with retries" }), _jsx("li", { children: "\u2705 Touch gestures & mobile optimization" }), _jsx("li", { children: "\u2705 Performance monitoring" })] })] })] })] }));
+}

package/src/components/examples/volume-orientation-demo.d.ts

@@ -0,0 +1,2 @@
+export declare function VolumeOrientationDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=volume-orientation-demo.d.ts.map

package/src/components/examples/volume-orientation-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-orientation-demo.d.ts","sourceRoot":"","sources":["volume-orientation-demo.tsx"],"names":[],"mappings":"AAKA,wBAAgB,qBAAqB,4CA4GpC"}

package/src/components/examples/volume-orientation-demo.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { SimpleMinimalPlayer } from "../variants/minimal/SimpleMinimalPlayer";
+export function VolumeOrientationDemo() {
+    const [orientation, setOrientation] = useState("horizontal");
+    return (_jsx("div", { className: "min-h-screen bg-gray-950 p-8", children: _jsxs("div", { className: "mx-auto max-w-5xl space-y-8", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "mb-4 font-bold text-3xl text-white", children: "Enhanced Volume Control Demo" }), _jsx("p", { className: "mb-6 text-gray-400", children: "Small gradient volume slider with horizontal/vertical orientation" }), _jsxs("div", { className: "mb-8 flex justify-center gap-4", children: [_jsx("button", { onClick: () => setOrientation("horizontal"), className: `rounded-lg px-4 py-2 transition-colors ${orientation === "horizontal"
+                                        ? "bg-cyan-600 text-white"
+                                        : "bg-gray-800 text-gray-400 hover:bg-gray-700"}`, children: "Horizontal (Default)" }), _jsx("button", { onClick: () => setOrientation("vertical"), className: `rounded-lg px-4 py-2 transition-colors ${orientation === "vertical"
+                                        ? "bg-cyan-600 text-white"
+                                        : "bg-gray-800 text-gray-400 hover:bg-gray-700"}`, children: "Vertical" })] })] }), _jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-black", children: _jsx(SimpleMinimalPlayer, { src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg", crossOrigin: "anonymous", className: "h-full w-full", volumeOrientation: orientation }) }), _jsxs("div", { className: "mt-8 grid gap-6 md:grid-cols-2", children: [_jsxs("div", { className: "rounded-lg bg-gray-900 p-6", children: [_jsx("h3", { className: "mb-3 font-semibold text-lg text-white", children: "Horizontal Mode (Default)" }), _jsxs("ul", { className: "space-y-2 text-gray-400 text-sm", children: [_jsx("li", { children: "\u2022 Slider appears beside the volume button" }), _jsx("li", { children: "\u2022 Expands horizontally on hover" }), _jsx("li", { children: "\u2022 Cyan to blue gradient (4px height)" }), _jsx("li", { children: "\u2022 Smooth 300ms transition" }), _jsx("li", { children: "\u2022 White thumb appears on hover" })] })] }), _jsxs("div", { className: "rounded-lg bg-gray-900 p-6", children: [_jsx("h3", { className: "mb-3 font-semibold text-lg text-white", children: "Vertical Mode" }), _jsxs("ul", { className: "space-y-2 text-gray-400 text-sm", children: [_jsx("li", { children: "\u2022 Slider appears above the volume button" }), _jsx("li", { children: "\u2022 Expands vertically on hover" }), _jsx("li", { children: "\u2022 Same gradient rotated 90\u00B0" }), _jsx("li", { children: "\u2022 Shows percentage value" }), _jsx("li", { children: "\u2022 Dark backdrop for visibility" })] })] })] }), _jsxs("div", { className: "rounded-lg bg-gray-900 p-6", children: [_jsx("h3", { className: "mb-3 font-semibold text-lg text-white", children: "Usage Example" }), _jsx("pre", { className: "overflow-x-auto text-gray-300 text-sm", children: _jsx("code", { children: `// Default horizontal orientation
+<VolumeControl
+  volume={volume}
+  isMuted={isMuted}
+  showVolumeSlider={showSlider}
+  onToggleMute={handleMute}
+  onVolumeChange={handleVolumeChange}
+  onShowVolumeSlider={setShowSlider}
+/>
+
+// Vertical orientation
+<VolumeControl
+  volume={volume}
+  isMuted={isMuted}
+  showVolumeSlider={showSlider}
+  onToggleMute={handleMute}
+  onVolumeChange={handleVolumeChange}
+  onShowVolumeSlider={setShowSlider}
+  orientation="vertical"
+/>` }) })] })] }) }));
+}

package/src/components/icon-demo.d.ts

@@ -0,0 +1,2 @@
+export declare function IconSystemDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon-demo.d.ts.map

package/src/components/icon-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-demo.d.ts","sourceRoot":"","sources":["icon-demo.tsx"],"names":[],"mappings":"AAaA,wBAAgB,cAAc,4CAmM7B"}

package/src/components/icon-demo.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { IconProvider, PlayIcon, PauseIcon, VolumeIcon, VolumeOffIcon, SettingsIcon, FullscreenIcon, LoadingIcon, PlayPauseIcon } from '../icons';
+export function IconSystemDemo() {
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [volume, setVolume] = useState(0.8);
+    const [theme, setTheme] = useState({
+        size: 24,
+        strokeWidth: 2,
+        color: 'currentColor'
+    });
+    const customPlayIcon = ({ className, ...props }) => (_jsxs("svg", { className: className, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "10", fill: "#ff6b6b" }), _jsx("polygon", { points: "10 8 16 12 10 16 10 8", fill: "white" })] }));
+    return (_jsx("div", { className: "min-h-screen bg-gray-950 p-8", children: _jsxs("div", { className: "mx-auto max-w-4xl", children: [_jsx("h1", { className: "mb-8 text-center font-bold text-3xl text-white", children: "Icon System Demo" }), _jsxs("div", { className: "mb-8 rounded-lg bg-gray-800 p-6", children: [_jsx("h2", { className: "mb-4 font-semibold text-white text-xl", children: "Theme Configuration" }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: [_jsxs("div", { children: [_jsxs("label", { className: "mb-2 block font-medium text-sm text-white", children: ["Size: ", theme.size] }), _jsx("input", { type: "range", min: "16", max: "48", value: theme.size, onChange: (e) => setTheme(prev => ({ ...prev, size: Number(e.target.value) })), className: "h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700" })] }), _jsxs("div", { children: [_jsxs("label", { className: "mb-2 block font-medium text-sm text-white", children: ["Stroke Width: ", theme.strokeWidth] }), _jsx("input", { type: "range", min: "1", max: "4", step: "0.5", value: theme.strokeWidth, onChange: (e) => setTheme(prev => ({ ...prev, strokeWidth: Number(e.target.value) })), className: "h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-2 block font-medium text-sm text-white", children: "Color" }), _jsxs("select", { value: theme.color, onChange: (e) => setTheme(prev => ({ ...prev, color: e.target.value })), className: "w-full rounded-lg border border-gray-600 bg-gray-700 p-2 text-white", children: [_jsx("option", { value: "currentColor", children: "Current Color" }), _jsx("option", { value: "#ffffff", children: "White" }), _jsx("option", { value: "#06b6d4", children: "Cyan" }), _jsx("option", { value: "#f59e0b", children: "Amber" }), _jsx("option", { value: "#ef4444", children: "Red" })] })] })] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-8 lg:grid-cols-2", children: [_jsxs("div", { className: "rounded-lg bg-gray-800 p-6", children: [_jsx("h2", { className: "mb-4 font-semibold text-white text-xl", children: "Default Icons" }), _jsx(IconProvider, { theme: theme, children: _jsxs("div", { className: "grid grid-cols-4 gap-4 text-white", children: [_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(PlayIcon, {}), _jsx("span", { className: "text-xs", children: "Play" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(PauseIcon, {}), _jsx("span", { className: "text-xs", children: "Pause" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(VolumeIcon, {}), _jsx("span", { className: "text-xs", children: "Volume" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(VolumeOffIcon, {}), _jsx("span", { className: "text-xs", children: "Mute" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(SettingsIcon, {}), _jsx("span", { className: "text-xs", children: "Settings" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(FullscreenIcon, {}), _jsx("span", { className: "text-xs", children: "Fullscreen" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(LoadingIcon, {}), _jsx("span", { className: "text-xs", children: "Loading" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(PlayPauseIcon, { isPlaying: isPlaying }), _jsx("span", { className: "text-xs", children: "Play/Pause" })] })] }) })] }), _jsxs("div", { className: "rounded-lg bg-gray-800 p-6", children: [_jsx("h2", { className: "mb-4 font-semibold text-white text-xl", children: "Custom Icons" }), _jsx(IconProvider, { theme: theme, icons: {
+                                        play: customPlayIcon
+                                    }, children: _jsxs("div", { className: "grid grid-cols-4 gap-4 text-white", children: [_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(PlayIcon, {}), _jsx("span", { className: "text-xs", children: "Custom Play" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(PauseIcon, {}), _jsx("span", { className: "text-xs", children: "Default Pause" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(VolumeIcon, {}), _jsx("span", { className: "text-xs", children: "Default Volume" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(SettingsIcon, {}), _jsx("span", { className: "text-xs", children: "Default Settings" })] })] }) })] })] }), _jsxs("div", { className: "mt-8 rounded-lg bg-gray-800 p-6", children: [_jsx("h2", { className: "mb-4 font-semibold text-white text-xl", children: "Interactive Media Player Demo" }), _jsx(IconProvider, { theme: { ...theme, size: 32 }, children: _jsxs("div", { className: "flex items-center justify-center space-x-6 text-white", children: [_jsx("button", { onClick: () => setIsPlaying(!isPlaying), className: "rounded-full bg-blue-600 p-3 transition-colors hover:bg-blue-700", "aria-label": isPlaying ? 'Pause' : 'Play', children: _jsx(PlayPauseIcon, { isPlaying: isPlaying }) }), _jsx("button", { onClick: () => setVolume(volume > 0 ? 0 : 0.8), className: "rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700", "aria-label": volume > 0 ? 'Mute' : 'Unmute', children: volume > 0 ? _jsx(VolumeIcon, {}) : _jsx(VolumeOffIcon, {}) }), _jsx("button", { className: "rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700", "aria-label": "Settings", children: _jsx(SettingsIcon, {}) }), _jsx("button", { className: "rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700", "aria-label": "Fullscreen", children: _jsx(FullscreenIcon, {}) })] }) }), _jsxs("div", { className: "mt-4 text-center text-gray-400 text-sm", children: ["Status: ", isPlaying ? 'Playing' : 'Paused', " | Volume: ", volume > 0 ? 'On' : 'Muted'] })] })] }) }));
+}

package/src/components/icons/index.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+export interface IconProps {
+    size?: number;
+    className?: string;
+    color?: string;
+}
+export declare const MinimalPlayIcon: React.FC<IconProps>;
+export declare const MinimalPauseIcon: React.FC<IconProps>;
+export declare const MinimalVolumeIcon: React.FC<IconProps>;
+export declare const MinimalVolumeMutedIcon: React.FC<IconProps>;
+export declare const MinimalFullscreenIcon: React.FC<IconProps>;
+export declare const MinimalExitFullscreenIcon: React.FC<IconProps>;
+export declare const MinimalSettingsIcon: React.FC<IconProps>;
+export declare const MinimalSpinner: React.FC<IconProps>;
+export declare const MinimalForwardIcon: React.FC<IconProps>;
+export declare const MinimalBackwardIcon: React.FC<IconProps>;
+export declare const MinimalForward10Icon: React.FC<IconProps>;
+export declare const MinimalBackward10Icon: React.FC<IconProps>;
+export declare const MinimalSubtitleIcon: React.FC<IconProps>;
+export declare const MinimalScreenshotIcon: React.FC<IconProps>;
+export declare const MinimalSpeedIcon: React.FC<IconProps>;
+export interface IconSet {
+    play?: React.FC<IconProps>;
+    pause?: React.FC<IconProps>;
+    volume?: React.FC<IconProps>;
+    volumeMuted?: React.FC<IconProps>;
+    fullscreen?: React.FC<IconProps>;
+    exitFullscreen?: React.FC<IconProps>;
+    settings?: React.FC<IconProps>;
+    forward?: React.FC<IconProps>;
+    backward?: React.FC<IconProps>;
+    spinner?: React.FC<IconProps>;
+    subtitle?: React.FC<IconProps>;
+}
+export declare const defaultMinimalIcons: IconSet;
+//# sourceMappingURL=index.d.ts.map

package/src/components/icons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAiBzB,MAAM,WAAW,SAAS;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACd;AAGD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIqC,CAAA;AAGrF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIqC,CAAA;AAGtF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIwC,CAAA;AAG1F,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIqC,CAAA;AAG5F,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAI0C,CAAA;AAGhG,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIqC,CAAA;AAG/F,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIqC,CAAA;AAGzF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAW9C,CAAA;AAGD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIsC,CAAA;AAGzF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIoC,CAAA;AAGxF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAImC,CAAA;AAGxF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAImC,CAAA;AAGzF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIwC,CAAA;AAG5F,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIiC,CAAA;AAGvF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAI6C,CAAA;AAG9F,MAAM,WAAW,OAAO;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAChC,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;CAC9B;AAGD,eAAO,MAAM,mBAAmB,EAAE,OAYjC,CAAA"}

package/src/components/icons/index.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import BackwardIcon from "./svg-icons/BackwardIcon";
+import CameraIcon from "./svg-icons/CameraIcon";
+import ForwardIcon from "./svg-icons/ForwardIcon";
+import FullscreenEnterIcon from "./svg-icons/FullscreenEnterIcon";
+import FullscreenExitIcon from "./svg-icons/FullscreenExitIcon";
+import LoadingIcon from "./svg-icons/LoadingIcon";
+import PauseIcon from "./svg-icons/PauseIcon";
+import PlayIcon from "./svg-icons/PlayIcon";
+import PlaybackSpeedIcon from "./svg-icons/PlaybackSpeedIcon";
+import SettingsIcon from "./svg-icons/SettingsIcon";
+import SubtitleIconSVG from "./svg-icons/SubtitleIcon";
+import VolumeMutedIcon from "./svg-icons/VolumeMutedIcon";
+import VolumeTwoIcon from "./svg-icons/VolumeTwoIcon";
+// Minimal Play Icon
+export const MinimalPlayIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(PlayIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Pause Icon
+export const MinimalPauseIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(PauseIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Volume Icon
+export const MinimalVolumeIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(VolumeTwoIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Volume Muted Icon
+export const MinimalVolumeMutedIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(VolumeMutedIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Fullscreen Icon
+export const MinimalFullscreenIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(FullscreenEnterIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Exit Fullscreen Icon
+export const MinimalExitFullscreenIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(FullscreenExitIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Settings Icon
+export const MinimalSettingsIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(SettingsIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Loading Spinner
+export const MinimalSpinner = ({ size = 24, className = "", color = "currentColor" }) => (_jsx(LoadingIcon, { width: size, height: size, className: `animate-spin ${className}`, style: { color } }));
+// Minimal Forward Icon (using backward design)
+export const MinimalForwardIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(BackwardIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Backward Icon
+export const MinimalBackwardIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(ForwardIcon, { width: size, height: size, className: className, style: { color } });
+// Forward 10 seconds icon
+export const MinimalForward10Icon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(ForwardIcon, { width: size, height: size, className: className, style: { color } });
+// Backward 10 seconds icon
+export const MinimalBackward10Icon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(BackwardIcon, { width: size, height: size, className: className, style: { color } });
+// Subtitle/Caption icon
+export const MinimalSubtitleIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(SubtitleIconSVG, { width: size, height: size, className: className, style: { color } });
+// Screenshot/Camera icon
+export const MinimalScreenshotIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(CameraIcon, { width: size, height: size, className: className, style: { color } });
+// Speed icon
+export const MinimalSpeedIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(PlaybackSpeedIcon, { width: size, height: size, className: className, style: { color } });
+// Default Icon Set
+export const defaultMinimalIcons = {
+    play: MinimalPlayIcon,
+    pause: MinimalPauseIcon,
+    volume: MinimalVolumeIcon,
+    volumeMuted: MinimalVolumeMutedIcon,
+    fullscreen: MinimalFullscreenIcon,
+    exitFullscreen: MinimalExitFullscreenIcon,
+    settings: MinimalSettingsIcon,
+    forward: MinimalForwardIcon,
+    backward: MinimalBackwardIcon,
+    spinner: MinimalSpinner,
+    subtitle: MinimalSubtitleIcon
+};

package/src/components/icons/svg-icons/ArrowLeftIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const ArrowLeftIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default ArrowLeftIcon;
+//# sourceMappingURL=ArrowLeftIcon.d.ts.map

package/src/components/icons/svg-icons/ArrowLeftIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowLeftIcon.d.ts","sourceRoot":"","sources":["ArrowLeftIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,QAAA,MAAM,aAAa,GAAI,OAAO,QAAQ,CAAC,aAAa,CAAC,4CAYpD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/src/components/icons/svg-icons/ArrowLeftIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ArrowLeftIcon = (props) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', className: 'iconify iconify--ic', width: '24', height: '24', viewBox: '0 0 24 24', style: { width: '100%', height: '100%' }, ...props, children: _jsx("path", { fill: 'currentColor', d: 'M17.77 3.77 16 2 6 12l10 10 1.77-1.77L9.54 12z' }) }));
+export default ArrowLeftIcon;

package/src/components/icons/svg-icons/ArrowRightIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const ArrowRightIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default ArrowRightIcon;
+//# sourceMappingURL=ArrowRightIcon.d.ts.map

package/src/components/icons/svg-icons/ArrowRightIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowRightIcon.d.ts","sourceRoot":"","sources":["ArrowRightIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAQ,MAAM,OAAO,CAAA;AAEtC,QAAA,MAAM,cAAc,GAAI,OAAO,QAAQ,CAAC,aAAa,CAAC,4CAYrD,CAAA;AAED,eAAe,cAAc,CAAA"}

package/src/components/icons/svg-icons/ArrowRightIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ArrowRightIcon = (props) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', className: 'iconify iconify--ic', width: '24', height: '24', viewBox: '0 0 24 24', style: { width: '100%', height: '100%' }, ...props, children: _jsx("path", { fill: 'currentColor', d: 'M6.23 20.23 8 22l10-10L8 2 6.23 3.77 14.46 12z' }) }));
+export default ArrowRightIcon;

package/src/components/icons/svg-icons/AudioIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const Memo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Memo;
+//# sourceMappingURL=AudioIcon.d.ts.map

package/src/components/icons/svg-icons/AudioIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioIcon.d.ts","sourceRoot":"","sources":["AudioIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAQ,MAAM,OAAO,CAAA;AAmBtC,QAAA,MAAM,IAAI,UAjBgB,QAAQ,CAAC,aAAa,CAAC,4CAiB3B,CAAA;AACtB,eAAe,IAAI,CAAA"}

package/src/components/icons/svg-icons/AudioIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const AudioIcon = (props) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', className: 'iconify iconify--ic', width: '1em', height: '1em', viewBox: '0 0 24 24', style: { width: '100%', height: '100%' }, ...props, children: _jsx("path", { fill: 'currentColor', d: 'M12 5v8.55c-.94-.54-2.1-.75-3.33-.32-1.34.48-2.37 1.67-2.61 3.07a4.007 4.007 0 0 0 4.59 4.65c1.96-.31 3.35-2.11 3.35-4.1V7h2c1.1 0 2-.9 2-2s-.9-2-2-2h-2c-1.1 0-2 .9-2 2z' }) }));
+const Memo = AudioIcon;
+export default Memo;

package/src/components/icons/svg-icons/BackwardIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const BackwardIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default BackwardIcon;
+//# sourceMappingURL=BackwardIcon.d.ts.map

package/src/components/icons/svg-icons/BackwardIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackwardIcon.d.ts","sourceRoot":"","sources":["BackwardIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAQ,MAAM,OAAO,CAAA;AAEtC,QAAA,MAAM,YAAY,GAAI,OAAO,QAAQ,CAAC,aAAa,CAAC,4CAMnD,CAAA;AAED,eAAe,YAAY,CAAA"}

package/src/components/icons/svg-icons/BackwardIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const BackwardIcon = (props) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '1em', height: '1em', viewBox: '0 0 24 24', ...props, children: _jsx("path", { fill: 'currentColor', d: 'M3 2.25a1 1 0 0 0-1 1V9a1 1 0 0 0 1 1h5.25a1 1 0 0 0 0-2H4.863c.985-1.179 2.208-2.113 3.682-2.57a9.435 9.435 0 0 1 6.106.16c1.981.738 3.81 2.232 4.722 3.894a1 1 0 1 0 1.754-.961c-1.175-2.143-3.415-3.927-5.778-4.807a11.435 11.435 0 0 0-7.395-.196C6.378 4.008 5.068 4.9 4 5.979V3.25a1 1 0 0 0-1-1ZM9.75 12a1 1 0 0 0-1.762-.647l-.222.265c-.515.623-1.078 1.303-2.28 2.024a1 1 0 1 0 1.029 1.716c.483-.29.889-.582 1.235-.865V20a1 1 0 0 0 2 0v-8Zm6.5-1c-1.386 0-2.4.635-3.008 1.661c-.564.95-.742 2.161-.742 3.339s.178 2.39.742 3.339C13.85 20.365 14.864 21 16.25 21s2.4-.635 3.008-1.661c.564-.95.742-2.161.742-3.339s-.178-2.39-.742-3.339C18.65 11.635 17.636 11 16.25 11Zm-1.75 5c0-1.031.166-1.82.461-2.318c.251-.422.613-.682 1.289-.682c.676 0 1.038.26 1.288.682c.296.498.462 1.287.462 2.318c0 1.031-.166 1.82-.462 2.318c-.25.422-.612.682-1.288.682s-1.038-.26-1.289-.682c-.295-.498-.461-1.287-.461-2.318Z' }) }));
+export default BackwardIcon;

package/src/components/icons/svg-icons/CameraIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const Memo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Memo;
+//# sourceMappingURL=CameraIcon.d.ts.map

package/src/components/icons/svg-icons/CameraIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CameraIcon.d.ts","sourceRoot":"","sources":["CameraIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAQ,MAAM,OAAO,CAAA;AAgBtC,QAAA,MAAM,IAAI,UAdiB,QAAQ,CAAC,aAAa,CAAC,4CAc3B,CAAA;AACvB,eAAe,IAAI,CAAA"}

package/src/components/icons/svg-icons/CameraIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const CameraIcon = (props) => (_jsx("svg", { width: 32, height: 32, viewBox: '0 0 24 24', style: { width: '100%', height: '100%' }, ...props, children: _jsx("path", { fill: 'currentColor', d: 'M12 18q2.075 0 3.538-1.462Q17 15.075 17 13q0-2.075-1.462-3.538Q14.075 8 12 8 9.925 8 8.463 9.462 7 10.925 7 13q0 2.075 1.463 3.538Q9.925 18 12 18Zm0-2q-1.25 0-2.125-.875T9 13q0-1.25.875-2.125T12 10q1.25 0 2.125.875T15 13q0 1.25-.875 2.125T12 16Zm6-6q.425 0 .712-.288Q19 9.425 19 9t-.288-.713Q18.425 8 18 8t-.712.287Q17 8.575 17 9t.288.712Q17.575 10 18 10ZM4 21q-.825 0-1.412-.587Q2 19.825 2 19V7q0-.825.588-1.412Q3.175 5 4 5h3.15L8.7 3.325q.15-.15.337-.238Q9.225 3 9.425 3h5.15q.2 0 .388.087.187.088.337.238L16.85 5H20q.825 0 1.413.588Q22 6.175 22 7v12q0 .825-.587 1.413Q20.825 21 20 21Zm16-2V7h-4.05l-1.825-2h-4.25L8.05 7H4v12Zm-8-6Z' }) }));
+const Memo = CameraIcon;
+export default Memo;

package/src/components/icons/svg-icons/CheckIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const Memo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Memo;
+//# sourceMappingURL=CheckIcon.d.ts.map

package/src/components/icons/svg-icons/CheckIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckIcon.d.ts","sourceRoot":"","sources":["CheckIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAQ,MAAM,OAAO,CAAA;AAgBtC,QAAA,MAAM,IAAI,UAdgB,QAAQ,CAAC,aAAa,CAAC,4CAc3B,CAAA;AACtB,eAAe,IAAI,CAAA"}

package/src/components/icons/svg-icons/CheckIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const CheckIcon = (props) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', className: 'iconify iconify--mdi', width: '24', height: '24', viewBox: '0 0 24 24', style: { width: '100%', height: '100%' }, ...props, children: _jsx("path", { fill: 'currentColor', d: 'M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59 21 7Z' }) }));
+const Memo = CheckIcon;
+export default Memo;

package/src/components/icons/svg-icons/EnablePiPIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare function EnablePiPIcon(props: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export default EnablePiPIcon;
+//# sourceMappingURL=EnablePiPIcon.d.ts.map

package/src/components/icons/svg-icons/EnablePiPIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnablePiPIcon.d.ts","sourceRoot":"","sources":["EnablePiPIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEtC,iBAAS,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,2CAYpD;AACD,eAAe,aAAa,CAAA"}

package/src/components/icons/svg-icons/EnablePiPIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function EnablePiPIcon(props) {
+    return (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '1em', height: '1em', viewBox: '0 0 24 24', ...props, children: _jsxs("g", { fill: 'currentColor', children: [_jsx("path", { d: 'M13 17c0-1.886 0-2.828.586-3.414C14.172 13 15.114 13 17 13h1c1.886 0 2.828 0 3.414.586C22 14.172 22 15.114 22 17c0 1.886 0 2.828-.586 3.414C20.828 21 19.886 21 18 21h-1c-1.886 0-2.828 0-3.414-.586C13 19.828 13 18.886 13 17Z' }), _jsx("path", { fillRule: 'evenodd', d: 'M10 3h4c3.771 0 5.657 0 6.828 1.172c.95.949 1.13 2.694 1.164 5.328c.012.937.018 1.405-.275 1.703c-.294.297-.768.297-1.717.297h-2.5c-2.828 0-4.243 0-5.121.879c-.879.878-.879 2.293-.879 5.121v2c0 .466 0 .699-.076.883a1 1 0 0 1-.541.54C10.699 21 10.466 21 10 21c-3.771 0-5.657 0-6.828-1.172C2 18.657 2 16.771 2 13v-2c0-3.771 0-5.657 1.172-6.828C4.343 3 6.229 3 10 3ZM8.03 6.97a.75.75 0 0 0-1.06 1.06l2.72 2.72H8.5a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 .75-.75v-3a.75.75 0 0 0-1.5 0v1.19L8.03 6.97Z', clipRule: 'evenodd' })] }) }));
+}
+export default EnablePiPIcon;

package/src/components/icons/svg-icons/ForwardIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const ForwardIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default ForwardIcon;
+//# sourceMappingURL=ForwardIcon.d.ts.map

package/src/components/icons/svg-icons/ForwardIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForwardIcon.d.ts","sourceRoot":"","sources":["ForwardIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAQ,MAAM,OAAO,CAAA;AAEtC,QAAA,MAAM,WAAW,GAAI,OAAO,QAAQ,CAAC,aAAa,CAAC,4CAMlD,CAAA;AAED,eAAe,WAAW,CAAA"}

package/src/components/icons/svg-icons/ForwardIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ForwardIcon = (props) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '1em', height: '1em', viewBox: '0 0 24 24', ...props, children: _jsx("path", { fill: 'currentColor', d: 'M21 2.25a1 1 0 0 1 1 1V9a1 1 0 0 1-1 1h-5.25a1 1 0 0 1 0-2h3.387c-.985-1.179-2.208-2.113-3.682-2.57a9.435 9.435 0 0 0-6.106.16c-1.981.738-3.81 2.232-4.722 3.894a1 1 0 0 1-1.754-.961C4.048 6.38 6.288 4.596 8.652 3.716a11.435 11.435 0 0 1 7.394-.196c1.576.488 2.886 1.38 3.954 2.459V3.25a1 1 0 0 1 1-1ZM9.095 11.061A1 1 0 0 1 9.75 12v8a1 1 0 0 1-2 0v-5.507c-.346.283-.752.575-1.235.864a1 1 0 1 1-1.03-1.715c1.203-.721 1.766-1.4 2.281-2.024c.074-.09.148-.178.222-.265a1 1 0 0 1 1.107-.292Zm4.147 1.6C13.85 11.635 14.864 11 16.25 11s2.4.635 3.008 1.661c.564.95.742 2.161.742 3.339s-.178 2.39-.742 3.339C18.65 20.365 17.636 21 16.25 21s-2.4-.636-3.008-1.661c-.564-.95-.742-2.161-.742-3.339s.178-2.39.742-3.339Zm1.72 1.021c-.296.498-.462 1.287-.462 2.318c0 1.031.166 1.82.461 2.318c.251.422.613.682 1.289.682c.676 0 1.038-.26 1.288-.682c.296-.498.462-1.287.462-2.318c0-1.031-.166-1.82-.462-2.318c-.25-.422-.612-.682-1.288-.682s-1.038.26-1.289.682Z' }) }));
+export default ForwardIcon;

package/src/components/icons/svg-icons/FullscreenEnterIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const FullscreenEnterIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FullscreenEnterIcon;
+//# sourceMappingURL=FullscreenEnterIcon.d.ts.map

package/src/components/icons/svg-icons/FullscreenEnterIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullscreenEnterIcon.d.ts","sourceRoot":"","sources":["FullscreenEnterIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAQ,MAAM,OAAO,CAAA;AAEtC,QAAA,MAAM,mBAAmB,GAAI,OAAO,QAAQ,CAAC,aAAa,CAAC,4CAiB1D,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/src/components/icons/svg-icons/FullscreenEnterIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const FullscreenEnterIcon = (props) => (_jsx("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "data-uia": 'control-fullscreen-enter', style: { width: '100%', height: '100%' }, ...props, children: _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M0 5a2 2 0 0 1 2-2h7v2H2v4H0V5Zm22 0h-7V3h7a2 2 0 0 1 2 2v4h-2V5ZM2 15v4h7v2H2a2 2 0 0 1-2-2v-4h2Zm20 4v-4h2v4a2 2 0 0 1-2 2h-7v-2h7Z', fill: 'currentColor' }) }));
+export default FullscreenEnterIcon;

package/src/components/icons/svg-icons/FullscreenExitIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const FullscreenExitIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FullscreenExitIcon;
+//# sourceMappingURL=FullscreenExitIcon.d.ts.map

package/src/components/icons/svg-icons/FullscreenExitIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullscreenExitIcon.d.ts","sourceRoot":"","sources":["FullscreenExitIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAQ,MAAM,OAAO,CAAA;AAEtC,QAAA,MAAM,kBAAkB,GAAI,OAAO,QAAQ,CAAC,aAAa,CAAC,4CAiBzD,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/src/components/icons/svg-icons/FullscreenExitIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const FullscreenExitIcon = (props) => (_jsx("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "data-uia": 'control-fullscreen-exit', style: { width: '100%', height: '100%' }, ...props, children: _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M24 8h-5V3h-2v7h7V8ZM0 16h5v5h2v-7H0v2Zm7-6H0V8h5V3h2v7Zm12 11v-5h5v-2h-7v7h2Z', fill: 'currentColor' }) }));
+export default FullscreenExitIcon;

package/src/components/icons/svg-icons/LoadingIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const LoadingIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default LoadingIcon;
+//# sourceMappingURL=LoadingIcon.d.ts.map

package/src/components/icons/svg-icons/LoadingIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingIcon.d.ts","sourceRoot":"","sources":["LoadingIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAQ,MAAM,OAAO,CAAA;AAEtC,QAAA,MAAM,WAAW,GAAI,OAAO,QAAQ,CAAC,aAAa,CAAC,4CA0BlD,CAAA;AAED,eAAe,WAAW,CAAA"}

package/src/components/icons/svg-icons/LoadingIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LoadingIcon = (props) => (_jsxs("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: 'svg-icon-nfplayerPlay', style: { width: '100%', height: '100%' }, ...props, children: [_jsx("path", { fill: 'currentColor', d: 'M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z', opacity: '.5' }), _jsx("path", { fill: 'currentColor', d: 'M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z', children: _jsx("animateTransform", { attributeName: 'transform', dur: '1s', from: '0 12 12', repeatCount: 'indefinite', to: '360 12 12', type: 'rotate' }) })] }));
+export default LoadingIcon;

package/src/components/icons/svg-icons/PauseIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const PauseIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default PauseIcon;
+//# sourceMappingURL=PauseIcon.d.ts.map

package/src/components/icons/svg-icons/PauseIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PauseIcon.d.ts","sourceRoot":"","sources":["PauseIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAQ,MAAM,OAAO,CAAA;AAEtC,QAAA,MAAM,SAAS,GAAI,OAAO,QAAQ,CAAC,aAAa,CAAC,4CAiBhD,CAAA;AAED,eAAe,SAAS,CAAA"}

package/src/components/icons/svg-icons/PauseIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const PauseIcon = (props) => (_jsx("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: 'svg-icon-nfplayerPause', style: { width: '100%', height: '100%' }, ...props, children: _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M4.5 3a.5.5 0 0 0-.5.5v17a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-17a.5.5 0 0 0-.5-.5h-5Zm10 0a.5.5 0 0 0-.5.5v17a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-17a.5.5 0 0 0-.5-.5h-5Z', fill: 'currentColor' }) }));
+export default PauseIcon;

package/src/components/icons/svg-icons/PlayIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const PlayIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default PlayIcon;
+//# sourceMappingURL=PlayIcon.d.ts.map

package/src/components/icons/svg-icons/PlayIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayIcon.d.ts","sourceRoot":"","sources":["PlayIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAQ,MAAM,OAAO,CAAA;AAEtC,QAAA,MAAM,QAAQ,GAAI,OAAO,QAAQ,CAAC,aAAa,CAAC,4CAe/C,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/src/components/icons/svg-icons/PlayIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const PlayIcon = (props) => (_jsx("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: 'svg-icon-nfplayerPlay', style: { width: '100%', height: '100%' }, ...props, children: _jsx("path", { d: 'M4 2.691a1 1 0 0 1 1.482-.876l16.925 9.309a1 1 0 0 1 0 1.752L5.482 22.185A1 1 0 0 1 4 21.309V2.69Z', fill: 'currentColor' }) }));
+export default PlayIcon;

package/src/components/icons/svg-icons/PlaybackSpeedIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const PlaybackSpeedIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default PlaybackSpeedIcon;
+//# sourceMappingURL=PlaybackSpeedIcon.d.ts.map