suada-components 1.7.0 → 1.9.0

package/dist/components/{index-C5MULDlh.esm.js → index-DKAGRUEW.esm.js}

@@ -32377,7 +32377,7 @@ var CourseStatusContainer = dt.div(templateObject_13$2 || (templateObject_13$2 =
 });
 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$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 StyledCardBottomContainer = dt.div(templateObject_16$2 || (templateObject_16$2 = __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) {
   var disabled = _a.disabled;
@@ -32426,7 +32426,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$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 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$2, 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,
@@ -42811,7 +42811,7 @@ var InputFileContainer = dt.div(templateObject_12$1 || (templateObject_12$1 = __
 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$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"
+var InputLabel = dt.label(templateObject_16$1 || (templateObject_16$1 = __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
 ])));
 // UploaderButton
@@ -42833,7 +42833,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$1, 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$1, 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 +81355,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.youtube,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerYouTube' */
-	      './YouTube-DJZyY4jW.esm.js'
+	      './YouTube-CmnnzZvk.esm.js'
 	    ).then(function (n) { return n.Y; }))
 	  },
 	  {
@@ -81364,7 +81364,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.soundcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerSoundCloud' */
-	      './SoundCloud-BG1mh5fx.esm.js'
+	      './SoundCloud-BTHoyFWT.esm.js'
 	    ).then(function (n) { return n.S; }))
 	  },
 	  {
@@ -81373,7 +81373,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vimeo,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerVimeo' */
-	      './Vimeo-U2HYvdiG.esm.js'
+	      './Vimeo-CHlHIswX.esm.js'
 	    ).then(function (n) { return n.V; }))
 	  },
 	  {
@@ -81382,7 +81382,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mux,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerMux' */
-	      './Mux-CiE-LfDW.esm.js'
+	      './Mux-B9YP-rFr.esm.js'
 	    ).then(function (n) { return n.M; }))
 	  },
 	  {
@@ -81391,7 +81391,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.facebook,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerFacebook' */
-	      './Facebook-CHgu-1qk.esm.js'
+	      './Facebook-D9Ak6ZJU.esm.js'
 	    ).then(function (n) { return n.F; }))
 	  },
 	  {
@@ -81400,7 +81400,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.streamable,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerStreamable' */
-	      './Streamable-3QXSsimo.esm.js'
+	      './Streamable-DsfQCy3p.esm.js'
 	    ).then(function (n) { return n.S; }))
 	  },
 	  {
@@ -81409,7 +81409,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.wistia,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerWistia' */
-	      './Wistia-BNvoofR9.esm.js'
+	      './Wistia-D-eYyONb.esm.js'
 	    ).then(function (n) { return n.W; }))
 	  },
 	  {
@@ -81418,7 +81418,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.twitch,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerTwitch' */
-	      './Twitch-B2wmDlW8.esm.js'
+	      './Twitch-D1BOr8hj.esm.js'
 	    ).then(function (n) { return n.T; }))
 	  },
 	  {
@@ -81427,7 +81427,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.dailymotion,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerDailyMotion' */
-	      './DailyMotion-D6-bQSDC.esm.js'
+	      './DailyMotion-BmnymjR1.esm.js'
 	    ).then(function (n) { return n.D; }))
 	  },
 	  {
@@ -81436,7 +81436,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mixcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerMixcloud' */
-	      './Mixcloud-HlioccZN.esm.js'
+	      './Mixcloud-BobSN3YI.esm.js'
 	    ).then(function (n) { return n.M; }))
 	  },
 	  {
@@ -81445,7 +81445,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vidyard,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerVidyard' */
-	      './Vidyard-stasLAXI.esm.js'
+	      './Vidyard-C1csjpQH.esm.js'
 	    ).then(function (n) { return n.V; }))
 	  },
 	  {
@@ -81454,7 +81454,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.kaltura,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerKaltura' */
-	      './Kaltura-BKTRnPwX.esm.js'
+	      './Kaltura-DPaEN-dq.esm.js'
 	    ).then(function (n) { return n.K; }))
 	  },
 	  {
@@ -81466,7 +81466,7 @@ function requirePlayers () {
 	    },
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerFilePlayer' */
-	      './FilePlayer-CnFGUWCJ.esm.js'
+	      './FilePlayer-wg9lyafD.esm.js'
 	    ).then(function (n) { return n.F; }))
 	  }
 	];
@@ -82287,7 +82287,7 @@ function requireReactPlayer () {
 	var import_Player = __toESM(/*@__PURE__*/ requirePlayer());
 	const Preview = (0, import_utils.lazy)(() => import(
 	  /* webpackChunkName: 'reactPlayerPreview' */
-	  './Preview-BDrq-vcV.esm.js'
+	  './Preview-XcTlhHT1.esm.js'
 	).then(function (n) { return n.P; }));
 	const IS_BROWSER = typeof window !== "undefined" && window.document && typeof document !== "undefined";
 	const IS_GLOBAL = typeof commonjsGlobal !== "undefined" && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -82529,32 +82529,36 @@ 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: 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"])), {
+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  /* Responsive padding adjustments */\n  @media screen and (max-width: 768px) {\n    padding: 8px 12px;\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    padding: 6px 8px;\n    gap: 8px;\n  }\n\n  svg {\n    cursor: pointer;\n    transition: transform 0.2s ease;\n\n    /* Desktop and large screens */\n    @media screen and (min-width: 1501px) {\n      width: 24px;\n      height: 24px;\n    }\n\n    /* Medium to large screens */\n    @media screen and (max-width: 1500px) {\n      width: 20px;\n      height: 20px;\n    }\n\n    /* Small to medium screens */\n    @media screen and (max-width: 1000px) {\n      width: 18px;\n      height: 18px;\n    }\n\n    /* Tablet screens */\n    @media screen and (max-width: 768px) {\n      width: 20px;\n      height: 20px;\n    }\n\n    /* Mobile screens */\n    @media screen and (max-width: 480px) {\n      width: 18px;\n      height: 18px;\n    }\n\n    /* Very small mobile screens */\n    @media screen and (max-width: 320px) {\n      width: 16px;\n      height: 16px;\n    }\n\n    &:hover {\n      transform: scale(1.1);\n    }\n\n    &:active {\n      transform: scale(0.95);\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  /* Responsive padding adjustments */\n  @media screen and (max-width: 768px) {\n    padding: 8px 12px;\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    padding: 6px 8px;\n    gap: 8px;\n  }\n\n  svg {\n    cursor: pointer;\n    transition: transform 0.2s ease;\n\n    /* Desktop and large screens */\n    @media screen and (min-width: 1501px) {\n      width: 24px;\n      height: 24px;\n    }\n\n    /* Medium to large screens */\n    @media screen and (max-width: 1500px) {\n      width: 20px;\n      height: 20px;\n    }\n\n    /* Small to medium screens */\n    @media screen and (max-width: 1000px) {\n      width: 18px;\n      height: 18px;\n    }\n\n    /* Tablet screens */\n    @media screen and (max-width: 768px) {\n      width: 20px;\n      height: 20px;\n    }\n\n    /* Mobile screens */\n    @media screen and (max-width: 480px) {\n      width: 18px;\n      height: 18px;\n    }\n\n    /* Very small mobile screens */\n    @media screen and (max-width: 320px) {\n      width: 16px;\n      height: 16px;\n    }\n\n    &:hover {\n      transform: scale(1.1);\n    }\n\n    &:active {\n      transform: scale(0.95);\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) {
+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  /* Enhanced mobile touch target */\n  @media (hover: none) and (pointer: coarse) {\n    height: 4px;\n  }\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    /* Larger touch target for mobile */\n    @media (hover: none) and (pointer: coarse) {\n      width: 16px;\n      height: 16px;\n    }\n\n    /* Responsive adjustments */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\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    border: none;\n\n    /* Larger touch target for mobile */\n    @media (hover: none) and (pointer: coarse) {\n      width: 16px;\n      height: 16px;\n    }\n\n    /* Responsive adjustments */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n\n  /* Enhance visibility on focus for accessibility */\n  &:focus {\n    outline: 2px solid var(--brand-colors-accent);\n    outline-offset: 2px;\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  /* Enhanced mobile touch target */\n  @media (hover: none) and (pointer: coarse) {\n    height: 4px;\n  }\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    /* Larger touch target for mobile */\n    @media (hover: none) and (pointer: coarse) {\n      width: 16px;\n      height: 16px;\n    }\n\n    /* Responsive adjustments */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\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    border: none;\n\n    /* Larger touch target for mobile */\n    @media (hover: none) and (pointer: coarse) {\n      width: 16px;\n      height: 16px;\n    }\n\n    /* Responsive adjustments */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n\n  /* Enhance visibility on focus for accessibility */\n  &:focus {\n    outline: 2px solid var(--brand-colors-accent);\n    outline-offset: 2px;\n  }\n"])), function (_a) {
   var value = _a.value;
   return "linear-gradient(\n    to right,\n    var(--brand-colors-accent) 0%,\n    var(--brand-colors-accent) ".concat(value, "%,\n    var(--level-dark-200) ").concat(value, "%,\n    var(--level-dark-200) 100%\n  )");
 });
-var StyledVolumeWrapper = dt.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n\n  & > svg {\n    cursor: pointer;\n  }\n\n  & > input {\n    display: none;\n  }\n\n  &:hover > input {\n    display: block;\n  }\n"], ["\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n\n  & > svg {\n    cursor: pointer;\n  }\n\n  & > input {\n    display: none;\n  }\n\n  &:hover > input {\n    display: block;\n  }\n"])));
-var StyledVolumeSlider = dt.input(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  width: 100px;\n  height: 4px;\n  border-radius: 5px;\n  background: ", ";\n  outline: none;\n  -webkit-transition: 0.2s;\n  transition: opacity 0.2s;\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\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(--neutral-colors-light);\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(--neutral-colors-light);\n    cursor: pointer;\n  }\n"], ["\n  width: 100px;\n  height: 4px;\n  border-radius: 5px;\n  background: ", ";\n  outline: none;\n  -webkit-transition: 0.2s;\n  transition: opacity 0.2s;\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\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(--neutral-colors-light);\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(--neutral-colors-light);\n    cursor: pointer;\n  }\n"])), function (_a) {
+var StyledVolumeWrapper = dt.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n\n  /* Responsive gap adjustments */\n  @media screen and (max-width: 768px) {\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    gap: 8px;\n  }\n\n  & > svg {\n    cursor: pointer;\n  }\n\n  & > input {\n    display: none;\n  }\n\n  &:hover > input {\n    display: block;\n  }\n\n  /* Always show volume slider on touch devices */\n  @media (hover: none) and (pointer: coarse) {\n    & > input {\n      display: block;\n    }\n  }\n\n  /* Hide volume slider on very small screens */\n  @media screen and (max-width: 320px) {\n    & > input {\n      display: none !important;\n    }\n  }\n"], ["\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n\n  /* Responsive gap adjustments */\n  @media screen and (max-width: 768px) {\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    gap: 8px;\n  }\n\n  & > svg {\n    cursor: pointer;\n  }\n\n  & > input {\n    display: none;\n  }\n\n  &:hover > input {\n    display: block;\n  }\n\n  /* Always show volume slider on touch devices */\n  @media (hover: none) and (pointer: coarse) {\n    & > input {\n      display: block;\n    }\n  }\n\n  /* Hide volume slider on very small screens */\n  @media screen and (max-width: 320px) {\n    & > input {\n      display: none !important;\n    }\n  }\n"])));
+var StyledVolumeSlider = dt.input(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  width: 100px;\n  height: 4px;\n  border-radius: 5px;\n  background: ", ";\n  outline: none;\n  -webkit-transition: 0.2s;\n  transition: opacity 0.2s;\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\n\n  /* Responsive width adjustments */\n  @media screen and (max-width: 768px) {\n    width: 80px;\n  }\n\n  @media screen and (max-width: 480px) {\n    width: 60px;\n  }\n\n  @media screen and (max-width: 320px) {\n    width: 50px;\n  }\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(--neutral-colors-light);\n    cursor: pointer;\n\n    /* Responsive thumb size */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n\n  &::-moz-range-thumb {\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: var(--neutral-colors-light);\n    cursor: pointer;\n    border: none;\n\n    /* Responsive thumb size */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n"], ["\n  width: 100px;\n  height: 4px;\n  border-radius: 5px;\n  background: ", ";\n  outline: none;\n  -webkit-transition: 0.2s;\n  transition: opacity 0.2s;\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\n\n  /* Responsive width adjustments */\n  @media screen and (max-width: 768px) {\n    width: 80px;\n  }\n\n  @media screen and (max-width: 480px) {\n    width: 60px;\n  }\n\n  @media screen and (max-width: 320px) {\n    width: 50px;\n  }\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(--neutral-colors-light);\n    cursor: pointer;\n\n    /* Responsive thumb size */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n\n  &::-moz-range-thumb {\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: var(--neutral-colors-light);\n    cursor: pointer;\n    border: none;\n\n    /* Responsive thumb size */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n"])), function (_a) {
   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  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"])), {
+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  /* Responsive gap adjustments */\n  @media screen and (max-width: 768px) {\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    gap: 8px;\n  }\n\n  @media screen and (max-width: 320px) {\n    gap: 6px;\n  }\n\n  /* Hide rewind/forward controls on very small screens */\n  @media screen and (max-width: 480px) {\n    .rewind-control,\n    .forward-control {\n      display: none;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex: 1;\n  \n  /* Responsive gap adjustments */\n  @media screen and (max-width: 768px) {\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    gap: 8px;\n  }\n\n  @media screen and (max-width: 320px) {\n    gap: 6px;\n  }\n\n  /* Hide rewind/forward controls on very small screens */\n  @media screen and (max-width: 480px) {\n    .rewind-control,\n    .forward-control {\n      display: none;\n    }\n  }\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  /* Responsive gap adjustments */\n  @media screen and (max-width: 768px) {\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    gap: 8px;\n    \n    /* Hide less essential controls on mobile */\n    .skip-control,\n    .favorite-control,\n    .download-control {\n      display: none;\n    }\n  }\n\n  @media screen and (max-width: 320px) {\n    gap: 6px;\n  }\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  /* Responsive gap adjustments */\n  @media screen and (max-width: 768px) {\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    gap: 8px;\n    \n    /* Hide less essential controls on mobile */\n    .skip-control,\n    .favorite-control,\n    .download-control {\n      display: none;\n    }\n  }\n\n  @media screen and (max-width: 320px) {\n    gap: 6px;\n  }\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  font-size: 14px;\n  \n  /* Responsive font size adjustments */\n  @media screen and (max-width: 768px) {\n    font-size: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    font-size: 11px;\n  }\n\n  @media screen and (max-width: 320px) {\n    font-size: 10px;\n  }\n"], ["\n  color: #FFFFFF;\n  ", "\n  text-align: right;\n  white-space: nowrap;\n  font-size: 14px;\n  \n  /* Responsive font size adjustments */\n  @media screen and (max-width: 768px) {\n    font-size: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    font-size: 11px;\n  }\n\n  @media screen and (max-width: 320px) {\n    font-size: 10px;\n  }\n"
+// Base styles for icon containers
+])), {
   fontStyle: 'descriptor'
 });
-var StyledHeartIconContainer = dt.div(templateObject_8 || (templateObject_8 = __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 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 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;
+// Base styles for icon containers
+var BaseIconContainer = dt.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  min-width: 24px;\n  min-height: 24px;\n  border-radius: 4px;\n  transition: background-color 0.2s ease, transform 0.1s ease;\n\n  /* Enhanced touch targets for mobile */\n  @media (hover: none) and (pointer: coarse) {\n    min-width: 32px;\n    min-height: 32px;\n  }\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n    \n    & > svg > path {\n      fill: #08C694 !important;\n    }\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  /* Focus styles for accessibility */\n  &:focus-visible {\n    outline: 2px solid var(--brand-colors-accent);\n    outline-offset: 2px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  min-width: 24px;\n  min-height: 24px;\n  border-radius: 4px;\n  transition: background-color 0.2s ease, transform 0.1s ease;\n\n  /* Enhanced touch targets for mobile */\n  @media (hover: none) and (pointer: coarse) {\n    min-width: 32px;\n    min-height: 32px;\n  }\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n    \n    & > svg > path {\n      fill: #08C694 !important;\n    }\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  /* Focus styles for accessibility */\n  &:focus-visible {\n    outline: 2px solid var(--brand-colors-accent);\n    outline-offset: 2px;\n  }\n"])));
+var StyledHeartIconContainer = dt(BaseIconContainer)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  /* Additional specific styles if needed */\n"], ["\n  /* Additional specific styles if needed */\n"])));
+var StyledDownloadIconContainer = dt(BaseIconContainer)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\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    @media screen and (max-width: 768px) {\n      width: 20px !important;\n      height: 20px !important;\n    }\n\n    @media screen and (max-width: 480px) {\n      width: 18px !important;\n      height: 18px !important;\n    }\n  }\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    @media screen and (max-width: 768px) {\n      width: 20px !important;\n      height: 20px !important;\n    }\n\n    @media screen and (max-width: 480px) {\n      width: 18px !important;\n      height: 18px !important;\n    }\n  }\n"])));
+var StyledSubtitlesIconContainer = dt(BaseIconContainer)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  /* Additional specific styles if needed */\n"], ["\n  /* Additional specific styles if needed */\n"])));
+var StyledFullscreenIconContainer = dt(BaseIconContainer)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  /* Additional specific styles if needed */\n"], ["\n  /* Additional specific styles if needed */\n"])));
+var StyledPictureInPictureIconContainer = dt(BaseIconContainer)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  &.pip-active {\n    background-color: rgba(8, 198, 148, 0.2);\n    \n    & > svg > path {\n      fill: #08C694 !important;\n    }\n  }\n"], ["\n  &.pip-active {\n    background-color: rgba(8, 198, 148, 0.2);\n    \n    & > svg > path {\n      fill: #08C694 !important;\n    }\n  }\n"])));
+var StyledVolumeIconContainer = dt(BaseIconContainer)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  /* Additional specific styles if needed */\n"], ["\n  /* Additional specific styles if needed */\n"])));
+var StyledPlayPauseIconContainer = dt(BaseIconContainer)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  /* Additional specific styles if needed */\n"], ["\n  /* Additional specific styles if needed */\n"])));
+var StyledRewindIconContainer = dt(BaseIconContainer)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  /* Additional specific styles if needed */\n"], ["\n  /* Additional specific styles if needed */\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, templateObject_16;
 
 var PLAYBACK_SPEED_LIST = [{
   label: 'playback_speed.2x',
@@ -82843,8 +82847,9 @@ var Controls = function Controls(_a) {
           children: playing ? jsxRuntimeExports.jsx(PauseIcon, {}) : jsxRuntimeExports.jsx(PlayIcon, {})
         })
       }), jsxRuntimeExports.jsx(CustomTooltip, {
-        title: "Rewind 10 seconds",
+        title: "Rewind 5 seconds",
         children: jsxRuntimeExports.jsx(StyledRewindIconContainer, {
+          className: "rewind-control",
           children: jsxRuntimeExports.jsx(RewindIcon, {
             onClick: rewindHandler
           })
@@ -82852,6 +82857,7 @@ var Controls = function Controls(_a) {
       }), jsxRuntimeExports.jsx(CustomTooltip, {
         title: "Forward 10 seconds",
         children: jsxRuntimeExports.jsx(StyledRewindIconContainer, {
+          className: "forward-control",
           children: jsxRuntimeExports.jsx(RewindIcon, {
             forward: true,
             onClick: handleFastForward
@@ -82876,6 +82882,7 @@ var Controls = function Controls(_a) {
       children: [handleSkipBackward && jsxRuntimeExports.jsx(CustomTooltip, {
         title: "Previous video",
         children: jsxRuntimeExports.jsx(StyledRewindIconContainer, {
+          className: "skip-control",
           children: jsxRuntimeExports.jsx(SkipIcon, {
             onClick: function onClick() {
               if (!isPreviousVideo) return;
@@ -82887,6 +82894,7 @@ var Controls = function Controls(_a) {
       }), handleSkipForward && jsxRuntimeExports.jsx(CustomTooltip, {
         title: "Next video",
         children: jsxRuntimeExports.jsx(StyledRewindIconContainer, {
+          className: "skip-control",
           children: jsxRuntimeExports.jsx(SkipIcon, {
             forward: true,
             onClick: function onClick() {
@@ -82899,6 +82907,7 @@ var Controls = function Controls(_a) {
       }), showFavorite && jsxRuntimeExports.jsx(CustomTooltip, {
         title: isFavorite ? 'Remove from favorites' : 'Add to favorites',
         children: jsxRuntimeExports.jsx(StyledHeartIconContainer, {
+          className: "favorite-control",
           children: jsxRuntimeExports.jsx(HeartIcon, {
             active: isFavorite,
             onClick: toggleIsFavorite
@@ -82907,6 +82916,7 @@ var Controls = function Controls(_a) {
       }), showDownload && downloadUrl && jsxRuntimeExports.jsx(CustomTooltip, {
         title: "Download video",
         children: jsxRuntimeExports.jsx(StyledDownloadIconContainer, {
+          className: "download-control",
           children: jsxRuntimeExports.jsx(DownloadIcon, {
             onClick: handleDownloadClick
           })
@@ -88728,6 +88738,247 @@ var useEventListener = function useEventListener(eventName, handler, element, sh
   }, [eventName, element, shouldRun]);
 };
 
+/**
+ * Global Picture-in-Picture Manager
+ * This module manages PiP state across component unmounts and route changes
+ */
+var PictureInPictureManager = /** @class */function () {
+  function PictureInPictureManager() {
+    this.videoElement = null;
+    this.pipContainer = null;
+    this.currentVideoState = null;
+    this.onStateChange = null;
+    // Listen for PiP events globally
+    document.addEventListener('leavepictureinpicture', this.handlePiPExit.bind(this));
+    document.addEventListener('enterpictureinpicture', this.handlePiPEnter.bind(this));
+  }
+  /**
+   * Register a video element for PiP management
+   */
+  PictureInPictureManager.prototype.registerVideo = function (videoElement, url, onStateChange) {
+    this.videoElement = videoElement;
+    this.onStateChange = onStateChange || null;
+    // Store current video state
+    this.currentVideoState = {
+      url: url,
+      currentTime: videoElement.currentTime,
+      isPlaying: !videoElement.paused,
+      volume: videoElement.volume,
+      playbackRate: videoElement.playbackRate
+    };
+    // Add listeners to track state changes
+    videoElement.addEventListener('timeupdate', this.handleTimeUpdate.bind(this));
+    videoElement.addEventListener('play', this.handlePlayStateChange.bind(this));
+    videoElement.addEventListener('pause', this.handlePlayStateChange.bind(this));
+    videoElement.addEventListener('volumechange', this.handleVolumeChange.bind(this));
+    videoElement.addEventListener('ratechange', this.handleRateChange.bind(this));
+  };
+  /**
+   * Unregister the current video element
+   */
+  PictureInPictureManager.prototype.unregisterVideo = function () {
+    if (this.videoElement) {
+      this.videoElement.removeEventListener('timeupdate', this.handleTimeUpdate.bind(this));
+      this.videoElement.removeEventListener('play', this.handlePlayStateChange.bind(this));
+      this.videoElement.removeEventListener('pause', this.handlePlayStateChange.bind(this));
+      this.videoElement.removeEventListener('volumechange', this.handleVolumeChange.bind(this));
+      this.videoElement.removeEventListener('ratechange', this.handleRateChange.bind(this));
+    }
+    this.videoElement = null;
+    this.onStateChange = null;
+  };
+  /**
+   * Create a persistent video element for PiP
+   */
+  PictureInPictureManager.prototype.createPersistentVideo = function (originalVideo) {
+    var persistentVideo = originalVideo.cloneNode(true);
+    // Copy all relevant properties
+    persistentVideo.src = originalVideo.src;
+    persistentVideo.currentTime = originalVideo.currentTime;
+    persistentVideo.volume = originalVideo.volume;
+    persistentVideo.playbackRate = originalVideo.playbackRate;
+    persistentVideo.muted = originalVideo.muted;
+    // Set properties for PiP
+    persistentVideo.style.position = 'fixed';
+    persistentVideo.style.top = '-9999px';
+    persistentVideo.style.left = '-9999px';
+    persistentVideo.style.width = '1px';
+    persistentVideo.style.height = '1px';
+    persistentVideo.style.opacity = '0';
+    persistentVideo.style.pointerEvents = 'none';
+    return persistentVideo;
+  };
+  /**
+   * Enter picture-in-picture mode with persistence
+   */
+  PictureInPictureManager.prototype.enterPiP = function () {
+    return __awaiter(this, void 0, void 0, function () {
+      var persistentVideo_1, error_1;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!this.videoElement || !document.pictureInPictureEnabled) {
+              return [2 /*return*/];
+            }
+            _a.label = 1;
+          case 1:
+            _a.trys.push([1, 6,, 7]);
+            if (!document.pictureInPictureElement) return [3 /*break*/, 3];
+            return [4 /*yield*/, document.exitPictureInPicture()];
+          case 2:
+            _a.sent();
+            _a.label = 3;
+          case 3:
+            // Create a container if it doesn't exist
+            if (!this.pipContainer) {
+              this.pipContainer = document.createElement('div');
+              this.pipContainer.id = 'suada-pip-container';
+              this.pipContainer.style.position = 'fixed';
+              this.pipContainer.style.top = '-9999px';
+              this.pipContainer.style.left = '-9999px';
+              this.pipContainer.style.width = '1px';
+              this.pipContainer.style.height = '1px';
+              this.pipContainer.style.zIndex = '-1';
+              document.body.appendChild(this.pipContainer);
+            }
+            persistentVideo_1 = this.createPersistentVideo(this.videoElement);
+            this.pipContainer.appendChild(persistentVideo_1);
+            // Wait for video to load
+            return [4 /*yield*/, new Promise(function (resolve) {
+              if (persistentVideo_1.readyState >= 2) {
+                resolve();
+              } else {
+                persistentVideo_1.addEventListener('loadedmetadata', function () {
+                  return resolve();
+                }, {
+                  once: true
+                });
+              }
+            })
+            // Enter PiP mode
+            ];
+          case 4:
+            // Wait for video to load
+            _a.sent();
+            // Enter PiP mode
+            return [4 /*yield*/, persistentVideo_1.requestPictureInPicture()
+            // Update the reference to the persistent video
+            ];
+          case 5:
+            // Enter PiP mode
+            _a.sent();
+            // Update the reference to the persistent video
+            this.videoElement = persistentVideo_1;
+            return [3 /*break*/, 7];
+          case 6:
+            error_1 = _a.sent();
+            console.error('Failed to enter picture-in-picture:', error_1);
+            return [3 /*break*/, 7];
+          case 7:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  /**
+   * Exit picture-in-picture mode
+   */
+  PictureInPictureManager.prototype.exitPiP = function () {
+    return __awaiter(this, void 0, void 0, function () {
+      var error_2;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 3,, 4]);
+            if (!document.pictureInPictureElement) return [3 /*break*/, 2];
+            return [4 /*yield*/, document.exitPictureInPicture()];
+          case 1:
+            _a.sent();
+            _a.label = 2;
+          case 2:
+            return [3 /*break*/, 4];
+          case 3:
+            error_2 = _a.sent();
+            console.error('Failed to exit picture-in-picture:', error_2);
+            return [3 /*break*/, 4];
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  /**
+   * Check if currently in PiP mode
+   */
+  PictureInPictureManager.prototype.isPiPActive = function () {
+    return !!document.pictureInPictureElement;
+  };
+  /**
+   * Get current video state
+   */
+  PictureInPictureManager.prototype.getCurrentState = function () {
+    return this.currentVideoState;
+  };
+  /**
+   * Restore video state to a new video element
+   */
+  PictureInPictureManager.prototype.restoreStateToVideo = function (videoElement) {
+    if (!this.currentVideoState) return;
+    videoElement.currentTime = this.currentVideoState.currentTime;
+    videoElement.volume = this.currentVideoState.volume;
+    videoElement.playbackRate = this.currentVideoState.playbackRate;
+    if (this.currentVideoState.isPlaying) {
+      videoElement.play()["catch"](console.error);
+    }
+  };
+  PictureInPictureManager.prototype.handleTimeUpdate = function () {
+    if (this.videoElement && this.currentVideoState) {
+      this.currentVideoState.currentTime = this.videoElement.currentTime;
+      this.notifyStateChange();
+    }
+  };
+  PictureInPictureManager.prototype.handlePlayStateChange = function () {
+    if (this.videoElement && this.currentVideoState) {
+      this.currentVideoState.isPlaying = !this.videoElement.paused;
+      this.notifyStateChange();
+    }
+  };
+  PictureInPictureManager.prototype.handleVolumeChange = function () {
+    if (this.videoElement && this.currentVideoState) {
+      this.currentVideoState.volume = this.videoElement.volume;
+      this.notifyStateChange();
+    }
+  };
+  PictureInPictureManager.prototype.handleRateChange = function () {
+    if (this.videoElement && this.currentVideoState) {
+      this.currentVideoState.playbackRate = this.videoElement.playbackRate;
+      this.notifyStateChange();
+    }
+  };
+  PictureInPictureManager.prototype.handlePiPEnter = function () {
+    console.log('Entered picture-in-picture mode');
+  };
+  PictureInPictureManager.prototype.handlePiPExit = function () {
+    console.log('Exited picture-in-picture mode');
+    this.cleanup();
+  };
+  PictureInPictureManager.prototype.notifyStateChange = function () {
+    if (this.onStateChange && this.currentVideoState) {
+      this.onStateChange(this.currentVideoState);
+    }
+  };
+  PictureInPictureManager.prototype.cleanup = function () {
+    // Clean up the persistent container
+    if (this.pipContainer && this.pipContainer.parentNode) {
+      this.pipContainer.parentNode.removeChild(this.pipContainer);
+      this.pipContainer = null;
+    }
+  };
+  return PictureInPictureManager;
+}();
+// Create a singleton instance
+var pipManager = new PictureInPictureManager();
+
 var count = 0;
 var defaultVideoState = {
   muted: false,
@@ -88803,24 +89054,70 @@ function usePlayerControls(_a) {
     }
   }, [subtitleUrl]);
   useEffect(function () {
+    var _a;
     var handleFullscreenChange = function handleFullscreenChange() {
       setIsFullscreen(!!document.fullscreenElement);
     };
-    var handlePiPChange = function handlePiPChange() {
-      setIsPiPActive(!!document.pictureInPictureElement);
+    var handlePiPEnter = function handlePiPEnter() {
+      setIsPiPActive(true);
+    };
+    var handlePiPLeave = function handlePiPLeave() {
+      setIsPiPActive(false);
+      // Also cleanup the PiP manager when PiP exits
+      pipManager.unregisterVideo();
     };
     document.addEventListener('fullscreenchange', handleFullscreenChange);
-    document.addEventListener('enterpictureinpicture', handlePiPChange);
-    document.addEventListener('leavepictureinpicture', handlePiPChange);
+    document.addEventListener('enterpictureinpicture', handlePiPEnter);
+    document.addEventListener('leavepictureinpicture', handlePiPLeave);
+    // Add event listeners to the video element when it's available
+    var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
+    if (videoElement && videoElement instanceof HTMLVideoElement) {
+      videoElement.addEventListener('enterpictureinpicture', handlePiPEnter);
+      videoElement.addEventListener('leavepictureinpicture', handlePiPLeave);
+    }
     return function () {
       document.removeEventListener('fullscreenchange', handleFullscreenChange);
-      document.removeEventListener('enterpictureinpicture', handlePiPChange);
-      document.removeEventListener('leavepictureinpicture', handlePiPChange);
+      document.removeEventListener('enterpictureinpicture', handlePiPEnter);
+      document.removeEventListener('leavepictureinpicture', handlePiPLeave);
+      // Clean up video element listeners using the captured reference
+      if (videoElement && videoElement instanceof HTMLVideoElement) {
+        videoElement.removeEventListener('enterpictureinpicture', handlePiPEnter);
+        videoElement.removeEventListener('leavepictureinpicture', handlePiPLeave);
+      }
     };
-  }, []);
+  }, [url]); // Re-run when URL changes to ensure proper cleanup and setup
   useEffect(function () {
     setStartPlayed(false);
-  }, [url]);
+    // Check if there's an active PiP session and restore state
+    if (pipManager.isPiPActive()) {
+      var savedState_1 = pipManager.getCurrentState();
+      if (savedState_1 && savedState_1.url === url) {
+        setIsPiPActive(true);
+        // Restore video state from PiP manager
+        setVideoState(function (prev) {
+          var _a;
+          return __assign(__assign({}, prev), {
+            volume: savedState_1.volume,
+            playbackRate: savedState_1.playbackRate,
+            played: savedState_1.currentTime / (((_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getDuration()) || 1)
+          });
+        });
+        setIsPlaying(savedState_1.isPlaying);
+      }
+    }
+  }, [url, setIsPlaying]);
+  // Cleanup effect to handle component unmounting while in PiP mode
+  useEffect(function () {
+    return function () {
+      // Unregister from PiP manager when component unmounts
+      pipManager.unregisterVideo();
+      // Check if we're in PiP mode when component unmounts
+      if (document.pictureInPictureElement) {
+        // The PiP manager will handle keeping the video alive
+        console.log('Component unmounting while in Picture-in-Picture mode - PiP will persist');
+      }
+    };
+  }, []);
   var playPauseHandler = useCallback(function () {
     setIsPlaying(function (prev) {
       return !prev;
@@ -88991,9 +89288,18 @@ function usePlayerControls(_a) {
     if (videoPlayerRef.current && !startPlayed) {
       videoPlayerRef.current.seekTo(startTime);
       setStartPlayed(true);
+      // Register video with PiP manager when it's ready
+      var videoElement = videoPlayerRef.current.getInternalPlayer();
+      if (videoElement && videoElement instanceof HTMLVideoElement) {
+        // Restore state if there was a previous PiP session
+        var savedState = pipManager.getCurrentState();
+        if (savedState && savedState.url === url && pipManager.isPiPActive()) {
+          pipManager.restoreStateToVideo(videoElement);
+        }
+      }
     }
     setLoading(false);
-  }, [startTime, startPlayed, setLoading]);
+  }, [startTime, startPlayed, setLoading, url]);
   var handleFullScreen = function handleFullScreen() {
     var playerContainer = playerContainerRef.current;
     if (!playerContainer) {
@@ -89016,9 +89322,36 @@ function usePlayerControls(_a) {
       return;
     }
     if (document.pictureInPictureElement) {
-      document.exitPictureInPicture()["catch"](console.error);
+      pipManager.exitPiP()["catch"](function (error) {
+        console.error('Failed to exit picture-in-picture:', error);
+      });
     } else {
-      videoElement.requestPictureInPicture()["catch"](console.error);
+      // Register the video with the PiP manager
+      pipManager.registerVideo(videoElement, url, function (state) {
+        // Update local state when PiP video state changes
+        setVideoState(function (prev) {
+          return __assign(__assign({}, prev), {
+            played: state.currentTime / duration,
+            volume: state.volume,
+            playbackRate: state.playbackRate
+          });
+        });
+        setIsPlaying(state.isPlaying);
+      });
+      // Ensure the video is playing before entering PiP mode
+      if (videoElement.paused && isPlaying) {
+        videoElement.play().then(function () {
+          pipManager.enterPiP()["catch"](function (error) {
+            console.error('Failed to enter picture-in-picture:', error);
+          });
+        })["catch"](function (error) {
+          console.error('Failed to play video before PiP:', error);
+        });
+      } else {
+        pipManager.enterPiP()["catch"](function (error) {
+          console.error('Failed to enter picture-in-picture:', error);
+        });
+      }
     }
   };
   var handleKeyDown = useCallback(function (event) {