6pp - npm Package Compare versions

6pp

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.2.15 to 1.2.16

dist/hooks/forms.d.ts

		@@ -8,2 +8,3 @@ import { ChangeEvent } from "react";
		changeHandler: (e: ChangeEvent<HTMLInputElement>) => void;
		clear: () => void;
		};
		@@ -14,2 +15,3 @@ declare const useStrongPassword: () => {
		changeHandler: (e: ChangeEvent<HTMLInputElement>) => void;
		clear: () => void;
		};
		@@ -23,3 +25,4 @@ declare const useInputValidation: <T extends string \| number>(initialVal: T, validator?: (val: T) => {
		error: string;
		clear: () => void;
		};
		export { useFileHandler, useInputValidation, useStrongPassword };

3045

dist/index.js

		@@ -1,4 +0,3 @@
		import * as React from "react";
		import { useState, useEffect, useRef, useCallback, memo } from "react";
		import "./index.css";
		import * as React from 'react';
		import { useState, useEffect, useRef, useCallback, memo } from 'react';

		@@ -9,761 +8,594 @@ const cache = new Map();
		const useFetchData = (url, key, dependencyProps = []) => {
		const [data, setData] = useState();
		const [loading, setLoading] = useState(false);
		const [error, setError] = useState("");
		const [refetchIndex, setRefetchIndex] = useState(0);
		useEffect(() => {
		const controller = new AbortController();
		if (cache.has(key)) {
		setData(JSON.parse(cache.get(key)));
		return;
		}
		setLoading(true);
		fetch(url, { credentials: "include", signal: controller.signal })
		.then(async (res) => {
		const data = await res.json();
		if (!res.ok) {
		throw new Error(data.message \|\| "Errro while fetching!");
		} else {
		setData(data);
		cache.set(key, JSON.stringify(data));
		const [data, setData] = useState();
		const [loading, setLoading] = useState(false);
		const [error, setError] = useState("");
		const [refetchIndex, setRefetchIndex] = useState(0);
		useEffect(() => {
		const controller = new AbortController();
		if (cache.has(key)) {
		setData(JSON.parse(cache.get(key)));
		return;
		}
		})
		.catch((error) => {
		if (error.name !== "AbortError") {
		setError(error.message \|\| "Something went wrong!");
		}
		})
		.finally(() => setLoading(false));
		return () => {
		controller.abort();
		setLoading(true);
		fetch(url, { credentials: "include", signal: controller.signal })
		.then(async (res) => {
		const data = await res.json();
		if (!res.ok) {
		throw new Error(data.message \|\| "Errro while fetching!");
		}
		else {
		setData(data);
		cache.set(key, JSON.stringify(data));
		}
		})
		.catch((error) => {
		if (error.name !== "AbortError") {
		setError(error.message \|\| "Something went wrong!");
		}
		})
		.finally(() => setLoading(false));
		return () => {
		controller.abort();
		};
		}, [refetchIndex, ...dependencyProps]);
		const refetch = () => {
		cache.delete(key);
		setRefetchIndex((prevIndex) => prevIndex + 1);
		};
		}, [refetchIndex, ...dependencyProps]);
		const refetch = () => {
		cache.delete(key);
		setRefetchIndex((prevIndex) => prevIndex + 1);
		};
		const clearCache = () => {
		cache.delete(key);
		};
		return { data, loading, error, refetch, clearCache };
		const clearCache = () => {
		cache.delete(key);
		};
		return { data, loading, error, refetch, clearCache };
		};

		const errorMessages = {
		length: "at least 8 characters",
		number: "a number",
		specialChar: "a special",
		capitalLetter: "a capital",
		lowercaseLetter: "a lowercase",
		length: "at least 8 characters",
		number: "a number",
		specialChar: "a special",
		capitalLetter: "a capital",
		lowercaseLetter: "a lowercase",
		};

		const isIncludeNumber = (password) => {
		const regex = /\d/; // This regular expression matches any digit (0-9)
		return regex.test(password); // This will return true if the password includes a number, and false otherwise
		const regex = /\d/; // This regular expression matches any digit (0-9)
		return regex.test(password); // This will return true if the password includes a number, and false otherwise
		};
		const isIncludeSpecialChar = (password) => {
		const specialCharRegex = /[ `!@#$%^&*()_+\-=\[\]{};':"\\\|,.<>\/?~]/; // This regular expression matches any special character
		return specialCharRegex.test(password); // This will return true if the password includes a special character, and false otherwise
		const specialCharRegex = /[ `!@#$%^&*()_+\-=\[\]{};':"\\\|,.<>\/?~]/; // This regular expression matches any special character
		return specialCharRegex.test(password); // This will return true if the password includes a special character, and false otherwise
		};
		const isIncludeCapitalLetter = (password) => {
		const capitalLetterRegex = /[A-Z]/; // This regular expression matches any capital letter (A-Z)
		return capitalLetterRegex.test(password); // This will return true if the password includes a capital letter, and false otherwise
		const capitalLetterRegex = /[A-Z]/; // This regular expression matches any capital letter (A-Z)
		return capitalLetterRegex.test(password); // This will return true if the password includes a capital letter, and false otherwise
		};
		const isIncludeLowercaseLetter = (password) => {
		const lowercaseLetterRegex = /[a-z]/; // This regular expression matches any lowercase letter (a-z)
		return lowercaseLetterRegex.test(password); // This will return true if the password includes a lowercase letter, and false otherwise
		const lowercaseLetterRegex = /[a-z]/; // This regular expression matches any lowercase letter (a-z)
		return lowercaseLetterRegex.test(password); // This will return true if the password includes a lowercase letter, and false otherwise
		};
		const isValidEmail = (email) => {
		const emailRegex = /\S+@\S+\.\S+/;
		return emailRegex.test(email);
		const emailRegex = /\S+@\S+\.\S+/;
		return emailRegex.test(email);
		};
		const isValidUsername = (username) => {
		const usernameRegex = /^[a-zA-Z0-9]+$/;
		return usernameRegex.test(username);
		const usernameRegex = /^[a-zA-Z0-9]+$/;
		return usernameRegex.test(username);
		};
		const isValidUrl = (url) => {
		try {
		new URL(url);
		return true;
		} catch (_) {
		return false;
		}
		try {
		new URL(url);
		return true;
		}
		catch (_) {
		return false;
		}
		};
		// 10 digit phone number
		const isValidPhoneNumber = (phoneNumber) => {
		const regex = /^\d{10}$/;
		return regex.test(phoneNumber);
		const regex = /^\d{10}$/;
		return regex.test(phoneNumber);
		};
		// YYYY-MM-DD Format
		const isValidDate = (date) => {
		const regex = /^\d{4}-\d{2}-\d{2}$/;
		return regex.test(date);
		const regex = /^\d{4}-\d{2}-\d{2}$/;
		return regex.test(date);
		};
		// HH:MM Format
		const isValidTime = (time) => {
		const regex = /^\d{2}:\d{2}$/;
		return regex.test(time);
		const regex = /^\d{2}:\d{2}$/;
		return regex.test(time);
		};
		// YYYY-MM-DDTHH:MM Format
		const isValidDateTime = (dateTime) => {
		const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/;
		return regex.test(dateTime);
		const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/;
		return regex.test(dateTime);
		};
		const isDateBetween = (date, startDate, endDate) => {
		const targetDate = new Date(date);
		const start = new Date(startDate);
		const end = new Date(endDate);
		return start <= targetDate && targetDate <= end;
		const targetDate = new Date(date);
		const start = new Date(startDate);
		const end = new Date(endDate);
		return start <= targetDate && targetDate <= end;
		};

		const useFileHandler = (type, limitInMb = 5, maxFiles = 10) => {
		const initialFile = type === "multiple" ? [] : null;
		const initialPreview = type === "multiple" ? [] : null;
		const [error, setError] = useState(null);
		const [file, setFile] = useState(initialFile);
		const [preview, setPreview] = useState(initialPreview);
		const changeHandler = (e) => {
		if (!e.target.files) return;
		if (type === "single") {
		const singleFile = e.target.files[0];
		if (e.target.files.length > 1) {
		return setError(
		"Cannot upload more than 1 file, please select type as 'Multiple'"
		);
		}
		if (singleFile.size > 1024 * 1024 * limitInMb) {
		return setError("File size too large");
		}
		const reader = new FileReader();
		reader.readAsDataURL(singleFile);
		reader.onloadend = () => {
		setPreview(reader.result);
		};
		setFile(singleFile);
		}
		if (type === "multiple") {
		const files = Array.from(e.target.files);
		if (maxFiles && files.length > maxFiles) {
		return setError(`Maximum ${maxFiles} files allowed`);
		}
		for (const item of files) {
		if (item.size > 1024 * 1024 * limitInMb) {
		setError("File size too large");
		return;
		const initialFile = (type === "multiple" ? [] : null);
		const initialPreview = (type === "multiple" ? [] : null);
		const [error, setError] = useState(null);
		const [file, setFile] = useState(initialFile);
		const [preview, setPreview] = useState(initialPreview);
		const changeHandler = (e) => {
		if (!e.target.files)
		return;
		if (type === "single") {
		const singleFile = e.target.files[0];
		if (e.target.files.length > 1) {
		return setError("Cannot upload more than 1 file, please select type as 'Multiple'");
		}
		if (singleFile.size > 1024 * 1024 * limitInMb) {
		return setError("File size too large");
		}
		const reader = new FileReader();
		reader.readAsDataURL(singleFile);
		reader.onloadend = () => {
		setPreview(reader.result);
		};
		setFile(singleFile);
		}
		const reader = new FileReader();
		reader.readAsDataURL(item);
		reader.onloadend = () => {
		setPreview((prev) => {
		if (Array.isArray(prev)) {
		return [...prev, reader.result];
		} else return [reader.result];
		});
		};
		setFile((prev) => {
		if (Array.isArray(prev)) {
		return [...prev, item];
		} else return [item];
		});
		}
		}
		};
		return {
		file,
		preview,
		error,
		changeHandler,
		};
		if (type === "multiple") {
		const files = Array.from(e.target.files);
		if (maxFiles && files.length > maxFiles) {
		return setError(`Maximum ${maxFiles} files allowed`);
		}
		for (const item of files) {
		if (item.size > 1024 * 1024 * limitInMb) {
		setError("File size too large");
		return;
		}
		const reader = new FileReader();
		reader.readAsDataURL(item);
		reader.onloadend = () => {
		setPreview((prev) => {
		if (Array.isArray(prev)) {
		return [...prev, reader.result];
		}
		else
		return [reader.result];
		});
		};
		setFile((prev) => {
		if (Array.isArray(prev)) {
		return [...prev, item];
		}
		else
		return [item];
		});
		}
		}
		};
		const clear = () => {
		setFile(initialFile);
		setPreview(initialPreview);
		setError(null);
		};
		return {
		file,
		preview,
		error,
		changeHandler,
		clear,
		};
		};
		const useStrongPassword = () => {
		const [error, setError] = useState("");
		const [value, setValue] = useState("");
		const changeHandler = (e) => {
		const val = e.target.value;
		setValue(val);
		const errors = [];
		if (val.length < 8) errors.push(errorMessages.length);
		if (!isIncludeNumber(val)) errors.push(errorMessages.number);
		if (!isIncludeSpecialChar(val)) errors.push(errorMessages.specialChar);
		if (!isIncludeCapitalLetter(val)) errors.push(errorMessages.capitalLetter);
		if (!isIncludeLowercaseLetter(val))
		errors.push(errorMessages.lowercaseLetter);
		setError(
		errors.length > 0
		? `Password must include ${errors.join(", ")} character`
		: ""
		);
		};
		return {
		error,
		value,
		changeHandler,
		};
		const [error, setError] = useState("");
		const [value, setValue] = useState("");
		const changeHandler = (e) => {
		const val = e.target.value;
		setValue(val);
		const errors = [];
		if (val.length < 8)
		errors.push(errorMessages.length);
		if (!isIncludeNumber(val))
		errors.push(errorMessages.number);
		if (!isIncludeSpecialChar(val))
		errors.push(errorMessages.specialChar);
		if (!isIncludeCapitalLetter(val))
		errors.push(errorMessages.capitalLetter);
		if (!isIncludeLowercaseLetter(val))
		errors.push(errorMessages.lowercaseLetter);
		setError(errors.length > 0
		? `Password must include ${errors.join(", ")} character`
		: "");
		};
		const clear = () => {
		setValue("");
		setError("");
		};
		return {
		error,
		value,
		changeHandler,
		clear,
		};
		};
		const useInputValidation = (initialVal, validator = () => undefined) => {
		const [value, setValue] = useState(initialVal);
		const [error, setError] = useState("");
		const changeHandler = (e) => {
		let newValue;
		if (typeof value === "number") {
		newValue = Number(e.target.value);
		} else {
		newValue = e.target.value;
		}
		setValue(newValue);
		const validationResult = validator(newValue);
		if (validationResult) {
		setError(validationResult.errorMessage);
		} else {
		setError("");
		}
		};
		return {
		value,
		changeHandler,
		error,
		};
		const [value, setValue] = useState(initialVal);
		const [error, setError] = useState("");
		const changeHandler = (e) => {
		let newValue;
		if (typeof value === "number") {
		newValue = Number(e.target.value);
		}
		else {
		newValue = e.target.value;
		}
		setValue(newValue);
		const validationResult = validator(newValue);
		if (validationResult) {
		setError(validationResult.errorMessage);
		}
		else {
		setError("");
		}
		};
		const clear = () => {
		setValue(initialVal);
		setError("");
		};
		return {
		value,
		changeHandler,
		error,
		clear,
		};
		};

		const useConfirmModal = ({
		title = "Confirm Delete",
		subtitle = "Are you sure you want to delete?",
		confirmHandler,
		}) => {
		const modalRef = useRef(null);
		const [isOpen, setIsOpen] = useState(false);
		const showModal = () => setIsOpen(true);
		const closeModal = () => setIsOpen(false);
		const closeHandler = (e) => {
		if (!modalRef.current) return;
		const dialogDimension = modalRef.current?.getBoundingClientRect();
		if (
		e.clientX < dialogDimension.left \|\|
		e.clientX > dialogDimension.right \|\|
		e.clientY < dialogDimension.top \|\|
		e.clientY > dialogDimension.bottom
		)
		closeModal();
		};
		const handler = () => {
		closeModal();
		confirmHandler();
		};
		const ConfirmModal = ({
		containerStyles = {},
		noBtnStyles = {},
		yesBtnStyles = {},
		subtitleStyles = {},
		titleStyles = {},
		containerClassName,
		}) =>
		React.createElement(
		"section",
		{
		onKeyDown: (e) => e.preventDefault(),
		onClick: closeHandler,
		style: {
		display: isOpen ? "block" : "none",
		height: "100vh",
		width: "100%",
		position: "fixed",
		top: 0,
		left: 0,
		},
		},
		React.createElement("article", {
		style: {
		height: "100%",
		width: "100%",
		backgroundColor: "rgba(0,0,0,0.8)",
		backdropFilter: "blur(2px)",
		},
		}),
		React.createElement(
		"div",
		{
		className: `_6pp-confirm-modal ${containerClassName}`,
		style: {
		width: "20rem",
		backgroundColor: "white",
		padding: "1rem",
		borderRadius: "0.25rem",
		border: "none",
		const useConfirmModal = ({ title = "Confirm Delete", subtitle = "Are you sure you want to delete?", confirmHandler, }) => {
		const modalRef = useRef(null);
		const [isOpen, setIsOpen] = useState(false);
		const showModal = () => setIsOpen(true);
		const closeModal = () => setIsOpen(false);
		const closeHandler = (e) => {
		if (!modalRef.current)
		return;
		const dialogDimension = modalRef.current?.getBoundingClientRect();
		if (e.clientX < dialogDimension.left \|\|
		e.clientX > dialogDimension.right \|\|
		e.clientY < dialogDimension.top \|\|
		e.clientY > dialogDimension.bottom)
		closeModal();
		};
		const handler = () => {
		closeModal();
		confirmHandler();
		};
		const ConfirmModal = ({ containerStyles = {}, noBtnStyles = {}, yesBtnStyles = {}, subtitleStyles = {}, titleStyles = {}, containerClassName, }) => (React.createElement("section", { onKeyDown: (e) => e.preventDefault(), onClick: closeHandler, style: {
		display: isOpen ? "block" : "none",
		height: "100vh",
		width: "100%",
		position: "fixed",
		top: "50%",
		left: "50%",
		zIndex: 20,
		transform: "translate(-50%,-50%)",
		...containerStyles,
		},
		ref: modalRef,
		},
		React.createElement(
		"h5",
		{
		style: {
		fontFamily: "sans-serif",
		textTransform: "uppercase",
		...titleStyles,
		},
		},
		title
		),
		React.createElement(
		"p",
		{
		style: {
		fontFamily: "monospace",
		margin: "1rem",
		...subtitleStyles,
		},
		},
		subtitle
		),
		React.createElement(
		"div",
		{
		style: {
		display: "flex",
		gap: "1rem",
		marginTop: "1rem 0",
		float: "right",
		},
		},
		React.createElement(
		"button",
		{
		style: {
		top: 0,
		left: 0,
		} },
		React.createElement("article", { style: {
		height: "100%",
		width: "100%",
		backgroundColor: "rgba(0,0,0,0.8)",
		backdropFilter: "blur(2px)",
		} }),
		React.createElement("div", { className: `_6pp-confirm-modal ${containerClassName}`, style: {
		width: "20rem",
		backgroundColor: "white",
		padding: "1rem",
		borderRadius: "0.25rem",
		border: "none",
		outline: "none",
		cursor: "pointer",
		padding: "0.5rem 1rem",
		borderRadius: "5px",
		backgroundColor: "inherit",
		color: "rgba(0,0,0,0.9)",
		transition: "all 0.3s",
		...noBtnStyles,
		},
		autoFocus: true,
		onClick: closeModal,
		},
		"No"
		),
		React.createElement(
		"button",
		{
		style: {
		border: "none",
		outline: "none",
		cursor: "pointer",
		borderRadius: "5px",
		padding: "0.5rem 1rem",
		backgroundColor: "rgba(0,0,0,0.9)",
		color: "white",
		transition: "all 0.3s",
		...yesBtnStyles,
		},
		onClick: handler,
		},
		"Yes"
		)
		)
		)
		);
		return { ConfirmModal, showModal, close };
		position: "fixed",
		top: "50%",
		left: "50%",
		zIndex: 20,
		transform: "translate(-50%,-50%)",
		...containerStyles,
		}, ref: modalRef },
		React.createElement("h5", { style: {
		fontFamily: "sans-serif",
		textTransform: "uppercase",
		...titleStyles,
		} }, title),
		React.createElement("p", { style: { fontFamily: "monospace", margin: "1rem", ...subtitleStyles } }, subtitle),
		React.createElement("div", { style: {
		display: "flex",
		gap: "1rem",
		marginTop: "1rem 0",
		float: "right",
		} },
		React.createElement("button", { style: {
		border: "none",
		outline: "none",
		cursor: "pointer",
		padding: "0.5rem 1rem",
		borderRadius: "5px",
		backgroundColor: "inherit",
		color: "rgba(0,0,0,0.9)",
		transition: "all 0.3s",
		...noBtnStyles,
		}, autoFocus: true, onClick: closeModal }, "No"),
		React.createElement("button", { style: {
		border: "none",
		outline: "none",
		cursor: "pointer",
		borderRadius: "5px",
		padding: "0.5rem 1rem",
		backgroundColor: "rgba(0,0,0,0.9)",
		color: "white",
		transition: "all 0.3s",
		...yesBtnStyles,
		}, onClick: handler }, "Yes")))));
		return { ConfirmModal, showModal, close };
		};

		const useRating = ({
		IconFilled,
		IconOutline,
		maxRating = 5,
		value = 0,
		selectable = false,
		styles = {},
		}) => {
		if (maxRating < 1) throw new Error("maxRating should be greater than 0");
		if (value > maxRating)
		throw new Error("value should be less than Max Rating");
		const [rating, setRating] = useState(value);
		const handleClick = (newRating) => {
		if (!selectable) return;
		setRating(newRating);
		};
		useEffect(() => {
		setRating(value);
		}, [value]);
		const Ratings = () =>
		React.createElement(
		"div",
		{
		style: {
		display: "flex",
		flexDirection: "row",
		alignItems: "center",
		justifyContent: "center",
		...styles,
		},
		},
		Array.from({ length: maxRating }).map((_, i) =>
		React.createElement(
		"span",
		{
		style: {
		cursor: selectable ? "pointer" : "unset",
		},
		key: i,
		onClick: () => handleClick(i + 1),
		},
		i < rating && React.createElement("span", null, IconFilled),
		i >= rating && React.createElement("span", null, IconOutline)
		)
		)
		);
		return { Ratings, rating, setRating };
		const useRating = ({ IconFilled, IconOutline, maxRating = 5, value = 0, selectable = false, styles = {}, }) => {
		if (maxRating < 1)
		throw new Error("maxRating should be greater than 0");
		if (value > maxRating)
		throw new Error("value should be less than Max Rating");
		const [rating, setRating] = useState(value);
		const handleClick = (newRating) => {
		if (!selectable)
		return;
		setRating(newRating);
		};
		useEffect(() => {
		setRating(value);
		}, [value]);
		const Ratings = () => (React.createElement("div", { style: {
		display: "flex",
		flexDirection: "row",
		alignItems: "center",
		justifyContent: "center",
		...styles,
		} }, Array.from({ length: maxRating }).map((_, i) => (React.createElement("span", { style: {
		cursor: selectable ? "pointer" : "unset",
		}, key: i, onClick: () => handleClick(i + 1) },
		i < rating && React.createElement("span", null, IconFilled),
		i >= rating && React.createElement("span", null, IconOutline))))));
		return { Ratings, rating, setRating };
		};

		const useInfiniteScrollBottom = (
		urlWithEndpoint,
		pageQueryKeyword,
		limitQueryKeyword,
		limit,
		listClassName,
		totalPages = 1
		) => {
		const [data, setData] = useState([]);
		const [page, setPage] = useState(1);
		const [hasMore, setHasMore] = useState(true);
		const [loading, setLoading] = useState(false);
		const [error, setError] = useState();
		const timeoutId = useRef(null);
		const fetchData = useCallback(async () => {
		try {
		setLoading(true);
		const response = await fetch(
		`${urlWithEndpoint}?${pageQueryKeyword}=${page}&${limitQueryKeyword}=${limit}`,
		{ credentials: "include" }
		);
		if (!response.ok) throw new Error("Something went wrong");
		const newData = await response.json();
		setData((oldData) => [...oldData, ...newData]);
		setHasMore(newData.length > 0);
		} catch (error) {
		setError(error \|\| "Something went wrong");
		} finally {
		setLoading(false);
		}
		}, [page, limit, urlWithEndpoint, pageQueryKeyword, limitQueryKeyword]);
		useEffect(() => {
		fetchData();
		}, [fetchData]);
		useEffect(() => {
		const loadMore = () => {
		if (timeoutId.current) {
		clearTimeout(timeoutId.current);
		}
		timeoutId.current = setTimeout(() => {
		if (totalPages === page) return;
		setPage((oldPage) => oldPage + 1);
		}, 200);
		};
		const observerDown = new IntersectionObserver(
		(entries) => {
		if (entries[0].isIntersecting && hasMore && !loading) {
		loadMore();
		const useInfiniteScrollBottom = (urlWithEndpoint, pageQueryKeyword, limitQueryKeyword, limit, listClassName, totalPages = 1) => {
		const [data, setData] = useState([]);
		const [page, setPage] = useState(1);
		const [hasMore, setHasMore] = useState(true);
		const [loading, setLoading] = useState(false);
		const [error, setError] = useState();
		const timeoutId = useRef(null);
		const fetchData = useCallback(async () => {
		try {
		setLoading(true);
		const response = await fetch(`${urlWithEndpoint}?${pageQueryKeyword}=${page}&${limitQueryKeyword}=${limit}`, { credentials: "include" });
		if (!response.ok)
		throw new Error("Something went wrong");
		const newData = await response.json();
		setData((oldData) => [...oldData, ...newData]);
		setHasMore(newData.length > 0);
		}
		},
		{
		rootMargin: "100px",
		}
		);
		// Observe the last list item
		const lastListItem = document.querySelector(
		`.${listClassName}:last-of-type`
		);
		if (lastListItem) {
		observerDown.observe(lastListItem);
		}
		return () => {
		observerDown.disconnect();
		if (timeoutId.current) clearTimeout(timeoutId.current);
		catch (error) {
		setError(error \|\| "Something went wrong");
		}
		finally {
		setLoading(false);
		}
		}, [page, limit, urlWithEndpoint, pageQueryKeyword, limitQueryKeyword]);
		useEffect(() => {
		fetchData();
		}, [fetchData]);
		useEffect(() => {
		const loadMore = () => {
		if (timeoutId.current) {
		clearTimeout(timeoutId.current);
		}
		timeoutId.current = setTimeout(() => {
		if (totalPages === page)
		return;
		setPage((oldPage) => oldPage + 1);
		}, 200);
		};
		const observerDown = new IntersectionObserver((entries) => {
		if (entries[0].isIntersecting && hasMore && !loading) {
		loadMore();
		}
		}, {
		rootMargin: "100px",
		});
		// Observe the last list item
		const lastListItem = document.querySelector(`.${listClassName}:last-of-type`);
		if (lastListItem) {
		observerDown.observe(lastListItem);
		}
		return () => {
		observerDown.disconnect();
		if (timeoutId.current)
		clearTimeout(timeoutId.current);
		};
		}, [totalPages, page, hasMore, loading]);
		return {
		loading,
		hasMore,
		page,
		error,
		data,
		setData,
		};
		}, [totalPages, page, hasMore, loading]);
		return {
		loading,
		hasMore,
		page,
		error,
		data,
		setData,
		};
		};
		const useInfiniteScrollTop = (
		containerRef,
		totalPages,
		page,
		setPage,
		newData,
		shouldReverse = false
		) => {
		const [data, setData] = useState([]);
		const debounceTimer = useRef(null);
		const handleScroll = useCallback(() => {
		if (debounceTimer.current) {
		clearTimeout(debounceTimer.current);
		}
		debounceTimer.current = setTimeout(() => {
		if (!containerRef.current) return;
		const { scrollTop } = containerRef.current;
		const scrolledToTop = scrollTop === 0;
		if (scrolledToTop) {
		if (totalPages === page) return;
		setPage((oldPage) => oldPage + 1);
		}
		}, 200);
		}, [totalPages, page]);
		useEffect(() => {
		const container = containerRef.current;
		if (container) container.addEventListener("scroll", handleScroll);
		return () => {
		if (container) container.removeEventListener("scroll", handleScroll);
		};
		}, [handleScroll, data]);
		useEffect(() => {
		let prevScrollHeight = 0;
		let prevScrollTop = 0;
		if (containerRef.current) {
		prevScrollHeight = containerRef.current.scrollHeight;
		prevScrollTop = containerRef.current.scrollTop;
		}
		if (newData) {
		setData((oldData) => {
		const seen = new Set(oldData.map((i) => i._id));
		const newMessages = newData?.filter((i) => !seen.has(i._id));
		if (shouldReverse) {
		const newDataArray = Array.isArray(newMessages)
		? [...newMessages]
		: [newMessages];
		return [...newDataArray.reverse(), ...oldData];
		} else {
		return [...newMessages, ...oldData];
		const useInfiniteScrollTop = (containerRef, totalPages, page, setPage, newData, shouldReverse = false) => {
		const [data, setData] = useState([]);
		const debounceTimer = useRef(null);
		const handleScroll = useCallback(() => {
		if (debounceTimer.current) {
		clearTimeout(debounceTimer.current);
		}
		});
		}
		requestAnimationFrame(() => {
		if (containerRef.current) {
		const newScrollTop =
		prevScrollTop + containerRef.current.scrollHeight - prevScrollHeight;
		containerRef.current.scrollTop = newScrollTop;
		}
		});
		}, [newData]);
		return { data, setData };
		debounceTimer.current = setTimeout(() => {
		if (!containerRef.current)
		return;
		const { scrollTop } = containerRef.current;
		const scrolledToTop = scrollTop === 0;
		if (scrolledToTop) {
		if (totalPages === page)
		return;
		setPage((oldPage) => oldPage + 1);
		}
		}, 200);
		}, [totalPages, page]);
		useEffect(() => {
		const container = containerRef.current;
		if (container)
		container.addEventListener("scroll", handleScroll);
		return () => {
		if (container)
		container.removeEventListener("scroll", handleScroll);
		};
		}, [handleScroll, data]);
		useEffect(() => {
		let prevScrollHeight = 0;
		let prevScrollTop = 0;
		if (containerRef.current) {
		prevScrollHeight = containerRef.current.scrollHeight;
		prevScrollTop = containerRef.current.scrollTop;
		}
		if (newData) {
		setData((oldData) => {
		const seen = new Set(oldData.map((i) => i._id));
		const newMessages = newData?.filter((i) => !seen.has(i._id));
		if (shouldReverse) {
		const newDataArray = Array.isArray(newMessages)
		? [...newMessages]
		: [newMessages];
		return [...newDataArray.reverse(), ...oldData];
		}
		else {
		return [...newMessages, ...oldData];
		}
		});
		}
		requestAnimationFrame(() => {
		if (containerRef.current) {
		const newScrollTop = prevScrollTop + containerRef.current.scrollHeight - prevScrollHeight;
		containerRef.current.scrollTop = newScrollTop;
		}
		});
		}, [newData]);
		return { data, setData };
		};

		const Pagination = ({
		totalPages = 1,
		currPage,
		setCurrPage,
		activeButtonStyle = {
		const Pagination = ({ totalPages = 1, currPage, setCurrPage, activeButtonStyle = {
		backgroundColor: "black",
		color: "white",
		},
		Button = ({ children, onClick, style }) =>
		React.createElement(
		"button",
		{
		style: {
		padding: "0.5rem 1rem",
		outline: "none",
		border: "none",
		borderRadius: "0.5rem",
		cursor: "pointer",
		backgroundColor: "#e2e8f0",
		...style,
		},
		onClick: onClick,
		},
		children
		),
		Container = ({ children }) =>
		React.createElement(
		"ul",
		{
		style: {
		display: "flex",
		gap: "1rem",
		listStyle: "none",
		},
		},
		children
		),
		}) => {
		const [startPage, setStartPage] = useState(1);
		const maxPageButtons = 4;
		const changePage = (page) => {
		setCurrPage(page);
		if (page > startPage + maxPageButtons - 1) {
		setStartPage(page);
		} else if (page < startPage) {
		setStartPage(page - maxPageButtons + 1);
		}
		};
		return React.createElement(
		Container,
		null,
		React.createElement(
		React.Fragment,
		null,
		startPage > 1 &&
		React.createElement(
		"li",
		null,
		React.createElement(
		Button,
		{ onClick: () => setStartPage((prev) => prev - maxPageButtons) },
		"Prev"
		)
		),
		Array.from(
		{ length: Math.min(maxPageButtons, totalPages) },
		(_, idx) => startPage + idx
		).map((page) => {
		return React.createElement(
		"li",
		{ key: page },
		React.createElement(
		Button,
		{
		style: currPage === page ? activeButtonStyle : {},
		onClick: () => changePage(page),
		},
		page
		)
		);
		}),
		totalPages > startPage + maxPageButtons - 1 &&
		React.createElement(
		"li",
		null,
		React.createElement(
		Button,
		{ onClick: () => setStartPage((prev) => prev + maxPageButtons) },
		"Next"
		)
		)
		)
		);
		}, Button = ({ children, onClick, style }) => (React.createElement("button", { style: {
		padding: "0.5rem 1rem",
		outline: "none",
		border: "none",
		borderRadius: "0.5rem",
		cursor: "pointer",
		backgroundColor: "#e2e8f0",
		...style,
		}, onClick: onClick }, children)), Container = ({ children }) => (React.createElement("ul", { style: {
		display: "flex",
		gap: "1rem",
		listStyle: "none",
		} }, children)), }) => {
		const [startPage, setStartPage] = useState(1);
		const maxPageButtons = 4;
		const changePage = (page) => {
		setCurrPage(page);
		if (page > startPage + maxPageButtons - 1) {
		setStartPage(page);
		}
		else if (page < startPage) {
		setStartPage(page - maxPageButtons + 1);
		}
		};
		return (React.createElement(Container, null,
		React.createElement(React.Fragment, null,
		startPage > 1 && (React.createElement("li", null,
		React.createElement(Button, { onClick: () => setStartPage((prev) => prev - maxPageButtons) }, "Prev"))),
		Array.from({ length: Math.min(maxPageButtons, totalPages) }, (_, idx) => startPage + idx).map((page) => {
		return (React.createElement("li", { key: page },
		React.createElement(Button, { style: currPage === page ? activeButtonStyle : {}, onClick: () => changePage(page) }, page)));
		}),
		totalPages > startPage + maxPageButtons - 1 && (React.createElement("li", null,
		React.createElement(Button, { onClick: () => setStartPage((prev) => prev + maxPageButtons) }, "Next"))))));
		};

		const PageStepper = ({
		totalPages = 1,
		currPage,
		setCurrPage,
		Typography = ({ children }) => React.createElement("code", null, children),
		Button,
		Container = ({ children }) =>
		React.createElement(
		"nav",
		{
		style: {
		display: "flex",
		alignItems: "center",
		gap: "1rem",
		padding: "1rem 0",
		},
		},
		children
		),
		}) => {
		const isPreviousDisabled = currPage === 1;
		const isNextDisabled = currPage === totalPages;
		const handlePreviousClick = () => {
		if (currPage === 1) return;
		setCurrPage((prev) => prev - 1);
		};
		const handleNextClick = () => {
		if (currPage === totalPages) return;
		setCurrPage((prev) => prev + 1);
		};
		return React.createElement(
		Container,
		null,
		React.createElement(
		React.Fragment,
		null,
		React.createElement(
		Button,
		{ disabled: isPreviousDisabled, onClick: handlePreviousClick },
		"Previous"
		),
		React.createElement(Typography, null, currPage, " of ", totalPages),
		React.createElement(
		Button,
		{ disabled: isNextDisabled, onClick: handleNextClick },
		"Next"
		)
		)
		);
		const PageStepper = ({ totalPages = 1, currPage, setCurrPage, Typography = ({ children }) => React.createElement("code", null, children), Button, Container = ({ children }) => (React.createElement("nav", { style: {
		display: "flex",
		alignItems: "center",
		gap: "1rem",
		padding: "1rem 0",
		} }, children)), }) => {
		const isPreviousDisabled = currPage === 1;
		const isNextDisabled = currPage === totalPages;
		const handlePreviousClick = () => {
		if (currPage === 1)
		return;
		setCurrPage((prev) => prev - 1);
		};
		const handleNextClick = () => {
		if (currPage === totalPages)
		return;
		setCurrPage((prev) => prev + 1);
		};
		return (React.createElement(Container, null,
		React.createElement(React.Fragment, null,
		React.createElement(Button, { disabled: isPreviousDisabled, onClick: handlePreviousClick }, "Previous"),
		React.createElement(Typography, null,
		currPage,
		" of ",
		totalPages),
		React.createElement(Button, { disabled: isNextDisabled, onClick: handleNextClick }, "Next"))));
		};

		const MyntraCarousel = ({
		images,
		darkMode = false,
		objectFit = "cover",
		setIsOpen,
		PrevButton,
		NextButton,
		}) => {
		const [activeImage, setActiveImage] = useState(0);
		const containerRef = useRef(null);
		const imageRef = useRef(null);
		const border = darkMode ? "1px solid #fff" : "1px solid black";
		const incrementHandler = () => {
		if (activeImage === images.length - 1) setActiveImage(0);
		else setActiveImage((prev) => prev + 1);
		};
		const decrementHandler = () => {
		if (activeImage === 0) setActiveImage(images.length - 1);
		else setActiveImage((prev) => prev - 1);
		};
		const mouseMoveHandler = useCallback((e) => {
		const y = e.clientY;
		containerRef.current?.scrollTo({ top: y });
		}, []);
		const closeHandler = (e) => {
		if (!containerRef.current) return;
		const containerDimension = containerRef.current.getBoundingClientRect();
		if (
		e.clientX < containerDimension.left \|\|
		e.clientX > containerDimension.right \|\|
		e.clientY < containerDimension.top \|\|
		e.clientY > containerDimension.bottom
		)
		setIsOpen(false);
		};
		useEffect(() => {
		if (containerRef.current)
		containerRef.current.addEventListener("mousemove", mouseMoveHandler);
		return () => {
		if (containerRef.current)
		containerRef.current.removeEventListener("mousemove", mouseMoveHandler);
		const MyntraCarousel = ({ images, darkMode = false, objectFit = "cover", setIsOpen, PrevButton, NextButton, }) => {
		const [activeImage, setActiveImage] = useState(0);
		const containerRef = useRef(null);
		const imageRef = useRef(null);
		const border = darkMode ? "1px solid #fff" : "1px solid black";
		const incrementHandler = () => {
		if (activeImage === images.length - 1)
		setActiveImage(0);
		else
		setActiveImage((prev) => prev + 1);
		};
		}, []);
		const ImagesList = React.createElement(
		"aside",
		{
		style: {
		display: "flex",
		flexDirection: "column",
		gap: "1rem",
		position: "absolute",
		top: "1rem",
		left: "1rem",
		},
		},
		images.map((i, idx) =>
		React.createElement(
		"button",
		{
		key: idx,
		style: {
		const decrementHandler = () => {
		if (activeImage === 0)
		setActiveImage(images.length - 1);
		else
		setActiveImage((prev) => prev - 1);
		};
		const mouseMoveHandler = useCallback((e) => {
		const y = e.clientY;
		containerRef.current?.scrollTo({ top: y });
		}, []);
		const closeHandler = (e) => {
		if (!containerRef.current)
		return;
		const containerDimension = containerRef.current.getBoundingClientRect();
		if (e.clientX < containerDimension.left \|\|
		e.clientX > containerDimension.right \|\|
		e.clientY < containerDimension.top \|\|
		e.clientY > containerDimension.bottom)
		setIsOpen(false);
		};
		useEffect(() => {
		if (containerRef.current)
		containerRef.current.addEventListener("mousemove", mouseMoveHandler);
		return () => {
		if (containerRef.current)
		containerRef.current.removeEventListener("mousemove", mouseMoveHandler);
		};
		}, []);
		const ImagesList = (React.createElement("aside", { style: {
		display: "flex",
		flexDirection: "column",
		gap: "1rem",
		position: "absolute",
		top: "1rem",
		left: "1rem",
		} }, images.map((i, idx) => (React.createElement("button", { key: idx, style: {
		border: idx === activeImage ? border : "1px solid rgba(0,0,0,0.3)",
		@@ -775,380 +607,239 @@ outline: "none",
		cursor: "pointer",
		},
		onClick: () => setActiveImage(idx),
		},
		React.createElement("img", {
		style: {
		width: "2rem",
		height: "2.5rem",
		objectFit: "contain",
		},
		src: i,
		alt: "Image",
		})
		)
		)
		);
		const NavigationButton = React.createElement(
		"article",
		{
		style: {
		display: "flex",
		width: "95%",
		justifyContent: "space-between",
		alignItems: "center",
		position: "absolute",
		top: "50%",
		left: "50%",
		transform: "translate(-50%,-50%)",
		},
		},
		React.createElement(PrevButton, { onClick: decrementHandler }),
		React.createElement(NextButton, { onClick: incrementHandler })
		);
		return React.createElement(
		"section",
		{
		style: {
		width: "100vw",
		height: "100vh",
		backgroundColor: "rgba(0,0,0,0.7)",
		position: "fixed",
		top: 0,
		left: 0,
		zIndex: 200,
		},
		onClick: closeHandler,
		},
		React.createElement(
		"div",
		{
		style: {
		width: "100%",
		maxWidth: "950px",
		height: "100vh",
		position: "relative",
		margin: "auto",
		boxShadow: darkMode ? "0 0 5px black" : "0 0 5px white",
		overflow: "auto",
		cursor: "s-resize",
		scrollbarWidth: "none",
		backgroundColor: darkMode ? "black" : "#fff",
		},
		ref: containerRef,
		},
		React.createElement("img", {
		ref: imageRef,
		src: images[activeImage],
		style: {
		width: "100%",
		minHeight: "100vh",
		objectFit,
		},
		}),
		React.createElement(
		"div",
		{
		style: {
		}, onClick: () => setActiveImage(idx) },
		React.createElement("img", { style: {
		width: "2rem",
		height: "2.5rem",
		objectFit: "contain",
		}, src: i, alt: "Image" }))))));
		const NavigationButton = (React.createElement("article", { style: {
		display: "flex",
		width: "95%",
		justifyContent: "space-between",
		alignItems: "center",
		position: "absolute",
		top: "50%",
		left: "50%",
		transform: "translate(-50%,-50%)",
		} },
		React.createElement(PrevButton, { onClick: decrementHandler }),
		React.createElement(NextButton, { onClick: incrementHandler })));
		return (React.createElement("section", { style: {
		width: "100vw",
		height: "100vh",
		backgroundColor: "rgba(0,0,0,0.7)",
		position: "fixed",
		top: 0,
		width: "95%",
		maxWidth: "950px",
		height: "100vh",
		},
		},
		ImagesList,
		NavigationButton
		)
		)
		);
		left: 0,
		zIndex: 200,
		}, onClick: closeHandler },
		React.createElement("div", { style: {
		width: "100%",
		maxWidth: "950px",
		height: "100vh",
		position: "relative",
		margin: "auto",
		boxShadow: darkMode ? "0 0 5px black" : "0 0 5px white",
		overflow: "auto",
		cursor: "s-resize",
		scrollbarWidth: "none",
		backgroundColor: darkMode ? "black" : "#fff",
		}, ref: containerRef },
		React.createElement("img", { ref: imageRef, src: images[activeImage], style: {
		width: "100%",
		minHeight: "100vh",
		objectFit,
		} }),
		React.createElement("div", { style: {
		position: "fixed",
		top: 0,
		width: "95%",
		maxWidth: "950px",
		height: "100vh",
		} },
		ImagesList,
		NavigationButton))));
		};
		const StylishCarousel = ({
		imageSize = ["100%", "80vw", "25rem", "30rem"],
		images = [],
		objectFit = "cover",
		imageBg = "transparent",
		sideImageSize = ["3rem", "3.5rem", "4rem", "5rem"],
		}) => {
		if (images.length === 0)
		throw new Error("imageSize should not be more than 4");
		if (imageSize.length > 5)
		throw new Error("imageSize should not be more than 4");
		const [activeImage, setActiveImage] = useState(0);
		const [currentWidth, setCurrentWidth] = useState("");
		const [sideImageWidth, setSideImageWidth] = useState("");
		const resizeHandler = useCallback(() => {
		const width = window.screen.width;
		if (width < 480) {
		setCurrentWidth(imageSize[0]);
		setSideImageWidth(sideImageSize[0]);
		} else if (width < 768 && imageSize.length >= 3) {
		setCurrentWidth(imageSize[1]);
		setSideImageWidth(sideImageSize[1]);
		} else if (width < 992 && imageSize.length >= 4) {
		setCurrentWidth(imageSize[2]);
		setSideImageWidth(sideImageSize[2]);
		} else if (width < 1280 && imageSize.length >= 5) {
		setCurrentWidth(imageSize[3]);
		setSideImageWidth(sideImageSize[3]);
		} else {
		setCurrentWidth(imageSize[imageSize.length - 1]);
		setSideImageWidth(sideImageSize[sideImageSize.length - 1]);
		}
		}, []);
		useEffect(() => {
		resizeHandler();
		window.addEventListener("resize", resizeHandler);
		return () => {
		window.removeEventListener("resize", resizeHandler);
		const StylishCarousel = ({ imageSize = ["100%", "80vw", "25rem", "30rem"], images = [], objectFit = "cover", imageBg = "transparent", sideImageSize = ["3rem", "3.5rem", "4rem", "5rem"], }) => {
		if (images.length === 0)
		throw new Error("imageSize should not be more than 4");
		if (imageSize.length > 5)
		throw new Error("imageSize should not be more than 4");
		const [activeImage, setActiveImage] = useState(0);
		const [currentWidth, setCurrentWidth] = useState("");
		const [sideImageWidth, setSideImageWidth] = useState("");
		const resizeHandler = useCallback(() => {
		const width = window.screen.width;
		if (width < 480) {
		setCurrentWidth(imageSize[0]);
		setSideImageWidth(sideImageSize[0]);
		}
		else if (width < 768 && imageSize.length >= 3) {
		setCurrentWidth(imageSize[1]);
		setSideImageWidth(sideImageSize[1]);
		}
		else if (width < 992 && imageSize.length >= 4) {
		setCurrentWidth(imageSize[2]);
		setSideImageWidth(sideImageSize[2]);
		}
		else if (width < 1280 && imageSize.length >= 5) {
		setCurrentWidth(imageSize[3]);
		setSideImageWidth(sideImageSize[3]);
		}
		else {
		setCurrentWidth(imageSize[imageSize.length - 1]);
		setSideImageWidth(sideImageSize[sideImageSize.length - 1]);
		}
		}, []);
		useEffect(() => {
		resizeHandler();
		window.addEventListener("resize", resizeHandler);
		return () => {
		window.removeEventListener("resize", resizeHandler);
		};
		}, []);
		return (React.createElement("div", { style: {
		width: "fit-content",
		display: "flex",
		gap: "1rem",
		padding: "1rem",
		} },
		React.createElement("aside", { style: {
		display: "flex",
		flexDirection: "column",
		width: "fit-content",
		gap: "1rem",
		} }, images.map((i, index) => (React.createElement("img", { key: index, style: {
		width: sideImageWidth,
		height: sideImageWidth,
		borderRadius: "0.25rem",
		objectFit,
		border: "1px solid rgba(0,0,0,0.3)",
		}, src: i, alt: `Image-${index}`, onMouseOver: () => setActiveImage(index) })))),
		React.createElement("section", { style: {
		width: currentWidth,
		height: currentWidth,
		overflow: "hidden",
		scrollbarWidth: "none",
		display: "flex",
		alignItems: "center",
		borderRadius: "0.5rem",
		backgroundColor: imageBg,
		} }, images.map((i, index) => (React.createElement("img", { key: index, style: {
		width: currentWidth,
		height: currentWidth,
		objectFit: "contain",
		aspectRatio: "1/1",
		borderRadius: "0.5rem",
		transition: "all 0.3s",
		transform: `translateX(-${activeImage * 100}%)`,
		}, src: i, alt: `Photo-${index}` }))))));
		};
		const Slider = ({ images, objectFit = "cover", PrevIcon, NextIcon, bgColor = "inherit", showNav = true, showDots, showThumbnails, autoplay, autoplayDuration = 4000, onClick, }) => {
		const [activeImage, setActiveImage] = useState(0);
		const incrementHandler = () => {
		setActiveImage((prev) => {
		if (prev === images.length - 1)
		return 0;
		return prev + 1;
		});
		};
		}, []);
		return React.createElement(
		"div",
		{
		style: {
		width: "fit-content",
		display: "flex",
		gap: "1rem",
		padding: "1rem",
		},
		},
		React.createElement(
		"aside",
		{
		style: {
		display: "flex",
		flexDirection: "column",
		width: "fit-content",
		gap: "1rem",
		},
		},
		images.map((i, index) =>
		React.createElement("img", {
		key: index,
		style: {
		width: sideImageWidth,
		height: sideImageWidth,
		const decrementHandler = () => {
		setActiveImage((prev) => {
		if (prev === 0)
		return images.length - 1;
		return prev - 1;
		});
		};
		useEffect(() => {
		let intervalId;
		if (autoplay) {
		intervalId = setInterval(() => {
		incrementHandler();
		}, autoplayDuration);
		}
		return () => {
		if (intervalId)
		clearInterval(intervalId);
		};
		}, []);
		const NavigationButton = (React.createElement("article", { style: {
		padding: "1rem",
		position: "absolute",
		display: "flex",
		alignItems: "center",
		justifyContent: "space-between",
		width: "100%",
		top: "50%",
		transform: "translateY(-50%)",
		} },
		React.createElement("button", { style: {
		border: "none",
		backgroundColor: "transparent",
		cursor: "pointer",
		outline: "none",
		}, onClick: decrementHandler }, PrevIcon \|\| "Prev"),
		React.createElement("button", { style: {
		border: "none",
		backgroundColor: "transparent",
		cursor: "pointer",
		outline: "none",
		}, onClick: incrementHandler }, NextIcon \|\| "Next")));
		const Dots = (React.createElement("article", { style: {
		padding: "1rem",
		position: "absolute",
		display: "flex",
		alignItems: "center",
		justifyContent: "center",
		width: "100%",
		bottom: 0,
		gap: "0.5rem",
		} }, images.map((_, idx) => (React.createElement("button", { key: idx, style: {
		width: "0.75rem",
		height: "0.75rem",
		borderRadius: "50%",
		border: "none",
		backgroundColor: idx === activeImage ? "white" : "black",
		}, onClick: () => setActiveImage(idx) })))));
		const Thumbnails = (React.createElement("aside", { style: {
		height: "5rem",
		display: "flex",
		justifyContent: "center",
		gap: "1rem",
		flexWrap: "wrap",
		} }, images.map((i, index) => (React.createElement("img", { key: index, style: {
		width: "5rem",
		height: "5rem",
		borderRadius: "0.25rem",
		objectFit,
		objectFit: "cover",
		border: "1px solid rgba(0,0,0,0.3)",
		},
		src: i,
		alt: `Image-${index}`,
		onMouseOver: () => setActiveImage(index),
		})
		)
		),
		React.createElement(
		"section",
		{
		style: {
		width: currentWidth,
		height: currentWidth,
		overflow: "hidden",
		scrollbarWidth: "none",
		display: "flex",
		alignItems: "center",
		borderRadius: "0.5rem",
		backgroundColor: imageBg,
		},
		},
		images.map((i, index) =>
		React.createElement("img", {
		key: index,
		style: {
		width: currentWidth,
		height: currentWidth,
		objectFit: "contain",
		aspectRatio: "1/1",
		borderRadius: "0.5rem",
		transition: "all 0.3s",
		transform: `translateX(-${activeImage * 100}%)`,
		},
		src: i,
		alt: `Photo-${index}`,
		})
		)
		)
		);
		};
		const Slider = ({
		images,
		objectFit = "cover",
		PrevIcon,
		NextIcon,
		bgColor = "inherit",
		showNav = true,
		showDots,
		showThumbnails,
		autoplay,
		autoplayDuration = 4000,
		onClick,
		}) => {
		const [activeImage, setActiveImage] = useState(0);
		const incrementHandler = () => {
		setActiveImage((prev) => {
		if (prev === images.length - 1) return 0;
		return prev + 1;
		});
		};
		const decrementHandler = () => {
		setActiveImage((prev) => {
		if (prev === 0) return images.length - 1;
		return prev - 1;
		});
		};
		useEffect(() => {
		let intervalId;
		if (autoplay) {
		intervalId = setInterval(() => {
		incrementHandler();
		}, autoplayDuration);
		}
		return () => {
		if (intervalId) clearInterval(intervalId);
		};
		}, []);
		const NavigationButton = React.createElement(
		"article",
		{
		style: {
		padding: "1rem",
		position: "absolute",
		display: "flex",
		alignItems: "center",
		justifyContent: "space-between",
		width: "100%",
		top: "50%",
		transform: "translateY(-50%)",
		},
		},
		React.createElement(
		"button",
		{
		style: {
		border: "none",
		backgroundColor: "transparent",
		cursor: "pointer",
		outline: "none",
		},
		onClick: decrementHandler,
		},
		PrevIcon \|\| "Prev"
		),
		React.createElement(
		"button",
		{
		style: {
		border: "none",
		backgroundColor: "transparent",
		cursor: "pointer",
		outline: "none",
		},
		onClick: incrementHandler,
		},
		NextIcon \|\| "Next"
		)
		);
		const Dots = React.createElement(
		"article",
		{
		style: {
		padding: "1rem",
		position: "absolute",
		display: "flex",
		alignItems: "center",
		justifyContent: "center",
		width: "100%",
		bottom: 0,
		gap: "0.5rem",
		},
		},
		images.map((_, idx) =>
		React.createElement("button", {
		key: idx,
		style: {
		width: "0.75rem",
		height: "0.75rem",
		borderRadius: "50%",
		border: "none",
		backgroundColor: idx === activeImage ? "white" : "black",
		},
		onClick: () => setActiveImage(idx),
		})
		)
		);
		const Thumbnails = React.createElement(
		"aside",
		{
		style: {
		height: "5rem",
		display: "flex",
		justifyContent: "center",
		gap: "1rem",
		flexWrap: "wrap",
		},
		},
		images.map((i, index) =>
		React.createElement("img", {
		key: index,
		style: {
		width: "5rem",
		height: "5rem",
		borderRadius: "0.25rem",
		objectFit: "cover",
		border: "1px solid rgba(0,0,0,0.3)",
		},
		src: i,
		alt: `Image-${index}`,
		onMouseOver: () => setActiveImage(index),
		})
		)
		);
		return React.createElement(
		"div",
		{
		style: {
		height: "100%",
		display: "flex",
		flexDirection: "column",
		gap: "1rem",
		backgroundColor: bgColor,
		},
		},
		React.createElement(
		"div",
		{
		style: {
		height: "100%",
		display: "flex",
		overflowX: "hidden",
		position: "relative",
		},
		},
		images.map((i, index) =>
		React.createElement("img", {
		key: index,
		style: {
		width: "100%",
		}, src: i, alt: `Image-${index}`, onMouseOver: () => setActiveImage(index) })))));
		return (React.createElement("div", { style: {
		height: "100%",
		objectFit,
		flex: "none",
		transition: "all 0.3s",
		transform: `translateX(-${activeImage * 100}%)`,
		},
		src: i,
		onClick: () => onClick && onClick(),
		})
		),
		showNav && NavigationButton,
		showDots && Dots
		),
		showThumbnails && Thumbnails
		);
		display: "flex",
		flexDirection: "column",
		gap: "1rem",
		backgroundColor: bgColor,
		} },
		React.createElement("div", { style: {
		height: "100%",
		display: "flex",
		overflowX: "hidden",
		position: "relative",
		} },
		images.map((i, index) => (React.createElement("img", { key: index, style: {
		width: "100%",
		height: "100%",
		objectFit,
		flex: "none",
		transition: "all 0.3s",
		transform: `translateX(-${activeImage * 100}%)`,
		}, src: i, onClick: () => onClick && onClick() }))),
		showNav && NavigationButton,
		showDots && Dots),
		showThumbnails && Thumbnails));
		};

		const FireBolt = memo(
		({ size = 10, color = "black", styles, zoom = "2", mode = "normal" }) => {
		const FireBolt = memo(({ size = 10, color = "black", styles, zoom = "2", mode = "normal", }) => {
		if (size < 1 \|\| size > 40) {
		throw new Error("Size must be between 1 and 40");
		throw new Error("Size must be between 1 and 40");
		}
		@@ -1159,55 +850,46 @@ const circles = useRef();
		const handleMouseMove = (e) => {
		coordinates.current = {
		x: e.clientX,
		y: e.clientY,
		};
		const target = e.target;
		const fireboltZoom = target.getAttribute("data-firebolt-zoom");
		fireBoltZoomRef.current = Boolean(fireboltZoom);
		coordinates.current = {
		x: e.clientX,
		y: e.clientY,
		};
		const target = e.target;
		const fireboltZoom = target.getAttribute("data-firebolt-zoom");
		fireBoltZoomRef.current = Boolean(fireboltZoom);
		};
		const animateCircles = useCallback(() => {
		let x = coordinates.current.x;
		let y = coordinates.current.y;
		const cursors = circles.current;
		if (!cursors) {
		return;
		}
		Array.from(cursors).forEach((circle, idx) => {
		circle.style.left = `${x - 12}px`;
		circle.style.top = `${y - 12}px`;
		circle.x = x;
		circle.y = y;
		const newSize = (cursors.length - idx) / cursors.length;
		circle.style.scale = newSize.toString();
		const nextCircle = cursors[idx + 1] \|\| cursors[0];
		x += (Number(nextCircle.x \|\| 0) - x) * 0.3;
		y += (Number(nextCircle.y \|\| 0) - y) * 0.3;
		if (idx === 0 && fireBoltZoomRef.current) {
		circle.style.scale = zoom;
		let x = coordinates.current.x;
		let y = coordinates.current.y;
		const cursors = circles.current;
		if (!cursors) {
		return;
		}
		});
		requestAnimationFrame(animateCircles);
		Array.from(cursors).forEach((circle, idx) => {
		circle.style.left = `${x - 12}px`;
		circle.style.top = `${y - 12}px`;
		circle.x = x;
		circle.y = y;
		const newSize = (cursors.length - idx) / cursors.length;
		circle.style.scale = newSize.toString();
		const nextCircle = cursors[idx + 1] \|\| cursors[0];
		x += (Number(nextCircle.x \|\| 0) - x) * 0.3;
		y += (Number(nextCircle.y \|\| 0) - y) * 0.3;
		if (idx === 0 && fireBoltZoomRef.current) {
		circle.style.scale = zoom;
		}
		});
		requestAnimationFrame(animateCircles);
		}, []);
		useEffect(() => {
		circles.current = document.getElementsByClassName("6pp-firebolt-Cursor");
		animateCircles();
		window.addEventListener("mousemove", handleMouseMove);
		return () => {
		window.removeEventListener("mousemove", handleMouseMove);
		};
		circles.current = document.getElementsByClassName("6pp-firebolt-Cursor");
		animateCircles();
		window.addEventListener("mousemove", handleMouseMove);
		return () => {
		window.removeEventListener("mousemove", handleMouseMove);
		};
		}, []);
		return React.createElement(
		"div",
		{
		style: {
		zIndex: "10000",
		mixBlendMode: mode,
		pointerEvents: "none",
		},
		},
		Array.from({ length: size }).map((_, i) =>
		React.createElement("div", {
		className: "6pp-firebolt-Cursor",
		key: i,
		style: {
		return (React.createElement("div", { style: {
		zIndex: "10000",
		mixBlendMode: mode,
		pointerEvents: "none",
		} }, Array.from({ length: size }).map((_, i) => (React.createElement("div", { className: "6pp-firebolt-Cursor", key: i, style: {
		position: "fixed",
		@@ -1224,298 +906,61 @@ height: "24px",
		...styles,
		},
		})
		)
		);
		}
		);
		} })))));
		});

		const BsFullscreen = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		width: "24",
		height: "24",
		fill: "currentColor",
		viewBox: "0 0 16 16",
		},
		React.createElement("path", {
		d: "M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5",
		})
		);
		const BsFullscreenExit = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		width: "24",
		height: "24",
		fill: "currentColor",
		viewBox: "0 0 16 16",
		},
		React.createElement("path", {
		d: "M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5m5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5M0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5m10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0z",
		})
		);
		const CiVolume = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		width: "24",
		height: "24",
		viewBox: "0 0 24 24",
		fill: "currentColor",
		},
		React.createElement("path", {
		d: "M17.849,20.934a1.555,1.555,0,0,1-.781-.212l-4.16-2.4a3.769,3.769,0,0,0-1.877-.5H7.214a2.631,2.631,0,0,1-2.628-2.627V8.809A2.631,2.631,0,0,1,7.214,6.182h3.817a3.747,3.747,0,0,0,1.877-.5l4.16-2.4a1.564,1.564,0,0,1,2.346,1.354V19.369a1.57,1.57,0,0,1-1.565,1.565ZM7.214,7.182A1.63,1.63,0,0,0,5.586,8.809v6.382a1.629,1.629,0,0,0,1.628,1.627h3.817a4.756,4.756,0,0,1,2.377.637l4.16,2.4a.543.543,0,0,0,.563,0,.553.553,0,0,0,.283-.487V4.632a.565.565,0,0,0-.846-.489l-4.16,2.4a4.753,4.753,0,0,1-2.377.637Z",
		})
		);
		const CiVolumeHigh = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		width: "24",
		height: "24",
		viewBox: "0 0 24 24",
		fill: "currentColor",
		},
		React.createElement(
		"g",
		null,
		React.createElement("path", {
		d: "M13.816,19.937a1.446,1.446,0,0,1-.717-.194L9.43,17.623a3.257,3.257,0,0,0-1.625-.434H4.439a2.379,2.379,0,0,1-2.375-2.376V9.187A2.378,2.378,0,0,1,4.439,6.812H7.805A3.257,3.257,0,0,0,9.43,6.376L13.1,4.259A1.437,1.437,0,0,1,15.255,5.5V18.5a1.424,1.424,0,0,1-.718,1.245A1.445,1.445,0,0,1,13.816,19.937ZM4.439,7.812A1.377,1.377,0,0,0,3.064,9.187v5.626a1.378,1.378,0,0,0,1.375,1.376H7.805a4.254,4.254,0,0,1,2.125.569L13.6,18.876a.439.439,0,0,0,.657-.38V5.5a.438.438,0,0,0-.657-.379L9.93,7.242a4.251,4.251,0,0,1-2.125.57Z",
		}),
		React.createElement("path", {
		d: "M18.407,6.262a7.79,7.79,0,0,1,.021,11.476c-.474.437.235,1.143.707.707a8.793,8.793,0,0,0-.021-12.89c-.474-.434-1.184.272-.707.707Z",
		}),
		React.createElement("path", {
		d: "M16.91,9.031a4.021,4.021,0,0,1,.012,5.938c-.474.438.234,1.143.707.707a5.025,5.025,0,0,0-.012-7.352c-.474-.434-1.183.272-.707.707Z",
		})
		)
		);
		const CiVolumeMute = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		width: "24",
		height: "24",
		fill: "currentColor",
		viewBox: "0 0 24 24",
		},
		React.createElement(
		"g",
		null,
		React.createElement("path", {
		d: "M13.817,19.936a1.424,1.424,0,0,1-.719-.2L9.43,17.624a3.254,3.254,0,0,0-1.625-.436H4.44a2.377,2.377,0,0,1-2.375-2.375V9.187A2.378,2.378,0,0,1,4.44,6.811H7.805A3.257,3.257,0,0,0,9.43,6.377L13.1,4.259A1.438,1.438,0,0,1,15.255,5.5V18.5a1.423,1.423,0,0,1-.718,1.245A1.439,1.439,0,0,1,13.817,19.936ZM4.44,7.811A1.377,1.377,0,0,0,3.065,9.187v5.626A1.377,1.377,0,0,0,4.44,16.188H7.805a4.247,4.247,0,0,1,2.125.571L13.6,18.876a.437.437,0,0,0,.439,0,.433.433,0,0,0,.218-.379V5.5a.438.438,0,0,0-.657-.379L9.93,7.242a4.25,4.25,0,0,1-2.125.569Z",
		}),
		React.createElement("path", {
		d: "M17.606,14.445a.5.5,0,0,1-.7-.711c.17-.169.34-.349.52-.52l1.21-1.209c-.57-.581-1.15-1.161-1.73-1.74a.5.5,0,0,1,.7-.71l1.74,1.739,1.74-1.739a.5.5,0,0,1,.7.71l-1.73,1.74,1.73,1.729a.5.5,0,0,1-.7.711L19.343,12.7Z",
		})
		)
		);
		const FaPlay = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		viewBox: "0 0 448 512",
		width: "24",
		height: "24",
		fill: "currentColor",
		},
		React.createElement("path", {
		d: "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z",
		})
		);
		const FaPause = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		viewBox: "0 0 448 512",
		width: "24",
		height: "24",
		fill: "currentColor",
		},
		React.createElement("path", {
		d: "M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z",
		})
		);
		const FaClosedCaptioning = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		viewBox: "0 0 576 512",
		width: "24",
		height: "24",
		fill: "currentColor",
		},
		React.createElement("path", {
		d: "M0 96C0 60.7 28.7 32 64 32H512c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM200 208c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48s21.5-48 48-48zm144 48c0-26.5 21.5-48 48-48c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48z",
		})
		);
		const FaRegClosedCaptioning = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		viewBox: "0 0 576 512",
		width: "24",
		height: "24",
		fill: "currentColor",
		},
		React.createElement("path", {
		d: "M512 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H512zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 208c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48s21.5-48 48-48zm144 48c0-26.5 21.5-48 48-48c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48z",
		})
		);
		const IoSettings = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		viewBox: "0 0 512 512",
		width: "24",
		height: "24",
		fill: "currentColor",
		},
		React.createElement("circle", { cx: "256", cy: "256", r: "48" }),
		React.createElement("path", {
		d: "M470.39 300l-.47-.38-31.56-24.75a16.11 16.11 0 01-6.1-13.33v-11.56a16 16 0 016.11-13.22L469.92 212l.47-.38a26.68 26.68 0 005.9-34.06l-42.71-73.9a1.59 1.59 0 01-.13-.22A26.86 26.86 0 00401 92.14l-.35.13-37.1 14.93a15.94 15.94 0 01-14.47-1.29q-4.92-3.1-10-5.86a15.94 15.94 0 01-8.19-11.82l-5.59-39.59-.12-.72A27.22 27.22 0 00298.76 26h-85.52a26.92 26.92 0 00-26.45 22.39l-.09.56-5.57 39.67a16 16 0 01-8.13 11.82 175.21 175.21 0 00-10 5.82 15.92 15.92 0 01-14.43 1.27l-37.13-15-.35-.14a26.87 26.87 0 00-32.48 11.34l-.13.22-42.77 73.95a26.71 26.71 0 005.9 34.1l.47.38 31.56 24.75a16.11 16.11 0 016.1 13.33v11.56a16 16 0 01-6.11 13.22L42.08 300l-.47.38a26.68 26.68 0 00-5.9 34.06l42.71 73.9a1.59 1.59 0 01.13.22 26.86 26.86 0 0032.45 11.3l.35-.13 37.07-14.93a15.94 15.94 0 0114.47 1.29q4.92 3.11 10 5.86a15.94 15.94 0 018.19 11.82l5.56 39.59.12.72A27.22 27.22 0 00213.24 486h85.52a26.92 26.92 0 0026.45-22.39l.09-.56 5.57-39.67a16 16 0 018.18-11.82c3.42-1.84 6.76-3.79 10-5.82a15.92 15.92 0 0114.43-1.27l37.13 14.95.35.14a26.85 26.85 0 0032.48-11.34 2.53 2.53 0 01.13-.22l42.71-73.89a26.7 26.7 0 00-5.89-34.11zm-134.48-40.24a80 80 0 11-83.66-83.67 80.21 80.21 0 0183.66 83.67z",
		})
		);
		const IoSettingsOutline = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		viewBox: "0 0 512 512",
		width: "24",
		height: "24",
		fill: "currentColor",
		},
		React.createElement("path", {
		d: "M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4zM416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z",
		fill: "none",
		stroke: "currentColor",
		"stroke-linecap": "round",
		"stroke-linejoin": "round",
		"stroke-width": "32",
		})
		);
		const RiMovieFill = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		viewBox: "0 0 24 24",
		width: "24",
		height: "24",
		fill: "currentColor",
		},
		React.createElement("path", {
		d: "M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM10.6219 8.41459C10.5562 8.37078 10.479 8.34741 10.4 8.34741C10.1791 8.34741 10 8.52649 10 8.74741V15.2526C10 15.3316 10.0234 15.4088 10.0672 15.4745C10.1897 15.6583 10.4381 15.708 10.6219 15.5854L15.5008 12.3328C15.5447 12.3035 15.5824 12.2658 15.6117 12.2219C15.7343 12.0381 15.6846 11.7897 15.5008 11.6672L10.6219 8.41459Z",
		})
		);
		const RiMovieLine = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		viewBox: "0 0 24 24",
		width: "24",
		height: "24",
		fill: "currentColor",
		},
		React.createElement("path", {
		d: "M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM4 5V19H20V5H4ZM10.6219 8.41459L15.5008 11.6672C15.6846 11.7897 15.7343 12.0381 15.6117 12.2219C15.5824 12.2658 15.5447 12.3035 15.5008 12.3328L10.6219 15.5854C10.4381 15.708 10.1897 15.6583 10.0672 15.4745C10.0234 15.4088 10 15.3316 10 15.2526V8.74741C10 8.52649 10.1791 8.34741 10.4 8.34741C10.479 8.34741 10.5562 8.37078 10.6219 8.41459Z",
		})
		);
		const TbRewindBackward10 = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		width: "24",
		height: "24",
		viewBox: "0 0 24 24",
		fill: "none",
		stroke: "currentColor",
		"stroke-width": "2",
		"stroke-linecap": "round",
		"stroke-linejoin": "round",
		},
		React.createElement("path", {
		stroke: "none",
		d: "M0 0h24v24H0z",
		fill: "none",
		}),
		React.createElement("path", { d: "M7 9l-3 -3l3 -3" }),
		React.createElement("path", {
		d: "M15.997 17.918a6.002 6.002 0 0 0 -.997 -11.918h-11",
		}),
		React.createElement("path", { d: "M6 14v6" }),
		React.createElement("path", {
		d: "M9 15.5v3a1.5 1.5 0 0 0 3 0v-3a1.5 1.5 0 0 0 -3 0z",
		})
		);
		const TbRewindForward10 = React.createElement(
		"svg",
		{
		xmlns: "http://www.w3.org/2000/svg",
		width: "24",
		height: "24",
		viewBox: "0 0 24 24",
		fill: "none",
		stroke: "currentColor",
		"stroke-width": "2",
		"stroke-linecap": "round",
		"stroke-linejoin": "round",
		},
		React.createElement("path", {
		stroke: "none",
		d: "M0 0h24v24H0z",
		fill: "none",
		}),
		React.createElement("path", { d: "M17 9l3 -3l-3 -3" }),
		React.createElement("path", {
		d: "M8 17.918a5.997 5.997 0 0 1 -5 -5.918a6 6 0 0 1 6 -6h11",
		}),
		React.createElement("path", { d: "M12 14v6" }),
		React.createElement("path", {
		d: "M15 15.5v3a1.5 1.5 0 0 0 3 0v-3a1.5 1.5 0 0 0 -3 0z",
		})
		);
		const CgMiniPlayer = React.createElement(
		"svg",
		{
		width: "24",
		height: "24",
		viewBox: "0 0 24 24",
		fill: "none",
		xmlns: "http://www.w3.org/2000/svg",
		},
		React.createElement("path", {
		"fill-rule": "evenodd",
		"clip-rule": "evenodd",
		d: "M3 6C3 4.34315 4.34315 3 6 3H18C19.6569 3 21 4.34315 21 6V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6ZM6 5H18C18.5523 5 19 5.44772 19 6V12.2676C18.7058 12.0974 18.3643 12 18 12H14C12.8954 12 12 12.8954 12 14V18C12 18.3643 12.0974 18.7058 12.2676 19H6C5.44772 19 5 18.5523 5 18V6C5 5.44772 5.44772 5 6 5Z",
		fill: "currentColor",
		})
		);
		const BsFullscreen = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentColor", viewBox: "0 0 16 16" },
		React.createElement("path", { d: "M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5" })));
		const BsFullscreenExit = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentColor", viewBox: "0 0 16 16" },
		React.createElement("path", { d: "M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5m5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5M0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5m10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0z" })));
		const CiVolume = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" },
		React.createElement("path", { d: "M17.849,20.934a1.555,1.555,0,0,1-.781-.212l-4.16-2.4a3.769,3.769,0,0,0-1.877-.5H7.214a2.631,2.631,0,0,1-2.628-2.627V8.809A2.631,2.631,0,0,1,7.214,6.182h3.817a3.747,3.747,0,0,0,1.877-.5l4.16-2.4a1.564,1.564,0,0,1,2.346,1.354V19.369a1.57,1.57,0,0,1-1.565,1.565ZM7.214,7.182A1.63,1.63,0,0,0,5.586,8.809v6.382a1.629,1.629,0,0,0,1.628,1.627h3.817a4.756,4.756,0,0,1,2.377.637l4.16,2.4a.543.543,0,0,0,.563,0,.553.553,0,0,0,.283-.487V4.632a.565.565,0,0,0-.846-.489l-4.16,2.4a4.753,4.753,0,0,1-2.377.637Z" })));
		const CiVolumeHigh = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" },
		React.createElement("g", null,
		React.createElement("path", { d: "M13.816,19.937a1.446,1.446,0,0,1-.717-.194L9.43,17.623a3.257,3.257,0,0,0-1.625-.434H4.439a2.379,2.379,0,0,1-2.375-2.376V9.187A2.378,2.378,0,0,1,4.439,6.812H7.805A3.257,3.257,0,0,0,9.43,6.376L13.1,4.259A1.437,1.437,0,0,1,15.255,5.5V18.5a1.424,1.424,0,0,1-.718,1.245A1.445,1.445,0,0,1,13.816,19.937ZM4.439,7.812A1.377,1.377,0,0,0,3.064,9.187v5.626a1.378,1.378,0,0,0,1.375,1.376H7.805a4.254,4.254,0,0,1,2.125.569L13.6,18.876a.439.439,0,0,0,.657-.38V5.5a.438.438,0,0,0-.657-.379L9.93,7.242a4.251,4.251,0,0,1-2.125.57Z" }),
		React.createElement("path", { d: "M18.407,6.262a7.79,7.79,0,0,1,.021,11.476c-.474.437.235,1.143.707.707a8.793,8.793,0,0,0-.021-12.89c-.474-.434-1.184.272-.707.707Z" }),
		React.createElement("path", { d: "M16.91,9.031a4.021,4.021,0,0,1,.012,5.938c-.474.438.234,1.143.707.707a5.025,5.025,0,0,0-.012-7.352c-.474-.434-1.183.272-.707.707Z" }))));
		const CiVolumeMute = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentColor", viewBox: "0 0 24 24" },
		React.createElement("g", null,
		React.createElement("path", { d: "M13.817,19.936a1.424,1.424,0,0,1-.719-.2L9.43,17.624a3.254,3.254,0,0,0-1.625-.436H4.44a2.377,2.377,0,0,1-2.375-2.375V9.187A2.378,2.378,0,0,1,4.44,6.811H7.805A3.257,3.257,0,0,0,9.43,6.377L13.1,4.259A1.438,1.438,0,0,1,15.255,5.5V18.5a1.423,1.423,0,0,1-.718,1.245A1.439,1.439,0,0,1,13.817,19.936ZM4.44,7.811A1.377,1.377,0,0,0,3.065,9.187v5.626A1.377,1.377,0,0,0,4.44,16.188H7.805a4.247,4.247,0,0,1,2.125.571L13.6,18.876a.437.437,0,0,0,.439,0,.433.433,0,0,0,.218-.379V5.5a.438.438,0,0,0-.657-.379L9.93,7.242a4.25,4.25,0,0,1-2.125.569Z" }),
		React.createElement("path", { d: "M17.606,14.445a.5.5,0,0,1-.7-.711c.17-.169.34-.349.52-.52l1.21-1.209c-.57-.581-1.15-1.161-1.73-1.74a.5.5,0,0,1,.7-.71l1.74,1.739,1.74-1.739a.5.5,0,0,1,.7.71l-1.73,1.74,1.73,1.729a.5.5,0,0,1-.7.711L19.343,12.7Z" }))));
		const FaPlay = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: "24", height: "24", fill: "currentColor" },
		React.createElement("path", { d: "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" })));
		const FaPause = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: "24", height: "24", fill: "currentColor" },
		React.createElement("path", { d: "M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" })));
		const FaClosedCaptioning = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", width: "24", height: "24", fill: "currentColor" },
		React.createElement("path", { d: "M0 96C0 60.7 28.7 32 64 32H512c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM200 208c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48s21.5-48 48-48zm144 48c0-26.5 21.5-48 48-48c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48z" })));
		const FaRegClosedCaptioning = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", width: "24", height: "24", fill: "currentColor" },
		React.createElement("path", { d: "M512 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H512zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 208c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48s21.5-48 48-48zm144 48c0-26.5 21.5-48 48-48c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48z" })));
		const IoSettings = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "24", height: "24", fill: "currentColor" },
		React.createElement("circle", { cx: "256", cy: "256", r: "48" }),
		React.createElement("path", { d: "M470.39 300l-.47-.38-31.56-24.75a16.11 16.11 0 01-6.1-13.33v-11.56a16 16 0 016.11-13.22L469.92 212l.47-.38a26.68 26.68 0 005.9-34.06l-42.71-73.9a1.59 1.59 0 01-.13-.22A26.86 26.86 0 00401 92.14l-.35.13-37.1 14.93a15.94 15.94 0 01-14.47-1.29q-4.92-3.1-10-5.86a15.94 15.94 0 01-8.19-11.82l-5.59-39.59-.12-.72A27.22 27.22 0 00298.76 26h-85.52a26.92 26.92 0 00-26.45 22.39l-.09.56-5.57 39.67a16 16 0 01-8.13 11.82 175.21 175.21 0 00-10 5.82 15.92 15.92 0 01-14.43 1.27l-37.13-15-.35-.14a26.87 26.87 0 00-32.48 11.34l-.13.22-42.77 73.95a26.71 26.71 0 005.9 34.1l.47.38 31.56 24.75a16.11 16.11 0 016.1 13.33v11.56a16 16 0 01-6.11 13.22L42.08 300l-.47.38a26.68 26.68 0 00-5.9 34.06l42.71 73.9a1.59 1.59 0 01.13.22 26.86 26.86 0 0032.45 11.3l.35-.13 37.07-14.93a15.94 15.94 0 0114.47 1.29q4.92 3.11 10 5.86a15.94 15.94 0 018.19 11.82l5.56 39.59.12.72A27.22 27.22 0 00213.24 486h85.52a26.92 26.92 0 0026.45-22.39l.09-.56 5.57-39.67a16 16 0 018.18-11.82c3.42-1.84 6.76-3.79 10-5.82a15.92 15.92 0 0114.43-1.27l37.13 14.95.35.14a26.85 26.85 0 0032.48-11.34 2.53 2.53 0 01.13-.22l42.71-73.89a26.7 26.7 0 00-5.89-34.11zm-134.48-40.24a80 80 0 11-83.66-83.67 80.21 80.21 0 0183.66 83.67z" })));
		const IoSettingsOutline = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "24", height: "24", fill: "currentColor" },
		React.createElement("path", { d: "M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4zM416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32" })));
		const RiMovieFill = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", fill: "currentColor" },
		React.createElement("path", { d: "M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM10.6219 8.41459C10.5562 8.37078 10.479 8.34741 10.4 8.34741C10.1791 8.34741 10 8.52649 10 8.74741V15.2526C10 15.3316 10.0234 15.4088 10.0672 15.4745C10.1897 15.6583 10.4381 15.708 10.6219 15.5854L15.5008 12.3328C15.5447 12.3035 15.5824 12.2658 15.6117 12.2219C15.7343 12.0381 15.6846 11.7897 15.5008 11.6672L10.6219 8.41459Z" })));
		const RiMovieLine = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", fill: "currentColor" },
		React.createElement("path", { d: "M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM4 5V19H20V5H4ZM10.6219 8.41459L15.5008 11.6672C15.6846 11.7897 15.7343 12.0381 15.6117 12.2219C15.5824 12.2658 15.5447 12.3035 15.5008 12.3328L10.6219 15.5854C10.4381 15.708 10.1897 15.6583 10.0672 15.4745C10.0234 15.4088 10 15.3316 10 15.2526V8.74741C10 8.52649 10.1791 8.34741 10.4 8.34741C10.479 8.34741 10.5562 8.37078 10.6219 8.41459Z" })));
		const TbRewindBackward10 = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" },
		React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
		React.createElement("path", { d: "M7 9l-3 -3l3 -3" }),
		React.createElement("path", { d: "M15.997 17.918a6.002 6.002 0 0 0 -.997 -11.918h-11" }),
		React.createElement("path", { d: "M6 14v6" }),
		React.createElement("path", { d: "M9 15.5v3a1.5 1.5 0 0 0 3 0v-3a1.5 1.5 0 0 0 -3 0z" })));
		const TbRewindForward10 = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" },
		React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
		React.createElement("path", { d: "M17 9l3 -3l-3 -3" }),
		React.createElement("path", { d: "M8 17.918a5.997 5.997 0 0 1 -5 -5.918a6 6 0 0 1 6 -6h11" }),
		React.createElement("path", { d: "M12 14v6" }),
		React.createElement("path", { d: "M15 15.5v3a1.5 1.5 0 0 0 3 0v-3a1.5 1.5 0 0 0 -3 0z" })));
		const CgMiniPlayer = (React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
		React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3 6C3 4.34315 4.34315 3 6 3H18C19.6569 3 21 4.34315 21 6V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6ZM6 5H18C18.5523 5 19 5.44772 19 6V12.2676C18.7058 12.0974 18.3643 12 18 12H14C12.8954 12 12 12.8954 12 14V18C12 18.3643 12.0974 18.7058 12.2676 19H6C5.44772 19 5 18.5523 5 18V6C5 5.44772 5.44772 5 6 5Z", fill: "currentColor" })));

		const RangeSlider = ({
		min = 0,
		max = 100,
		value,
		changeHandler,
		color = "white",
		}) => {
		const inputRef = useRef(null);
		useEffect(() => {
		const progress = (value / max) * 100;
		if (inputRef.current) {
		inputRef.current.style.background = `linear-gradient(to right,${
		color === "orange" ? "#f50" : color
		} ${progress}%, #ccc ${progress}%)`;
		}
		}, [value]);
		return React.createElement("input", {
		className: `_6pp-basic-slider slider-theme-${color}`,
		ref: inputRef,
		type: "range",
		min: min,
		max: max,
		value: value,
		id: "range",
		onChange: changeHandler,
		});
		const RangeSlider = ({ min = 0, max = 100, value, changeHandler, color = "white", }) => {
		const inputRef = useRef(null);
		useEffect(() => {
		const progress = (value / max) * 100;
		if (inputRef.current) {
		inputRef.current.style.background = `linear-gradient(to right,${color === "orange" ? "#f50" : color} ${progress}%, #ccc ${progress}%)`;
		}
		}, [value]);
		return (React.createElement("input", { className: `_6pp-basic-slider slider-theme-${color}`, ref: inputRef, type: "range", min: min, max: max, value: value, id: "range", onChange: changeHandler }));
		};
		@@ -1525,13 +970,12 @@
		const prefixZero = new Intl.NumberFormat(undefined, {
		minimumIntegerDigits: 2,
		minimumIntegerDigits: 2,
		});
		const formatTime = (time) => {
		const seconds = Math.floor(time % 60);
		const minutes = Math.floor((time / 60) % 60);
		const hours = Math.floor(time / 3600);
		if (hours === 0) return `${minutes}:${prefixZero.format(seconds)}`;
		else
		return `${hours}:${prefixZero.format(minutes)}:${prefixZero.format(
		seconds
		)}`;
		const seconds = Math.floor(time % 60);
		const minutes = Math.floor((time / 60) % 60);
		const hours = Math.floor(time / 3600);
		if (hours === 0)
		return `${minutes}:${prefixZero.format(seconds)}`;
		else
		return `${hours}:${prefixZero.format(minutes)}:${prefixZero.format(seconds)}`;
		};
		@@ -1543,497 +987,300 @@ // const deformatTime = (time: string) => {
		// };
		const VideoPlayer = ({
		width = "40rem",
		height = "20.5rem",
		src,
		poster,
		captions,
		qualityOptions = [480, 720, 1080, 1440],
		setQuality,
		}) => {
		const settingsPanelRef = useRef(null);
		const speedPanelRef = useRef(null);
		const videoPlayerRef = useRef(null);
		const isDragging = useRef(false);
		const [isLoading, setIsLoading] = useState(false);
		const [isPaused, setIsPaused] = useState(true);
		const [isMuted, setIsMuted] = useState(false);
		const [volume, setVolume] = useState(50);
		const [previousVolume, setPreviousVolume] = useState(volume);
		const [speed, setSpeed] = useState(1);
		// const [quality, setQuality] = useState(qualityOptions[0]);
		const [isFullScreen, setIsFullScreen] = useState(false);
		const [isTheater, setIsTheater] = useState(false);
		const [isCaptions, setIsCaptions] = useState(false);
		const [duration, setDuration] = useState("00:00");
		const [currentTime, setCurrentTime] = useState("0:0");
		const [buffered, setBuffered] = useState(0);
		const [timelineProgress, setTimelineProgress] = useState(0);
		const [isSettingsOpen, setIsSettingsOpen] = useState(false);
		const [isSpeedOpen, setIsSpeedOpen] = useState(false);
		const toggleSettings = () => setIsSettingsOpen((prev) => !prev);
		const toggleSpeed = () => setIsSpeedOpen((prev) => !prev);
		const toggleCaptions = () => setIsCaptions((prev) => !prev);
		const toggleTheater = () => setIsTheater((prev) => !prev);
		const handlePlayPause = () =>
		setIsPaused((prev) => {
		if (prev) {
		videoPlayerRef.current?.play();
		} else {
		videoPlayerRef.current?.pause();
		}
		return !prev;
		const VideoPlayer = ({ width = "40rem", height = "20.5rem", src, poster, captions, qualityOptions = [480, 720, 1080, 1440], setQuality, }) => {
		const settingsPanelRef = useRef(null);
		const speedPanelRef = useRef(null);
		const videoPlayerRef = useRef(null);
		const isDragging = useRef(false);
		const [isLoading, setIsLoading] = useState(false);
		const [isPaused, setIsPaused] = useState(true);
		const [isMuted, setIsMuted] = useState(false);
		const [volume, setVolume] = useState(50);
		const [previousVolume, setPreviousVolume] = useState(volume);
		const [speed, setSpeed] = useState(1);
		// const [quality, setQuality] = useState(qualityOptions[0]);
		const [isFullScreen, setIsFullScreen] = useState(false);
		const [isTheater, setIsTheater] = useState(false);
		const [isCaptions, setIsCaptions] = useState(false);
		const [duration, setDuration] = useState("00:00");
		const [currentTime, setCurrentTime] = useState("0:0");
		const [buffered, setBuffered] = useState(0);
		const [timelineProgress, setTimelineProgress] = useState(0);
		const [isSettingsOpen, setIsSettingsOpen] = useState(false);
		const [isSpeedOpen, setIsSpeedOpen] = useState(false);
		const toggleSettings = () => setIsSettingsOpen((prev) => !prev);
		const toggleSpeed = () => setIsSpeedOpen((prev) => !prev);
		const toggleCaptions = () => setIsCaptions((prev) => !prev);
		const toggleTheater = () => setIsTheater((prev) => !prev);
		const handlePlayPause = () => setIsPaused((prev) => {
		if (prev) {
		videoPlayerRef.current?.play();
		}
		else {
		videoPlayerRef.current?.pause();
		}
		return !prev;
		});
		const handleFullScreenChange = () => {
		if (isFullScreen) {
		document.exitFullscreen();
		} else {
		document.documentElement.requestFullscreen();
		}
		setIsFullScreen((prev) => !prev);
		};
		const handleMiniPlayerChange = () =>
		videoPlayerRef.current?.requestPictureInPicture();
		const handleSpeedChange = (speed) => {
		setSpeed(speed);
		toggleSpeed();
		};
		const handleQualityChange = (quality) => {
		setQuality(quality);
		toggleSettings();
		};
		const handleRewindBackward10 = () => {
		const player = videoPlayerRef.current;
		if (!player) return;
		player.currentTime -= 10;
		};
		const handleRewindForward10 = () => {
		const player = videoPlayerRef.current;
		if (!player) return;
		player.currentTime += 10;
		};
		const handleMuteUnmute = () =>
		setIsMuted((prev) => {
		if (prev) setVolume(previousVolume);
		else {
		setPreviousVolume(volume);
		setVolume(0);
		}
		return !prev;
		});
		const handleMouseDown = () => {
		isDragging.current = true;
		};
		const handleMouseMove = (e) => {
		if (!isDragging.current) return;
		e.preventDefault();
		const rect = e.currentTarget.getBoundingClientRect();
		const percent =
		(Math.min(Math.max(0, e.clientX - rect.left), rect.width) / rect.width) *
		100;
		setTimelineProgress(percent);
		};
		const handleMouseUp = (e) => {
		const videoPlayer = videoPlayerRef.current;
		if (!videoPlayer) return;
		isDragging.current = false;
		const rect = e.currentTarget.getBoundingClientRect();
		const x = e.clientX - rect.left;
		const percentage = (x / rect.width) * 100;
		const time = (percentage / 100) * videoPlayer.duration;
		videoPlayer.currentTime = time;
		};
		const handleClickOutside = useCallback((event) => {
		if (
		settingsPanelRef.current &&
		!settingsPanelRef.current.contains(event.target)
		) {
		setIsSettingsOpen(false);
		}
		if (
		speedPanelRef.current &&
		!speedPanelRef.current.contains(event.target)
		) {
		setIsSpeedOpen(false);
		}
		}, []);
		const handleKeyDown = useCallback(
		(e) => {
		e.preventDefault();
		if (e.key === "Escape") {
		document.exitFullscreen();
		setIsFullScreen(false);
		}
		if (e.key === "f") {
		handleFullScreenChange();
		}
		if (e.key === "m") {
		handleMuteUnmute();
		}
		if (e.key === " ") {
		handlePlayPause();
		}
		if (e.key === "s") {
		const handleFullScreenChange = () => {
		if (isFullScreen) {
		document.exitFullscreen();
		}
		else {
		document.documentElement.requestFullscreen();
		}
		setIsFullScreen((prev) => !prev);
		};
		const handleMiniPlayerChange = () => videoPlayerRef.current?.requestPictureInPicture();
		const handleSpeedChange = (speed) => {
		setSpeed(speed);
		toggleSpeed();
		};
		const handleQualityChange = (quality) => {
		setQuality(quality);
		toggleSettings();
		}
		if (e.key === "c") {
		toggleCaptions();
		}
		if (e.key === "t") {
		toggleTheater();
		}
		if (e.key === "ArrowRight") {
		handleRewindForward10();
		}
		if (e.key === "ArrowLeft") {
		handleRewindBackward10();
		}
		},
		[
		handleFullScreenChange,
		handleMuteUnmute,
		handlePlayPause,
		handleRewindBackward10,
		handleRewindForward10,
		toggleCaptions,
		toggleSettings,
		toggleTheater,
		]
		);
		useEffect(() => {
		document.addEventListener("mousedown", handleClickOutside);
		document.addEventListener("keydown", handleKeyDown);
		return () => {
		document.removeEventListener("mousedown", handleClickOutside);
		document.removeEventListener("keydown", handleKeyDown);
		};
		}, [handleClickOutside, handleKeyDown]);
		const loadedDataHandler = useCallback(() => {
		const player = videoPlayerRef.current;
		if (player) setDuration(formatTime(videoPlayerRef.current.duration));
		}, [videoPlayerRef.current]);
		const timeupdateHandler = useCallback(() => {
		const player = videoPlayerRef.current;
		if (player) {
		setCurrentTime(formatTime(player.currentTime));
		if (isDragging.current === false)
		setTimelineProgress((player.currentTime / player.duration) * 100);
		let bufferedPercentage = 0;
		if (player.buffered.length > 0) {
		bufferedPercentage =
		(player.buffered.end(player.buffered.length - 1) / player.duration) *
		100;
		}
		setBuffered(bufferedPercentage);
		}
		}, [setCurrentTime, setTimelineProgress, setBuffered]);
		useEffect(() => {
		const videoPlayer = videoPlayerRef.current;
		if (videoPlayer) {
		videoPlayer.addEventListener("loadeddata", loadedDataHandler);
		videoPlayer.addEventListener("timeupdate", timeupdateHandler);
		}
		return () => {
		if (videoPlayer) {
		videoPlayer.removeEventListener("loadeddata", loadedDataHandler);
		videoPlayer.removeEventListener("timeupdate", timeupdateHandler);
		}
		const handleRewindBackward10 = () => {
		const player = videoPlayerRef.current;
		if (!player)
		return;
		player.currentTime -= 10;
		};
		}, [loadedDataHandler, timeupdateHandler, videoPlayerRef.current]);
		useEffect(() => {
		if (volume === 0) {
		setIsMuted(true);
		} else {
		setIsMuted(false);
		}
		}, [volume]);
		useEffect(() => {
		if (videoPlayerRef.current) videoPlayerRef.current.playbackRate = speed;
		}, [speed]);
		useEffect(() => {
		if (videoPlayerRef.current) videoPlayerRef.current.volume = volume / 100;
		}, [volume]);
		useEffect(() => {
		if (videoPlayerRef.current) {
		if (isCaptions) {
		videoPlayerRef.current.textTracks[0].mode = "showing";
		} else {
		videoPlayerRef.current.textTracks[0].mode = "hidden";
		}
		}
		return () => {
		if (videoPlayerRef.current) {
		videoPlayerRef.current.textTracks[0].mode = "hidden";
		}
		const handleRewindForward10 = () => {
		const player = videoPlayerRef.current;
		if (!player)
		return;
		player.currentTime += 10;
		};
		}, [isCaptions]);
		useEffect(() => {
		return () => {
		setIsPaused(true);
		setIsSettingsOpen(false);
		setIsSpeedOpen(false);
		setTimelineProgress(0);
		setBuffered(0);
		setIsLoading(false);
		setSpeed(1);
		const handleMuteUnmute = () => setIsMuted((prev) => {
		if (prev)
		setVolume(previousVolume);
		else {
		setPreviousVolume(volume);
		setVolume(0);
		}
		return !prev;
		});
		const handleMouseDown = () => {
		isDragging.current = true;
		};
		}, [src, poster]);
		const SettingPanel =
		isSettingsOpen &&
		React.createElement(
		"div",
		{ ref: settingsPanelRef, className: "_6pp-video-player-setting-panel" },
		React.createElement(
		"ul",
		null,
		qualityOptions.map((i, idx) =>
		React.createElement(
		"li",
		{
		key: i,
		style: {
		const handleMouseMove = (e) => {
		if (!isDragging.current)
		return;
		e.preventDefault();
		const rect = e.currentTarget.getBoundingClientRect();
		const percent = (Math.min(Math.max(0, e.clientX - rect.left), rect.width) / rect.width) *
		100;
		setTimelineProgress(percent);
		};
		const handleMouseUp = (e) => {
		const videoPlayer = videoPlayerRef.current;
		if (!videoPlayer)
		return;
		isDragging.current = false;
		const rect = e.currentTarget.getBoundingClientRect();
		const x = e.clientX - rect.left;
		const percentage = (x / rect.width) * 100;
		const time = (percentage / 100) * videoPlayer.duration;
		videoPlayer.currentTime = time;
		};
		const handleClickOutside = useCallback((event) => {
		if (settingsPanelRef.current &&
		!settingsPanelRef.current.contains(event.target)) {
		setIsSettingsOpen(false);
		}
		if (speedPanelRef.current &&
		!speedPanelRef.current.contains(event.target)) {
		setIsSpeedOpen(false);
		}
		}, []);
		const handleKeyDown = useCallback((e) => {
		e.preventDefault();
		if (e.key === "Escape") {
		document.exitFullscreen();
		setIsFullScreen(false);
		}
		if (e.key === "f") {
		handleFullScreenChange();
		}
		if (e.key === "m") {
		handleMuteUnmute();
		}
		if (e.key === " ") {
		handlePlayPause();
		}
		if (e.key === "s") {
		toggleSettings();
		}
		if (e.key === "c") {
		toggleCaptions();
		}
		if (e.key === "t") {
		toggleTheater();
		}
		if (e.key === "ArrowRight") {
		handleRewindForward10();
		}
		if (e.key === "ArrowLeft") {
		handleRewindBackward10();
		}
		}, [
		handleFullScreenChange,
		handleMuteUnmute,
		handlePlayPause,
		handleRewindBackward10,
		handleRewindForward10,
		toggleCaptions,
		toggleSettings,
		toggleTheater,
		]);
		useEffect(() => {
		document.addEventListener("mousedown", handleClickOutside);
		document.addEventListener("keydown", handleKeyDown);
		return () => {
		document.removeEventListener("mousedown", handleClickOutside);
		document.removeEventListener("keydown", handleKeyDown);
		};
		}, [handleClickOutside, handleKeyDown]);
		const loadedDataHandler = useCallback(() => {
		const player = videoPlayerRef.current;
		if (player)
		setDuration(formatTime(videoPlayerRef.current.duration));
		}, [videoPlayerRef.current]);
		const timeupdateHandler = useCallback(() => {
		const player = videoPlayerRef.current;
		if (player) {
		setCurrentTime(formatTime(player.currentTime));
		if (isDragging.current === false)
		setTimelineProgress((player.currentTime / player.duration) * 100);
		let bufferedPercentage = 0;
		if (player.buffered.length > 0) {
		bufferedPercentage =
		(player.buffered.end(player.buffered.length - 1) / player.duration) *
		100;
		}
		setBuffered(bufferedPercentage);
		}
		}, [setCurrentTime, setTimelineProgress, setBuffered]);
		useEffect(() => {
		const videoPlayer = videoPlayerRef.current;
		if (videoPlayer) {
		videoPlayer.addEventListener("loadeddata", loadedDataHandler);
		videoPlayer.addEventListener("timeupdate", timeupdateHandler);
		}
		return () => {
		if (videoPlayer) {
		videoPlayer.removeEventListener("loadeddata", loadedDataHandler);
		videoPlayer.removeEventListener("timeupdate", timeupdateHandler);
		}
		};
		}, [loadedDataHandler, timeupdateHandler, videoPlayerRef.current]);
		useEffect(() => {
		if (volume === 0) {
		setIsMuted(true);
		}
		else {
		setIsMuted(false);
		}
		}, [volume]);
		useEffect(() => {
		if (videoPlayerRef.current)
		videoPlayerRef.current.playbackRate = speed;
		}, [speed]);
		useEffect(() => {
		if (videoPlayerRef.current)
		videoPlayerRef.current.volume = volume / 100;
		}, [volume]);
		useEffect(() => {
		if (videoPlayerRef.current) {
		if (isCaptions) {
		videoPlayerRef.current.textTracks[0].mode = "showing";
		}
		else {
		videoPlayerRef.current.textTracks[0].mode = "hidden";
		}
		}
		return () => {
		if (videoPlayerRef.current) {
		videoPlayerRef.current.textTracks[0].mode = "hidden";
		}
		};
		}, [isCaptions]);
		useEffect(() => {
		return () => {
		setIsPaused(true);
		setIsSettingsOpen(false);
		setIsSpeedOpen(false);
		setTimelineProgress(0);
		setBuffered(0);
		setIsLoading(false);
		setSpeed(1);
		};
		}, [src, poster]);
		const SettingPanel = isSettingsOpen && (React.createElement("div", { ref: settingsPanelRef, className: "_6pp-video-player-setting-panel" },
		React.createElement("ul", null, qualityOptions.map((i, idx) => (React.createElement("li", { key: i, style: {
		borderTopLeftRadius: idx === 0 ? "0.5rem" : 0,
		borderTopRightRadius: idx === 0 ? "0.5rem" : 0,
		borderBottomLeftRadius:
		idx === qualityOptions.length - 1 ? "0.5rem" : 0,
		borderBottomRightRadius:
		idx === qualityOptions.length - 1 ? "0.5rem" : 0,
		},
		onClick: () => handleQualityChange(i),
		},
		borderBottomLeftRadius: idx === qualityOptions.length - 1 ? "0.5rem" : 0,
		borderBottomRightRadius: idx === qualityOptions.length - 1 ? "0.5rem" : 0,
		}, onClick: () => handleQualityChange(i) },
		i,
		"p"
		)
		)
		)
		);
		const SpeedPanel =
		isSpeedOpen &&
		React.createElement(
		"div",
		{ ref: speedPanelRef, className: "_6pp-video-player-speed-panel" },
		React.createElement(
		"ul",
		null,
		speedOptions.map((i, idx) =>
		React.createElement(
		"li",
		{
		key: i,
		style: {
		"p"))))));
		const SpeedPanel = isSpeedOpen && (React.createElement("div", { ref: speedPanelRef, className: "_6pp-video-player-speed-panel" },
		React.createElement("ul", null, speedOptions.map((i, idx) => (React.createElement("li", { key: i, style: {
		borderTopLeftRadius: idx === 0 ? "0.5rem" : 0,
		borderTopRightRadius: idx === 0 ? "0.5rem" : 0,
		borderBottomLeftRadius:
		idx === speedOptions.length - 1 ? "0.5rem" : 0,
		borderBottomRightRadius:
		idx === speedOptions.length - 1 ? "0.5rem" : 0,
		},
		onClick: () => handleSpeedChange(i),
		},
		borderBottomLeftRadius: idx === speedOptions.length - 1 ? "0.5rem" : 0,
		borderBottomRightRadius: idx === speedOptions.length - 1 ? "0.5rem" : 0,
		}, onClick: () => handleSpeedChange(i) },
		i,
		"x"
		)
		)
		)
		);
		const TimeLine = React.createElement(
		"div",
		{
		className: "_6pp-video-player-timeline-container",
		onMouseMove: handleMouseMove,
		onMouseUp: handleMouseUp,
		onMouseDown: handleMouseDown,
		},
		React.createElement("div", {
		className: "_6pp-video-player-timeline-thumb",
		style: {
		left: `${timelineProgress}%`,
		},
		}),
		React.createElement("div", {
		className: "_6pp-video-player-timeline-progress",
		style: {
		width: `${timelineProgress}%`,
		},
		}),
		React.createElement("div", {
		className: "_6pp-video-player-timeline-buffer-progress",
		style: {
		width: `${buffered}%`,
		},
		})
		);
		const ControlsPanel = React.createElement(
		"div",
		{ className: "_6pp-video-player-controls" },
		React.createElement(
		"button",
		{ title: "Rewind Backward 10 Seconds", onClick: handleRewindBackward10 },
		TbRewindBackward10
		),
		React.createElement(
		"button",
		{
		disabled: isLoading,
		onClick: handlePlayPause,
		title: isPaused ? "Play" : "Pause",
		},
		isPaused ? FaPlay : FaPause
		),
		React.createElement(
		"button",
		{ title: "Fast Forward 10 Seconds", onClick: handleRewindForward10 },
		TbRewindForward10
		),
		React.createElement(
		"button",
		{ title: "Volume", onClick: handleMuteUnmute },
		isMuted ? CiVolumeMute : volume > 50 ? CiVolumeHigh : CiVolume
		),
		React.createElement(
		"div",
		{ className: "_6pp-video-player-volume-slider" },
		React.createElement(RangeSlider, {
		value: volume,
		changeHandler: (e) => setVolume(Number(e.target.value)),
		})
		),
		React.createElement(
		"div",
		{ className: "_6pp-video-player-duration" },
		React.createElement("span", null, currentTime),
		" ",
		React.createElement("span", null, "/"),
		" ",
		React.createElement("span", null, duration)
		),
		React.createElement(
		"button",
		{
		style: { marginLeft: "auto" },
		onClick: toggleSettings,
		title: "Settings",
		},
		isSettingsOpen ? IoSettings : IoSettingsOutline
		),
		React.createElement(
		"button",
		{
		title: isCaptions ? "Hide Captions" : "Show Captions",
		onClick: toggleCaptions,
		},
		isCaptions ? FaClosedCaptioning : FaRegClosedCaptioning
		),
		React.createElement(
		"button",
		{
		title: "Plackback Speed",
		style: { fontSize: "1.25rem" },
		onClick: toggleSpeed,
		},
		speed,
		"x"
		),
		React.createElement(
		"button",
		{ onClick: handleMiniPlayerChange, title: "Mini Player" },
		CgMiniPlayer
		),
		React.createElement(
		"button",
		{
		onClick: toggleTheater,
		title: isTheater ? "Exit Theater Mode" : "Theater Mode",
		},
		isTheater ? RiMovieFill : RiMovieLine
		),
		React.createElement(
		"button",
		{
		onClick: handleFullScreenChange,
		title: isFullScreen ? "Exit Full Screen" : "Full Screen",
		},
		isFullScreen ? BsFullscreenExit : BsFullscreen
		)
		);
		const Loader = React.createElement(
		"div",
		{ className: "_6pp-video-player-loading" },
		React.createElement("div", {
		className: "_6pp-video-player-loading-spinner",
		})
		);
		return React.createElement(
		"div",
		{
		className: "_6pp-video-player-container",
		style: {
		width: isFullScreen ? "100vw" : isTheater ? "100%" : width,
		height: isFullScreen ? "100vh" : isTheater ? "70vh" : height,
		position: isFullScreen ? "fixed" : "relative",
		},
		onContextMenu: (e) => e.preventDefault(),
		},
		SettingPanel,
		SpeedPanel,
		React.createElement(
		"div",
		{ className: "_6pp-video-player-controls-container" },
		TimeLine,
		ControlsPanel
		),
		isLoading ? Loader : null,
		React.createElement(
		"video",
		{
		ref: videoPlayerRef,
		src: src,
		className: "_6pp-video-player-video",
		style: {
		filter: isLoading ? "blur(5px)" : "none",
		},
		onClick: handlePlayPause,
		poster: poster,
		onWaiting: () => setIsLoading(true),
		onPlaying: () => setIsLoading(false),
		},
		React.createElement("track", {
		src: captions,
		kind: "captions",
		srcLang: "en",
		label: "English",
		})
		),
		React.createElement("div", { className: "_6pp-video-player-backdrop" })
		);
		"x"))))));
		const TimeLine = (React.createElement("div", { className: "_6pp-video-player-timeline-container", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown },
		React.createElement("div", { className: "_6pp-video-player-timeline-thumb", style: {
		left: `${timelineProgress}%`,
		} }),
		React.createElement("div", { className: "_6pp-video-player-timeline-progress", style: {
		width: `${timelineProgress}%`,
		} }),
		React.createElement("div", { className: "_6pp-video-player-timeline-buffer-progress", style: {
		width: `${buffered}%`,
		} })));
		const ControlsPanel = (React.createElement("div", { className: "_6pp-video-player-controls" },
		React.createElement("button", { title: "Rewind Backward 10 Seconds", onClick: handleRewindBackward10 }, TbRewindBackward10),
		React.createElement("button", { disabled: isLoading, onClick: handlePlayPause, title: isPaused ? "Play" : "Pause" }, isPaused ? FaPlay : FaPause),
		React.createElement("button", { title: "Fast Forward 10 Seconds", onClick: handleRewindForward10 }, TbRewindForward10),
		React.createElement("button", { title: "Volume", onClick: handleMuteUnmute }, isMuted ? CiVolumeMute : volume > 50 ? CiVolumeHigh : CiVolume),
		React.createElement("div", { className: "_6pp-video-player-volume-slider" },
		React.createElement(RangeSlider, { value: volume, changeHandler: (e) => setVolume(Number(e.target.value)) })),
		React.createElement("div", { className: "_6pp-video-player-duration" },
		React.createElement("span", null, currentTime),
		" ",
		React.createElement("span", null, "/"),
		" ",
		React.createElement("span", null, duration)),
		React.createElement("button", { style: { marginLeft: "auto" }, onClick: toggleSettings, title: "Settings" }, isSettingsOpen ? IoSettings : IoSettingsOutline),
		React.createElement("button", { title: isCaptions ? "Hide Captions" : "Show Captions", onClick: toggleCaptions }, isCaptions ? FaClosedCaptioning : FaRegClosedCaptioning),
		React.createElement("button", { title: "Plackback Speed", style: { fontSize: "1.25rem" }, onClick: toggleSpeed },
		speed,
		"x"),
		React.createElement("button", { onClick: handleMiniPlayerChange, title: "Mini Player" }, CgMiniPlayer),
		React.createElement("button", { onClick: toggleTheater, title: isTheater ? "Exit Theater Mode" : "Theater Mode" }, isTheater ? RiMovieFill : RiMovieLine),
		React.createElement("button", { onClick: handleFullScreenChange, title: isFullScreen ? "Exit Full Screen" : "Full Screen" }, isFullScreen ? BsFullscreenExit : BsFullscreen)));
		const Loader = (React.createElement("div", { className: "_6pp-video-player-loading" },
		React.createElement("div", { className: "_6pp-video-player-loading-spinner" })));
		return (React.createElement("div", { className: "_6pp-video-player-container", style: {
		width: isFullScreen ? "100vw" : isTheater ? "100%" : width,
		height: isFullScreen ? "100vh" : isTheater ? "70vh" : height,
		position: isFullScreen ? "fixed" : "relative",
		}, onContextMenu: (e) => e.preventDefault() },
		SettingPanel,
		SpeedPanel,
		React.createElement("div", { className: "_6pp-video-player-controls-container" },
		TimeLine,
		ControlsPanel),
		isLoading ? Loader : null,
		React.createElement("video", { ref: videoPlayerRef, src: src, className: "_6pp-video-player-video", style: {
		filter: isLoading ? "blur(5px)" : "none",
		}, onClick: handlePlayPause, poster: poster, onWaiting: () => setIsLoading(true), onPlaying: () => setIsLoading(false) },
		React.createElement("track", { src: captions, kind: "captions", srcLang: "en", label: "English" })),
		React.createElement("div", { className: "_6pp-video-player-backdrop" })));
		};

		export {
		FireBolt,
		MyntraCarousel,
		PageStepper,
		Pagination,
		RangeSlider,
		Slider,
		StylishCarousel,
		VideoPlayer,
		isDateBetween,
		isIncludeCapitalLetter,
		isIncludeLowercaseLetter,
		isIncludeNumber,
		isIncludeSpecialChar,
		isValidDate,
		isValidDateTime,
		isValidEmail,
		isValidPhoneNumber,
		isValidTime,
		isValidUrl,
		isValidUsername,
		useConfirmModal,
		useFetchData,
		useFileHandler,
		useInfiniteScrollBottom,
		useInfiniteScrollTop,
		useInputValidation,
		useRating,
		useStrongPassword,
		};
		export { FireBolt, MyntraCarousel, PageStepper, Pagination, RangeSlider, Slider, StylishCarousel, VideoPlayer, isDateBetween, isIncludeCapitalLetter, isIncludeLowercaseLetter, isIncludeNumber, isIncludeSpecialChar, isValidDate, isValidDateTime, isValidEmail, isValidPhoneNumber, isValidTime, isValidUrl, isValidUsername, useConfirmModal, useFetchData, useFileHandler, useInfiniteScrollBottom, useInfiniteScrollTop, useInputValidation, useRating, useStrongPassword };

package.json

		{
		"name": "6pp",
		"version": "1.2.15",
		"version": "1.2.16",
		"description": "",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/hooks/forms.tsx

Sorry, the diff of this file is not supported yet

Improved metrics

Worsened metrics