softbuilders-react-video-player 1.2.14 → 1.2.16

package/dist/components/VolumeSlider/index.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from "react";
 import Slider from "../Slider";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
-import { MuteIcon, UnmuteIcon } from "../../images";
+import { VolumeHigh, VolumeLow, VolumeMute, VolumeVLow } from "../icons";
 const MIN = 0, MAX = 100;
-const VolumeSlider = ({ width = 0, setIsSeeking, handleControlDisplayTimer, volumeSliderToggler, }) => {
+const VolumeSlider = ({ width = 0, setIsSeeking, handleControlDisplayTimer, volumeSliderToggler, isTrailer, }) => {
     const { player } = useSoftBuildersVideoPlayerContext();
     const [isVisible, setVisible] = useState(false);
     const [volume, setVolume] = useState(0);
@@ -25,6 +25,21 @@ const VolumeSlider = ({ width = 0, setIsSeeking, handleControlDisplayTimer, volu
             player === null || player === void 0 ? void 0 : player.off("volumechange", updateVolumeState);
         };
     }, [player]);
+    const handleVolumeSliderClick = (e) => {
+        e.stopPropagation();
+        const slider = e.currentTarget;
+        const rect = slider.getBoundingClientRect();
+        const offsetX = e.clientY - rect.top;
+        const newVolume = (offsetX / rect.height) * 100;
+        setVolume(newVolume);
+        player === null || player === void 0 ? void 0 : player.volume(newVolume / 100);
+        if (newVolume === 0) {
+            player === null || player === void 0 ? void 0 : player.muted(true);
+        }
+        else {
+            player === null || player === void 0 ? void 0 : player.muted(false);
+        }
+    };
     const timeoutRef = React.useRef(null);
     useEffect(() => {
         setVisible(false);
@@ -40,7 +55,7 @@ const VolumeSlider = ({ width = 0, setIsSeeking, handleControlDisplayTimer, volu
         if (volume == 0 && !isVisible) {
             setVolume(60);
             player === null || player === void 0 ? void 0 : player.volume(0.6);
-            player === null || player === void 0 ? void 0 : player.muted(false);
+            player && (player === null || player === void 0 ? void 0 : player.muted(false));
         }
         setVisible((prev) => !prev);
         timeoutRef.current = setTimeout(() => {
@@ -54,17 +69,23 @@ const VolumeSlider = ({ width = 0, setIsSeeking, handleControlDisplayTimer, volu
         setVolume(newVolume);
         player === null || player === void 0 ? void 0 : player.volume(newVolume / 100); // Normalize volume between 0 and 1
         if (newVolume === 0) {
-            player === null || player === void 0 ? void 0 : player.muted(true);
+            player && (player === null || player === void 0 ? void 0 : player.muted(true));
         }
         else {
-            player === null || player === void 0 ? void 0 : player.muted(false);
+            player && (player === null || player === void 0 ? void 0 : player.muted(false));
         }
     };
-    return (_jsxs("div", { className: `sb-flex ${isVisible ? "" : ""}  ${width > 400 ? "sb-flex-col-reverse" : "sb-flex-col !sb-justify-start"} sb-items-center sb-gap-1 sb-h-full`, children: [_jsx("div", { className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"}`, onClick: toggleVisibility, children: volume == 0 || (player === null || player === void 0 ? void 0 : player.muted()) ? (_jsx(MuteIcon, { className: `sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5` })) : (_jsx(UnmuteIcon, { className: `sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5` })) }), _jsx("div", { className: "sb-flex sb-items-center sb-justify-center", children: _jsx("div", { className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible
+    const handleDoubleClick = (e) => {
+        setVolume(0);
+        player === null || player === void 0 ? void 0 : player.muted(true);
+    };
+    return (_jsxs("div", { className: `sb-flex ${isVisible ? "" : ""}  ${width > 400 && !isTrailer
+            ? "sb-flex-col-reverse"
+            : `sb-flex-col ${isTrailer ? "sb-justify-start" : ""}`} sb-items-center sb-gap-1 sb-h-full`, children: [_jsx("div", { className: `sb-flex sb-relative ${width < 400 || isTrailer ? "-sb-top-1" : "sb-top-1"}`, onClick: toggleVisibility, onDoubleClick: handleDoubleClick, children: volume == 0 || (player === null || player === void 0 ? void 0 : player.muted()) ? (_jsx(VolumeMute, { className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5` })) : volume < 25 ? (_jsx(VolumeVLow, { className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5` })) : volume < 50 ? (_jsx(VolumeLow, { className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5` })) : (_jsx(VolumeHigh, { className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5` })) }), _jsx("div", { className: "sb-flex sb-w-fit sb-h-fit sb-items-center sb-justify-center", children: _jsx("div", { className: `sb-p-1 !sb-h-fit  sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible
                         ? "sb-w-[22px] sb-opacity-100 sb-visible"
-                        : "sb-w-[22px] sb-opacity-0 sb-invisible"} ${width > 400
+                        : "sb-w-[22px] sb-opacity-0 sb-invisible"} ${width > 400 && !isTrailer
                         ? "-sb-rotate-90 -sb-translate-y-1"
-                        : "sb-rotate-90 sb-translate-y-1"} sb-relative`, children: _jsx(Slider, { value: volume, handleValueChange: handleValueChange, min: MIN, max: MAX, className: "!sb-w-16" }) }) })] }));
+                        : "sb-rotate-90 sb-translate-y-1"} sb-relative`, children: _jsx(Slider, { value: volume, handleValueChange: handleValueChange, min: MIN, max: MAX, className: "!sb-w-16 ", handleSliderClick: handleVolumeSliderClick }) }) })] }));
 };
 export default VolumeSlider;
 //# sourceMappingURL=index.js.map

package/dist/components/VolumeSlider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/VolumeSlider/index.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react";
 import Slider from "../Slider";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 import { MuteIcon, UnmuteIcon } from "../../images";
+import { VolumeHigh, VolumeLow, VolumeMute, VolumeVLow } from "../icons";
+import { set } from "video.js/dist/types/tech/middleware";
 
 const MIN = 0,
   MAX = 100;
@@ -11,6 +13,7 @@ type Props = {
   setIsSeeking: (val: boolean) => void;
   handleControlDisplayTimer: (e: any) => void;
   volumeSliderToggler: boolean;
+  isTrailer?: boolean;
 };
 
 const VolumeSlider = ({
@@ -18,6 +21,7 @@ const VolumeSlider = ({
   setIsSeeking,
   handleControlDisplayTimer,
   volumeSliderToggler,
+  isTrailer,
 }: Props) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [isVisible, setVisible] = useState(false);
@@ -43,7 +47,22 @@ const VolumeSlider = ({
       player?.off("volumechange", updateVolumeState);
     };
   }, [player]);
+  const handleVolumeSliderClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    const slider = e.currentTarget;
+    const rect = slider.getBoundingClientRect();
+    const offsetX = e.clientY - rect.top;
+    const newVolume = (offsetX / rect.height) * 100;
+
+    setVolume(newVolume);
+    player?.volume(newVolume / 100);
 
+    if (newVolume === 0) {
+      player?.muted(true);
+    } else {
+      player?.muted(false);
+    }
+  };
   const timeoutRef = React.useRef<any>(null);
   useEffect(() => {
     setVisible(false);
@@ -61,7 +80,7 @@ const VolumeSlider = ({
     if (volume == 0 && !isVisible) {
       setVolume(60);
       player?.volume(0.6);
-      player?.muted(false);
+      player && player?.muted(false);
     }
     setVisible((prev) => !prev);
     timeoutRef.current = setTimeout(() => {
@@ -77,46 +96,68 @@ const VolumeSlider = ({
     player?.volume(newVolume / 100); // Normalize volume between 0 and 1
 
     if (newVolume === 0) {
-      player?.muted(true);
+      player && player?.muted(true);
     } else {
-      player?.muted(false);
+      player && player?.muted(false);
     }
   };
-
+  const handleDoubleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    setVolume(0);
+    player?.muted(true);
+  };
   return (
     <div
       className={`sb-flex ${isVisible ? "" : ""}  ${
-        width > 400 ? "sb-flex-col-reverse" : "sb-flex-col !sb-justify-start"
+        width > 400 && !isTrailer
+          ? "sb-flex-col-reverse"
+          : `sb-flex-col ${isTrailer ? "sb-justify-start" : ""}`
       } sb-items-center sb-gap-1 sb-h-full`}
     >
       {/* Mute/Unmute Icon */}
       <div
         className={`sb-flex sb-relative ${
-          width < 400 ? "-sb-top-1" : "sb-top-1"
+          width < 400 || isTrailer ? "-sb-top-1" : "sb-top-1"
         }`}
         onClick={toggleVisibility}
+        onDoubleClick={handleDoubleClick}
       >
         {volume == 0 || player?.muted() ? (
-          <MuteIcon
-            className={`sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5`}
+          <VolumeMute
+            className={`sb-w-3 sb-h-3 ${
+              width < 400 || isTrailer ? "" : ""
+            } sb-h-5 sb-w-5`}
           />
-        ) : (
-          <UnmuteIcon
-            className={`sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5`}
+        ) : volume < 25 ? (
+          <VolumeVLow
+            className={`sb-w-3 sb-h-3 ${
+              width < 400 || isTrailer ? "" : ""
+            } sb-h-5 sb-w-5`}
           />
+        ) : volume < 50 ? (
+          <VolumeLow
+            className={`sb-w-3 sb-h-3 ${
+              width < 400 || isTrailer ? "" : ""
+            } sb-h-5 sb-w-5`}
+          ></VolumeLow>
+        ) : (
+          <VolumeHigh
+            className={`sb-w-3 sb-h-3 ${
+              width < 400 || isTrailer ? "" : ""
+            } sb-h-5 sb-w-5`}
+          ></VolumeHigh>
         )}
       </div>
 
       {/* Slider Wrapper */}
-      <div className="sb-flex sb-items-center sb-justify-center">
+      <div className="sb-flex sb-w-fit sb-h-fit sb-items-center sb-justify-center">
         {/* Rotated Slider */}
         <div
-          className={`sb-transition-all sb-ease-in-out sb-duration-500 ${
+          className={`sb-p-1 !sb-h-fit  sb-transition-all sb-ease-in-out sb-duration-500 ${
             isVisible
               ? "sb-w-[22px] sb-opacity-100 sb-visible"
               : "sb-w-[22px] sb-opacity-0 sb-invisible"
           } ${
-            width > 400
+            width > 400 && !isTrailer
               ? "-sb-rotate-90 -sb-translate-y-1"
               : "sb-rotate-90 sb-translate-y-1"
           } sb-relative`}
@@ -126,7 +167,8 @@ const VolumeSlider = ({
             handleValueChange={handleValueChange}
             min={MIN}
             max={MAX}
-            className="!sb-w-16"
+            className="!sb-w-16 "
+            handleSliderClick={handleVolumeSliderClick}
           />
         </div>
       </div>

package/dist/components/icons/SubIcon.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SvgSubIcon = (props) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", stroke: "currentColor", viewBox: "0 0 15 15" }, props, { children: [_jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M1.25 7.5c0-2.487 0-3.731.658-4.561q.159-.2.346-.367c.785-.697 1.96-.697 4.309-.697h1.875c2.349 0 3.523 0 4.307.697q.19.168.347.367c.658.83.658 2.074.658 4.561s0 3.731-.658 4.561q-.157.2-.347.367c-.784.697-1.957.697-4.307.697H6.562c-2.349 0-3.523 0-4.308-.697a3 3 0 0 1-.346-.367c-.658-.83-.658-2.073-.658-4.561" }), _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M6.563 5.625H6.25c-.582 0-.874 0-1.103.095a1.25 1.25 0 0 0-.677.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .677.677c.23.095.52.095 1.103.095h.313m4.062-3.75h-.312c-.583 0-.874 0-1.104.095a1.25 1.25 0 0 0-.676.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .676.677c.23.095.521.095 1.104.095h.312" })] })));
+const SvgSubIcon = (props) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 15 15" }, props, { children: [_jsx("path", { stroke: "#D1D5DB", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M1.25 7.5c0-2.487 0-3.731.658-4.561q.159-.2.346-.367c.785-.697 1.96-.697 4.309-.697h1.875c2.349 0 3.523 0 4.307.697q.19.168.347.367c.658.83.658 2.074.658 4.561s0 3.731-.658 4.561q-.157.2-.347.367c-.784.697-1.957.697-4.307.697H6.562c-2.349 0-3.523 0-4.308-.697a3 3 0 0 1-.346-.367c-.658-.83-.658-2.073-.658-4.561" }), _jsx("path", { stroke: "#D1D5DB", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M6.563 5.625H6.25c-.582 0-.874 0-1.103.095a1.25 1.25 0 0 0-.677.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .677.677c.23.095.52.095 1.103.095h.313m4.062-3.75h-.312c-.583 0-.874 0-1.104.095a1.25 1.25 0 0 0-.676.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .676.677c.23.095.521.095 1.104.095h.312" })] })));
 export default SvgSubIcon;
 //# sourceMappingURL=SubIcon.js.map

package/dist/components/icons/SubIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubIcon.js","sourceRoot":"","sources":["../../../src/components/icons/SubIcon.tsx"],"names":[],"mappings":";AACA,MAAM,UAAU,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACrD,6BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,OAAO,EAAC,WAAW,IACf,KAAK,eAET,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,GAAG,EAChB,CAAC,EAAC,yTAAyT,GAC3T,EACF,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,GAAG,EAChB,CAAC,EAAC,+VAA+V,GACjW,KACE,CACP,CAAC;AACF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"SubIcon.js","sourceRoot":"","sources":["../../../src/components/icons/SubIcon.tsx"],"names":[],"mappings":";AACA,MAAM,UAAU,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACrD,6BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,IACf,KAAK,eAET,eACE,MAAM,EAAC,SAAS,EAChB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,GAAG,EAChB,CAAC,EAAC,yTAAyT,GAC3T,EACF,eACE,MAAM,EAAC,SAAS,EAChB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,GAAG,EAChB,CAAC,EAAC,+VAA+V,GACjW,KACE,CACP,CAAC;AACF,eAAe,UAAU,CAAC"}

package/dist/components/icons/SubIcon.tsx

@@ -1,28 +1,27 @@
-import type { SVGProps } from "react";
-const SvgSubIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 15 15"
-    {...props}
-  >
-    <path
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-      d="M1.25 7.5c0-2.487 0-3.731.658-4.561q.159-.2.346-.367c.785-.697 1.96-.697 4.309-.697h1.875c2.349 0 3.523 0 4.307.697q.19.168.347.367c.658.83.658 2.074.658 4.561s0 3.731-.658 4.561q-.157.2-.347.367c-.784.697-1.957.697-4.307.697H6.562c-2.349 0-3.523 0-4.308-.697a3 3 0 0 1-.346-.367c-.658-.83-.658-2.073-.658-4.561"
-    />
-    <path
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-      d="M6.563 5.625H6.25c-.582 0-.874 0-1.103.095a1.25 1.25 0 0 0-.677.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .677.677c.23.095.52.095 1.103.095h.313m4.062-3.75h-.312c-.583 0-.874 0-1.104.095a1.25 1.25 0 0 0-.676.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .676.677c.23.095.521.095 1.104.095h.312"
-    />
-  </svg>
-);
-export default SvgSubIcon;
+import type { SVGProps } from "react";
+const SvgSubIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 15 15"
+    {...props}
+  >
+    <path
+      stroke="#D1D5DB"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M1.25 7.5c0-2.487 0-3.731.658-4.561q.159-.2.346-.367c.785-.697 1.96-.697 4.309-.697h1.875c2.349 0 3.523 0 4.307.697q.19.168.347.367c.658.83.658 2.074.658 4.561s0 3.731-.658 4.561q-.157.2-.347.367c-.784.697-1.957.697-4.307.697H6.562c-2.349 0-3.523 0-4.308-.697a3 3 0 0 1-.346-.367c-.658-.83-.658-2.073-.658-4.561"
+    />
+    <path
+      stroke="#D1D5DB"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M6.563 5.625H6.25c-.582 0-.874 0-1.103.095a1.25 1.25 0 0 0-.677.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .677.677c.23.095.52.095 1.103.095h.313m4.062-3.75h-.312c-.583 0-.874 0-1.104.095a1.25 1.25 0 0 0-.676.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .676.677c.23.095.521.095 1.104.095h.312"
+    />
+  </svg>
+);
+export default SvgSubIcon;

package/dist/components/icons/VolumeHigh.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+declare const SvgVolumeHigh: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgVolumeHigh;

package/dist/components/icons/VolumeHigh.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgVolumeHigh = (props) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#fff", viewBox: "0 0 512 512" }, props, { children: [_jsx("path", { d: "M264 416.19a23.92 23.92 0 0 1-14.21-4.69l-.66-.51-91.46-75H88a24 24 0 0 1-24-24V200a24 24 0 0 1 24-24h69.65l91.46-75 .66-.51A24 24 0 0 1 288 119.83v272.34a24 24 0 0 1-24 24ZM352 336a16 16 0 0 1-14.29-23.18c9.49-18.9 14.3-38 14.3-56.82 0-19.36-4.66-37.92-14.25-56.73a16 16 0 0 1 28.5-14.54C378.2 208.16 384 231.47 384 256c0 23.83-6 47.78-17.7 71.18A16 16 0 0 1 352 336" }), _jsx("path", { d: "M400 384a16 16 0 0 1-13.87-24C405 327.05 416 299.45 416 256c0-44.12-10.94-71.52-29.83-103.95A16 16 0 0 1 413.83 136C434.92 172.16 448 204.88 448 256c0 50.36-13.06 83.24-34.12 120a16 16 0 0 1-13.88 8" })] })));
+export default SvgVolumeHigh;
+//# sourceMappingURL=VolumeHigh.js.map

package/dist/components/icons/VolumeHigh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeHigh.js","sourceRoot":"","sources":["../../../src/components/icons/VolumeHigh.tsx"],"names":[],"mappings":";AACA,MAAM,aAAa,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACxD,6BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,aAAa,IACjB,KAAK,eAET,eAAM,CAAC,EAAC,iXAAiX,GAAG,EAC5X,eAAM,CAAC,EAAC,wMAAwM,GAAG,KAC/M,CACP,CAAC;AACF,eAAe,aAAa,CAAC"}

package/dist/components/icons/VolumeHigh.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+const SvgVolumeHigh = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="#fff"
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <path d="M264 416.19a23.92 23.92 0 0 1-14.21-4.69l-.66-.51-91.46-75H88a24 24 0 0 1-24-24V200a24 24 0 0 1 24-24h69.65l91.46-75 .66-.51A24 24 0 0 1 288 119.83v272.34a24 24 0 0 1-24 24ZM352 336a16 16 0 0 1-14.29-23.18c9.49-18.9 14.3-38 14.3-56.82 0-19.36-4.66-37.92-14.25-56.73a16 16 0 0 1 28.5-14.54C378.2 208.16 384 231.47 384 256c0 23.83-6 47.78-17.7 71.18A16 16 0 0 1 352 336" />
+    <path d="M400 384a16 16 0 0 1-13.87-24C405 327.05 416 299.45 416 256c0-44.12-10.94-71.52-29.83-103.95A16 16 0 0 1 413.83 136C434.92 172.16 448 204.88 448 256c0 50.36-13.06 83.24-34.12 120a16 16 0 0 1-13.88 8" />
+  </svg>
+);
+export default SvgVolumeHigh;

package/dist/components/icons/VolumeHighIcon.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+declare const SvgSubIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgSubIcon;

package/dist/components/icons/VolumeHighIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgSubIcon = (props) => (_jsxs("svg", { fill: "white", width: "1em", height: "1em", viewBox: "0 0 15 15", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("title", { children: "ionicons-v5-g" }), _jsx("path", { d: "M264,416.19a23.92,23.92,0,0,1-14.21-4.69l-.66-.51-91.46-75H88a24,24,0,0,1-24-24V200a24,24,0,0,1,24-24h69.65l91.46-75,.66-.51A24,24,0,0,1,288,119.83V392.17a24,24,0,0,1-24,24Z" }), _jsx("path", { d: "M352,336a16,16,0,0,1-14.29-23.18c9.49-18.9,14.3-38,14.3-56.82,0-19.36-4.66-37.92-14.25-56.73a16,16,0,0,1,28.5-14.54C378.2,208.16,384,231.47,384,256c0,23.83-6,47.78-17.7,71.18A16,16,0,0,1,352,336Z" }), _jsx("path", { d: "M400,384a16,16,0,0,1-13.87-24C405,327.05,416,299.45,416,256c0-44.12-10.94-71.52-29.83-103.95A16,16,0,0,1,413.83,136C434.92,172.16,448,204.88,448,256c0,50.36-13.06,83.24-34.12,120A16,16,0,0,1,400,384Z" })] }));
+export default SvgSubIcon;
+//# sourceMappingURL=VolumeHighIcon.js.map

package/dist/components/icons/VolumeHighIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeHighIcon.js","sourceRoot":"","sources":["../../../src/components/icons/VolumeHighIcon.tsx"],"names":[],"mappings":";AACA,MAAM,UAAU,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACrD,eACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,aAElC,4CAA4B,EAC5B,eAAM,CAAC,EAAC,+KAA+K,GAAG,EAC1L,eAAM,CAAC,EAAC,qMAAqM,GAAG,EAChN,eAAM,CAAC,EAAC,yMAAyM,GAAG,IAChN,CACP,CAAC;AACF,eAAe,UAAU,CAAC"}

package/dist/components/icons/VolumeHighIcon.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+const SvgSubIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="white"
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 15"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>ionicons-v5-g</title>
+    <path d="M264,416.19a23.92,23.92,0,0,1-14.21-4.69l-.66-.51-91.46-75H88a24,24,0,0,1-24-24V200a24,24,0,0,1,24-24h69.65l91.46-75,.66-.51A24,24,0,0,1,288,119.83V392.17a24,24,0,0,1-24,24Z" />
+    <path d="M352,336a16,16,0,0,1-14.29-23.18c9.49-18.9,14.3-38,14.3-56.82,0-19.36-4.66-37.92-14.25-56.73a16,16,0,0,1,28.5-14.54C378.2,208.16,384,231.47,384,256c0,23.83-6,47.78-17.7,71.18A16,16,0,0,1,352,336Z" />
+    <path d="M400,384a16,16,0,0,1-13.87-24C405,327.05,416,299.45,416,256c0-44.12-10.94-71.52-29.83-103.95A16,16,0,0,1,413.83,136C434.92,172.16,448,204.88,448,256c0,50.36-13.06,83.24-34.12,120A16,16,0,0,1,400,384Z" />
+  </svg>
+);
+export default SvgSubIcon;

package/dist/components/icons/VolumeIconHigh.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+declare const VolumeIconHeigh: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default VolumeIconHeigh;

package/dist/components/icons/VolumeIconHigh.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VolumeIconHeigh = (props) => (_jsxs("svg", { fill: "white", width: "800px", height: "800px", viewBox: "0 0 512 512", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("title", { children: "ionicons-v5-g" }), _jsx("path", { d: "M264,416.19a23.92,23.92,0,0,1-14.21-4.69l-.66-.51-91.46-75H88a24,24,0,0,1-24-24V200a24,24,0,0,1,24-24h69.65l91.46-75,.66-.51A24,24,0,0,1,288,119.83V392.17a24,24,0,0,1-24,24Z" }), _jsx("path", { d: "M352,336a16,16,0,0,1-14.29-23.18c9.49-18.9,14.3-38,14.3-56.82,0-19.36-4.66-37.92-14.25-56.73a16,16,0,0,1,28.5-14.54C378.2,208.16,384,231.47,384,256c0,23.83-6,47.78-17.7,71.18A16,16,0,0,1,352,336Z" }), _jsx("path", { d: "M400,384a16,16,0,0,1-13.87-24C405,327.05,416,299.45,416,256c0-44.12-10.94-71.52-29.83-103.95A16,16,0,0,1,413.83,136C434.92,172.16,448,204.88,448,256c0,50.36-13.06,83.24-34.12,120A16,16,0,0,1,400,384Z" })] }));
+export default VolumeIconHeigh;
+//# sourceMappingURL=VolumeIconHigh.js.map

package/dist/components/icons/VolumeIconHigh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeIconHigh.js","sourceRoot":"","sources":["../../../src/components/icons/VolumeIconHigh.tsx"],"names":[],"mappings":";AACA,MAAM,eAAe,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CAC1D,eACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,MAAM,EAAC,OAAO,EACd,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,4BAA4B,aAElC,4CAA4B,EAC5B,eAAM,CAAC,EAAC,+KAA+K,GAAG,EAC1L,eAAM,CAAC,EAAC,qMAAqM,GAAG,EAChN,eAAM,CAAC,EAAC,yMAAyM,GAAG,IAChN,CACP,CAAC;AACF,eAAe,eAAe,CAAC"}

package/dist/components/icons/VolumeIconHigh.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+const VolumeIconHeigh = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="white"
+    width="800px"
+    height="800px"
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>ionicons-v5-g</title>
+    <path d="M264,416.19a23.92,23.92,0,0,1-14.21-4.69l-.66-.51-91.46-75H88a24,24,0,0,1-24-24V200a24,24,0,0,1,24-24h69.65l91.46-75,.66-.51A24,24,0,0,1,288,119.83V392.17a24,24,0,0,1-24,24Z" />
+    <path d="M352,336a16,16,0,0,1-14.29-23.18c9.49-18.9,14.3-38,14.3-56.82,0-19.36-4.66-37.92-14.25-56.73a16,16,0,0,1,28.5-14.54C378.2,208.16,384,231.47,384,256c0,23.83-6,47.78-17.7,71.18A16,16,0,0,1,352,336Z" />
+    <path d="M400,384a16,16,0,0,1-13.87-24C405,327.05,416,299.45,416,256c0-44.12-10.94-71.52-29.83-103.95A16,16,0,0,1,413.83,136C434.92,172.16,448,204.88,448,256c0,50.36-13.06,83.24-34.12,120A16,16,0,0,1,400,384Z" />
+  </svg>
+);
+export default VolumeIconHeigh;

package/dist/components/icons/VolumeIconLow copy.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+declare const VolumeIconLow: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default VolumeIconLow;

package/dist/components/icons/VolumeIconLow copy.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const VolumeIconLow = (props) => (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 13 12" }, props, { children: _jsx("path", { fill: "#fff", d: "M12.428 9a2.5 2.5 0 0 1-.657 1.053l-1.27 1.214a2.6 2.6 0 0 1-1.1.63V9.5c0-.276.235-.5.523-.5zm.108-6.5V8H9.924c-.864 0-1.567.673-1.567 1.5V12H2.612C1.172 12 0 10.879 0 9.5v-7C0 1.122 1.172 0 2.612 0h7.312c1.44 0 2.612 1.122 2.612 2.5m-8.88 6.25c0-.414-.35-.75-.783-.75s-.784.336-.784.75.351.75.784.75c.432 0 .783-.336.783-.75m0-2.75c0-.414-.35-.75-.783-.75s-.784.336-.784.75.351.75.784.75c.432 0 .783-.336.783-.75m0-2.75c0-.414-.35-.75-.783-.75s-.784.336-.784.75.351.75.784.75c.432 0 .783-.336.783-.75" }) })));
+export default VolumeIconLow;
+//# sourceMappingURL=VolumeIconLow%20copy.js.map

package/dist/components/icons/VolumeIconLow copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeIconLow copy.js","sourceRoot":"","sources":["../../../src/components/icons/VolumeIconLow copy.tsx"],"names":[],"mappings":";AACA,MAAM,aAAa,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACxD,4BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,IACf,KAAK,cAET,eACE,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,ufAAuf,GACzf,IACE,CACP,CAAC;AACF,eAAe,aAAa,CAAC"}

package/dist/components/icons/VolumeIconLow copy.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from "react";
+const VolumeIconLow = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 13 12"
+    {...props}
+  >
+    <path
+      fill="#fff"
+      d="M12.428 9a2.5 2.5 0 0 1-.657 1.053l-1.27 1.214a2.6 2.6 0 0 1-1.1.63V9.5c0-.276.235-.5.523-.5zm.108-6.5V8H9.924c-.864 0-1.567.673-1.567 1.5V12H2.612C1.172 12 0 10.879 0 9.5v-7C0 1.122 1.172 0 2.612 0h7.312c1.44 0 2.612 1.122 2.612 2.5m-8.88 6.25c0-.414-.35-.75-.783-.75s-.784.336-.784.75.351.75.784.75c.432 0 .783-.336.783-.75m0-2.75c0-.414-.35-.75-.783-.75s-.784.336-.784.75.351.75.784.75c.432 0 .783-.336.783-.75m0-2.75c0-.414-.35-.75-.783-.75s-.784.336-.784.75.351.75.784.75c.432 0 .783-.336.783-.75"
+    />
+  </svg>
+);
+export default VolumeIconLow;

package/dist/components/icons/VolumeLow.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+declare const SvgVolumeLow: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgVolumeLow;

package/dist/components/icons/VolumeLow.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgVolumeLow = (props) => (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#fff", viewBox: "0 0 512 512" }, props, { children: _jsx("path", { d: "M296 416.19a23.92 23.92 0 0 1-14.21-4.69l-.66-.51-91.46-75H120a24 24 0 0 1-24-24V200a24 24 0 0 1 24-24h69.65l91.46-75 .66-.51A24 24 0 0 1 320 119.83v272.34a24 24 0 0 1-24 24ZM384 336a16 16 0 0 1-14.29-23.18c9.49-18.9 14.3-38 14.3-56.82 0-19.36-4.66-37.92-14.25-56.73a16 16 0 0 1 28.5-14.54C410.2 208.16 416 231.47 416 256c0 23.83-6 47.78-17.7 71.18A16 16 0 0 1 384 336" }) })));
+export default SvgVolumeLow;
+//# sourceMappingURL=VolumeLow.js.map

package/dist/components/icons/VolumeLow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeLow.js","sourceRoot":"","sources":["../../../src/components/icons/VolumeLow.tsx"],"names":[],"mappings":";AACA,MAAM,YAAY,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACvD,4BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,aAAa,IACjB,KAAK,cAET,eAAM,CAAC,EAAC,kXAAkX,GAAG,IACzX,CACP,CAAC;AACF,eAAe,YAAY,CAAC"}

package/dist/components/icons/VolumeLow.tsx

@@ -0,0 +1,14 @@
+import type { SVGProps } from "react";
+const SvgVolumeLow = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="#fff"
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <path d="M296 416.19a23.92 23.92 0 0 1-14.21-4.69l-.66-.51-91.46-75H120a24 24 0 0 1-24-24V200a24 24 0 0 1 24-24h69.65l91.46-75 .66-.51A24 24 0 0 1 320 119.83v272.34a24 24 0 0 1-24 24ZM384 336a16 16 0 0 1-14.29-23.18c9.49-18.9 14.3-38 14.3-56.82 0-19.36-4.66-37.92-14.25-56.73a16 16 0 0 1 28.5-14.54C410.2 208.16 416 231.47 416 256c0 23.83-6 47.78-17.7 71.18A16 16 0 0 1 384 336" />
+  </svg>
+);
+export default SvgVolumeLow;

package/dist/components/icons/VolumeLowIcon.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+declare const SvgSubIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgSubIcon;

package/dist/components/icons/VolumeLowIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgSubIcon = (props) => (_jsxs("svg", { fill: "white", width: "1em", height: "1em", viewBox: "0 0 15 15", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("title", { children: "ionicons-v5-g" }), _jsx("path", { d: "M296,416.19a23.92,23.92,0,0,1-14.21-4.69l-.66-.51-91.46-75H120a24,24,0,0,1-24-24V200a24,24,0,0,1,24-24h69.65l91.46-75,.66-.51A24,24,0,0,1,320,119.83V392.17a24,24,0,0,1-24,24Z" }), _jsx("path", { d: "M384,336a16,16,0,0,1-14.29-23.18c9.49-18.9,14.3-38,14.3-56.82,0-19.36-4.66-37.92-14.25-56.73a16,16,0,0,1,28.5-14.54C410.2,208.16,416,231.47,416,256c0,23.83-6,47.78-17.7,71.18A16,16,0,0,1,384,336Z" })] }));
+export default SvgSubIcon;
+//# sourceMappingURL=VolumeLowIcon.js.map

package/dist/components/icons/VolumeLowIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeLowIcon.js","sourceRoot":"","sources":["../../../src/components/icons/VolumeLowIcon.tsx"],"names":[],"mappings":";AACA,MAAM,UAAU,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACrD,eACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,aAElC,4CAA4B,EAC5B,eAAM,CAAC,EAAC,gLAAgL,GAAG,EAC3L,eAAM,CAAC,EAAC,qMAAqM,GAAG,IAC5M,CACP,CAAC;AACF,eAAe,UAAU,CAAC"}

package/dist/components/icons/VolumeLowIcon.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+const SvgSubIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="white"
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 15"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>ionicons-v5-g</title>
+    <path d="M296,416.19a23.92,23.92,0,0,1-14.21-4.69l-.66-.51-91.46-75H120a24,24,0,0,1-24-24V200a24,24,0,0,1,24-24h69.65l91.46-75,.66-.51A24,24,0,0,1,320,119.83V392.17a24,24,0,0,1-24,24Z" />
+    <path d="M384,336a16,16,0,0,1-14.29-23.18c9.49-18.9,14.3-38,14.3-56.82,0-19.36-4.66-37.92-14.25-56.73a16,16,0,0,1,28.5-14.54C410.2,208.16,416,231.47,416,256c0,23.83-6,47.78-17.7,71.18A16,16,0,0,1,384,336Z" />
+  </svg>
+);
+export default SvgSubIcon;

package/dist/components/icons/VolumeMute.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+declare const SvgVolumeMute: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgVolumeMute;

package/dist/components/icons/VolumeMute.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgVolumeMute = (props) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#fff", viewBox: "0 0 512 512" }, props, { children: [_jsx("path", { d: "M416 432 64 80", style: {
+                fill: "none",
+                stroke: "#fff",
+                strokeLinecap: "round",
+                strokeMiterlimit: 10,
+                strokeWidth: 32,
+            } }), _jsx("path", { d: "M243.33 98.86a23.89 23.89 0 0 0-25.55 1.82l-.66.51-28.52 23.35a8 8 0 0 0-.59 11.85l54.33 54.33a8 8 0 0 0 13.66-5.66v-64.49a24.51 24.51 0 0 0-12.67-21.71M251.33 335.29 96.69 180.69A16 16 0 0 0 85.38 176H56a24 24 0 0 0-24 24v112a24 24 0 0 0 24 24h69.76l92 75.31a23.9 23.9 0 0 0 25.87 1.69A24.51 24.51 0 0 0 256 391.45v-44.86a16 16 0 0 0-4.67-11.3M352 256c0-24.56-5.81-47.87-17.75-71.27a16 16 0 1 0-28.5 14.55C315.34 218.06 320 236.62 320 256q0 4-.31 8.13a8 8 0 0 0 2.32 6.25l14.36 14.36a8 8 0 0 0 13.55-4.31A146 146 0 0 0 352 256M416 256c0-51.18-13.08-83.89-34.18-120.06a16 16 0 0 0-27.64 16.12C373.07 184.44 384 211.83 384 256c0 23.83-3.29 42.88-9.37 60.65a8 8 0 0 0 1.9 8.26L389 337.4a8 8 0 0 0 13.13-2.79C411 311.76 416 287.26 416 256" }), _jsx("path", { d: "M480 256c0-74.25-20.19-121.11-50.51-168.61a16 16 0 1 0-27 17.22C429.82 147.38 448 189.5 448 256c0 46.19-8.43 80.27-22.43 110.53a8 8 0 0 0 1.59 9l11.92 11.92a8 8 0 0 0 12.92-2.16C471.6 344.9 480 305 480 256" })] })));
+export default SvgVolumeMute;
+//# sourceMappingURL=VolumeMute.js.map

package/dist/components/icons/VolumeMute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeMute.js","sourceRoot":"","sources":["../../../src/components/icons/VolumeMute.tsx"],"names":[],"mappings":";AACA,MAAM,aAAa,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACxD,6BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,aAAa,IACjB,KAAK,eAET,eACE,CAAC,EAAC,gBAAgB,EAClB,KAAK,EAAE;gBACL,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,MAAM;gBACd,aAAa,EAAE,OAAO;gBACtB,gBAAgB,EAAE,EAAE;gBACpB,WAAW,EAAE,EAAE;aAChB,GACD,EACF,eAAM,CAAC,EAAC,iuBAAiuB,GAAG,EAC5uB,eAAM,CAAC,EAAC,+MAA+M,GAAG,KACtN,CACP,CAAC;AACF,eAAe,aAAa,CAAC"}

package/dist/components/icons/VolumeMute.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from "react";
+const SvgVolumeMute = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="#fff"
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <path
+      d="M416 432 64 80"
+      style={{
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeMiterlimit: 10,
+        strokeWidth: 32,
+      }}
+    />
+    <path d="M243.33 98.86a23.89 23.89 0 0 0-25.55 1.82l-.66.51-28.52 23.35a8 8 0 0 0-.59 11.85l54.33 54.33a8 8 0 0 0 13.66-5.66v-64.49a24.51 24.51 0 0 0-12.67-21.71M251.33 335.29 96.69 180.69A16 16 0 0 0 85.38 176H56a24 24 0 0 0-24 24v112a24 24 0 0 0 24 24h69.76l92 75.31a23.9 23.9 0 0 0 25.87 1.69A24.51 24.51 0 0 0 256 391.45v-44.86a16 16 0 0 0-4.67-11.3M352 256c0-24.56-5.81-47.87-17.75-71.27a16 16 0 1 0-28.5 14.55C315.34 218.06 320 236.62 320 256q0 4-.31 8.13a8 8 0 0 0 2.32 6.25l14.36 14.36a8 8 0 0 0 13.55-4.31A146 146 0 0 0 352 256M416 256c0-51.18-13.08-83.89-34.18-120.06a16 16 0 0 0-27.64 16.12C373.07 184.44 384 211.83 384 256c0 23.83-3.29 42.88-9.37 60.65a8 8 0 0 0 1.9 8.26L389 337.4a8 8 0 0 0 13.13-2.79C411 311.76 416 287.26 416 256" />
+    <path d="M480 256c0-74.25-20.19-121.11-50.51-168.61a16 16 0 1 0-27 17.22C429.82 147.38 448 189.5 448 256c0 46.19-8.43 80.27-22.43 110.53a8 8 0 0 0 1.59 9l11.92 11.92a8 8 0 0 0 12.92-2.16C471.6 344.9 480 305 480 256" />
+  </svg>
+);
+export default SvgVolumeMute;

package/dist/components/icons/VolumeVLow.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+declare const SvgVolumeVLow: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgVolumeVLow;

package/dist/components/icons/VolumeVLow.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgVolumeVLow = (props) => (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#fff", viewBox: "0 0 512 512" }, props, { children: _jsx("path", { d: "M344 416a23.92 23.92 0 0 1-14.21-4.69c-.23-.16-.44-.33-.66-.51l-91.46-74.9H168a24 24 0 0 1-24-24V200.07a24 24 0 0 1 24-24h69.65l91.46-74.9c.22-.18.43-.35.66-.51A24 24 0 0 1 368 120v272a24 24 0 0 1-24 24" }) })));
+export default SvgVolumeVLow;
+//# sourceMappingURL=VolumeVLow.js.map

package/dist/components/icons/VolumeVLow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeVLow.js","sourceRoot":"","sources":["../../../src/components/icons/VolumeVLow.tsx"],"names":[],"mappings":";AACA,MAAM,aAAa,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACxD,4BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,aAAa,IACjB,KAAK,cAET,eAAM,CAAC,EAAC,4MAA4M,GAAG,IACnN,CACP,CAAC;AACF,eAAe,aAAa,CAAC"}

package/dist/components/icons/VolumeVLow.tsx

@@ -0,0 +1,14 @@
+import type { SVGProps } from "react";
+const SvgVolumeVLow = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="#fff"
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <path d="M344 416a23.92 23.92 0 0 1-14.21-4.69c-.23-.16-.44-.33-.66-.51l-91.46-74.9H168a24 24 0 0 1-24-24V200.07a24 24 0 0 1 24-24h69.65l91.46-74.9c.22-.18.43-.35.66-.51A24 24 0 0 1 368 120v272a24 24 0 0 1-24 24" />
+  </svg>
+);
+export default SvgVolumeVLow;

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

@@ -13,3 +13,7 @@ export { default as SettingsIcon } from "./SettingsIcon";
 export { default as SubIcon } from "./SubIcon";
 export { default as SubtitlesIcon } from "./SubtitlesIcon";
 export { default as UnmuteIcon } from "./UnmuteIcon";
+export { default as VolumeHigh } from "./VolumeHigh";
+export { default as VolumeLow } from "./VolumeLow";
+export { default as VolumeMute } from "./VolumeMute";
+export { default as VolumeVLow } from "./VolumeVLow";