suada-components 1.5.0 → 1.7.0

package/dist/components/{index-CUdpL49N.js → index-Debc-Hq8.js}

@@ -32396,7 +32396,7 @@ var CourseStatusContainer = dt.div(templateObject_13$2 || (templateObject_13$2 =
   return !$status ? '#EA382A' : '#00905E';
 });
 dt.div(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  div {\n    font-size: 13px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  div {\n    font-size: 13px;\n  }\n"])));
-var TooltipContent = dt.div(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  & > :first-child {\n    font-size: 14px;\n    margin-bottom: 5px;\n  }\n  div {\n    font-size: 14px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    & > .tooltip-text {\n      font-size: 12px;\n      margin-top: 5px;\n      text-align: center;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  & > :first-child {\n    font-size: 14px;\n    margin-bottom: 5px;\n  }\n  div {\n    font-size: 14px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    & > .tooltip-text {\n      font-size: 12px;\n      margin-top: 5px;\n      text-align: center;\n    }\n  }\n"])));
+var TooltipContent = dt.div(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  & > :first-child {\n    font-size: 14px;\n    margin-bottom: 5px;\n  }\n  div {\n    font-size: 14px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    & > .tooltip-text {\n      font-size: 12px;\n      margin-top: 5px;\n      text-align: center;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  & > :first-child {\n    font-size: 14px;\n    margin-bottom: 5px;\n  }\n  div {\n    font-size: 14px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    & > .tooltip-text {\n      font-size: 12px;\n      margin-top: 5px;\n      text-align: center;\n    }\n  }\n"])));
 var StyledCardBottomContainer = dt.div(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  flex-direction: column !important;\n  align-self: flex-end;\n  gap: 10px;\n  padding-bottom: 10px;\n"], ["\n  display: flex;\n  width: 100%;\n  flex-direction: column !important;\n  align-self: flex-end;\n  gap: 10px;\n  padding-bottom: 10px;\n"])));
 var StyledActionsContainer = dt.div(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row !important;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: row !important;\n  width: 100%;\n"])));
 var StyledActionItem = dt.span(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 14px;\n  cursor: ", ";\n  color: ", ";\n  font-size: 14px;\n  padding-bottom: 10px;\n  width: 100%;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 4px;\n  svg path {\n    fill: ", ";\n    width: 16px;\n    height: 16px;\n  }\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n  &:hover {\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  height: 14px;\n  cursor: ", ";\n  color: ", ";\n  font-size: 14px;\n  padding-bottom: 10px;\n  width: 100%;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 4px;\n  svg path {\n    fill: ", ";\n    width: 16px;\n    height: 16px;\n  }\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n  &:hover {\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
@@ -32446,7 +32446,7 @@ var GridItem = dt.div(templateObject_32 || (templateObject_32 = __makeTemplateOb
   var $isFromUser = _a.$isFromUser;
   return $isFromUser && "\n  figure {\n    position: relative;\n    &:after {\n      content: 'View Analytics';\n      position: absolute;\n      top: 0;\n      opacity: 0;\n      color: #06c68f;\n      left: 0;\n      font-size: 24px;\n      font-weight: 700;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: rgba(255, 255, 255, 0.9);\n      width: 100%;\n      height: 100%;\n      transition: opacity 0.3s ease;\n      z-index: 10;\n    }\n  }\n\n  &:hover {\n    figure {\n      &:after {\n        opacity: 1;\n      }\n    }\n  }\n  " || '';
 });
-var templateObject_1$o, templateObject_2$j, templateObject_3$f, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
+var templateObject_1$o, templateObject_2$j, templateObject_3$f, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
 
 var TooltipHeight$1 = function TooltipHeight(_a) {
   var text = _a.text,
@@ -37528,6 +37528,26 @@ var OndemandVideoIcon = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 });
 OndemandVideoIcon.displayName = 'OndemandVideoIcon';
 
+var PictureInPictureIcon = function PictureInPictureIcon(_a) {
+  var className = _a.className,
+    onClick = _a.onClick,
+    props = __rest(_a, ["className", "onClick"]);
+  return jsxRuntimeExports.jsx("svg", __assign({
+    width: '24',
+    height: '24',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+    className: className,
+    onClick: onClick
+  }, props, {
+    children: jsxRuntimeExports.jsx("path", {
+      d: 'M19 7H22V17C22 18.1 21.1 19 20 19H4C2.9 19 2 18.1 2 17V7C2 5.9 2.9 5 4 5H17V7H4V17H13V15H20V7H19ZM15 13H22V7H15V13Z',
+      fill: 'white'
+    })
+  }));
+};
+
 var PublishIcon = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var className = _a.className,
     onClick = _a.onClick,
@@ -42810,7 +42830,7 @@ var CancelButton = dt.div(templateObject_11$1 || (templateObject_11$1 = __makeTe
 var InputFileContainer = dt.div(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  /* input {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n  }\n\n  &label {\n    width: 85%;\n    height: 100%;\n    cursor: pointer;\n  } */\n"], ["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  /* input {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n  }\n\n  &label {\n    width: 85%;\n    height: 100%;\n    cursor: pointer;\n  } */\n"])));
 var UploadInput = dt.input(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  z-index: -1;\n  left: 0;\n  width: 0;\n  top: 0;\n  overflow: hidden;\n"], ["\n  opacity: 0;\n  position: absolute;\n  z-index: -1;\n  left: 0;\n  width: 0;\n  top: 0;\n  overflow: hidden;\n"])));
 dt.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0px;\n  top: -15px;\n  background: #fff;\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.54);\n"], ["\n  position: absolute;\n  left: 0px;\n  top: -15px;\n  background: #fff;\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.54);\n"])));
-var ImagePlaceholder = dt.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  img {\n    position: relative;\n    width: 72px;\n    height: 48px;\n    border-radius: 4px;\n    padding: 4px;\n    top: 2px;\n  }\n"], ["\n  img {\n    position: relative;\n    width: 72px;\n    height: 48px;\n    border-radius: 4px;\n    padding: 4px;\n    top: 2px;\n  }\n"])));
+var ImagePlaceholder = dt.div(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  img {\n    position: relative;\n    width: 72px;\n    height: 48px;\n    border-radius: 4px;\n    padding: 4px;\n    top: 2px;\n  }\n"], ["\n  img {\n    position: relative;\n    width: 72px;\n    height: 48px;\n    border-radius: 4px;\n    padding: 4px;\n    top: 2px;\n  }\n"])));
 var InputLabel = dt.label(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  cursor: pointer;\n  color: #fff;\n  background: #06c68f;\n  font-size: 11px;\n  padding: 9px 6px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  cursor: pointer;\n  color: #fff;\n  background: #06c68f;\n  font-size: 11px;\n  padding: 9px 6px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"
 // UploaderButton
 ])));
@@ -42833,7 +42853,7 @@ var styles$1 = {
     padding: '4px'
   }
 };
-var templateObject_1$j, templateObject_2$e, templateObject_3$a, templateObject_4$7, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
+var templateObject_1$j, templateObject_2$e, templateObject_3$a, templateObject_4$7, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
 
 var ImageWithFallback = function ImageWithFallback(_a) {
   var src = _a.src,
@@ -81355,7 +81375,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.youtube,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerYouTube' */
-	      './YouTube-D2V4Z5LG.js'
+	      './YouTube-CdcE3nmm.js'
 	    ); }).then(function (n) { return n.YouTube; }))
 	  },
 	  {
@@ -81364,7 +81384,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.soundcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerSoundCloud' */
-	      './SoundCloud-D5RE0hBN.js'
+	      './SoundCloud-pcTMWQVG.js'
 	    ); }).then(function (n) { return n.SoundCloud; }))
 	  },
 	  {
@@ -81373,7 +81393,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vimeo,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVimeo' */
-	      './Vimeo-C71PHmy8.js'
+	      './Vimeo-9D0LyMV4.js'
 	    ); }).then(function (n) { return n.Vimeo; }))
 	  },
 	  {
@@ -81382,7 +81402,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mux,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMux' */
-	      './Mux-CWsIfXgR.js'
+	      './Mux-DhMGRnH7.js'
 	    ); }).then(function (n) { return n.Mux; }))
 	  },
 	  {
@@ -81391,7 +81411,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.facebook,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFacebook' */
-	      './Facebook-CCzLezvE.js'
+	      './Facebook-ngwgOcwS.js'
 	    ); }).then(function (n) { return n.Facebook; }))
 	  },
 	  {
@@ -81400,7 +81420,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.streamable,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerStreamable' */
-	      './Streamable-cVBLCtV4.js'
+	      './Streamable-B-2t9AZh.js'
 	    ); }).then(function (n) { return n.Streamable; }))
 	  },
 	  {
@@ -81409,7 +81429,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.wistia,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerWistia' */
-	      './Wistia-DZLhakqM.js'
+	      './Wistia-3LaD3aiP.js'
 	    ); }).then(function (n) { return n.Wistia; }))
 	  },
 	  {
@@ -81418,7 +81438,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.twitch,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerTwitch' */
-	      './Twitch-DK8g5mI9.js'
+	      './Twitch-Ccg79Yis.js'
 	    ); }).then(function (n) { return n.Twitch; }))
 	  },
 	  {
@@ -81427,7 +81447,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.dailymotion,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerDailyMotion' */
-	      './DailyMotion-D1GfS99W.js'
+	      './DailyMotion-C2fzQqF6.js'
 	    ); }).then(function (n) { return n.DailyMotion; }))
 	  },
 	  {
@@ -81436,7 +81456,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mixcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMixcloud' */
-	      './Mixcloud-NSXYlse6.js'
+	      './Mixcloud-CtZR5d1S.js'
 	    ); }).then(function (n) { return n.Mixcloud; }))
 	  },
 	  {
@@ -81445,7 +81465,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vidyard,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVidyard' */
-	      './Vidyard-BfoXiL7u.js'
+	      './Vidyard-BcZfnHmw.js'
 	    ); }).then(function (n) { return n.Vidyard; }))
 	  },
 	  {
@@ -81454,7 +81474,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.kaltura,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerKaltura' */
-	      './Kaltura-Ybj6tj4c.js'
+	      './Kaltura-Dwtf5bDJ.js'
 	    ); }).then(function (n) { return n.Kaltura; }))
 	  },
 	  {
@@ -81466,7 +81486,7 @@ function requirePlayers () {
 	    },
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFilePlayer' */
-	      './FilePlayer-CSeIQE-t.js'
+	      './FilePlayer-gXcilMCz.js'
 	    ); }).then(function (n) { return n.FilePlayer; }))
 	  }
 	];
@@ -82287,7 +82307,7 @@ function requireReactPlayer () {
 	var import_Player = __toESM(/*@__PURE__*/ requirePlayer());
 	const Preview = (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	  /* webpackChunkName: 'reactPlayerPreview' */
-	  './Preview-YEvp75ub.js'
+	  './Preview-DuscX4du.js'
 	); }).then(function (n) { return n.Preview; }));
 	const IS_BROWSER = typeof window !== "undefined" && window.document && typeof document !== "undefined";
 	const IS_GLOBAL = typeof commonjsGlobal !== "undefined" && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -82501,7 +82521,7 @@ var StyledWrapper = dt.div(templateObject_2$7 || (templateObject_2$7 = __makeTem
 var StyledPlayerLoader = dt.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  background: #e7e9ed;\n  display: flex;\n  align-items: center;\n  top: 0;\n  bottom: 0;\n  margin: auto 0;\n  color: var(--neutral-colors-light);\n  justify-content: center;\n  z-index: 5;\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  background: #e7e9ed;\n  display: flex;\n  align-items: center;\n  top: 0;\n  bottom: 0;\n  margin: auto 0;\n  color: var(--neutral-colors-light);\n  justify-content: center;\n  z-index: 5;\n"])));
 var rotate = mt(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"], ["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
 var StyledLoader = dt.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  margin: 60px auto;\n  font-size: 10px;\n  position: relative;\n  text-indent: -9999em;\n  border-top: 3px solid var(--neutral-colors-light);\n  border-right: 3px solid var(--neutral-colors-light);\n  border-bottom: 3px solid var(--neutral-colors-light);\n  border-left: 3px solid var(--brand-colors-accent);\n  transform: translateZ(0);\n  animation: ", " 1.1s infinite linear;\n  border-radius: 50%;\n  width: 46px;\n  height: 46px;\n\n  &:after {\n    border-radius: 50%;\n    width: 46px;\n    height: 46px;\n  }\n"], ["\n  margin: 60px auto;\n  font-size: 10px;\n  position: relative;\n  text-indent: -9999em;\n  border-top: 3px solid var(--neutral-colors-light);\n  border-right: 3px solid var(--neutral-colors-light);\n  border-bottom: 3px solid var(--neutral-colors-light);\n  border-left: 3px solid var(--brand-colors-accent);\n  transform: translateZ(0);\n  animation: ", " 1.1s infinite linear;\n  border-radius: 50%;\n  width: 46px;\n  height: 46px;\n\n  &:after {\n    border-radius: 50%;\n    width: 46px;\n    height: 46px;\n  }\n"])), rotate);
-var StyledControlsContainer = dt.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  width: 100%;\n  height: fit-content;\n  display: flex;\n  align-items: flex-end;\n  position: absolute;\n  flex-direction: column;\n  left: 0;\n  bottom: 0;\n  z-index: 2;\n"], ["\n  width: 100%;\n  height: fit-content;\n  display: flex;\n  align-items: flex-end;\n  position: absolute;\n  flex-direction: column;\n  left: 0;\n  bottom: 0;\n  z-index: 2;\n"])));
+var StyledControlsContainer = dt.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  width: 100%;\n  height: fit-content;\n  display: flex;\n  align-items: flex-end;\n  position: absolute;\n  flex-direction: column;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  z-index: 2;\n"], ["\n  width: 100%;\n  height: fit-content;\n  display: flex;\n  align-items: flex-end;\n  position: absolute;\n  flex-direction: column;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  z-index: 2;\n"])));
 var StyledSubtitles = dt.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  background-color: rgba(2, 2, 16, 0.32);\n  color: #fff;\n  font-family: 'Open Sans', sans-serif;\n  font-size: 18px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 150%;\n  padding: 8px;\n  position: absolute;\n  z-index: 100;\n  bottom: ", ";\n  right: 0;\n  left: 0;\n  width: fit-content;\n  margin: 0 auto;\n  max-width: 80%;\n  width: fit-content;\n"], ["\n  background-color: rgba(2, 2, 16, 0.32);\n  color: #fff;\n  font-family: 'Open Sans', sans-serif;\n  font-size: 18px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 150%;\n  padding: 8px;\n  position: absolute;\n  z-index: 100;\n  bottom: ", ";\n  right: 0;\n  left: 0;\n  width: fit-content;\n  margin: 0 auto;\n  max-width: 80%;\n  width: fit-content;\n"])), function (_a) {
   var $controls = _a.$controls;
   return $controls ? '60px' : '10px';
@@ -82529,7 +82549,7 @@ var injectHLSSubtitleStyles = function injectHLSSubtitleStyles() {
 };
 var templateObject_1$9, templateObject_2$7, templateObject_3$4, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$1;
 
-var StyledControls = dt.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  width: 100%;\n  border-radius: 0px 0px 8px 8px;\n  background: #565a62;\n  padding: 12px 16px;\n  position: relative;\n\n  svg {\n    cursor: pointer;\n\n    @media screen and (max-width: 1500px) {\n      width: 20px;\n      height: 20px;\n    }\n\n    @media screen and (max-width: 1000px) {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n  & > p {\n    color: var(--neutral-colors-light);\n    font-family: 'Poppins', sans-serif;\n    ", "\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  width: 100%;\n  border-radius: 0px 0px 8px 8px;\n  background: #565a62;\n  padding: 12px 16px;\n  position: relative;\n\n  svg {\n    cursor: pointer;\n\n    @media screen and (max-width: 1500px) {\n      width: 20px;\n      height: 20px;\n    }\n\n    @media screen and (max-width: 1000px) {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n  & > p {\n    color: var(--neutral-colors-light);\n    font-family: 'Poppins', sans-serif;\n    ", "\n  }\n"])), {
+var StyledControls = dt.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  width: 100%;\n  border-radius: 0px 0px 8px 8px;\n  background: rgba(86, 90, 98, 0.6);\n  backdrop-filter: blur(4px);\n  padding: 12px 16px;\n  position: relative;\n  opacity: 0.8;\n\n\n  svg {\n    cursor: pointer;\n\n    @media screen and (max-width: 1500px) {\n      width: 20px;\n      height: 20px;\n    }\n\n    @media screen and (max-width: 1000px) {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n  & > p {\n    color: var(--neutral-colors-light);\n    font-family: 'Poppins', sans-serif;\n    ", "\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  width: 100%;\n  border-radius: 0px 0px 8px 8px;\n  background: rgba(86, 90, 98, 0.6);\n  backdrop-filter: blur(4px);\n  padding: 12px 16px;\n  position: relative;\n  opacity: 0.8;\n\n\n  svg {\n    cursor: pointer;\n\n    @media screen and (max-width: 1500px) {\n      width: 20px;\n      height: 20px;\n    }\n\n    @media screen and (max-width: 1000px) {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n  & > p {\n    color: var(--neutral-colors-light);\n    font-family: 'Poppins', sans-serif;\n    ", "\n  }\n"])), {
   fontStyle: 'descriptor'
 });
 var StyledSlider = dt.input(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  width: 100%;\n  height: 2px;\n  border-radius: 5px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: ", ";\n  outline: none;\n  -webkit-transition: 0.2s;\n  transition: opacity 0.2s;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: var(--brand-colors-accent);\n    cursor: pointer;\n  }\n\n  &::-moz-range-thumb {\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: var(--brand-colors-accent);\n    cursor: pointer;\n  }\n"], ["\n  width: 100%;\n  height: 2px;\n  border-radius: 5px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: ", ";\n  outline: none;\n  -webkit-transition: 0.2s;\n  transition: opacity 0.2s;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: var(--brand-colors-accent);\n    cursor: pointer;\n  }\n\n  &::-moz-range-thumb {\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: var(--brand-colors-accent);\n    cursor: pointer;\n  }\n"])), function (_a) {
@@ -82541,8 +82561,8 @@ var StyledVolumeSlider = dt.input(templateObject_4$1 || (templateObject_4$1 = __
   var value = _a.value;
   return "linear-gradient(\n    to right,\n    var(--neutral-colors-light) 0%,\n    var(--neutral-colors-light) ".concat(value, "%,\n    var(--level-grey-500) ").concat(value, "%,\n    var(--level-grey-500) 100%\n  )");
 });
-var StyledControllerLeft = dt.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"])));
-var StyledControllerRight = dt.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n\n  .skip-icon-disabled {\n    cursor: default;\n\n    & > path {\n      fill: var(--level-dark-300);\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n\n  .skip-icon-disabled {\n    cursor: default;\n\n    & > path {\n      fill: var(--level-dark-300);\n    }\n  }\n"])));
+var StyledControllerLeft = dt.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex: 1;\n"])));
+var StyledControllerRight = dt.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n\n  .skip-icon-disabled {\n    cursor: default;\n\n    & > path {\n      fill: var(--level-dark-300);\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n\n  .skip-icon-disabled {\n    cursor: default;\n\n    & > path {\n      fill: var(--level-dark-300);\n    }\n  }\n"])));
 var StyledTimeTrack = dt.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: #FFFFFF;\n  ", "\n  text-align: right;\n  white-space: nowrap;\n"], ["\n  color: #FFFFFF;\n  ", "\n  text-align: right;\n  white-space: nowrap;\n"])), {
   fontStyle: 'descriptor'
 });
@@ -82550,10 +82570,11 @@ var StyledHeartIconContainer = dt.div(templateObject_8 || (templateObject_8 = __
 var StyledDownloadIconContainer = dt.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg {\n    width: 24px !important;\n    height: 24px !important;\n    \n    @media screen and (max-width: 1500px) {\n      width: 20px !important;\n      height: 20px !important;\n    }\n\n    @media screen and (max-width: 1000px) {\n      width: 16px !important;\n      height: 16px !important;\n    }\n  }\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg {\n    width: 24px !important;\n    height: 24px !important;\n    \n    @media screen and (max-width: 1500px) {\n      width: 20px !important;\n      height: 20px !important;\n    }\n\n    @media screen and (max-width: 1000px) {\n      width: 16px !important;\n      height: 16px !important;\n    }\n  }\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
 var StyledSubtitlesIconContainer = dt.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
 var StyledFullscreenIconContainer = dt.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
-var StyledVolumeIconContainer = dt.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
-var StyledPlayPauseIconContainer = dt.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
-var StyledRewindIconContainer = dt.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
-var templateObject_1$8, templateObject_2$6, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
+var StyledPictureInPictureIconContainer = dt.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n\n  &.pip-active > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n\n  &.pip-active > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
+var StyledVolumeIconContainer = dt.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
+var StyledPlayPauseIconContainer = dt.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
+var StyledRewindIconContainer = dt.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  \n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  \n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
+var templateObject_1$8, templateObject_2$6, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
 
 var PLAYBACK_SPEED_LIST = [{
   label: 'playback_speed.2x',
@@ -82756,12 +82777,14 @@ var Controls = function Controls(_a) {
     volumeChangeHandler = _a.volumeChangeHandler,
     formatDuration = _a.formatDuration,
     handleFullScreen = _a.handleFullScreen,
+    handlePictureInPicture = _a.handlePictureInPicture,
     playing = _a.playing,
     isSubtitlesChecked = _a.isSubtitlesChecked,
     toggleSubtitlesCheck = _a.toggleSubtitlesCheck,
     isFavorite = _a.isFavorite,
     toggleIsFavorite = _a.toggleIsFavorite,
     isFullscreen = _a.isFullscreen,
+    isPiPActive = _a.isPiPActive,
     subtitle = _a.subtitle,
     handleSkipBackward = _a.handleSkipBackward,
     handleSkipForward = _a.handleSkipForward,
@@ -82771,7 +82794,9 @@ var Controls = function Controls(_a) {
     showDownload = _a.showDownload,
     downloadUrl = _a.downloadUrl,
     downloadFileName = _a.downloadFileName,
-    onDownload = _a.onDownload;
+    onDownload = _a.onDownload,
+    _b = _a.showPictureInPicture,
+    showPictureInPicture = _b === void 0 ? true : _b;
   var handleDownloadClick = function handleDownloadClick() {
     return __awaiter(void 0, void 0, void 0, function () {
       var response, blob, blobUrl, link, error_1, link;
@@ -82870,22 +82895,26 @@ var Controls = function Controls(_a) {
     }), jsxRuntimeExports.jsxs(StyledControllerRight, {
       children: [handleSkipBackward && jsxRuntimeExports.jsx(CustomTooltip, {
         title: "Previous video",
-        children: jsxRuntimeExports.jsx(SkipIcon, {
-          onClick: function onClick() {
-            if (!isPreviousVideo) return;
-            handleSkipBackward();
-          },
-          className: isPreviousVideo ? '' : 'skip-icon-disabled'
+        children: jsxRuntimeExports.jsx(StyledRewindIconContainer, {
+          children: jsxRuntimeExports.jsx(SkipIcon, {
+            onClick: function onClick() {
+              if (!isPreviousVideo) return;
+              handleSkipBackward();
+            },
+            className: isPreviousVideo ? '' : 'skip-icon-disabled'
+          })
         })
       }), handleSkipForward && jsxRuntimeExports.jsx(CustomTooltip, {
         title: "Next video",
-        children: jsxRuntimeExports.jsx(SkipIcon, {
-          forward: true,
-          onClick: function onClick() {
-            if (!isNextVideo) return;
-            handleSkipForward();
-          },
-          className: isNextVideo ? '' : 'skip-icon-disabled'
+        children: jsxRuntimeExports.jsx(StyledRewindIconContainer, {
+          children: jsxRuntimeExports.jsx(SkipIcon, {
+            forward: true,
+            onClick: function onClick() {
+              if (!isNextVideo) return;
+              handleSkipForward();
+            },
+            className: isNextVideo ? '' : 'skip-icon-disabled'
+          })
         })
       }), showFavorite && jsxRuntimeExports.jsx(CustomTooltip, {
         title: isFavorite ? 'Remove from favorites' : 'Add to favorites',
@@ -82926,6 +82955,13 @@ var Controls = function Controls(_a) {
             onClick: toggleSubtitlesCheck
           })
         })
+      }), showPictureInPicture && jsxRuntimeExports.jsx(CustomTooltip, {
+        title: isPiPActive ? 'Exit picture-in-picture' : 'Enter picture-in-picture',
+        children: jsxRuntimeExports.jsx(StyledPictureInPictureIconContainer, {
+          className: isPiPActive ? 'pip-active' : '',
+          onClick: handlePictureInPicture,
+          children: jsxRuntimeExports.jsx(PictureInPictureIcon, {})
+        })
       }), jsxRuntimeExports.jsx(CustomTooltip, {
         title: isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen',
         children: jsxRuntimeExports.jsx(StyledFullscreenIconContainer, {
@@ -88743,20 +88779,23 @@ function usePlayerControls(_a) {
     isSubtitlesChecked = _e[0],
     setIsSubtitlesChecked = _e[1];
   var _f = React.useState(false),
-    isFullscreen = _f[0],
-    setIsFullscreen = _f[1];
+    isPiPActive = _f[0],
+    setIsPiPActive = _f[1];
   var _g = React.useState(false),
-    isControlsActive = _g[0],
-    setIsControlsActive = _g[1];
+    isFullscreen = _g[0],
+    setIsFullscreen = _g[1];
+  var _h = React.useState(false),
+    isControlsActive = _h[0],
+    setIsControlsActive = _h[1];
   var videoPlayerRef = React.useRef(null);
   var controlRef = React.useRef(null);
   var playerContainerRef = React.useRef(null);
-  var _h = React.useState([]),
-    subtitles = _h[0],
-    setSubtitles = _h[1];
-  var _j = React.useState(''),
-    currentSubtitle = _j[0],
-    setCurrentSubtitle = _j[1];
+  var _j = React.useState([]),
+    subtitles = _j[0],
+    setSubtitles = _j[1];
+  var _k = React.useState(''),
+    currentSubtitle = _k[0],
+    setCurrentSubtitle = _k[1];
   var lastSubtitleIndexRef = React.useRef(null);
   var lastPlaybackTimeRef = React.useRef(0);
   var lastCallTimeRef = React.useRef(Date.now());
@@ -88787,9 +88826,16 @@ function usePlayerControls(_a) {
     var handleFullscreenChange = function handleFullscreenChange() {
       setIsFullscreen(!!document.fullscreenElement);
     };
+    var handlePiPChange = function handlePiPChange() {
+      setIsPiPActive(!!document.pictureInPictureElement);
+    };
     document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('enterpictureinpicture', handlePiPChange);
+    document.addEventListener('leavepictureinpicture', handlePiPChange);
     return function () {
       document.removeEventListener('fullscreenchange', handleFullscreenChange);
+      document.removeEventListener('enterpictureinpicture', handlePiPChange);
+      document.removeEventListener('leavepictureinpicture', handlePiPChange);
     };
   }, []);
   React.useEffect(function () {
@@ -88979,6 +89025,22 @@ function usePlayerControls(_a) {
       playerContainer.requestFullscreen()["catch"](console.error);
     }
   };
+  var handlePictureInPicture = function handlePictureInPicture() {
+    var _a;
+    var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
+    if (!videoElement || !(videoElement instanceof HTMLVideoElement)) {
+      return;
+    }
+    if (!document.pictureInPictureEnabled) {
+      console.warn('Picture-in-Picture is not supported in this browser');
+      return;
+    }
+    if (document.pictureInPictureElement) {
+      document.exitPictureInPicture()["catch"](console.error);
+    } else {
+      videoElement.requestPictureInPicture()["catch"](console.error);
+    }
+  };
   var handleKeyDown = React.useCallback(function (event) {
     if ('code' in event) {
       switch (event.code) {
@@ -89045,6 +89107,7 @@ function usePlayerControls(_a) {
     playerContainerRef: playerContainerRef,
     playPauseHandler: playPauseHandler,
     handleFullScreen: handleFullScreen,
+    handlePictureInPicture: handlePictureInPicture,
     videoPlayerRef: videoPlayerRef,
     volume: volume,
     muted: muted,
@@ -89068,6 +89131,7 @@ function usePlayerControls(_a) {
     isSubtitlesChecked: isSubtitlesChecked,
     toggleSubtitlesCheck: toggleSubtitlesCheck,
     isFullscreen: isFullscreen,
+    isPiPActive: isPiPActive,
     isControlsActive: isControlsActive,
     currentSubtitle: currentSubtitle,
     setCurrentSubtitle: setCurrentSubtitle,
@@ -89180,9 +89244,11 @@ var VideoPlayer = function VideoPlayer(_a) {
     showDownload = _a.showDownload,
     downloadUrl = _a.downloadUrl,
     downloadFileName = _a.downloadFileName,
-    onDownload = _a.onDownload;
+    onDownload = _a.onDownload,
+    _j = _a.showPictureInPicture,
+    showPictureInPicture = _j === void 0 ? true : _j;
   var videoRef = React.useRef(null);
-  var _j = usePlayerControls({
+  var _k = usePlayerControls({
       startTime: startTime,
       setLoading: setLoading,
       handleTrackProgress: handleTrackProgress,
@@ -89192,37 +89258,39 @@ var VideoPlayer = function VideoPlayer(_a) {
       setIsPlaying: setIsPlaying,
       shouldPlayerBeFocusedOnSpaceClick: shouldPlayerBeFocusedOnSpaceClick
     }),
-    mouseMoveHandler = _j.mouseMoveHandler,
-    playerContainerRef = _j.playerContainerRef,
-    playPauseHandler = _j.playPauseHandler,
-    handleFullScreen = _j.handleFullScreen,
-    videoPlayerRef = _j.videoPlayerRef,
-    playing = _j.playing,
-    volume = _j.volume,
-    muted = _j.muted,
-    progressHandler = _j.progressHandler,
-    bufferStartHandler = _j.bufferStartHandler,
-    bufferEndHandler = _j.bufferEndHandler,
-    onPlayerStart = _j.onPlayerStart,
-    setVideoState = _j.setVideoState,
-    playbackRate = _j.playbackRate,
-    controlRef = _j.controlRef,
-    rewindHandler = _j.rewindHandler,
-    handleFastForward = _j.handleFastForward,
-    formatCurrentTime = _j.formatCurrentTime,
-    played = _j.played,
-    onSeekMouseDownHandler = _j.onSeekMouseDownHandler,
-    seekHandler = _j.seekHandler,
-    seekMouseUpHandler = _j.seekMouseUpHandler,
-    muteHandler = _j.muteHandler,
-    volumeChangeHandler = _j.volumeChangeHandler,
-    formatDuration = _j.formatDuration,
-    isSubtitlesChecked = _j.isSubtitlesChecked,
-    toggleSubtitlesCheck = _j.toggleSubtitlesCheck,
-    isFullscreen = _j.isFullscreen,
-    isControlsActive = _j.isControlsActive,
-    currentSubtitle = _j.currentSubtitle,
-    setCurrentSubtitle = _j.setCurrentSubtitle;
+    mouseMoveHandler = _k.mouseMoveHandler,
+    playerContainerRef = _k.playerContainerRef,
+    playPauseHandler = _k.playPauseHandler,
+    handleFullScreen = _k.handleFullScreen,
+    handlePictureInPicture = _k.handlePictureInPicture,
+    videoPlayerRef = _k.videoPlayerRef,
+    playing = _k.playing,
+    volume = _k.volume,
+    muted = _k.muted,
+    progressHandler = _k.progressHandler,
+    bufferStartHandler = _k.bufferStartHandler,
+    bufferEndHandler = _k.bufferEndHandler,
+    onPlayerStart = _k.onPlayerStart,
+    setVideoState = _k.setVideoState,
+    playbackRate = _k.playbackRate,
+    controlRef = _k.controlRef,
+    rewindHandler = _k.rewindHandler,
+    handleFastForward = _k.handleFastForward,
+    formatCurrentTime = _k.formatCurrentTime,
+    played = _k.played,
+    onSeekMouseDownHandler = _k.onSeekMouseDownHandler,
+    seekHandler = _k.seekHandler,
+    seekMouseUpHandler = _k.seekMouseUpHandler,
+    muteHandler = _k.muteHandler,
+    volumeChangeHandler = _k.volumeChangeHandler,
+    formatDuration = _k.formatDuration,
+    isSubtitlesChecked = _k.isSubtitlesChecked,
+    toggleSubtitlesCheck = _k.toggleSubtitlesCheck,
+    isFullscreen = _k.isFullscreen,
+    isPiPActive = _k.isPiPActive,
+    isControlsActive = _k.isControlsActive,
+    currentSubtitle = _k.currentSubtitle,
+    setCurrentSubtitle = _k.setCurrentSubtitle;
   var setupHLSSubtitleTracking = useHLSSubtitles({
     videoPlayerRef: videoPlayerRef,
     isSubtitlesChecked: isSubtitlesChecked,
@@ -89321,12 +89389,14 @@ var VideoPlayer = function VideoPlayer(_a) {
         volumeChangeHandler: volumeChangeHandler,
         formatDuration: formatDuration,
         handleFullScreen: handleFullScreen,
+        handlePictureInPicture: handlePictureInPicture,
         playing: playing,
         isSubtitlesChecked: isSubtitlesChecked,
         toggleSubtitlesCheck: toggleSubtitlesCheck,
         isFavorite: isFavorite,
         toggleIsFavorite: toggleFavorite,
         isFullscreen: isFullscreen,
+        isPiPActive: isPiPActive,
         subtitle: !!subtitleUrl || ((_d = (_c = (_b = videoPlayerRef.current) === null || _b === void 0 ? void 0 : _b.getInternalPlayer()) === null || _c === void 0 ? void 0 : _c.textTracks) === null || _d === void 0 ? void 0 : _d.length) > 0,
         handleSkipBackward: handlePreviousVideo,
         handleSkipForward: handleNextVideo,
@@ -89336,7 +89406,8 @@ var VideoPlayer = function VideoPlayer(_a) {
         showDownload: showDownload,
         downloadUrl: downloadUrl,
         downloadFileName: downloadFileName,
-        onDownload: onDownload
+        onDownload: onDownload,
+        showPictureInPicture: showPictureInPicture
       })
     })]
   });

package/dist/components/index.esm.js

@@ -1,3 +1,3 @@
-export { A as AudioPlayer, k as Badge, h as Breadcrumb, B as Button, e as Checkbox, j as ColorPicker, o as ColumnNavigation, C as CourseCard, c as CustomSwitcher, m as CustomTooltip, d as DatePicker, u as DrawerTips, D as DropDown, G as GridActionMenu, L as Loader, N as NavigationBar, f as Pagination, P as PhoneCountryCode, R as RadioButton, v as RangeSlider, S as SearchInput, n as SplashScreen, p as StatusIndicator, s as TabNavigation, q as TabPanel, b as ThemeProvider, i as Tile, l as TooltipHeight, T as TranslationProvider, U as Uploader, V as VideoPlayer, t as activeTabClassName } from './index-0oGMHkIv.esm.js';
+export { A as AudioPlayer, k as Badge, h as Breadcrumb, B as Button, e as Checkbox, j as ColorPicker, o as ColumnNavigation, C as CourseCard, c as CustomSwitcher, m as CustomTooltip, d as DatePicker, u as DrawerTips, D as DropDown, G as GridActionMenu, L as Loader, N as NavigationBar, f as Pagination, P as PhoneCountryCode, R as RadioButton, v as RangeSlider, S as SearchInput, n as SplashScreen, p as StatusIndicator, s as TabNavigation, q as TabPanel, b as ThemeProvider, i as Tile, l as TooltipHeight, T as TranslationProvider, U as Uploader, V as VideoPlayer, t as activeTabClassName } from './index-C5MULDlh.esm.js';
 import 'react';
 import 'react-dom';

package/dist/icons/PictureInPicture.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SvgProps } from './svgTypes.interface';
+export declare const PictureInPictureIcon: React.FC<SvgProps>;

package/dist/icons/PictureInPicture.js

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var PictureInPictureIcon = function (_a) {
+    var className = _a.className, onClick = _a.onClick, props = __rest(_a, ["className", "onClick"]);
+    return (_jsx("svg", __assign({ width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: className, onClick: onClick }, props, { children: _jsx("path", { d: 'M19 7H22V17C22 18.1 21.1 19 20 19H4C2.9 19 2 18.1 2 17V7C2 5.9 2.9 5 4 5H17V7H4V17H13V15H20V7H19ZM15 13H22V7H15V13Z', fill: 'white' }) })));
+};
+//# sourceMappingURL=PictureInPicture.js.map

package/dist/icons/PictureInPicture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictureInPicture.js","sourceRoot":"","sources":["../../src/icons/PictureInPicture.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAM,CAAC,IAAM,oBAAoB,GAAuB,UAAC,EAAgC;IAA9B,IAAA,SAAS,eAAA,EAAE,OAAO,aAAA,EAAK,KAAK,cAA9B,wBAAgC,CAAF;IACrF,OAAO,CACL,uBACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,IACZ,KAAK,cAET,eACE,CAAC,EAAC,qHAAqH,EACvH,IAAI,EAAC,OAAO,GACZ,IACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/icons/components/VideoPlayer/Controls/Controls.interface.d.ts

@@ -17,12 +17,14 @@ export interface ControlsProps {
     volumeChangeHandler: (event: ChangeEvent<HTMLInputElement>) => void;
     formatDuration: string;
     handleFullScreen: () => void;
+    handlePictureInPicture: () => void;
     playing: boolean;
     isSubtitlesChecked: boolean;
     toggleSubtitlesCheck: () => void;
     isFavorite: boolean;
     toggleIsFavorite: () => Promise<void>;
     isFullscreen: boolean;
+    isPiPActive: boolean;
     subtitle?: boolean;
     handleSkipBackward?: () => void;
     handleSkipForward?: () => void;
@@ -33,4 +35,5 @@ export interface ControlsProps {
     downloadUrl?: string;
     downloadFileName?: string;
     onDownload?: () => void;
+    showPictureInPicture?: boolean;
 }

package/dist/icons/components/VideoPlayer/Controls/Controls.styles.d.ts

@@ -12,6 +12,7 @@ export declare const StyledHeartIconContainer: import("styled-components/dist/ty
 export declare const StyledDownloadIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledSubtitlesIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledFullscreenIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledPictureInPictureIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledVolumeIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledPlayPauseIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledRewindIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/icons/components/VideoPlayer/Player.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { PlayerProps } from './Player.interface';
-export declare const VideoPlayer: ({ customStyles, startTime, loading, setLoading, handleTrackProgress, url, subtitle: subtitleUrl, handleNextVideo, handlePreviousVideo, isNextVideo, isPreviousVideo, isPlaying, setIsPlaying, shouldPlayerBeFocusedOnSpaceClick, showFavorite, isFavorite, toggleFavorite, showDownload, downloadUrl, downloadFileName, onDownload, }: PlayerProps) => ReactElement;
+export declare const VideoPlayer: ({ customStyles, startTime, loading, setLoading, handleTrackProgress, url, subtitle: subtitleUrl, handleNextVideo, handlePreviousVideo, isNextVideo, isPreviousVideo, isPlaying, setIsPlaying, shouldPlayerBeFocusedOnSpaceClick, showFavorite, isFavorite, toggleFavorite, showDownload, downloadUrl, downloadFileName, onDownload, showPictureInPicture, }: PlayerProps) => ReactElement;
 export default VideoPlayer;