suada-components 1.10.0 → 1.11.1

package/dist/{Wistia-DV3BO3z9.esm.js → components/Wistia-C_KOKhsb.esm.js}

@@ -1,4 +1,4 @@
-import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-CcTTuhg8.esm.js';
+import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-BwBOjN0o.esm.js';
 import React__default from 'react';
 
 function _mergeNamespaces(n, m) {

package/dist/{Wistia-C1DqA9IW.js → components/Wistia-Daz5tPlN.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq4qpx9F.js');
+var index = require('./index-DrylTKHJ.js');
 var React = require('react');
 
 function _mergeNamespaces(n, m) {

package/dist/{YouTube-BKwvJCnt.esm.js → components/YouTube-BBYbcWI3.esm.js}

@@ -1,4 +1,4 @@
-import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-CcTTuhg8.esm.js';
+import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-BwBOjN0o.esm.js';
 import React__default from 'react';
 
 function _mergeNamespaces(n, m) {

package/dist/{YouTube-DDou5phH.js → components/YouTube-_8sPtpHN.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq4qpx9F.js');
+var index = require('./index-DrylTKHJ.js');
 var React = require('react');
 
 function _mergeNamespaces(n, m) {

package/dist/components/{index-F6zEoSWf.esm.js → index-BwBOjN0o.esm.js}

@@ -81355,7 +81355,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.youtube,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerYouTube' */
-	      './YouTube-DKkYzN7-.esm.js'
+	      './YouTube-BBYbcWI3.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-LfWEBVy1.esm.js'
+	      './SoundCloud-CPMkOOrw.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-CwlScNtK.esm.js'
+	      './Vimeo-ACwuQXB8.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-C8-HithD.esm.js'
+	      './Mux-CxJZbr-A.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-NS80Vk6j.esm.js'
+	      './Facebook-DUSHcbv1.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-BpcVhi4M.esm.js'
+	      './Streamable-Cs1Srswi.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-Cwl4fNWW.esm.js'
+	      './Wistia-C_KOKhsb.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-BJ9aSIM2.esm.js'
+	      './Twitch-BJKD3J9Z.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-COg3zgIZ.esm.js'
+	      './DailyMotion-Va8qSx1b.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-CO5MsWUJ.esm.js'
+	      './Mixcloud-DGcXxm00.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-Dc8NHJ7p.esm.js'
+	      './Vidyard-QHUmm5sg.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-CmFIWSef.esm.js'
+	      './Kaltura-DKdjrcIq.esm.js'
 	    ).then(function (n) { return n.K; }))
 	  },
 	  {
@@ -81466,7 +81466,7 @@ function requirePlayers () {
 	    },
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerFilePlayer' */
-	      './FilePlayer-D-fc3B0E.esm.js'
+	      './FilePlayer-C9lU5N6Q.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-Clg3y6sj.esm.js'
+	  './Preview-CX7zv1jV.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;
@@ -82532,14 +82532,69 @@ var templateObject_1$9, templateObject_2$7, templateObject_3$4, templateObject_4
 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  /* 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 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: ", ";\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: ", ";\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: ", ";\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: ", ";\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 _b, _c, _d;
+  var value = _a.value,
+    theme = _a.theme;
+  // Handle different theme structures
+  var primaryColor = 'var(--brand-colors-accent)';
+  if ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) {
+    primaryColor = theme.colors.primary.main;
+  } else if (typeof ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === 'string') {
+    primaryColor = theme.colors.primary;
+  }
+  return "linear-gradient(\n      to right,\n      ".concat(primaryColor, " 0%,\n      ").concat(primaryColor, " ").concat(value, "%,\n      var(--level-dark-200) ").concat(value, "%,\n      var(--level-dark-200) 100%\n    )");
+}, function (_a) {
+  var _b, _c;
+  var theme = _a.theme;
+  return ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) || 'var(--brand-colors-accent)';
+}, function (_a) {
+  var _b, _c, _d;
+  var theme = _a.theme;
+  // Handle different theme structures
+  if ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) {
+    return theme.colors.primary.main;
+  }
+  if (typeof ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === 'string') {
+    return theme.colors.primary;
+  }
+  return 'var(--brand-colors-accent)';
 });
 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 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: ", ";\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: ", ";\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: ", ";\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: ", ";\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 _b, _c, _d;
+  var value = _a.value,
+    theme = _a.theme;
+  // Handle different theme structures
+  var primaryColor = 'var(--neutral-colors-light)';
+  if ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) {
+    primaryColor = theme.colors.primary.main;
+  } else if (typeof ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === 'string') {
+    primaryColor = theme.colors.primary;
+  }
+  return "linear-gradient(\n      to right,\n      ".concat(primaryColor, " 0%,\n      ").concat(primaryColor, " ").concat(value, "%,\n      var(--level-grey-500) ").concat(value, "%,\n      var(--level-grey-500) 100%\n    )");
+}, function (_a) {
+  var _b, _c, _d;
+  var theme = _a.theme;
+  // Handle different theme structures
+  if ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) {
+    return theme.colors.primary.main;
+  }
+  if (typeof ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === 'string') {
+    return theme.colors.primary;
+  }
+  return 'var(--neutral-colors-light)';
+}, function (_a) {
+  var _b, _c, _d;
+  var theme = _a.theme;
+  // Handle different theme structures
+  if ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) {
+    return theme.colors.primary.main;
+  }
+  if (typeof ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === 'string') {
+    return theme.colors.primary;
+  }
+  return 'var(--neutral-colors-light)';
 });
 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"])));
@@ -82549,7 +82604,18 @@ var StyledTimeTrack = dt.div(templateObject_7 || (templateObject_7 = __makeTempl
   fontStyle: 'descriptor'
 });
 // 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 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: ", " !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: ", " !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"])), function (_a) {
+  var _b, _c, _d;
+  var theme = _a.theme;
+  // Handle different theme structures
+  if ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) {
+    return theme.colors.primary.main;
+  }
+  if (typeof ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === 'string') {
+    return theme.colors.primary;
+  }
+  return '#08C694';
+});
 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"])));

package/dist/components/{index-C08W0lXg.js → index-DrylTKHJ.js}

@@ -81375,7 +81375,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.youtube,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerYouTube' */
-	      './YouTube-BF85SRPF.js'
+	      './YouTube-_8sPtpHN.js'
 	    ); }).then(function (n) { return n.YouTube; }))
 	  },
 	  {
@@ -81384,7 +81384,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.soundcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerSoundCloud' */
-	      './SoundCloud-Dz9DeIIM.js'
+	      './SoundCloud-39h-7K5W.js'
 	    ); }).then(function (n) { return n.SoundCloud; }))
 	  },
 	  {
@@ -81393,7 +81393,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vimeo,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVimeo' */
-	      './Vimeo-D6C93592.js'
+	      './Vimeo-ygqY4TDG.js'
 	    ); }).then(function (n) { return n.Vimeo; }))
 	  },
 	  {
@@ -81402,7 +81402,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mux,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMux' */
-	      './Mux-bycDxP8G.js'
+	      './Mux-xcYrQrTJ.js'
 	    ); }).then(function (n) { return n.Mux; }))
 	  },
 	  {
@@ -81411,7 +81411,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.facebook,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFacebook' */
-	      './Facebook-DJ7a3Bj8.js'
+	      './Facebook-DchNVIkm.js'
 	    ); }).then(function (n) { return n.Facebook; }))
 	  },
 	  {
@@ -81420,7 +81420,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.streamable,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerStreamable' */
-	      './Streamable-Cs_c-7jS.js'
+	      './Streamable-CFva3n0l.js'
 	    ); }).then(function (n) { return n.Streamable; }))
 	  },
 	  {
@@ -81429,7 +81429,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.wistia,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerWistia' */
-	      './Wistia-Bxvdn3oO.js'
+	      './Wistia-Daz5tPlN.js'
 	    ); }).then(function (n) { return n.Wistia; }))
 	  },
 	  {
@@ -81438,7 +81438,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.twitch,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerTwitch' */
-	      './Twitch-C9bksXF6.js'
+	      './Twitch-CeGJJ6_s.js'
 	    ); }).then(function (n) { return n.Twitch; }))
 	  },
 	  {
@@ -81447,7 +81447,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.dailymotion,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerDailyMotion' */
-	      './DailyMotion-B8IJNjSc.js'
+	      './DailyMotion-DcA-PVFw.js'
 	    ); }).then(function (n) { return n.DailyMotion; }))
 	  },
 	  {
@@ -81456,7 +81456,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mixcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMixcloud' */
-	      './Mixcloud-DHAfVpcc.js'
+	      './Mixcloud-i6OmyO6T.js'
 	    ); }).then(function (n) { return n.Mixcloud; }))
 	  },
 	  {
@@ -81465,7 +81465,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vidyard,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVidyard' */
-	      './Vidyard-CsUFSBXh.js'
+	      './Vidyard-Csh3juiO.js'
 	    ); }).then(function (n) { return n.Vidyard; }))
 	  },
 	  {
@@ -81474,7 +81474,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.kaltura,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerKaltura' */
-	      './Kaltura-BTFxSMxP.js'
+	      './Kaltura-DAip8qnD.js'
 	    ); }).then(function (n) { return n.Kaltura; }))
 	  },
 	  {
@@ -81486,7 +81486,7 @@ function requirePlayers () {
 	    },
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFilePlayer' */
-	      './FilePlayer-SyLt5qGX.js'
+	      './FilePlayer-BZoH0W_x.js'
 	    ); }).then(function (n) { return n.FilePlayer; }))
 	  }
 	];
@@ -82307,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-CzpcknZI.js'
+	  './Preview-B4MvLgvR.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;
@@ -82552,14 +82552,69 @@ var templateObject_1$9, templateObject_2$7, templateObject_3$4, templateObject_4
 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  /* 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 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: ", ";\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: ", ";\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: ", ";\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: ", ";\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 _b, _c, _d;
+  var value = _a.value,
+    theme = _a.theme;
+  // Handle different theme structures
+  var primaryColor = 'var(--brand-colors-accent)';
+  if ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) {
+    primaryColor = theme.colors.primary.main;
+  } else if (typeof ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === 'string') {
+    primaryColor = theme.colors.primary;
+  }
+  return "linear-gradient(\n      to right,\n      ".concat(primaryColor, " 0%,\n      ").concat(primaryColor, " ").concat(value, "%,\n      var(--level-dark-200) ").concat(value, "%,\n      var(--level-dark-200) 100%\n    )");
+}, function (_a) {
+  var _b, _c;
+  var theme = _a.theme;
+  return ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) || 'var(--brand-colors-accent)';
+}, function (_a) {
+  var _b, _c, _d;
+  var theme = _a.theme;
+  // Handle different theme structures
+  if ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) {
+    return theme.colors.primary.main;
+  }
+  if (typeof ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === 'string') {
+    return theme.colors.primary;
+  }
+  return 'var(--brand-colors-accent)';
 });
 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 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: ", ";\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: ", ";\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: ", ";\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: ", ";\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 _b, _c, _d;
+  var value = _a.value,
+    theme = _a.theme;
+  // Handle different theme structures
+  var primaryColor = 'var(--neutral-colors-light)';
+  if ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) {
+    primaryColor = theme.colors.primary.main;
+  } else if (typeof ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === 'string') {
+    primaryColor = theme.colors.primary;
+  }
+  return "linear-gradient(\n      to right,\n      ".concat(primaryColor, " 0%,\n      ").concat(primaryColor, " ").concat(value, "%,\n      var(--level-grey-500) ").concat(value, "%,\n      var(--level-grey-500) 100%\n    )");
+}, function (_a) {
+  var _b, _c, _d;
+  var theme = _a.theme;
+  // Handle different theme structures
+  if ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) {
+    return theme.colors.primary.main;
+  }
+  if (typeof ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === 'string') {
+    return theme.colors.primary;
+  }
+  return 'var(--neutral-colors-light)';
+}, function (_a) {
+  var _b, _c, _d;
+  var theme = _a.theme;
+  // Handle different theme structures
+  if ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) {
+    return theme.colors.primary.main;
+  }
+  if (typeof ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === 'string') {
+    return theme.colors.primary;
+  }
+  return 'var(--neutral-colors-light)';
 });
 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"])));
@@ -82569,7 +82624,18 @@ var StyledTimeTrack = dt.div(templateObject_7 || (templateObject_7 = __makeTempl
   fontStyle: 'descriptor'
 });
 // 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 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: ", " !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: ", " !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"])), function (_a) {
+  var _b, _c, _d;
+  var theme = _a.theme;
+  // Handle different theme structures
+  if ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) {
+    return theme.colors.primary.main;
+  }
+  if (typeof ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === 'string') {
+    return theme.colors.primary;
+  }
+  return '#08C694';
+});
 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"])));

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

package/dist/components/theme/Theme.d.ts

@@ -9,6 +9,7 @@ export declare const themes: {
                 700: string;
             };
             neutral: {
+                main: string;
                 100: string;
                 400: string;
                 900: string;
@@ -34,6 +35,7 @@ export declare const themes: {
                 700: string;
             };
             neutral: {
+                main: string;
                 100: string;
                 400: string;
                 900: string;

package/dist/components/theme/interfaces.d.ts

@@ -1,24 +1,24 @@
 export interface IColorShades {
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
     main: string;
 }
 export interface IThemeColors {
     primary: IColorShades;
-    secondary: IColorShades;
-    tertiary: IColorShades;
-    neutral: IColorShades;
-    system: {
-        error: IColorShades;
-        warning: IColorShades;
-        success: IColorShades;
-        info: IColorShades;
+    secondary?: IColorShades;
+    tertiary?: IColorShades;
+    neutral?: IColorShades;
+    system?: {
+        error?: IColorShades;
+        warning?: IColorShades;
+        success?: IColorShades;
+        info?: IColorShades;
     };
 }