suada-components 1.13.1 → 1.13.3

package/dist/{index-DFDwHEXv.js → index-B6vRfOUc.js}

@@ -483,6 +483,15 @@ function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
+function _typeof$2(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof$2(o);
+}
 function _unsupportedIterableToArray$1(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray$1(r, a);
@@ -35002,7 +35011,7 @@ var CheckBoxIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
+    fill = _ref$fill === void 0 ? 'currentColor' : _ref$fill,
     props = _objectWithoutProperties$1(_ref, _excluded$Q);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
@@ -35586,7 +35595,7 @@ var CheckBoxOutlineBlankIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
+    fill = _ref$fill === void 0 ? 'currentColor' : _ref$fill,
     props = _objectWithoutProperties$1(_ref, _excluded$v);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
@@ -76902,7 +76911,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.youtube,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerYouTube' */
-	      './YouTube-_Cfhqutp.js'
+	      './YouTube-De0Zcr48.js'
 	    ); }).then(function (n) { return n.YouTube; }))
 	  },
 	  {
@@ -76911,7 +76920,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.soundcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerSoundCloud' */
-	      './SoundCloud-B4UxbuD7.js'
+	      './SoundCloud-CU-Ut439.js'
 	    ); }).then(function (n) { return n.SoundCloud; }))
 	  },
 	  {
@@ -76920,7 +76929,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vimeo,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVimeo' */
-	      './Vimeo-Dzc4a1Tk.js'
+	      './Vimeo-D5IBvHh3.js'
 	    ); }).then(function (n) { return n.Vimeo; }))
 	  },
 	  {
@@ -76929,7 +76938,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mux,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMux' */
-	      './Mux-CcuhwsTR.js'
+	      './Mux-BabemoFL.js'
 	    ); }).then(function (n) { return n.Mux; }))
 	  },
 	  {
@@ -76938,7 +76947,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.facebook,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFacebook' */
-	      './Facebook-C3BJvR0K.js'
+	      './Facebook-3tK7pj--.js'
 	    ); }).then(function (n) { return n.Facebook; }))
 	  },
 	  {
@@ -76947,7 +76956,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.streamable,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerStreamable' */
-	      './Streamable-yQbFXf5t.js'
+	      './Streamable-Bn7g8F4x.js'
 	    ); }).then(function (n) { return n.Streamable; }))
 	  },
 	  {
@@ -76956,7 +76965,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.wistia,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerWistia' */
-	      './Wistia-yP0ZdJZ4.js'
+	      './Wistia-tSwqRHs6.js'
 	    ); }).then(function (n) { return n.Wistia; }))
 	  },
 	  {
@@ -76965,7 +76974,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.twitch,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerTwitch' */
-	      './Twitch-B95sCWzf.js'
+	      './Twitch-Dcu4TkiI.js'
 	    ); }).then(function (n) { return n.Twitch; }))
 	  },
 	  {
@@ -76974,7 +76983,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.dailymotion,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerDailyMotion' */
-	      './DailyMotion-CG-3NvMg.js'
+	      './DailyMotion-BAM-voxR.js'
 	    ); }).then(function (n) { return n.DailyMotion; }))
 	  },
 	  {
@@ -76983,7 +76992,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mixcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMixcloud' */
-	      './Mixcloud-DN4d9IKn.js'
+	      './Mixcloud-Co1LwZpB.js'
 	    ); }).then(function (n) { return n.Mixcloud; }))
 	  },
 	  {
@@ -76992,7 +77001,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vidyard,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVidyard' */
-	      './Vidyard-BoOdEweO.js'
+	      './Vidyard-CzYsGSGc.js'
 	    ); }).then(function (n) { return n.Vidyard; }))
 	  },
 	  {
@@ -77001,7 +77010,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.kaltura,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerKaltura' */
-	      './Kaltura-B7v-_e10.js'
+	      './Kaltura-E5CUKZxs.js'
 	    ); }).then(function (n) { return n.Kaltura; }))
 	  },
 	  {
@@ -77013,7 +77022,7 @@ function requirePlayers () {
 	    },
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFilePlayer' */
-	      './FilePlayer-aWIbaUEm.js'
+	      './FilePlayer-Bst4Fs8D.js'
 	    ); }).then(function (n) { return n.FilePlayer; }))
 	  }
 	];
@@ -77834,7 +77843,7 @@ function requireReactPlayer () {
 	var import_Player = __toESM(/*@__PURE__*/ requirePlayer());
 	const Preview = (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	  /* webpackChunkName: 'reactPlayerPreview' */
-	  './Preview-BUBe9HXB.js'
+	  './Preview-CleV75rl.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;
@@ -78077,83 +78086,90 @@ var injectHLSSubtitleStyles = function injectHLSSubtitleStyles() {
 };
 
 var _templateObject$8, _templateObject2$6, _templateObject3$3, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
-var StyledControls = dt.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral$1(["\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, fill 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      path {\n        fill: ", ";\n      }\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"])), function (_ref) {
+var StyledControls = dt.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral$1(["\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, fill 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      path {\n        fill: ", " !important;\n      }\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"])), function (_ref) {
   var theme = _ref.theme;
-  var _a, _b, _c;
+  var _a, _b;
   // Handle different theme structures
-  if ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) {
-    return theme.colors.primary.main;
+  if (((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) && _typeof$2(theme.colors.primary) === 'object' && 'main' in theme.colors.primary) {
+    return theme.colors.primary.main || '#08C694'; // suada-components structure
   }
-  if (typeof ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === 'string') {
-    return theme.colors.primary;
+  if (typeof ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === 'string') {
+    return theme.colors.primary; // suada-students structure
   }
-  return 'var(--brand-colors-accent)';
+  return 'var(--brand-colors-accent, #08C694)'; // fallback
 }, {
   fontStyle: 'descriptor'
 });
 var StyledSlider = dt.input(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral$1(["\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 (_ref2) {
   var value = _ref2.value,
     theme = _ref2.theme;
-  var _a, _b, _c;
+  var _a, _b;
   // Handle different theme structures
   var primaryColor = 'var(--brand-colors-accent)';
-  if ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) {
-    primaryColor = theme.colors.primary.main;
-  } else if (typeof ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === 'string') {
-    primaryColor = theme.colors.primary;
+  if (((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) && _typeof$2(theme.colors.primary) === 'object' && 'main' in theme.colors.primary) {
+    primaryColor = theme.colors.primary.main || '#08C694'; // suada-components structure
+  } else if (typeof ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === 'string') {
+    primaryColor = theme.colors.primary; // suada-students structure
   }
   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 (_ref3) {
   var theme = _ref3.theme;
   var _a, _b;
-  return ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'var(--brand-colors-accent)';
+  // Handle different theme structures
+  if (((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) && _typeof$2(theme.colors.primary) === 'object' && 'main' in theme.colors.primary) {
+    return theme.colors.primary.main || '#08C694'; // suada-components structure
+  }
+  if (typeof ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === 'string') {
+    return theme.colors.primary; // suada-students structure
+  }
+  return 'var(--brand-colors-accent)'; // fallback
 }, function (_ref4) {
   var theme = _ref4.theme;
-  var _a, _b, _c;
+  var _a, _b;
   // Handle different theme structures
-  if ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) {
-    return theme.colors.primary.main;
+  if (((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) && _typeof$2(theme.colors.primary) === 'object' && 'main' in theme.colors.primary) {
+    return theme.colors.primary.main || '#08C694'; // suada-components structure
   }
-  if (typeof ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === 'string') {
-    return theme.colors.primary;
+  if (typeof ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === 'string') {
+    return theme.colors.primary; // suada-students structure
   }
-  return 'var(--brand-colors-accent)';
+  return 'var(--brand-colors-accent)'; // fallback
 });
 var StyledVolumeWrapper = dt.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral$1(["\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(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral$1(["\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 (_ref5) {
   var value = _ref5.value,
     theme = _ref5.theme;
-  var _a, _b, _c;
+  var _a, _b;
   // Handle different theme structures
   var primaryColor = 'var(--neutral-colors-light)';
-  if ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) {
-    primaryColor = theme.colors.primary.main;
-  } else if (typeof ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === 'string') {
-    primaryColor = theme.colors.primary;
+  if (((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) && _typeof$2(theme.colors.primary) === 'object' && 'main' in theme.colors.primary) {
+    primaryColor = theme.colors.primary.main || '#08C694'; // suada-components structure
+  } else if (typeof ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === 'string') {
+    primaryColor = theme.colors.primary; // suada-students structure
   }
   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 (_ref6) {
   var theme = _ref6.theme;
-  var _a, _b, _c;
+  var _a, _b;
   // Handle different theme structures
-  if ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) {
-    return theme.colors.primary.main;
+  if (((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) && _typeof$2(theme.colors.primary) === 'object' && 'main' in theme.colors.primary) {
+    return theme.colors.primary.main || '#08C694'; // suada-components structure
   }
-  if (typeof ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === 'string') {
-    return theme.colors.primary;
+  if (typeof ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === 'string') {
+    return theme.colors.primary; // suada-students structure
   }
-  return 'var(--neutral-colors-light)';
+  return 'var(--neutral-colors-light)'; // fallback
 }, function (_ref7) {
   var theme = _ref7.theme;
-  var _a, _b, _c;
+  var _a, _b;
   // Handle different theme structures
-  if ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) {
-    return theme.colors.primary.main;
+  if (((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) && _typeof$2(theme.colors.primary) === 'object' && 'main' in theme.colors.primary) {
+    return theme.colors.primary.main || '#08C694'; // suada-components structure
   }
-  if (typeof ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === 'string') {
-    return theme.colors.primary;
+  if (typeof ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === 'string') {
+    return theme.colors.primary; // suada-students structure
   }
-  return 'var(--neutral-colors-light)';
+  return 'var(--neutral-colors-light)'; // fallback
 });
 var StyledControllerLeft = dt.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral$1(["\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(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral$1(["\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"])));
@@ -78164,16 +78180,48 @@ var StyledTimeTrack = dt.div(_templateObject7 || (_templateObject7 = _taggedTemp
 var BaseIconContainer = dt.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral$1(["\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 (_ref8) {
   var theme = _ref8.theme;
   var _a, _b;
-  return ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'var(--video-player-primary-color, #08C694)';
+  // Handle different theme structures
+  if (((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) && _typeof$2(theme.colors.primary) === 'object' && 'main' in theme.colors.primary) {
+    return theme.colors.primary.main || '#08C694'; // suada-components structure
+  }
+  if (typeof ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === 'string') {
+    return theme.colors.primary; // suada-students structure
+  }
+  return 'var(--video-player-primary-color, #08C694)'; // fallback
 });
 var StyledHeartIconContainer = dt(BaseIconContainer)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral$1(["\n  /* Additional specific styles if needed */\n"])));
 var StyledDownloadIconContainer = dt(BaseIconContainer)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral$1(["\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)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral$1(["\n  /* Additional specific styles if needed */\n"])));
 var StyledFullscreenIconContainer = dt(BaseIconContainer)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral$1(["\n  /* Additional specific styles if needed */\n"])));
-var StyledPictureInPictureIconContainer = dt(BaseIconContainer)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral$1(["\n  &.pip-active {\n    background-color: rgba(8, 198, 148, 0.2);\n    \n    & > svg > path {\n      fill: ", " !important;\n    }\n  }\n"])), function (_ref9) {
+var StyledPictureInPictureIconContainer = dt(BaseIconContainer)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral$1(["\n  &.pip-active {\n    background-color: ", ";\n    \n    & > svg > path {\n      fill: ", " !important;\n    }\n  }\n"])), function (_ref9) {
   var theme = _ref9.theme;
   var _a, _b;
-  return ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'var(--video-player-primary-color, #08C694)';
+  // Handle different theme structures for background color (with opacity)
+  var primaryColor;
+  if (((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) && _typeof$2(theme.colors.primary) === 'object' && 'main' in theme.colors.primary) {
+    primaryColor = theme.colors.primary.main || '#08C694'; // suada-components structure
+  } else if (typeof ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === 'string') {
+    primaryColor = theme.colors.primary; // suada-students structure
+  } else {
+    primaryColor = '#08C694'; // fallback
+  }
+  // Convert hex to rgba with opacity
+  var hex = primaryColor.replace('#', '');
+  var r = parseInt(hex.substr(0, 2), 16);
+  var g = parseInt(hex.substr(2, 2), 16);
+  var b = parseInt(hex.substr(4, 2), 16);
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 0.2)");
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  var _a, _b;
+  // Handle different theme structures
+  if (((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) && _typeof$2(theme.colors.primary) === 'object' && 'main' in theme.colors.primary) {
+    return theme.colors.primary.main || '#08C694'; // suada-components structure
+  }
+  if (typeof ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === 'string') {
+    return theme.colors.primary; // suada-students structure
+  }
+  return 'var(--video-player-primary-color, #08C694)'; // fallback
 });
 var StyledVolumeIconContainer = dt(BaseIconContainer)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral$1(["\n  /* Additional specific styles if needed */\n"])));
 var StyledPlayPauseIconContainer = dt(BaseIconContainer)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral$1(["\n  /* Additional specific styles if needed */\n"])));
@@ -84499,10 +84547,60 @@ var PiPProvider = function PiPProvider(_ref) {
   });
 };
 
+// Default implementation when PiPProvider is not available
+var defaultPiPContext = {
+  isPiPActive: false,
+  pipVideoState: null,
+  enterPiP: function () {
+    var _enterPiP = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            console.warn('PiP functionality requires PiPProvider wrapper');
+            return _context.abrupt("return", false);
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    function enterPiP() {
+      return _enterPiP.apply(this, arguments);
+    }
+    return enterPiP;
+  }(),
+  exitPiP: function () {
+    var _exitPiP = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            console.warn('PiP functionality requires PiPProvider wrapper');
+            return _context2.abrupt("return", false);
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    function exitPiP() {
+      return _exitPiP.apply(this, arguments);
+    }
+    return exitPiP;
+  }(),
+  updateVideoState: function updateVideoState() {
+    console.warn('PiP functionality requires PiPProvider wrapper');
+  },
+  registerVideoElement: function registerVideoElement() {
+    // No-op when provider is not available
+  },
+  unregisterVideoElement: function unregisterVideoElement() {
+    // No-op when provider is not available
+  }
+};
 var usePiP = function usePiP() {
   var context = React.useContext(PiPContext);
   if (context === undefined) {
-    throw new Error('usePiP must be used within a PiPProvider');
+    return defaultPiPContext;
   }
   return context;
 };